Docker部署微服务：Nginx无法显示React页面的问题排查

我正在构建一套将通过Docker部署在EC2上的微服务系统，目前包含Nginx和ServerUI两个微服务：

1. Nginx服务：包含nginx.conf配置文件、SSL证书文件夹及用于构建镜像的Dockerfile，配置内容如下：

upstream client {
    server client:3000;
}

server {
    listen 443 ssl;
    listen 80;
    ssl_certificate /etc/nginx/certs/server.crt;
    ssl_certificate_key /etc/nginx/certs/server.key;
    
   location / {
      proxy_pass http://client;
   }  
}

Nginx Dockerfile内容：

FROM --platform=linux/arm64 nginx:latest
COPY ./nginx.conf /etc/nginx/conf.d/nginx.conf

2. ServerUI微服务：包含由React（client文件夹）和Express组成的Web服务，client文件夹有构建React镜像的Dockerfile，内容如下：

FROM node:18-alpine3.16
WORKDIR /client
COPY package.json ./
COPY package-lock.json ./
COPY ./ ./
RUN npm i
EXPOSE 3000
CMD ["npm", "start"]

根目录下的docker-compose.yml用于启动所有服务，内容如下：

version: '3.8'

services:
  nginx:
    depends_on:
      - client
    restart: always
    build: 
      dockerfile: Dockerfile
      context: ./nginx
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx/certs:/etc/nginx/certs

  client:
    stdin_open: true
    build:
      dockerfile: Dockerfile
      context: ./serverUI/client
    volumes:
      - /client/node_modules
      - ./serverUI/client:/client

当前尝试本地运行，希望无需构建React应用直接启动。执行docker-compose up --build后，Nginx和React服务均已启动，但访问localhost时显示Nginx默认页面，请问如何解决该问题？

1. 删除Nginx默认配置文件 #

Nginx官方镜像默认会加载/etc/nginx/conf.d/default.conf，这个配置的优先级会覆盖你自定义的nginx.conf，导致访问时显示默认页面。需要在Nginx的Dockerfile中添加删除默认配置的指令：

FROM --platform=linux/arm64 nginx:latest
COPY ./nginx.conf /etc/nginx/conf.d/nginx.conf
RUN rm /etc/nginx/conf.d/default.conf

2. 验证Nginx配置加载情况 #

重新构建并启动服务后，进入Nginx容器检查当前生效的配置：

docker exec -it <nginx容器名称> nginx -T

确认输出内容中包含你的自定义server块，且没有default.conf相关的配置内容。

3. 确认React服务正常运行 #

进入client容器，验证React开发服务器是否正常监听3000端口：

docker exec -it <client容器名称> curl http://localhost:3000

如果能返回React应用的HTML代码，说明服务正常；如果没有返回，查看容器日志确认npm start是否成功启动了开发服务器。

4. 为Nginx配置添加默认服务器标识（可选） #

如果上述操作后仍有问题，可以在Nginx的server块中添加default_server参数，强制将该配置设为默认规则：

upstream client {
    server client:3000;
}

server {
    listen 80 default_server;
    listen 443 ssl default_server;
    ssl_certificate /etc/nginx/certs/server.crt;
    ssl_certificate_key /etc/nginx/certs/server.key;
    
   location / {
      proxy_pass http://client;
   }  
}

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