React+Vite+ASP.NET Core6 Docker生产环境Nginx配置报错排查

你现有配置存在多处硬错误，按以下步骤修改即可正常运行： #

核心错误点说明 #

• 多阶段构建逻辑错误：前端Dockerfile构建阶段用CMD执行打包命令，该命令只会在容器启动时运行，构建阶段不会执行，最终Nginx镜像内无打包好的静态资源
• 容器网络访问规则错误：同一Docker自定义网络内，容器互访需使用compose定义的服务名+容器内部监听端口，不能用localhost（指向当前容器自身），也不能用映射到宿主机的端口
• 服务名拼写错误：compose中API服务名是personalmoneytracker.api（中间带点），你原有Nginx配置中写的personalmoneytrackerapi无法被DNS解析
• 端口匹配错误：前端Dockerfile暴露3000端口，但Nginx配置未监听3000，导致端口访问直接被拒绝
• 多余的HTTPS配置：容器内部网络转发无需配置HTTPS，挂载开发证书反而会增加证书信任问题

逐文件修改方案 #

1. 修改前端Dockerfile.prod #

全量替换为以下内容，修正构建逻辑、统一端口：

FROM node:18-alpine3.15 as build
WORKDIR /app
ENV PATH=/app/node_modules/.bin:$PATH
COPY package.json /app/
COPY yarn.lock /app/
RUN yarn --silent
COPY ./ /app
RUN yarn build

FROM nginx:1.21.6-alpine
COPY --from=build /app/dist /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD [ "nginx", "-g",  "daemon off;"]

2. 修改docker-compose.production.yml #

调整API服务、前端服务的配置，删除生产环境无用的开发配置：

version: '3.7'

networks:
  personal-money-tracker-network:
    driver: bridge

services:
  personalmoneytracker.api:
    container_name: personal-money-tracker-api
    image: ${DOCKER_REGISTRY-}personalmoneytrackerapi
    environment:
      - ASPNETCORE_ENVIRONMENT=Production
      - ASPNETCORE_CONNECTION_STRING=PersonalMoneyTrackerDbDocker
      - ASPNETCORE_URLS=http://+:80
    networks:
      -  personal-money-tracker-network
    build:
      context: .
      dockerfile: PersonalMoneyTracker.API/Dockerfile
    depends_on:
      - personalmoneytracker.db
    ports:
      - "8000:80"

  personalmoneytracker.client:
    container_name: personal-money-tracker-client
    stdin_open: true
    image: ${DOCKER_REGISTRY-}personalmoneytrackerclient
    networks:
      -  personal-money-tracker-network
    build:
      context: ./PersonalMoneyTracker.Client/personal-money-tracker
      dockerfile: Dockerfile.prod
    ports:
      - "3000:80"
    depends_on:
      - personalmoneytracker.api

  personalmoneytracker.db:
    container_name: personal-money-tracker-db
    image: ${DOCKER_REGISTRY-}personalmoneytrackerdb
    ports:
      - "1401:1433"
    networks:
      -  personal-money-tracker-network
    build: 
      context: .
      dockerfile: DevOps/SQL/Dockerfile
    env_file:
      - DevOps/SQL/SqlServer.env
    volumes: 
      - sqlsystem:/var/opt/mssql/
      - sqldata:/var/opt/sqlserver/sqldata
      - sqllog:/var/opt/sqlserver/sqllog
      - sqlbackup:/var/opt/sqlserver/sqlbackups

volumes:
  sqlsystem:
  sqldata:
  sqllog:
  sqlbackup:

3. 替换Nginx配置文件 #

全量替换nginx/nginx.conf内容，修正转发规则、端口监听：

server {
    listen 80;
    server_name  localhost;

    gzip                    on;
    gzip_comp_level         6;
    gzip_vary               on;
    gzip_min_length         1000;
    gzip_proxied            any;
    gzip_types              text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_buffers            16 8k;
    client_max_body_size    256M;

    root /usr/share/nginx/html;
    index  index.html index.htm;
    include /etc/nginx/mime.types;
    default_type application/octet-stream;

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

    location /api {
        proxy_pass         http://personalmoneytracker.api:80;
        proxy_redirect     off; 
        proxy_set_header   Host $host;
        proxy_set_header   X-Real-IP $remote_addr;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_set_header   X-Forwarded-Host $server_name;
    }
}

注：vite.config.ts中server段配置仅对本地开发服务生效，生产环境打包为静态文件后该段配置不产生影响，无需修改。

启动操作 #

1. 清理旧构建缓存：docker compose -f docker-compose.production.yml down -v --rmi local
2. 重新构建启动：docker compose -f docker-compose.production.yml up -d --build
3. 启动完成后访问http://localhost:3000即可正常使用，前端/api开头的请求会自动由Nginx转发到后端服务，无跨域问题。

后续如果需要配置全站HTTPS，直接在Nginx层配置证书即可，容器内部网络走HTTP不存在安全风险。

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