Docker+Nginx部署ReactJS应用仅显示Nginx欢迎页问题求助

问题原因及解决方案 #

你遇到的Nginx默认欢迎页问题核心是自定义Nginx配置未生效，可按以下步骤排查修复：

• 第一步：删除Nginx默认站点配置

你使用的Ubuntu版Nginx镜像默认存在/etc/nginx/sites-enabled/default配置文件，优先级高于/etc/nginx/conf.d/下的配置，该默认配置的root路径指向Nginx自带欢迎页目录，会覆盖你自定义的配置。
修改Dockerfile的Nginx阶段，增加删除默认配置的命令：

FROM public.ecr.aws/ubuntu/nginx:latest
# 新增这一行，删除默认站点配置
RUN rm /etc/nginx/sites-enabled/default
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/build /var/www
EXPOSE 80
ENTRYPOINT ["nginx", "-g", "daemon off;"]

• 第二步：验证React构建产物是否正确生成

如果第一步修复后仍有问题，需要确认构建阶段是否正常生成了静态文件：

1. 可以在Dockerfile的build阶段末尾加一行RUN ls /app/build，构建镜像时查看输出是否存在index.html、static等资源文件
2. 也可以在运行容器后执行docker exec -it <容器ID> ls /var/www，确认构建产物是否成功复制到对应目录

• 第三步：修正Nginx配置规则

你当前的nginx.conf中try_files规则不符合单页应用要求，修改为以下配置即可：

server {
    listen 80;
    root   /var/www;
    index  index.html index.htm;
    location / {
        # 去掉末尾的=404，所有未匹配到的静态资源都交给index.html处理前端路由
        try_files $uri $uri/ /index.html;          
    }
}

• 额外路由配置修复（和Nginx欢迎页无关，不修复会导致页面路由异常）

你的App.js中路由配置缺少exact属性，根路径路由会拦截所有请求，导致/LaunchPad等路径无法正常匹配，修改对应代码：

// 给根路径路由增加exact属性
<Route exact path='/' render={() => <Auth />} />
<Route path='/LaunchPad' render={() => <Launchpad />} />

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