Docker部署React应用：Node serve命令返回空响应问题排查

我之前部署React应用到Docker时也碰到过几乎一模一样的问题，咱们一步步排查：

1. 最常见的坑：服务绑定地址不对 #

容器里的serve默认绑定localhost:5000，但这个地址只能在容器内部访问，外部（包括宿主机）根本打不通。你需要修改启动命令，让服务绑定到容器的所有网卡（0.0.0.0）：

# 把原来的serve命令改成这个
serve -s build -l 0.0.0.0:5000

直接更新你的docker_up.sh脚本里的对应行就行。

2. 必须配置Docker端口映射 #

看你给出的docker-compose.yml片段，完全没有ports配置！这就相当于容器里的5000端口没有对外开放，宿主机根本发不了请求进去。赶紧在frontend服务里加上端口映射：

version: '3'
services:
  frontend:
    build: ./frontend
    command: ["./docker_up.sh"]
    restart: always
    ports:
      - "5000:5000" # 左边是宿主机端口，右边是容器内部的服务端口
    volumes:
      - ./frontend:/app/frontend
      - node-modules:/app/frontend/node_modules

这样宿主机访问localhost:5000才能转发到容器里的serve服务。

3. 挂载卷可能覆盖了build目录 #

你把本地的./frontend直接挂载到容器的/app/frontend，这会导致容器内部生成的build目录被本地的文件覆盖：

• 如果本地没执行过npm run build，容器里的build目录就会是空的，serve自然返回空响应；
• 就算容器内部执行了build，挂载的本地目录也会把它覆盖掉。

解决方法二选一：

• 方案A（推荐）：只挂载必要文件，避免覆盖build
  把整个目录挂载改成只挂载源代码目录，比如：

  volumes:
    - ./frontend/src:/app/frontend/src
    - ./frontend/public:/app/frontend/public
    - node-modules:/app/frontend/node_modules
  

  这样容器内部build生成的build目录就不会被本地覆盖了。
• 方案B：本地预build再启动容器
  先在本地执行npm run build生成build目录，再启动Docker容器，确保挂载后容器里有完整的build文件。

4. 检查Dockerfile的工作目录配置 #

确保你的Dockerfile正确设置了工作目录，并且复制了所有必要文件：

FROM node:18-alpine # 推荐用具体版本的镜像，避免兼容性问题
WORKDIR /app/frontend
# 先复制package文件，利用Docker缓存
COPY package*.json ./
RUN npm install
# 复制所有源代码
COPY . .
CMD ["./docker_up.sh"]

验证步骤 #

1. 停止并删除现有容器：docker-compose down
2. 按照上面的修改更新配置文件和脚本
3. 重新构建并启动容器：docker-compose up --build
4. 访问localhost:5000测试

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