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

Question

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

在生产中，我在16.04上的DigitalOcean Droplet上安装了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文件中。您正在开发中将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，而不是同时启动Express服务器和React开发服务器。 Express将是为您的前端服务的平台。您应该已经在开发中配置了此功能并进行了一些生产测试。

因此，如果您不使用后端服务器，则除了单个Web服务器之外，就不需要Express或其他任何东西。如果您使用后端服务器，则需要诸如Express之类的服务来同时满足您的后端请求（例如对API的请求）和React应用程序。另外，您将需要像PM2这样的东西来运行Express，或者需要Express来为不同的应用程序使用代理。