React应用部署Nginx时无法调用Node.js API的问题求助

你的问题核心在两个关键点：

1. 后端服务未自动启动：Dockerfile仅启动了Nginx，Node.js后端服务并未随容器启动自动运行——只有你进入容器手动启动后，才能正常访问API。
2. 前端API地址配置错误：React中设置的baseURL: http://0.0.0.0:5555在浏览器环境下会指向用户本地机器的5555端口，而非Docker容器内的后端服务，导致请求无法连接。

1. 修改Dockerfile，同时启动Nginx和Node.js后端 #

Ubuntu的systemctl在Docker容器中无法正常管理服务（容器默认无初始化系统），建议用启动脚本同时启动两个服务：

步骤1：创建启动脚本 #

在项目根目录新建start.sh文件：

#!/bin/bash
# 启动后端服务
cd /app/backend && node index.js &
# 启动Nginx（前台运行，保持容器存活）
nginx -g "daemon off;"

给脚本添加执行权限：

chmod +x start.sh

步骤2：更新Dockerfile #

• 移除安装systemctl的行（无需再用）：

  # 删掉此行：RUN apt install curl gnupg systemctl -y
  # 改为：
  RUN apt install curl gnupg -y
  

• 替换原CMD命令，改为执行启动脚本：

  # 复制启动脚本到容器
  COPY start.sh /app/start.sh
  RUN chmod +x /app/start.sh
  # 启动服务
  CMD ["/app/start.sh"]
  

2. 配置Nginx反向代理 #

修改nginx.conf，添加API请求转发规则，将前端的/api路径转发到容器内的后端：

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

    root /var/www/127.0.0.1;
    index index.html;

    # 转发API请求到后端服务
    location /api {
        proxy_pass http://localhost:5555;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        # 去掉/api前缀后转发给后端
        rewrite ^/api/(.*)$ /$1 break;
    }

    # 处理React路由刷新404问题（可选，若使用React Router）
    location / {
        try_files $uri $uri/ /index.html;
    }
}

3. 修改React的API配置 #

将baseURL改为相对路径/api，请求会自动发送到当前域名的/api路径，由Nginx转发到后端：

import axios from 'axios'

export default axios.create({
    baseURL: `/api`
})

4. 重新构建运行容器 #

# 重新构建镜像
docker build -t my-fullstack-app .
# 本地测试运行（Cloud Run部署时无需端口映射）
docker run -p 80:80 my-fullstack-app

完成以上修改后，前端访问http://localhost:80时，API请求会通过Nginx转发到容器内的Node.js后端，解决请求失败的问题。

内容的提问来源于stack exchange，提问作者Go-At Solutions