Nginx配置SSL反向代理教程

本文详细介绍了如何在 Docker 环境下，利用 Nginx 反向代理为 FastAPI 后端和 React 前端应用配置 SSL 证书，实现 HTTPS 加密访问。文章深入剖析了 Nginx 的配置要点，包括 HTTP 到 HTTPS 的自动重定向、SSL 证书路径的正确设置、以及如何通过 `proxy_set_header` 指令传递必要的头部信息，确保后端应用能正确识别请求协议。同时，结合 Docker Compose 示例，提供了一套完整的安全部署方案，有效避免了直接在应用层配置 SSL 可能引发的 CORS 问题，提升了应用的安全性、性能和可维护性。通过本文，您将学会使用 Nginx 为您的应用保驾护航，实现安全可靠的 HTTPS 访问。

本教程详细阐述了如何在 Docker 环境中，利用 Nginx 作为反向代理为 FastAPI 后端和 React 前端应用配置 SSL 证书。文章涵盖了 Nginx 的基本配置，包括 HTTP 到 HTTPS 重定向、SSL 证书路径设置、请求转发及必要的头部信息处理，并结合 Docker Compose 示例，提供了一套完整的安全部署方案，有效解决了直接在应用层配置 SSL 可能引发的 CORS 等问题。

1. SSL 配置策略概述

在生产环境中，直接在应用层（如 FastAPI 的 Uvicorn）配置 SSL 证书虽然可行，但通常不推荐。这可能导致一些复杂性，例如 CORS 问题、证书管理不便以及性能开销。更推荐的做法是使用专业的反向代理服务器（如 Nginx 或 Apache）来处理 SSL 终止（SSL Termination）。Nginx 在接收到加密的 HTTPS 请求后，会解密请求，然后以未加密的 HTTP 形式将请求转发给后端的应用服务。这样，后端应用无需关心 SSL 细节，Nginx 负责所有的加密和解密工作，同时还能提供负载均衡、缓存、静态文件服务等额外功能。

2. Nginx 反向代理配置详解

以下是 Nginx 配置文件的核心部分，用于同时代理 FastAPI 后端和 React 前端，并为它们提供 SSL 加密。

2.1 Nginx Upstream 配置

首先，定义后端和前端服务的上游（upstream）服务器组。这使得 Nginx 可以通过一个逻辑名称引用这些服务，即使它们的 IP 地址或端口发生变化。

# Nginx配置文件: nginx.conf

events {
  worker_connections 1024; # 同时处理的最大连接数
}

http {
    # 后端服务 (FastAPI)
    upstream back {
        # 注意：这里应使用Docker Compose服务名称或内部网络可达的地址
        # back.mysite.ru:8000 假设 back.mysite.ru 是在DNS或Docker网络中解析到后端服务的名称
        server back.mysite.ru:8000;
    }

    # 前端服务 (ReactJS)
    upstream front {
        # mysite.ru:80 假设 mysite.ru 是在DNS或Docker网络中解析到前端服务的名称
        server mysite.ru:80;
    }

    # ... 其他server块将在下面详细说明
}

2.2 后端服务（FastAPI）的 Server 块配置

为 FastAPI 后端配置 HTTP (80端口) 和 HTTPS (443端口) 监听。

    # 后端服务 - HTTP (80端口)
    server {
        listen 80;
        server_name back.mysite.ru; # 后端服务的域名或子域名

        location / {
            proxy_pass http://back; # 转发到上面定义的 'back' upstream
            proxy_set_header Host $host; # 保留原始请求的Host头
            proxy_set_header X-Real-IP $remote_addr; # 传递客户端真实IP
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 传递完整的代理链IP
            proxy_set_header X-Forwarded-Proto http; # 告知后端服务原始请求协议是HTTP
        }
    }

    # 后端服务 - HTTPS (443端口)
    server {
        listen 443 ssl;
        server_name back.mysite.ru; # 后端服务的域名或子域名

        # SSL 证书路径，通常由 Certbot 生成并存放在 /etc/letsencrypt/live/ 目录下
        ssl_certificate /etc/letsencrypt/live/back.mysite.ru/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/back.mysite.ru/privkey.pem;
        ssl_trusted_certificate /etc/letsencrypt/live/back.mysite.ru/chain.pem; # 可选，用于OCSP Stapling

        location / {
            proxy_pass http://back; # 转发到上面定义的 'back' upstream
            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 https; # 告知后端服务原始请求协议是HTTPS
        }
    }

重要提示： X-Forwarded-Proto 头对于后端应用（如 FastAPI）正确识别请求协议至关重要。当 Nginx 处理 SSL 终止时，它会以 HTTP 协议与后端通信。如果后端应用需要根据协议（HTTP/HTTPS）执行某些逻辑（例如生成重定向 URL 或处理 CORS），它会依赖此头部。FastAPI 默认会检查此头部来确定请求是否通过 HTTPS 代理。

2.3 前端服务（ReactJS）的 Server 块配置

类似地，为 React 前端配置 HTTP (80端口) 和 HTTPS (443端口) 监听。

    # 前端服务 - HTTP (80端口)
    server {
        listen 80;
        server_name mysite.ru; # 前端服务的域名

        location / {
            proxy_pass http://front; # 转发到上面定义的 'front' upstream
            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 http;
        }
    }

    # 前端服务 - HTTPS (443端口)
    server {
        listen 443 ssl;
        server_name mysite.ru; # 前端服务的域名

        ssl_certificate /etc/letsencrypt/live/mysite.ru/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/mysite.ru/privkey.pem;
        ssl_trusted_certificate /etc/letsencrypt/live/mysite.ru/chain.pem;

        location / {
            proxy_pass http://front; # 转发到上面定义的 'front' upstream
            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 https;
        }
    }
} # http块结束

3. Docker 集成与部署

为了在 Docker 环境中运行 Nginx 并使其与 FastAPI 和 React 应用协同工作，我们需要配置 docker-compose.yml 文件。

3.1 Nginx Dockerfile

创建一个简单的 Dockerfile 来构建 Nginx 镜像，将自定义的 nginx.conf 复制到容器内。

# Dockerfile (位于 ./nginx 目录下)
FROM nginx:latest # 使用官方Nginx镜像
COPY nginx.conf /etc/nginx/nginx.conf # 复制自定义的nginx.conf到Nginx配置目录

3.2 Docker Compose 配置

在 docker-compose.yml 中添加 Nginx 服务，并确保它能够访问证书文件以及后端和前端服务。

version: '3.7'
services:
  # ... 其他服务 (frontend, backend, postgres) ...

  nginx:
    build: ./nginx # 基于当前目录下的nginx子目录构建Nginx镜像
    ports:
      - "80:80"   # 映射宿主机的80端口到容器的80端口（用于HTTP）
      - "443:443" # 映射宿主机的443端口到容器的443端口（用于HTTPS）
    volumes:
      # 挂载宿主机的 /etc/letsencrypt 目录，以便Nginx容器可以访问SSL证书
      # 请确保宿主机上存在这些证书文件，通常由 Certbot 生成
      - /etc/letsencrypt:/etc/letsencrypt:ro # 只读挂载，防止Nginx修改证书
    depends_on:
      - frontend # 确保前端服务在Nginx启动前可用
      - backend  # 确保后端服务在Nginx启动前可用
    networks:
      - good_network # 确保Nginx与前端和后端在同一网络中

  # ... 其他服务，例如 frontend, backend, postgres ...
  frontend:
    container_name: "frontend"
    build:
      context: ./frontend
    stop_signal: SIGTERM
    ports:
      - "80:80" # 前端应用自身监听80端口，Nginx通过内部网络访问
    volumes:
      - ./uploads:/app/uploads
    networks:
      - good_network
    depends_on:
      - backend

  backend:
    container_name: "backend"
    build:
      context: ./backend
    stop_signal: SIGTERM
    ports:
      - "8000:8000" # 后端应用自身监听8000端口，Nginx通过内部网络访问
    networks:
      - good_network
    volumes:
      - ./uploads:/app/uploads
    depends_on:
      - postgres

  postgres:
    container_name: "postgres"
    image: postgres:16.0
    healthcheck:
      test: [ "CMD-SHELL", "pg_isready -d sugar -U postgres" ]
      interval: 5s
      timeout: 5s
      retries: 5
      start_period: 5s
    restart: unless-stopped
    ports:
      - "5432:5432"
    volumes:
      - ./postgres_data:/var/lib/postgresql/data
    networks:
      - good_network

networks:
  good_network:

volumes:
  postgres_data:

注意事项：

1. 域名解析： 确保 mysite.ru 和 back.mysite.ru 这两个域名已正确解析到运行 Docker 容器的服务器的公共 IP 地址。
2. Certbot 证书： 证书文件 (fullchain.pem, privkey.pem, chain.pem) 通常由 Certbot 等工具生成，并存储在 /etc/letsencrypt/live// 路径下。在 Docker Compose 中，通过 volumes 挂载此目录，使 Nginx 容器能够访问这些证书。
3. 内部网络通信： 在 proxy_pass 指令中，http://back 和 http://front 是 Docker Compose 内部网络中的服务名称。Docker Compose 会自动将这些服务名称解析为相应的容器 IP 地址。因此，backend 服务内部监听 8000 端口，frontend 服务内部监听 80 端口，Nginx 通过 Docker 内部网络直接访问它们。
4. CORS 配置： 如果你的前端和后端部署在不同的子域名或端口上，可能会遇到 CORS 问题。确保你的 FastAPI 应用正确配置了 CORS 策略，允许来自前端域名的请求。Nginx 的 X-Forwarded-Proto 头有助于 FastAPI 正确识别请求的协议，从而正确判断 CORS 源。
5. 安全性： 在生产环境中，除了配置 SSL 证书，还应考虑其他 Nginx 安全配置，例如：
   • 限制请求体大小。
   • 配置更严格的 SSL/TLS 协议和密码套件。
   • 添加 HTTP Strict Transport Security (HSTS) 头，强制客户端使用 HTTPS。
   • 隐藏 Nginx 版本信息。

总结

通过将 Nginx 作为反向代理，我们为 FastAPI 和 React 应用提供了一个健壮且安全的 SSL 解决方案。这种方法将 SSL 终止与应用逻辑分离，简化了应用层的部署和维护，同时提供了更好的性能和安全性。结合 Docker Compose，整个部署流程变得高效和可重复。请务必根据您的实际域名和证书路径调整 Nginx 配置和 Docker Compose 文件。

本篇关于《Nginx配置SSL反向代理教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！