如何用Docker部署json-server？React联调请求无响应问题排查

问题根源 #

1. json-server 绑定地址受限：默认启动时仅监听容器内部的localhost，外部（包括React容器、宿主机）无法建立连接。
2. React 请求地址错误：React容器内的localhost指向自身容器，而非宿主机的json-server服务。

解决方案 #

1. 修改 json-server 启动命令，监听全网络接口 #

在项目的package.json中，更新server脚本，添加--host 0.0.0.0参数，让服务监听容器的所有网络接口：

"scripts": {
  "dev": "你的React启动命令",
  "server": "json-server --watch ./db/dados.json --port 4000 --host 0.0.0.0"
}

2. 修正 React 中的 API 请求地址 #

在React代码里，将请求地址从http://localhost:4000/encomendas改为http://json-server:4000/encomendas。Docker Compose会自动为同一网络下的服务创建DNS解析，服务名json-server可直接指向对应的容器。

如果需要兼容本地开发（非Docker环境），可以通过环境变量区分：

const API_BASE_URL = process.env.REACT_APP_API_URL || 'http://localhost:4000';
// 发起请求示例
fetch(`${API_BASE_URL}/encomendas`)

同时在docker-compose.yml的react服务中添加环境变量：

react:
  build: .
  ports:
    - 3000:3000
  environment:
    - REACT_APP_API_URL=http://json-server:4000

3. 可选：优化 Dockerfile（非强制） #

由于两个服务共用同一Dockerfile，可添加EXPOSE 4000让配置更清晰：

FROM node:16-alpine
WORKDIR /app
COPY package*.json .
RUN npm install
COPY . .
EXPOSE 3000 4000
CMD [ "npm", "run", "dev" ]

验证修改 #

重新构建并启动服务：

docker-compose down
docker-compose up --build

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