React+Docker+Nginx部署异常：路径重定向丢失端口

核心问题点 #

你的配置存在两处关键错误：

1. React应用未设置子路径运行的基础路径，导致静态资源/路由解析异常
2. Nginx的location配置与Dockerfile中静态文件的存放路径不匹配

步骤1：配置React基础路径 #

React在子路径/app下运行时，必须指定基础路径，否则资源会加载失败。

• 打开项目根目录的package.json，添加：

  "homepage": "/app"
  

• 或者执行build命令时指定环境变量（二选一即可）：

  PUBLIC_URL=/app npm run build
  

步骤2：修正Dockerfile #

调整静态文件的复制路径，确保和Nginx配置对应：

FROM node:16 as build

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .
RUN npm run build  # 这里会自动使用package.json里的homepage配置

FROM nginx:alpine

RUN rm -rf /etc/nginx/conf.d/*
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 将build产物直接复制到Nginx的静态文件根目录
COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

步骤3：修改Nginx配置 #

让/app路径正确映射到React的静态文件，并处理单页应用的路由刷新问题：

server {
    listen 80;
    server_name localhost;

    # 处理/app路径的所有请求
    location /app {
        root /usr/share/nginx/html;
        # 优先找对应文件，找不到就返回React的入口文件（解决路由刷新404）
        try_files $uri $uri/ /app/index.html;
    }

    # 根路径访问自动跳转到/app（可选，提升用户体验）
    location / {
        return 302 /app;
    }
}

步骤4：重新构建运行 #

# 重新构建镜像
docker build -t app .

# 启动容器
docker run -p 3000:80 app

现在访问localhost:3000/app即可正常使用应用。

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