node.js - 不确定如何使用 ExpressJS 在生产服务器上启动和部署 ReactJS 应用程序

Question

在本地，我在端口 3001 上使用 ExpressJS，然后使用 npm start 启动我的 React 应用程序，该应用程序在端口 3000 上运行开发服务器。这允许我作为代理将请求从 3000 路由到 3001。

对于生产，我在 DigitalOcean Droplet 上安装了 16.04 上的 Ubuntu NodeJS 6.12.13，然后安装了 Nginx 和 PM2。

在我的 Nginx default 文件中，我设置了以下内容:

location / {
    proxy_pass http://localhost:3001;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

我已经转移了 Express 和 React 设置，并将 Express 服务器添加到 PM2 启动中。 Nginx 被用作反向代理服务器，以便在端口 3001 上使用 Express。这是 PM2 启动(www 是运行 Express 的服务器文件的名称)。

当我加载我的域时，我收到 Express 默认页面:

现在我不确定如何启动 React 应用程序，因为使用 npm start 启动它并为生产服务器保持终端打开似乎不合逻辑。当我访问域而不是 Express 消息时，我需要看到我的 React 应用程序。

我发现一些文章提到使用 npm run build 但它们没有解释如何运行 React 应用程序。抱歉，我对此很陌生，但如果有任何帮助，我们将不胜感激。谢谢。

Answer 1

你不会运行 React 应用程序，因为不存在这样的事情:) 构建应用程序后，所有文件都捆绑在一个 Javascript 文件中。您正在为开发中的 React 应用程序使用 start 来实现开发目的。

完成后:

npm run build

您的应用程序目录中将有一个 build 目录。只需将此 build 目录中的所有文件和目录复制到 Nginx 默认目录指向的服务器即可。

如果您不想在浏览器的开发者工具中打开常规应用代码，请在将文件上传到服务器之前删除 build/static/js/some_file.js.map 和 build/static/css/some_file.css.map 。这些是用于调试目的的源映射文件。如果您包含它们，那么每个人都可以在开发人员工具中直接看到您的文件。你的代码现在实际上向世界、向任何人开放，但以捆绑、丑化和精简的方式开放。如果您包含源映射文件，它们将按原样打开。

这就是运行静态应用程序的方式。没有后端，这里意味着没有 Express，只使用 Web 服务器。

但是，由于您的问题涉及 Express，我假设您正在使用后端服务器。因此，一种方法是将所有项目以及您在开发中使用的所有后端和前端代码再次复制到服务器。构建您的 React 应用程序。但这一次，您将只在服务器上运行 Express，而不是同时启动 Express 服务器和 React 开发服务器。 Express 将是为您的前端提供服务的服务。您应该已经在开发中对此进行了配置并完成了一些生产测试。

因此，如果您不使用后端服务器，则除了单个 Web 服务器之外，您不需要 Express 或任何其他东西。如果您使用后端服务器，那么您需要像 Express 这样的东西来服务您的后端请求(例如 API)和 React 应用程序。此外，您还需要 PM2 之类的工具来运行 Express，并且可以选择使用 Express 来为不同的应用程序使用代理。