如何将 Next.js APP 部署到 cPanel（指南）

已发表: 2023-07-17
目录
  • 什么是 Next.js
  • 什么是 cPanel
  • 将 Next.js 应用程序部署到 cPanel
  • 将 NextJs 部署到 cPanel 的优点和缺点
  • 常见问题解答
  • 其他资源
  • 结论

学习以无缝且有效的方式在 cPanel 上部署 Next.js 应用程序。 我将逐步指导您完成此过程。

在深入研究之前，我们先来了解一下 Next.js 和 cPanel 是什么，以防您对这些术语不熟悉。

什么是 Next.js

Next.js 是一个简洁的框架，基于 React.js。 在构建服务器端渲染 (SSR) 应用程序时，它是一个向导。 React.js 默认只支持制作单页应用程序（SPA）。 然而，Next.js 凭借其极具吸引力的 SSR 功能跃居前列。 还有什么？ Next.js 具有基于文件的路由系统以及其他优点。

什么是 cPanel

转向 cPanel。 将其视为简化服务器管理的软件。 它为您带来了许多工具。 文件管理器、数据库管理器和域名管理器只是几个示例。

现在我们已经与 Next.js 和 cPanel 交上了朋友，让我们继续我们的主要任务：在 cPanel 上部署 Next.js 应用程序。 假设您有一个 Next.js 应用程序、一个带有 cPanel 的 Web 主机以及一个链接的域名，让我们继续吧。

将 Next.js 应用程序部署到 cPanel

步骤 1 ：首先设置自定义 Next.js 服务器。 您需要在项目的根目录中有一个 server.js 文件，其中填充了所需的代码。 查找官方 Next.js 指南寻求帮助。

 const { createServer } = require('http') const { parse } = require('url') const next = require('next') const dev = process.env.NODE_ENV !== 'production' const hostname = 'localhost' const port = 3000 // when using middleware `hostname` and `port` must be provided below const app = next({ dev, hostname, port }) const handle = app.getRequestHandler() app.prepare().then(() => { createServer(async (req, res) => { try { // Be sure to pass `true` as the second argument to `url.parse`. // This tells it to parse the query portion of the URL. const parsedUrl = parse(req.url, true) const { pathname, query } = parsedUrl if (pathname === '/a') { await app.render(req, res, '/a', query) } else if (pathname === '/b') { await app.render(req, res, '/b', query) } else { await handle(req, res, parsedUrl) } } catch (err) { console.error('Error occurred handling', req.url, err) res.statusCode = 500 res.end('internal server error') } }) .once('error', (err) => { console.error(err) process.exit(1) }) .listen(port, () => { console.log(`> Ready on http://${hostname}:${port}`) }) })

第 2 步：调整 package.json 文件。 此步骤使环境“生产就绪”并激活 server.js 文件。

 { "scripts": { "start": "NODE_ENV=production node server.js" } }

第 3 步：构建 Next.js 应用程序。 您可以在终端中使用npm run build或yarn run build命令来执行此操作。

第 4 步：构建后，在文件管理器中找到 Next.js 项目文件。 如果您没有看到隐藏文件，请打开可见性。 避免使用 node_modules 和 .git 文件夹、README.md 和 .gitignore 文件。 选择所有其他文件和文件夹，然后创建一个 ZIP 文件。

第 5 步：现在，登录您的 cPanel 虚拟主机。 将 ZIP 文件上传并解压到您域名的根文件夹中。

第 6 步：您的项目文件已准备就绪。 前往 cPanel 中的软件部分。 单击“设置 Node.js 应用程序”，然后单击“+ 创建应用程序”按钮。 设置 Node.js 应用程序，记住 Node.js 版本、生产应用程序模式、应用程序根目录、URL 和启动文件 (server.js)。

单击“创建”完成。 一旦创建，请停止一段时间。 向下滚动到“检测到的配置文件”部分。 运行 NPM Install 以获取所有 Node.js 包。 最后，单击启动应用程序。

就这样吧！ 在浏览器中打开您的域名。 您的 Next.js 应用程序现已上线。 部署成功，干得好！

分享这种在 cPanel 上部署 Next.js 应用程序的方法是一种乐趣。 祝你好运，编码愉快！

将 NextJs 部署到 cPanel 的优点和缺点

将 Next.js 应用程序部署到 cPanel 具有多种优势。 以下是一些需要考虑的优点和缺点。

优点：

  1. 用户友好：cPanel 提供易于使用的图形界面，简化了部署过程。
  2. 自动化：cPanel 包含许多自动化工具，可以处理创建数据库、管理网站文件、设置电子邮件等任务。
  3. 多功能性：cPanel 支持广泛的应用程序，包括 Node.js 应用程序，例如使用 Next.js 构建的应用程序。

缺点：

  1. 灵活性有限：虽然 cPanel 易于使用，但由于其简化的界面，有时会限制灵活性和对服务器环境的控制。
  2. 潜在的兼容性问题：一些用户报告在共享托管平台上部署 Next.js 应用程序时出现问题，例如在构建过程中遇到错误。

常见问题解答

在 cPanel 上托管 Next.js 网站有哪些优点和限制？

在 cPanel 上托管 Next.js 网站具有多种优势，例如节省成本和保留 Next.js 功能。 但是，有一些限制需要注意。 例如，cPanel不支持Serverless功能和自动静态优化。 在 cPanel 上托管的决定应基于个人偏好和业务需求。

在 cPanel 上部署 Next.js 应用程序时，.htaccess 文件配置有何作用？

.htaccess 文件配置是在 cPanel 上部署 Next.js 应用程序的关键部分。 该文件控制服务器在遇到某些条件时的行为。 示例中提供的具体配置有助于正确处理请求和重定向。

如果我在 cPanel 上部署 Next.js 应用程序时遇到崩溃或重定向问题，会发生什么情况？

如果您在 cPanel 上部署 Next.js 应用程序时遇到崩溃或重定向问题，一种解决方案可能是在根文件夹中创建一个名为 app.js 的启动文件。 在这种情况下，您需要将应用程序作为 Node.js 应用程序运行。

在 cPanel 上部署 Next.js 应用程序时如何禁用图像优化？

在 cPanel 上部署 Next.js 应用程序时可以禁用图像优化，但提供的信息中未包含确切的说明。 具体步骤请参考Next.js官方文档或相关教程。

其他资源

最佳 Next.JS 托管提供商

最佳 Node.js 托管提供商

结论

虽然将 Next.js 应用程序部署到 cPanel 可能会遇到一些挑战，但好处往往大于缺点。 cPanel 提供的简单性和自动化使部署过程变得简单且易于管理，即使对于刚接触该过程的开发人员也是如此。 通过本指南，您现在应该能够更好地将 Next.js 应用程序部署到 cPanel。