Docker部署React前端无法连接Node后端的配置求助

核心问题 #

你当前Dockerfile的node dev-proxy.js && npm start逻辑错误：如果dev-proxy.js是常驻运行的代理服务（比如启动了一个HTTP代理），&&会等待前一个进程退出后才执行下一个命令，导致两个进程无法同时运行——这和本地开两个终端并行执行的逻辑完全不同，是导致连接异常的根本原因。

另外，请求URL中的undefined说明前端代码里的API基础地址变量未正确赋值，可能是环境变量未传入容器，或代理配置未正确替换该变量。

解决方案1：用进程管理工具并行启动两个服务（适合开发环境） #

使用concurrently工具在同一个容器内同时运行dev-proxy.js和npm start：

1. 修改package.json
   在scripts中添加并行启动命令：

   "scripts": {
     "start": "react-scripts start",
     "proxy": "node dev-proxy.js",
     "start:all": "concurrently \"npm run proxy\" \"npm start\""
   }
   

2. 更新Dockerfile
   安装concurrently并执行并行命令：

   FROM node:18.19.0
   
   WORKDIR /opt/my-project/
   
   COPY package*.json ./
   RUN yarn add concurrently --dev  # 安装concurrently开发依赖
   RUN yarn
   
   COPY . .
   
   CMD ["npm", "run", "start:all"]
   

解决方案2：用NGINX替代dev-proxy.js（适合生产环境） #

React项目生产环境建议build后用NGINX托管，同时通过NGINX配置反向代理替代dev-proxy.js，更稳定高效：

1. 编写NGINX配置文件（nginx.conf）

   server {
     listen 80;
     root /usr/share/nginx/html;
     index index.html;
   
     # 处理前端路由（React单页应用）
     location / {
       try_files $uri $uri/ /index.html;
     }
   
     # 反向代理后端API，替换为你的后端容器IP或服务名:后端端口
     location /api/ {
       proxy_pass http://你的后端地址/;
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
     }
   }
   

2. 生产环境Dockerfile

   # 第一阶段：编译React项目
   FROM node:18.19.0 as builder
   
   WORKDIR /opt/my-project/
   COPY package*.json ./
   RUN yarn
   COPY . .
   RUN yarn build  # 生成静态文件到build目录
   
   # 第二阶段：用NGINX托管静态资源
   FROM nginx:alpine
   
   # 复制自定义NGINX配置
   COPY nginx.conf /etc/nginx/conf.d/default.conf
   # 复制编译后的静态文件到NGINX目录
   COPY --from=builder /opt/my-project/build /usr/share/nginx/html
   
   EXPOSE 80
   CMD ["nginx", "-g", "daemon off;"]
   

修复URL中的undefined问题 #

1. 检查前端API配置：确保代码中API基础地址通过环境变量（比如REACT_APP_API_BASE_URL）注入，而非硬编码。
2. Docker传递环境变量：启动容器时通过-e参数传入后端地址，示例：

   docker run -e REACT_APP_API_BASE_URL=http://后端地址:端口 -p 3000:3000 你的前端镜像名
   

3. NGINX代理适配：如果用NGINX方案，确保前端API请求统一使用/api/前缀，避免出现未定义的地址变量。

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