Docker容器中Nginx部署React应用配置SSL证书失败求助

核心问题分析 #

当前配置存在几个关键错误，导致HTTPS无法正常访问：

1. 证书路径使用通配符 #

Nginx的ssl_certificate_key不支持通配符路径，必须指定具体的密钥文件名。你当前写的*.abc.de_private_key.key会导致Nginx无法定位到正确的密钥文件。

2. 错误的反向代理配置 #

你的React应用已经通过COPY build/ /usr/share/nginx/html部署为静态文件，不需要反向代理到http://localhost:3000——这个配置会让Nginx尝试转发请求到容器内的3000端口，但容器内并没有运行Node服务，自然无法响应请求。

3. 容器端口映射缺失 #

如果启动容器时没有映射443端口，外部无法通过HTTPS访问容器，只会出现HTTP跳转但无法连接HTTPS的情况。

修复步骤 #

1. 修正Nginx配置文件 #

将nginx.conf修改为以下内容，直接指向静态文件目录，并使用正确的证书路径：

server {
  listen 80;
  server_name abc.de;

  # HTTP强制跳转HTTPS
  location / {
    return 301 https://$host$request_uri;
  }
}

server {
  listen 443 ssl;
  server_name abc.de;

  # 替换为实际的密钥文件名，比如abc.de_private_key.key
  ssl_certificate /etc/nginx/certs/abc.de_ssl_certificate.cer;
  ssl_certificate_key /etc/nginx/certs/abc.de_private_key.key;

  # 直接提供React静态文件，支持React路由刷新
  location / {
    root /usr/share/nginx/html;
    try_files $uri $uri/ /index.html;
  }

  # 可选：添加SSL优化配置
  ssl_protocols TLSv1.2 TLSv1.3;
  ssl_ciphers HIGH:!aNULL:!MD5;
  ssl_prefer_server_ciphers on;
}

2. 调整Dockerfile（可选但推荐） #

添加证书权限设置，确保Nginx可以读取证书文件：

FROM nginx

# 创建证书目录
RUN mkdir -p /etc/nginx/certs

# 复制React静态文件
COPY build/ /usr/share/nginx/html

# 复制证书文件（注意不要用通配符，确保文件名准确）
COPY certs/abc.de_ssl_certificate.cer /etc/nginx/certs/
COPY certs/abc.de_private_key.key /etc/nginx/certs/

# 设置证书文件权限，Nginx需要读取权限
RUN chmod 644 /etc/nginx/certs/*.cer /etc/nginx/certs/*.key

# 复制Nginx配置
COPY nginx.conf /etc/nginx/conf.d/default.conf

3. 正确启动容器 #

确保映射80和443端口到主机：

docker run -d -p 80:80 -p 443:443 --name nginx-react your-image-name

4. 验证配置正确性 #

进入容器检查Nginx配置是否合法：

docker exec -it nginx-react nginx -t

如果显示test is successful，说明配置没问题；如果报错，根据提示修正路径或语法。

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