无法通过Vultr主IP访问React应用，求技术排查建议

执行npm start命令后，从src/目录运行node server.js，仍无法通过http://[Vultr主IP地址]:3000访问React应用。已在域名服务商的DNS设置中添加Vultr name servers，恳请排查无法访问的原因。

版本信息 #

node v18.13.0
nginx/1.22.0 (Ubuntu)
Ubuntu 23.04 x64

已执行操作 #

• 以root权限安装Nginx：

$ sudo apt-get update
$ sudo apt-get install nginx 

• 修改Nginx配置文件：

$ sudo nano /etc/nginx/sites-available/default

• 在location / {块下添加完整配置：

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

        # SSL configuration
        #
        # listen 443 ssl default_server;
        # listen [::]:443 ssl default_server;
        #
        # Note: You should disable gzip for SSL traffic.
        # See: https://bugs.debian.org/773332
        #
        # Read up on ssl_ciphers to ensure a secure configuration.
        # See: https://bugs.debian.org/765782
        #
        # Self signed certs generated by the ssl-cert package
        # Don't use them in a production server!
        #
        # include snippets/snakeoil.conf;

        root /var/www/html;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name _;

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                proxy_pass http://localhost:3000;
                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;
                try_files $uri /index.html;
        }
}

#server {
#       listen 80;
#       listen [::]:80;
#
#       server_name example.com;
#
#       root /var/www/example.com;
#       index index.html;
#
#       location / {
#               try_files $uri $uri/ =404;
#       }
#}

• 验证并重启Nginx：

$ sudo nginx -t
$ sudo systemctl restart nginx

package.json内容 #

{
  "name": "matblogs",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-tailwind/react": "^1.2.5",
    "@tanstack/react-query": "^4.26.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@uiw/react-md-editor": "^3.20.2",
    "axios": "^1.3.3",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.20.1",
    "bootstrap": "^5.2.3",
    "cors": "^2.8.5",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "pg": "^8.9.0",
    "react": "^18.2.0",
    "react-animated-text": "^0.1.4",
    "react-bootstrap": "^2.7.2",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.43.0",
    "react-markdown": "^8.0.5",
    "react-responsive": "^9.0.2",
    "react-router-dom": "^6.6.2",
    "react-scripts": "5.0.1",
    "react-syntax-highlighter": "^15.5.0",
    "sequelize": "^6.28.0",
    "web-vitals": "^2.1.4"
  },
  "proxy": "http://localhost:8000",
  "scripts": {
    "start": "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"
    ]
  }
}

1. 端口访问限制 #

• 检查Ubuntu本地防火墙（ufw）状态，确认3000、80端口是否开放：

  sudo ufw status
  

  未开放则添加规则：

  sudo ufw allow 3000/tcp
  sudo ufw allow 80/tcp
  sudo ufw reload
  

• 同时登录Vultr控制台，检查服务器所属防火墙组的入站规则，确保这两个端口被允许。

2. React服务绑定地址问题 #

react-scripts start默认仅绑定localhost，外部无法直接访问。修改启动命令让服务绑定到所有网卡：

HOST=0.0.0.0 npm start

或直接修改package.json的启动脚本：

"scripts": {
  "start": "HOST=0.0.0.0 react-scripts start",
  ...
}

3. Nginx配置冲突 #

配置中proxy_pass与try_files并存可能导致请求处理异常，调整location块：

location / {
    proxy_pass http://localhost:3000;
    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;
    # 移除try_files，避免反向代理逻辑冲突
}

修改后重新验证并重启Nginx：

sudo nginx -t && sudo systemctl restart nginx

此时应通过http://[Vultr主IP地址]（80端口）访问，Nginx会自动反向代理到3000端口的React服务。

4. 服务运行状态检查 #

• 确认React服务和后端服务是否正常运行：

  ps aux | grep node
  

  查看是否存在react-scripts start和node server.js的进程。
• 检查3000端口占用情况：

  sudo lsof -i :3000
  

  若被其他进程占用，杀掉进程或修改React服务端口。

5. DNS生效问题 #

虽然已添加Vultr NS记录，但DNS解析通常需要10分钟到24小时生效。不过当前直接用IP访问，此问题暂不影响IP访问效果。

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