容器化React应用搭配NGINX无法在指定本地端口提供服务

问题排查与修正方案 #

从你给出的Dockerfile来看，最核心的错误是静态文件拷贝的目标路径写错：

• 你写的路径是usr/share/nginx/html，这是相对路径，会将dist文件拷贝到容器当前工作目录下的子目录中，而非Nginx默认读取静态资源的根目录/usr/share/nginx/html，Nginx找不到对应的静态文件自然无法正常访问服务。

其他需要确认的配置点 #

• 如果是多阶段构建，需要明确从构建阶段拷贝产物，不要直接拷贝当前Nginx阶段的空目录
• Dockerfile中建议添加EXPOSE 80声明容器开放80端口
• 若React使用BrowserHistory路由模式，需要额外添加Nginx配置处理路由重定向，避免页面刷新404

参考正确Dockerfile（多阶段构建） #

# 第一阶段：构建React产物
FROM node:18-alpine AS build
WORKDIR /project
COPY package.json package-lock.json ./
RUN npm ci
COPY . ./
RUN npm run build

# 第二阶段：用Nginx提供静态服务
FROM nginx:stable-alpine
# 从构建阶段拷贝dist产物到Nginx静态资源根目录（注意开头的/是绝对路径）
COPY --from=build /project/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

启动容器注意事项 #

启动容器时必须配置端口映射，将本地端口映射到容器的80端口，比如你要在本地用3000端口访问，执行命令：
docker run -d -p 3000:80 <你的镜像名称>

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