PM2, 502 Bad gateway, Nginx 同时服务于 React 应用程序和 NodeJS API答案

【问题标题】：PM2, 502 Bad gateway, Nginx serving both React app and NodeJS APIPM2, 502 Bad gateway, Nginx 同时服务于 React 应用程序和 NodeJS API
【发布时间】：2021-03-29 10:44:07
【问题描述】：

我正在使用 Nginx 配置（来自 Nginx sites-available 文件夹）为 React 应用程序和 NodeJS API 提供服务：

server {
    listen 80;
    listen [::]:80;

    root /var/www/html;

    index index.html index.htm index.nginx-debian.html;

    server_name my-site-name.com www.my-site-name.com;

    location /api/ {
        proxy_pass http://localhost:3000;

        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
    }

    location / {
        root /var/www/html/;
        try_files $uri /index.html;
    }
}

如果我在服务器上使用npm start 启动 NodeJS API，一切正常。如果我使用 PM2 将 API 作为进程运行 - 我会通过调用任何 API 端点得到 502 Bad gateway。

编辑：PM2 不在预期端口 (3000) 提供应用程序。关掉就知道了。

【问题讨论】：

在npm run build 之后，您的文件是否位于var/www/html 或var/www/html/your_build_folder 中？
我在两种情况下都尝试了两种方式 - React 应用程序的静态部分正在工作（当然，在 nginx 配置中进行了额外的更改）。只有 API 部分不起作用

标签： node.js reactjs nginx http-status-code-502

【解决方案1】：

所以问题是没有在预期的端口 (3000) 为应用程序提供服务。

问题出在我由pm2 start server.js 运行的server.js 文件中。我在网上看到很多建议使用 pm2 start ./bin/www 命令启动 NodeJS 应用程序。如果您的 Express NodeJS 项目由 Express application generator 初始化，您可以这样做。

我的项目没有被 Express 生成器初始化，所以我创建了一个虚拟项目来查看 ./bin/www 文件的内容。

> mkdir my-app
> cd my-app
> npx express-generator

然后我将位于bin 目录中的www 文件的内容复制到我的server.js 文件中。唯一的变化是在第 7 行：

var app = require('../app');

我改成

var app = require('./app');

因为server.js 和app.js 文件都位于我的项目根目录中。

【讨论】：

【解决方案2】：

我在设置临时服务器时遇到了同样的问题。 Posted a similar question

对我有用的几件事：

在服务器端代码中错过的任何地方都使用 try/catch 循环
确保正确读取所有环境变量
检查 pm2 日志中是否存在节点错误
检查 nginx 日志中是否存在配置错误

【讨论】：