使用Docker+Nginx+SSL部署React应用HTTPS无法访问问题咨询

现有配置的错误点 #

• 自定义Nginx配置和SSL证书未打入镜像：当前Dockerfile仅复制了React构建产物，没有将你编写的default.conf、cert.crt、ssl.key复制到Nginx镜像的对应路径，容器内的Nginx仍使用默认配置，未监听443端口。
• 容器端口映射缺失HTTPS端口：启动命令仅映射了宿主机8080到容器80端口，443端口没有做端口映射，外网HTTPS请求根本无法到达容器内的Nginx服务。
• Nginx配置逻辑冲突：你的React静态文件已经放在容器内的/usr/share/nginx/html路径下，不需要配置proxy_pass http://localhost:8080，该地址指向容器内部的8080端口，容器内没有服务监听该端口，会导致请求异常。
• 端口声明不规范：Dockerfile中仅声明暴露80端口，未声明443端口。

修正后的配置 #

1. 调整Dockerfile #

FROM node:16-alpine as builder
WORKDIR /app
COPY package.json ./
COPY package-lock.json ./
RUN npm install --silent
RUN npm install react-scripts@4.0.3 -g --silent
COPY . /app/
RUN npm run build

# 生产环境Nginx镜像
FROM nginx:1.21.1-alpine
# 复制React构建产物
COPY --from=builder /app/build /usr/share/nginx/html
# 复制自定义Nginx配置，覆盖默认配置
COPY default.conf /etc/nginx/conf.d/default.conf
# 创建证书存放目录并复制SSL证书
RUN mkdir -p /etc/nginx/sites-available
COPY cert.crt /etc/nginx/sites-available/cert.crt
COPY ssl.key /etc/nginx/sites-available/ssl.key

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

2. 修正Nginx配置（default.conf） #

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    # 可选配置：HTTP自动跳转到HTTPS
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl default_server;
    listen [::]:443 ssl default_server;

    ssl_certificate /etc/nginx/sites-available/cert.crt;
    ssl_certificate_key /etc/nginx/sites-available/ssl.key;

    server_name 替换为你的实际服务器IP地址;

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        # 解决React前端路由刷新404问题
        try_files $uri $uri/ /index.html;
    }
}

部署操作步骤 #

1. 将cert.crt、ssl.key两个证书文件放到和Dockerfile、default.conf同级的目录下
2. 重新构建镜像：docker build -t prod .
3. 启动容器，同时映射HTTP和HTTPS端口：
   docker run -itd -p 80:80 -p 443:443 prod
4. 访问验证：直接访问https://你的IP地址即可加载应用，配置了自动跳转的情况下HTTP请求会自动转到HTTPS。

注意事项 #

• 如果使用的是自签名SSL证书，浏览器会提示安全风险，属于正常现象，生产环境建议使用可信CA颁发的证书。
• 如果你的服务器配置了安全组/防火墙规则，需要提前放行80和443端口的入站请求。

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