Docker部署React+Nginx仅展示Nginx默认页无法加载React内容如何解决

• 启动命令镜像名不匹配：构建时指定的镜像标签为front:prod，但启动命令使用的镜像名是olimpofront:prod，若本地存在旧的olimpofront:prod镜像（默认Nginx配置），实际启动的是未包含你自定义配置的旧镜像。
• Nginx配置未生效：官方Nginx Alpine镜像默认仅加载/etc/nginx/nginx.conf主配置，以及/etc/nginx/conf.d/目录下后缀为.conf的站点配置。你在Dockerfile中将自定义配置复制到了/etc/nginx/default.conf，该路径不在默认加载范围内，Nginx使用内置默认配置响应请求，因此只展示默认页面。

1. 修正镜像名匹配问题
   可任选一种操作：

• 构建镜像时直接使用启动命令对应的标签：docker build --rm -t olimpofront:prod .
• 启动容器时使用构建生成的标签：docker run -p 80:80 front:prod

2. 修正Nginx配置复制路径，可任选以下一种方案：

• 方案A（直接使用你的完整配置）：你的nginx.conf是包含完整主配置结构的文件，直接覆盖Nginx默认主配置即可，将Dockerfile中对应的复制行修改为：

COPY ./nginx.conf /etc/nginx/nginx.conf

• 方案B（遵循Nginx站点配置规范）：将nginx.conf中仅保留server {}块的内容（删除外层的worker_processes、events、http块），再将Dockerfile中对应的复制行修改为：

COPY ./nginx.conf /etc/nginx/conf.d/default.conf

你当前配置中/api路径代理的目标是http://localhost:8080，此处的localhost指向容器内部网络，若你的后端服务运行在宿主机或其他容器中，需要将代理地址修改为后端服务的可访问地址，避免接口请求失败。

修改完成后重新构建镜像并启动容器，即可正常访问React应用内容。

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