如何在容器中运行 NextJS 应用程序

back4app containers 是一个强大的平台，用于托管 next js 应用程序。凭借其自动部署 docker 化的 next js 应用程序的能力，您可以轻松地在可扩展和灵活的环境中启动您的项目。 在本指南中，我们将引导您完成在 back4app containers 上准备和部署 next js 应用程序的过程，涵盖从简单项目到更复杂设置的所有内容。我们将从必要的准备工作开始，然后转向将应用程序 docker 化、在本地测试、将项目推送到 github、在 back4app containers 上设置项目、监控部署以及排除常见问题。 如果您有任何问题或意见，请随时在 slack 的 back4app community 的 #containers 频道中参与讨论。您也可以随时通过 community\@back4app com 联系我们。 随时，如果您想查看在 back4app 容器上工作的示例 next js 项目，请访问： https //github com/templates back4app/containers nextjs sample https //github com/templates back4app/containers nextjs sample 1 准备您的 next js 应用程序： a 项目结构：验证您的 next js 应用程序是否遵循适当的目录结构，所有必要的文件和文件夹，如 pages , public , components , 和 styles , 组织得当。您的应用程序的主要入口点应为 pages/index js 或 pages/index jsx 文件。 b 依赖关系：检查所有必需的依赖项是否在 package json 文件中列出，包括它们的正确版本。确保您已使用 npm install 或 yarn install 安装所有依赖项，以生成一个 package lock json 或 yarn lock 文件。 c 构建过程：对于涉及构建过程的更复杂项目，确保您的构建脚本和配置（例如，webpack、babel 或 next js）已正确设置。您应该能够在本地运行构建过程而没有任何问题。 d 环境变量：如果您的应用程序依赖于环境变量，请确保您有一个 env 文件，其中定义了必要的变量。在部署到 back4app 容器时，您需要在部署设置中配置这些环境变量。 e 服务器设置（如适用）：如果您的 next js 应用程序包含自定义服务器（例如，express），请确保其已正确设置并配置以服务于您的 next js 应用程序。在本地测试您的服务器，以确保其按预期工作。 f 应用程序优化：通过最小化包大小、使用代码分割和实施性能最佳实践来优化您的 next js 应用程序。使用像 lighthouse 这样的工具来审核您的应用程序，并解决任何性能或可访问性问题。 g 跨浏览器兼容性：在多个浏览器和设备上测试您的应用程序，以确保正确的渲染和功能。 一旦您彻底审查并准备好您的 next js 应用程序，您可以继续下一步，即为您的项目创建一个 dockerfile 。 2 容器化： 将 next js 应用程序容器化涉及在项目的根目录中创建一个 dockerfile。dockerfile 包含构建应用程序 docker 镜像的指令，然后可以将其部署到 back4app 容器。以下是如何为典型的 next js 应用程序创建 dockerfile 的详细说明： 1 在您的 next js 应用程序的根目录中创建一个名为 dockerfile（没有任何文件扩展名）的新文件。 2 定义基础镜像：使用 from 命令开始 dockerfile，指定基础镜像。对于典型的 next js 应用程序，基础镜像应该是 node js 镜像，例如 node 14 或 node 16。 from node 14 3 设置工作目录：使用 workdir 命令设置 docker 容器内应用程序的工作目录。这是您的应用程序文件将被存储和执行的地方。 workdir /app 4 复制 package json 和 package lock json：使用 copy 命令将 package json 和 package lock json 文件从您的本地计算机复制到 docker 容器。这些文件是安装您应用程序依赖项所必需的。 copy package json / 5 安装依赖：使用run命令从package json文件安装应用程序的依赖项。这通常使用npm ci完成，它安装package lock json文件中指定的确切依赖版本。 run npm ci 6 复制其余项目文件：再次使用copy命令将本地计算机上的剩余文件和文件夹复制到docker容器中。 copy 7 构建next js应用程序：添加run命令以使用构建脚本构建next js应用程序，通常是npm run build。这将在 next文件夹中生成一个生产就绪版本的next js应用程序。 run npm run build 8 配置服务器：您需要一个服务器来提供构建的next js应用程序。一个常见的选择是内置的next js服务器。首先，使用run命令在docker容器中全局安装它： run npm install g next 9 暴露服务器端口：使用expose命令指定服务器将在docker容器内运行的端口。例如，您可以使用3000端口。 expose 3000 10 启动服务器：使用cmd命令指定启动服务器以提供构建的next js应用程序的命令。使用内置的next js服务器，您可以指定启动脚本和端口号。 cmd \["next", "start", " p", "3000"] 一个典型的 next js 应用程序的完整 dockerfile 应该如下所示： from node 14 workdir /app copy package json / run npm ci copy run npm run build run npm install g next expose 3000 cmd \["next", "start", " p", "3000"] 您可以作为参考使用的另一个 dockerfile 示例： 示例 1：使用 nginx 服务器 如果您更喜欢使用 nginx 服务器来提供您的 next js 应用程序，您可以创建一个多阶段 dockerfile。在这种情况下，您将首先构建 next js 应用程序，然后将生成的文件复制到 nginx 服务器。 \# stage 1 build the next js application from node 14 as builder workdir /app copy package json / run npm ci copy run npm run build \# stage 2 set up the nginx server from nginx\ stable alpine copy from=builder /app/ next /usr/share/nginx/html copy from=builder /app/public /usr/share/nginx/html/ next/static copy nginx conf /etc/nginx/conf d/default conf 确保创建适当的 nginx conf 文件以正确配置 nginx 服务器。 示例 2：使用自定义服务器 如果您为您的 next js 应用程序设置了自定义服务器，您可以相应地修改 dockerfile。以下是使用自定义 server js 文件的示例： from node 14 workdir /app copy package json / run npm ci copy run npm run build expose 3000 cmd \["node", "server js"] 在这个例子中，自定义服务器使用 node server js 命令启动，而不是使用 next js 服务器。 3 构建并运行 docker 容器 创建 dockerfile 后，您可以构建 docker 镜像并从中运行容器。使用以下命令构建并运行容器 docker build t your image name docker run p 3000 3000 your image name 将 "your image name" 替换为您的 docker 镜像名称。 一旦容器正在运行，您可以在您的网络浏览器中访问您的 next js 应用程序，地址为 http //localhost 3000 http //localhost 3000 。 4 在本地测试您的项目 在将您的 next js 应用程序部署到 back4app 容器之前，重要的是使用 docker 在本地进行测试。这有助于确保您的应用程序按预期运行，并帮助您在部署之前识别和修复任何问题。 为您的 next js 应用程序构建 docker 镜像 在您的终端中，导航到项目的根目录并运行以下命令，将 your app name 替换为您的应用程序名称 docker build t your app name 在本地运行 docker 容器 接下来，运行以下命令以在本地启动 docker 容器。此命令将容器的暴露端口（例如，3000）映射到您本地计算机上的一个端口（例如，3000）： docker run p 3000 3000 your app name 测试您的应用程序 打开一个网页浏览器并导航到 http //localhost 3000 http //localhost 3000 以查看您的 next js 应用程序。确保一切按预期工作。如果遇到任何问题，请在继续下一步之前解决它们。 5 将您的项目推送到 github 在项目的根目录中创建一个 gitignore 文件，以排除不必要或敏感的文件（例如， node modules , env , build , 等等）。初始化一个 git 仓库，提交您的项目文件，并将它们推送到远程仓库（例如，在 github 上）。 git add git commit m "initial commit" git remote add origin \<your remote repo url> git push u origin master 6 在 back4app 容器上部署您的应用程序 创建 back4app 账户后，您可以按照文档中列出的步骤进行操作 1 将您的 github 仓库与 back4app 连接 https //www back4app com/docs containers/integrate with github 2 为部署准备您的项目 https //www back4app com/docs containers/prepare your deployment 总之，容器将遵循您 dockerfile 中详细说明的指令，并开始创建您的应用程序。 7 监控部署并解决可能的错误： 请关注 back4app containers 仪表板上的部署日志和状态。解决部署过程中出现的任何错误或问题。如果是更复杂的项目，请确保所有必要的服务（如数据库或外部 api）已正确配置并可访问。 8 排查常见问题 在 back4app containers 上运行 next js 应用程序时常见的部署错误列在 这里 https //www back4app com/docs containers/troubleshooting 。 部署 next js 应用程序时可能出现的其他常见错误包括： 端口配置不正确 next js 应用程序在部署到 back4app containers 时应配置为在指定端口上运行。如果应用程序仍然无法访问，请检查 dockerfile 以确保正确的端口已暴露（例如，expose 3000 表示端口 3000）。 不兼容或缺失的依赖项 确保所有必需的依赖项都列在 package json 文件中，并且它们的版本彼此兼容以及与您的应用程序代码兼容。缺失或不兼容的依赖项可能导致运行时错误。 无效的环境变量或配置 检查您的应用程序是否依赖于特定的环境变量或配置文件，并确保它们在 back4app 容器环境中正确设置。在您的 dockerfile 中使用 env 命令设置任何必要的环境变量。 应用程序崩溃或未处理的异常 在您的 next js 应用程序代码中未处理的异常或崩溃可能导致部署失败或意外行为。检查您的应用程序日志以查找任何错误消息，并解决代码中的任何问题。通过运行 docker logs your app name 来检查容器日志，看看是否有任何错误或异常被抛出。使用像 sentry 这样的工具来跟踪和监控您应用程序中的错误。 服务器端渲染配置 如果您的 next js 应用程序使用服务器端渲染（ssr），请确保您的 ssr 设置在 dockerfile 中正确配置，并且它使用正确的入口点启动您的应用程序。 9 扩展您的应用程序 对于需要额外资源或水平/垂直扩展的更复杂项目，请考虑升级您的 back4app 容器计划以处理增加的流量和负载。 10 示例应用程序 有关示例 next js 应用程序项目，您可以访问： https //github com/templates back4app/containers nextjs sample