运行 Docker 中的 ReactJS 应用

back4app 容器是一个强大的平台，用于托管 react 应用程序。凭借其自动部署 docker 化的 react 应用程序的能力，您可以轻松地在可扩展和灵活的环境中启动您的项目。 在本指南中，我们将引导您完成在 back4app 容器上准备和部署 react 应用程序的过程，涵盖从简单项目到更复杂设置的所有内容。我们将从必要的准备工作开始，然后转到 docker 化应用程序、在本地测试、将项目推送到 github、在 back4app 容器上设置项目、监控部署以及排除常见问题。 如果您有任何问题或意见，请随时在 #containers 频道加入讨论，讨论与 back4app 容器上的 react 相关的内容。您也可以随时通过以下方式与我们联系： back4app community ，或通过电子邮件联系： community\@back4app com 。 如果您想随时查看在 back4app 容器上运行的示例 react 项目，请访问： https //github com/templates back4app/containers react sample 1 准备您的 react 应用程序： a 项目结构：验证您的 react 应用程序是否遵循适当的目录结构，所有必要的文件和文件夹，如 src , public , components , 和 assets , 组织得当。您的应用程序的主要入口点应为 src/index js 或 src/index jsx 文件。 b 依赖项：检查所有必需的依赖项是否列在 package json 文件中，包括它们的正确版本。确保您已使用 npm install 或 yarn install 安装所有依赖项，以生成 package lock json 或 yarn lock 文件。 c 构建过程：对于涉及构建过程的更复杂项目，确保您的构建脚本和配置（例如，webpack、babel 或 create react app）已正确设置。您应该能够在本地运行构建过程而没有任何问题。 d 环境变量：如果您的应用程序依赖于环境变量，请确保您有一个 env 文件，其中定义了必要的变量。在部署到 back4app 容器时，您需要在部署设置中配置这些环境变量。 e 服务器设置（如适用）：如果您的 react 应用程序包含自定义服务器（例如，express），请确保其已正确设置并配置以提供您的 react 应用程序。请在本地测试您的服务器，以确保其按预期工作。 f 应用优化：通过最小化包大小、使用代码分割和实施性能最佳实践来优化您的 react 应用程序。使用像 lighthouse 这样的工具来审核您的应用程序并解决任何性能或可访问性问题。 g 跨浏览器兼容性：在多个浏览器和设备上测试您的应用程序，以确保正确的渲染和功能。 一旦您彻底审查并准备好您的 react 应用程序，您可以继续下一步，即为您的项目创建一个 dockerfile 。 2 容器化： 将 react 应用程序容器化涉及在项目的根目录中创建一个 dockerfile。dockerfile 包含构建应用程序 docker 镜像的指令，然后可以将其部署到 back4app 容器。以下是如何为常规 react 应用程序创建 dockerfile 的详细说明： 1 在您的 react 应用程序的根目录中创建一个名为 dockerfile（没有任何文件扩展名）的新文件。 2 定义基础镜像：使用 from 命令开始 dockerfile，指定基础镜像。对于典型的 react 应用程序，基础镜像应该是 node js 镜像，例如 node 14 或 node 16。 from node 14 3 设置工作目录：使用 workdir 命令设置 docker 容器内应用程序的工作目录。这是您的应用程序文件将被存储和执行的地方。 workdir /app 3 复制 package json 和 package lock json：使用 copy 命令将 package json 和 package lock json 文件从本地计算机复制到 docker 容器。这些文件是安装应用程序依赖项所必需的。 copy package json / 4 安装依赖：使用 run 命令从 package json 文件安装应用程序的依赖项。通常使用 npm ci，这将安装 package lock json 文件中指定的确切依赖版本。 run npm ci 5 复制其余项目文件：再次使用 copy 命令将本地计算机上的其余文件和文件夹复制到 docker 容器中。 copy 6 构建 react 应用程序：添加一个 run 命令，使用构建脚本构建您的 react 应用程序，通常是 npm run build。这将在构建文件夹中生成一个生产就绪版本的 react 应用程序。 run npm run build 7 配置服务器：您需要一个服务器来提供构建好的 react 应用程序。一个常见的选择是 serve。首先，使用 run 命令在 docker 容器中全局安装它： run npm install g serve 8 暴露服务器端口：使用 expose 命令指定服务器在 docker 容器内运行的端口。例如，您可以使用 5000 端口。 expose 5000 9 启动服务器：使用cmd命令指定启动服务器的命令，以服务于您构建的react应用程序。使用serve，您可以为单页面应用程序指定 s标志，并将构建文件夹作为源。 cmd \["serve", " s", "build", " l", "5000"] 常规react应用程序的完整dockerfile应如下所示： from node 14 workdir /app copy package json / run npm ci copy run npm run build run npm install g serve expose 5000 cmd \["serve", " s", "build", " l", "5000"] 您可以作为参考的另一个dockerfile示例。 示例1：基本react应用程序 此dockerfile用于简单的react应用程序。它从package json文件中安装必要的包，复制项目文件，使用nginx服务react应用程序，暴露端口80。cmd指定启动nginx服务器的命令。 \# stage 1 build the react application from node 14 as build workdir /app copy package json / run npm install copy run npm run build \# stage 2 serve the react application using nginx from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html \# copy the default nginx conf provided by the docker image copy nginx/nginx conf /etc/nginx/conf d/default conf expose 80 cmd \["nginx", " g", "daemon off;"] 示例2：带有自定义服务器的react应用程序 此dockerfile用于更复杂的react应用程序，该应用程序使用自定义服务器（例如，express）。它从package json文件中安装必要的包，复制项目文件，并为自定义服务器暴露端口8000。cmd指定启动自定义服务器的命令。 \# base image from node 14 \# working directory workdir /app \# copy package json and package lock json and install dependencies copy package json / run npm ci \# copy the rest of the project files copy \# expose the server port expose 8000 \# command to start the server cmd \["npm", "run", "server"] 4 在本地测试你的项目 在将你的 react 应用程序部署到 back4app 容器之前，重要的是使用 docker 在本地进行测试。这有助于确保你的应用程序按预期运行，并帮助你在部署之前识别和修复任何问题。 为你的 react 应用程序构建 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 以查看你的 react 应用程序。确保一切按预期工作。如果遇到任何问题，请在继续下一步之前解决它们。 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 连接 2 为部署准备您的项目 总之，容器将遵循您 dockerfile 中详细说明的指令，并开始创建您的应用程序。 7 监控部署并解决可能的错误 关注 back4app 容器仪表板上的部署日志和状态。解决部署过程中出现的任何错误或问题。如果是更复杂的项目，请确保所有必要的服务（如数据库或外部 api）已正确配置并可访问。 8 排除常见问题 在 back4app 容器上运行 react 应用时常见的部署错误列在 这里 。部署 react 应用程序时其他可能的常见错误包括： 使用 npm start 而不是 npm run build 在开发场景中推荐使用 npm start，但在生产环境中更适合使用 npm run build。此外，这个构建命令将导致更少的内存消耗。 使用 nginx 提供静态文件 另一个好的做法是使用像 nginx 这样的应用服务器提供静态文件。 端口配置不正确 react 应用程序在部署到 back4app 容器时应配置为在指定端口上运行。如果应用程序仍然无法访问，请检查 dockerfile 以确保正确的端口已暴露（例如，expose 5000 表示端口 5000）。 不兼容或缺失的依赖项 确保所有必需的依赖项都列在 package json 文件中，并且它们的版本彼此兼容以及与您的应用程序代码兼容。缺失或不兼容的依赖项可能导致运行时错误。 无效的环境变量或配置 检查您的应用程序是否依赖于特定的环境变量或配置文件，并确保它们在 back4app 容器环境中正确设置。在您的 dockerfile 中使用 env 命令设置任何必要的环境变量。 应用程序崩溃或未处理的异常 在您的 react 应用程序代码中未处理的异常或崩溃可能导致部署失败或意外行为。检查您的应用程序日志以查找任何错误消息，并解决代码中的任何问题。通过运行 docker logs your app name 来检查容器日志，以查看是否有任何错误或异常被抛出。使用像 sentry 这样的工具来跟踪和监控您应用程序中的错误。 服务器端渲染配置 如果您的 react 应用程序使用服务器端渲染 (ssr)，请确保您的 ssr 设置在 dockerfile 中正确配置，并且使用正确的入口点启动您的应用程序。 如果在 back4app 容器上部署您的 react 应用程序时遇到任何其他问题，请联系 back4app 支持团队，邮箱为 community\@back4app com 9 扩展您的应用程序 对于需要额外资源或水平/垂直扩展的更复杂项目，请考虑升级您的 back4app 容器计划，以处理增加的流量和负载。 10 示例应用程序 有关示例 django 应用程序项目，您可以访问： https //github com/templates back4app/containers python flask sample