Nginx无法正常提供React构建产物服务问题排查

问题描述 #

使用多阶段Dockerfile构建React项目：

• 第一阶段基于Node.js（搭配Webpack）构建应用，执行正常，可正常查看应用；
• 第二阶段基于Nginx部署构建产物，容器运行无报错，但访问时仅显示「Welcome to nginx!」默认页面。

附相关配置代码：

Dockerfile #

# Stage 0, "build-stage", based on Node.js, to build and compile the frontend
FROM tiangolo/node-frontend:10 as build-stage
WORKDIR /app
COPY package*.json /app/
RUN npm install
COPY ./ /app/
RUN npm run build
# Stage 1, based on Nginx, to have only the compiled app, ready for production with Nginx
FROM nginx:1.15
COPY --from=build-stage /app/ /usr/share/nginx/html
# Copy the default nginx.conf provided by tiangolo/node-frontend
COPY --from=build-stage /nginx.conf /etc/nginx/conf.d/default.conf

Nginx配置 #

server {
  listen 80;

  root /usr/share/nginx/html;

  location = / {
    try_files $uri /index.html;
  }
}

Webpack配置 #

/* globals __dirname:false, module:false */

module.exports = {
    devtool: 'eval-cheap-source-map',
    entry: __dirname + '/src/index.tsx',
    output: {
        path: __dirname + '/public',
        filename: 'bundle.js'
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js"],
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.(ts|tsx)$/,
                exclude: /node_modules/,
                use: ["babel-loader", "ts-loader"],
            },
        ]
    },
    devServer: {
        historyApiFallback: true,
        static: {
            directory: __dirname + '/public'
        },
        proxy: {
            '/users': {
                target: 'http://localhost:5500/'
            }
        },
        port: 3000
    }
};

核心原因及修复方案 #

1. 构建产物复制路径错误 #

Webpack配置中output.path指定构建产物输出到/app/public，但Dockerfile第二阶段将整个/app目录复制到Nginx根目录，导致Nginx加载的是项目源码而非编译后的产物。

修复：
修改Dockerfile的COPY指令，仅复制构建产物目录：

COPY --from=build-stage /app/public/ /usr/share/nginx/html

2. Nginx Location规则限制过严 #

当前配置中的location = /是精确匹配根路径，仅访问/时才会指向index.html，无法适配React单页应用的路由跳转，且若根目录无正确的index.html，会触发默认页面。

修复：
调整Nginx配置，适配单页应用路由：

server {
  listen 80;

  root /usr/share/nginx/html;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

3. 验证Nginx配置是否生效 #

若配置未正确加载，也会显示默认页面，可进入容器检查：

• 执行docker exec -it <容器ID> bash进入容器
• 查看/etc/nginx/conf.d/default.conf是否为自定义配置
• 执行nginx -t检查配置语法
• 语法正确后重启Nginx：nginx -s reload

4. 确认构建产物是否生成 #

若npm run build未正确执行，构建产物目录为空，Nginx会显示默认页面。可进入build-stage临时容器检查：

docker run --rm -it <build-stage镜像ID> bash
ls /app/public

若为空，检查package.json中的build脚本是否正确，比如是否设置为"build": "webpack --mode production"。

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