Docker部署React应用至域名遇Nginx访问异常求助

访问异常情况 #

• HTTP访问域名时，显示Nginx默认欢迎页：

Welcome to nginx!
If you see this page, the nginx web server is successfully installed and working. Further configuration is required.
For online documentation and support please refer to nginx.org.
Commercial support is available at nginx.com.
Thank you for using nginx.

• HTTPS访问域名时，提示「MY DOMAIN NAME 拒绝连接」
• 通过IPv4直接访问时，显示「502 Bad Gateway」

我的配置文件 #

Dockerfile #

# pull official base image
FROM node:20 AS builder

# Set the working directory to /client inside the container where the UI will be located at
# as if we would use "cd" in linux, if the folder does not exist, it will create the folder under the given path
WORKDIR /usr/src/client

# Copy app files to workdir inside the docker container
COPY package*.json ./

# Install dependencies (npm ci makes sure the exact versions in the lockfile gets installed)
RUN npm ci

# Copy all of the project files into the docker container
COPY . .

# RUN the build after installing dependencies and the "COPY" of the whole source code
RUN npm run build

##########################
# Use the official Nginx base image with Alpine Linux as the base image for the final production container.
# Nginx will be used to serve the static files generated by the React app.
FROM nginx:alpine

# Set the working directory inside the container to /usr/share/nginx/html, where Nginx serves the static content.
WORKDIR /usr/share/nginx/html

# Remove the default Nginx configuration file that comes with the image.
# We will replace it with our custom configuration file.
RUN rm /etc/nginx/conf.d/default.conf

# Copy the custom Nginx configuration file from the host (your machine) to the container.
# This configuration file will be used by Nginx to serve the React app and handle incoming requests.
COPY conf/nginx.conf /etc/nginx/conf.d/default.conf

# Remove all the existing files in the /usr/share/nginx/html directory to clear any default content that Nginx might have placed there.
RUN rm -rf ./*

# Copy the production build files of the React app (generated in the previous build stage) from the "builder" stage into the /usr/share/nginx/html directory.
# This makes the built React app available to Nginx for serving.
COPY --from=builder /usr/src/client/build .

# Set the default command that will run when the container starts.
# This command starts Nginx in the foreground to serve the React app and keeps the container running.
ENTRYPOINT ["nginx", "-g", "daemon off;"]

docker-compose.yaml #

version: '3.8'
services:
    frontend:
      stdin_open: true
      image: MY-IMAGE-NAME
      container_name: MY-CONTAINER-NAME-C
      build:
        context: ./
        dockerfile: Dockerfile
      ports:
        - "8080:80"
        - '8443:443'
      environment:
        - NODE_ENV=development
      volumes:
        - /etc/nginx/certificates:/etc/nginx/certificates

nginx.conf #

server {
    listen 80 default_server;
    server_name MY-DOMAIN.com;
    client_max_body_size 500m;
    location / {
        proxy_pass http://localhost:8080;
    }
}

server {
    listen 443 ssl;
    client_max_body_size 500m;
    server_name MY-DOMAIN.com;

    location / {
        proxy_pass https://localhost:8443;
    }

    ssl_certificate /etc/nginx/certificates/MY-DOMAIN.com_ssl_certificate.cer;
    ssl_certificate_key /etc/nginx/certificates/MY-DOMAIN.com_private_key.key;
}

本地localhost运行Docker化前端正常，但服务器上出现上述Nginx异常，求排查解决。

问题排查与修复方案 #

1. 核心问题分析 #

你的配置存在几个关键逻辑错误：

• 容器内Nginx错误地使用反向代理指向localhost:8080/8443，但容器内并没有在这些端口运行服务——React静态文件已经直接放在了Nginx的静态托管目录，不需要反向代理；
• 宿主机可能安装了独立的Nginx服务，占用了80端口，导致外部访问时命中宿主机Nginx而非容器内的服务；
• HTTPS端口映射和访问逻辑不匹配，证书权限或路径可能存在问题。

具体修复步骤 #

第一步：修正容器内Nginx配置（nginx.conf）

删除反向代理逻辑，让Nginx直接托管React静态文件，同时处理React路由刷新问题：

server {
    listen 80 default_server;
    server_name MY-DOMAIN.com;
    client_max_body_size 500m;

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

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

server {
    listen 443 ssl;
    server_name MY-DOMAIN.com;
    client_max_body_size 500m;

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

    ssl_certificate /etc/nginx/certificates/MY-DOMAIN.com_ssl_certificate.cer;
    ssl_certificate_key /etc/nginx/certificates/MY-DOMAIN.com_private_key.key;

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

第二步：调整docker-compose端口映射与环境变量

把容器端口直接映射到宿主机的80/443端口（确保宿主机无其他服务占用），并切换到生产环境：

version: '3.8'
services:
    frontend:
      stdin_open: true
      image: MY-IMAGE-NAME
      container_name: MY-CONTAINER-NAME-C
      build:
        context: ./
        dockerfile: Dockerfile
      ports:
        - "80:80"
        - "443:443"
      environment:
        - NODE_ENV=production
      volumes:
        - /etc/nginx/certificates:/etc/nginx/certificates

第三步：解决宿主机Nginx冲突

如果宿主机已安装Nginx，停止并禁用它：

systemctl stop nginx
systemctl disable nginx

第四步：验证证书与Nginx配置合法性

进入容器检查证书并测试配置：

docker exec -it MY-CONTAINER-NAME-C sh
# 检查证书文件是否存在
ls -l /etc/nginx/certificates/
# 测试Nginx配置是否合法
nginx -t

如果配置合法，重启容器：

docker-compose down && docker-compose up -d --build

第五步：开放服务器防火墙端口

确保服务器防火墙开放80和443端口（以ufw为例）：

ufw allow 80/tcp
ufw allow 443/tcp
ufw reload

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