使用 Cloudflare平台 + Docker + Nginx 完成网站 HTTPS 部署实战记录

使用 Cloudflare平台 + Docker + Nginx 完成网站 HTTPS 部署实战记录

在实际项目部署过程中，仅仅把服务跑起来是不够的。
域名解析、HTTPS、反向代理、安全性，往往才是上线过程中最容易踩坑、也最容易被忽略的部分。

本文记录一次完整的实战过程（以xiaodu.com的域名为例）：
通过 Cloudflare 平台托管 DNS + Docker Compose 部署前后端 + Nginx 反向代理 + Cloudflare SSL，实现多子域 HTTPS 访问。

Cloudflare 是一款常用云平台，核心提供 DNS 解析、CDN 加速和网站安全防护等服务，相当于网站与用户间的"中间站"，所有访问请求会先经其转发至真实服务器，既能加快内容传输速度，又能隐藏服务器真实 IP 提升安全性；对于个人或中小型项目，它的免费套餐即可覆盖 HTTPS、域名解析、基础 DDoS 防护等大部分常见需求，上手成本极低，而选择它的核心原因在于其省事、稳定且免费功能强大------不仅自带免费 SSL 证书，可便捷开启 HTTPS 并免去证书申请与续期的麻烦，DNS 生效速度快、配置界面直观且修改后近乎实时生效，还能通过代理模式保护服务器真实 IP 不暴露，同时对 Docker、Nginx 等常见部署方式十分友好，几乎无额外使用负担，非常适合实际项目应用。

---

一、整体架构说明

本次部署的整体架构如下：

浏览器
  ↓ HTTPS
Cloudflare（DNS + CDN + SSL）
  ↓ HTTPS（Origin Certificate）
Nginx（Docker 容器）
  ├─ 门户前端（wm-portal）
  ├─ 管理后台（wm-admin）
  ↓
后端服务（wm-end，Spring Boot）
  ├─ MySQL
  └─ Redis

核心目标包括：

• 域名统一交由 Cloudflare 管理
• 使用 Docker Compose 一键启动完整系统
• 前端通过 Nginx 容器 提供服务
• 后端通过 Nginx 反向代理 访问
• 使用 Cloudflare 免费 SSL + Origin 证书 实现 HTTPS
• 解决 Cloudflare 不支持 81 端口代理 的问题

---

二、域名 DNS 解析配置（Cloudflare）

1. 域名接入 Cloudflare

将域名的 NS 服务器 修改为 Cloudflare 提供的 Nameservers，完成域名托管。

2. DNS 记录配置

在 Cloudflare 的 DNS → Records 中配置如下 A 记录：

类型	主机名	目标 IP	代理状态
A	xiaodu.com	服务器公网 IP	Proxied
A	www	服务器公网 IP	Proxied
A	admin	服务器公网 IP	Proxied

开启橙色云（Proxied）非常关键，它代表流量将经过 Cloudflare，从而获得 CDN 与 SSL 能力。

---

三、Docker Compose 服务编排

项目通过 docker compose up -d 启动，包含：

• MySQL
• Redis
• 后端 Spring Boot 服务
• 前端 Nginx 服务

启动后检查状态：

docker compose ps

确认：

• 所有容器 STATUS = Up
• 前端容器监听 80 和 443
• 后端监听 8080

---

四、Nginx 容器统一代理多个站点

本步骤的目的是将后台管理系统也托管到 Cloudflare 平台，但由于该系统当前运行在 81 端口，而 Cloudflare 平台不支持托管 81 端口的服务，因此需要通过 Nginx 容器统一代理多个站点来解决这一问题。

1. 为什么不能使用 81 端口？

Cloudflare 免费代理 不支持 81 端口 。

如果继续使用 http://域名:81：

• Cloudflare 无法代理
• HTTPS 无法生效
• 安全性和可用性都受影响

正确做法是：

所有站点统一走 80 / 443，通过域名区分不同前端项目。

---

2. 基于域名的 Nginx 分流方案

• xiaodu.com → 门户站（wm-portal）
• admin.xiaodu.com → 管理后台（wm-admin）

Nginx 通过 server_name 区分请求来源，而不是端口。

---

3. HTTPS 与 HTTP 自动跳转

• 80 端口仅用于跳转到 HTTPS
• 所有实际业务流量走 443

server {
    listen 80;
    server_name xiaodu.com admin.xiaodu.com;
    return 301 https://$host$request_uri;
}

---

五、Cloudflare SSL 配置详解

1. Edge SSL（浏览器 → Cloudflare）

在 Cloudflare 后台：

• SSL/TLS → Overview
  

• 模式先设置为 Full
  

• SSL/TLS → Edge Certificates开启：
  

  • 建议开启 Always Use HTTPS

  • 建议开启 Automatic HTTPS Rewrites（可选但推荐）

  • 开启 Universal SSL（默认一般开着）

以上涉及的配置截图不再逐一呈现，我这边已经完成了全部配置，你仅需将对应功能的开关打开即可生效！

---

2. Origin Certificate（Cloudflare → 服务器）

为了实现真正的端到端 HTTPS，使用 Cloudflare 提供的 Origin Certificate 。

配置步骤：

1. Cloudflare → SSL/TLS → Origin Server → Create Certificate

2. 绑定域名：

   • xiaodu.com
   • admin.xiaodu.com

3. 生成证书与私钥（一定提前复制，第二次打开就看不到了）

4. 放入前端项目目录：

wm/frontend/certs/
 ├─ origin.pem
 └─ origin.key

---

3. Nginx 使用 Origin 证书

在 Nginx 配置中启用 SSL：

listen 443 ssl;
ssl_certificate     /etc/nginx/certs/origin.pem;
ssl_certificate_key /etc/nginx/certs/origin.key;

可以参考我的 nginx.conf 的配置，发给 AI 改一下就好了！或者直接喊 AI 根据你 nginx.conf 的配置修改，提示词如下（把你的配置原文贴进去即可）：

**提示词：**
请你作为 Nginx + Cloudflare 部署专家，基于我下面提供的 `nginx.conf` 做修改，目标是：
1. 启用 HTTPS（监听 443），使用 Cloudflare Origin Certificate：
   * `ssl_certificate     /etc/nginx/certs/origin.pem;`
   * `ssl_certificate_key /etc/nginx/certs/origin.key;`
2. 把原来通过 81 端口访问的管理端，改为通过子域名 `admin.xiaodu.com` 访问（Cloudflare 不支持代理 81）。
   * `xiaodu.com` 对应 `wm-portal`
   * `admin.xiaodu.com` 对应 `wm-admin`
3. 保留我现有的反向代理逻辑（例如 `/pro-api`、`/api`、`/api-news` 等），不要改接口路径语义，只做必要调整。
4. 增加一个 HTTP（80）→ HTTPS（443）的 301 跳转。
5. 最终输出：**完整可用的 nginx.conf**（不要只给片段），并说明哪些地方做了改动。
这是我当前的 `nginx.conf` 内容（原封不动贴在下面），请基于它修改：
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

---

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/json;
    sendfile      on;
    keepalive_timeout  65;

    # ===== 1) HTTP：统一跳转到 HTTPS（可选，但推荐）=====
    server {
        listen 80;
        server_name xiaodu.com www.xiaodu.com admin.xiaodu.com;
        return 301 https://$host$request_uri;
    }

    # ===== 2) HTTPS：门户站 xiaodu.com =====
    server {
        listen 443 ssl;
        server_name xiaodu.com www.xiaodu.com;

        ssl_certificate     /etc/nginx/certs/origin.pem;
        ssl_certificate_key /etc/nginx/certs/origin.key;

        location / {
            root /usr/share/nginx/html/wm-portal;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        # 你的后端代理（门户用 /pro-api）
        location /pro-api {
            rewrite /pro-api/(.*) /$1 break;
            proxy_pass http://wm-end:8080;

            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_buffering off;
            proxy_cache off;
            chunked_transfer_encoding on;
            tcp_nopush on;
            tcp_nodelay on;
            keepalive_timeout 300;
        }

        # 第三方 https 代理
        location ^~ /api-news/ {
            rewrite ^/api-news/(.*)$ /$1 break;
            proxy_pass https://api.zxki.cn/;

            proxy_ssl_server_name on;
            proxy_ssl_verify off;

            proxy_set_header Host api.zxki.cn;
            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;
        }
    }

    # ===== 3) HTTPS：管理站 admin.xiaodu.com =====
    server {
        listen 443 ssl;
        server_name admin.xiaodu.com;

        ssl_certificate     /etc/nginx/certs/origin.pem;
        ssl_certificate_key /etc/nginx/certs/origin.key;

        location / {
            root /usr/share/nginx/html/wm-admin;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        # 管理端代理（你原来是 /api）
        location /api {
            rewrite /api/(.*) /$1 break;
            proxy_pass http://wm-end:8080;

            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_buffering off;
            proxy_cache off;
            chunked_transfer_encoding on;
            tcp_nopush on;
            tcp_nodelay on;
            keepalive_timeout 300;
        }
    }
}

并在 Dockerfile 中复制证书：

COPY certs/origin.pem /etc/nginx/certs/origin.pem
COPY certs/origin.key /etc/nginx/certs/origin.key

可以参考我的 dockerfile 的配置，发给 AI 改一下就好了！或者直接喊 AI 根据你 dockerfile 的配置添加以上的内容即可：

FROM nginx:1.20.2

ENV TZ=Asia/Shanghai
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone

RUN mkdir -p /usr/share/nginx/html/wm-portal /usr/share/nginx/html/wm-admin

RUN rm -f /etc/nginx/conf.d/*.conf

COPY wm-portal/ /usr/share/nginx/html/wm-portal
COPY wm-admin/ /usr/share/nginx/html/wm-admin

# 证书（你需要在 wm/frontend/certs/ 放 origin.pem/origin.key）
RUN mkdir -p /etc/nginx/certs
COPY certs/origin.pem /etc/nginx/certs/origin.pem
COPY certs/origin.key /etc/nginx/certs/origin.key

COPY nginx.conf /etc/nginx/nginx.conf

# 注意这里已经是暴露端口是80跟443的免费端口了
EXPOSE 80 443

CMD ["nginx", "-g", "daemon off;"]

重新构建并启动：

docker compose up -d --build

---

4. 切换到 Full (strict)

确认 Nginx 正常加载证书后，将 Cloudflare SSL 模式切换为：

✅ Full (strict)

此时：

• 浏览器 → Cloudflare：HTTPS
• Cloudflare → 服务器：HTTPS + 证书校验
• 全链路加密完成

---

六、最终验证结果

访问以下地址：

• ✅ https://xiaodu.com/#/
• ✅ https://admin.xiaodu.com/#/

浏览器显示：

• 安全锁标识
• 证书由 Cloudflare 签发
• 页面加载与接口访问正常

用 curl（技术验证，最靠谱，可以发证平台）

curl -Iv https://xiaodu.ggff.net

七、总结与经验

通过这次部署，总结出几点非常重要的经验：

1. 不要依赖非标准端口（如 81）暴露服务
2. Cloudflare + Nginx 域名分流 是更专业的做法
3. Origin Certificate 是 Cloudflare 场景下最优解
4. Docker 化部署可以极大简化 HTTPS 与环境迁移成本
5. 先跑通 HTTP，再引入 HTTPS，问题更容易定位

---

八、结语

这套方案不仅适用于个人项目，也非常适合：

• 后端 + 前端分离系统
• 管理后台 + 门户站
• 中小型生产环境

一次配置，后续只需 docker compose up -d，即可在任意服务器快速复现。

如果你正在做 Docker 部署 + Cloudflare HTTPS，希望这篇记录能帮你少走弯路。

---

如果觉得有帮助，欢迎点赞收藏！有问题欢迎评论区交流~