部署VPS Nginx服务器后Node.js/React前后端无法通信求助

问题描述 #

首次在Hostinger VPS部署Node.js/React/MySQL应用，按教程配置Nginx后，前后端均已上线，但前端向后端发起的所有请求均返回404错误。开发环境下通过前端package.json的proxy配置（"proxy": "http://localhost:4000"）可正常通信，生产环境已移除该配置。

现有配置 #

后端Nginx配置 #

server {
        server_name api.mywebsite.com www.api.mywebsite.com;

        location / {
        proxy_pass http://127.0.0.1:4000;
        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;
        }
}

前端Nginx配置 #

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

        root /var/www/mywebsite/frontend/build;
        index index.html index.htm;

        server_name shop.mywebsite.com www.shop.foryoumaquillage.fr;

        location / {
                try_files $uri $uri/ =404;
        }
}

配置文件位于/etc/nginx/sites-available目录，已链接至/etc/nginx/sites-enabled/，尝试合并配置文件无效。

前端package.json #

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@paypal/react-paypal-js": "^8.1.1",
    "@redux-devtools/extension": "^3.2.5",
    "@reduxjs/toolkit": "^1.9.5",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "ag-grid-community": "^30.0.3",
    "ag-grid-react": "^30.0.4",
    "axios": "^1.4.0",
    "bootstrap": "^5.2.3",
    "bootstrap-icons": "^1.10.5",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.4",
    "react-dom": "^18.2.0",
    "react-helmet-async": "^1.3.0",
    "react-image-gallery": "^1.2.11",
    "react-multi-carousel": "^2.8.4",
    "react-redux": "^8.1.1",
    "react-router-bootstrap": "^0.26.2",
    "react-router-dom": "^6.11.1",
    "react-select": "^5.7.3",
    "react-simple-star-rating": "^5.1.7",
    "recharts": "^2.6.2",
    "rsuite": "^5.33.1",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "set PORT=3005 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

后端package.json #

{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server-prod": "node server.js",
    "server-dev": "npx nodemon server.js",
    "client": "npm start --prefix ../frontend",
    "dev": "concurrently --kill-others-on-fail \"npm run server-dev\" \"npm run client\""
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "cookie-parser": "^1.4.6",
    "cors": "^2.8.5",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "express-fileupload": "^1.4.0",
    "express-rate-limit": "^6.8.1",
    "helmet": "^7.0.0",
    "jsonwebtoken": "^9.0.0",
    "mysql2": "^3.3.3",
    "node-fetch": "^2.6.12",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "concurrently": "^8.2.0",
    "nodemon": "^2.0.22"
  }
}

已尝试的解决方法 #

• 修改Axios配置，创建实例并指定baseURL: process.env.API_URL，其中API_URL=http://127.0.0.1:4000，所有请求使用该实例
• 安装并启用CORS，设置允许所有来源：app.use(cors())
• 参考方案修改Nginx配置（如修改后端监听端口为3005），但无效，部分修改导致API无法访问

补充说明 #

• 通过Hostinger购买域名，创建两条A类型DNS记录，均指向服务器IP，TTL为14400，对应域名api.mywebsite.com和shop.mywebsite.com
• 服务器/var/www/目录下创建应用目录，包含backend和frontend子目录

排查与解决方案 #

1. 修正Axios的baseURL配置 #

生产环境中，前端代码运行在用户浏览器，http://127.0.0.1:4000指向用户本地而非服务器，这是核心错误。需修改：

• 将环境变量命名改为REACT_APP_API_URL（React仅识别以REACT_APP_开头的环境变量），值设为你的API域名：REACT_APP_API_URL=http://api.mywebsite.com
• 调整Axios配置：

  import axios from 'axios';
  
  export const AxiosRequest = axios.create({
    baseURL: process.env.REACT_APP_API_URL,
  });
  

• 重新构建前端：npm run build，并部署到服务器

2. 修复Nginx配置问题 #

• 后端Nginx配置：添加监听端口声明，确保Nginx监听该域名的80端口：

  server {
          listen 80;
          listen [::]:80;
          server_name api.mywebsite.com www.api.mywebsite.com;
  
          location / {
          proxy_pass http://127.0.0.1:4000;
          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;
          }
  }
  

• 前端Nginx配置：修正server_name中的笔误，将www.shop.foryoumaquillage.fr改为www.shop.mywebsite.com，确保域名匹配：

  server {
          listen 80;
          listen [::]:80;
  
          root /var/www/mywebsite/frontend/build;
          index index.html index.htm;
  
          server_name shop.mywebsite.com www.shop.mywebsite.com;
  
          location / {
                  try_files $uri $uri/ =404;
          }
  }
  

• 验证Nginx配置语法：sudo nginx -t，如果无错误则重载配置：sudo systemctl reload nginx

3. 确认后端服务状态 #

• 检查Node.js服务是否在4000端口运行：

  ss -tulpn | grep 4000
  

  若未找到结果，启动后端服务：npm run server-prod，建议使用PM2等进程管理器确保服务持续运行：

  npm install pm2 -g
  pm2 start server.js --name backend
  pm2 save && pm2 startup
  

4. 检查防火墙设置 #

确保Hostinger VPS的防火墙允许80端口（HTTP）入站，若使用UFW防火墙：

sudo ufw allow 80/tcp
sudo ufw reload

5. 优化CORS配置 #

为提升安全性，明确指定允许的前端来源：

app.use(cors({
  origin: 'http://shop.mywebsite.com',
  credentials: true // 若前端需要携带cookie，需开启此项
}));

内容的提问来源于stack exchange，提问作者Lazare Boddaert