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

Question

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

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

在我的 Nginxdefault文件中，我设置了以下内容：

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 文件中。您正在start为开发目的在开发中使用React 应用程序。

做完之后：

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 服务器和 React 开发服务器，而是在您的服务器上只运行 Express。Express 将是为您的前端服务的那个。你应该已经在你的开发中配置了它并完成了一些生产测试。

因此，如果您不使用后端服务器，除了单个 Web 服务器之外，您不需要 Express 或任何其他东西。如果你使用后端服务器，那么你需要像 Express 这样的东西来服务你的后端请求（比如 API）和你的 React 应用程序。此外，您将需要像 PM2 这样的东西来运行 Express 和可选的 Express 来为不同的应用程序使用代理。