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

大佐不会说日语～2026-01-08 10:13

使用 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 等常见部署方式十分友好，几乎无额外使用负担，非常适合实际项目应用。

一、整体架构说明

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

text 复制代码 
浏览器
  ↓ 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 服务

启动后检查状态：

bash 复制代码 
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
nginx 复制代码 
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. 放入前端项目目录：

text 复制代码 
wm/frontend/certs/
 ├─ origin.pem
 └─ origin.key

3. Nginx 使用 Origin 证书

在 Nginx 配置中启用 SSL：

nginx 复制代码 
listen 443 ssl;
ssl_certificate     /etc/nginx/certs/origin.pem;
ssl_certificate_key /etc/nginx/certs/origin.key;

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

txt 复制代码 
**提示词：**
请你作为 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
nginx 复制代码 
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 中复制证书：

dockerfile 复制代码 
COPY certs/origin.pem /etc/nginx/certs/origin.pem
COPY certs/origin.key /etc/nginx/certs/origin.key

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

dockerflie 复制代码 
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;"]

重新构建并启动：

bash 复制代码 
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（技术验证，最靠谱，可以发证平台）

bash 复制代码 
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，希望这篇记录能帮你少走弯路。

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

相关推荐
IT瑞先生11 小时前
docker-compose下快速部署实操——持续更新...
运维·docker·容器
爱码少年17 小时前
Docker遍历镜像生成导出镜像命令六法
docker·shell
BullSmall20 小时前
Sonarqube9.9 docker 镜像启动后 conf 下的配置文件没有了
docker·容器·eureka
ruofu3320 小时前
wsl端是py312，但是项目是py311, 如何下载py311的依赖包（wheels）
python·docker
spider_xcxc21 小时前
Docker 实战：容器化多服务应用，Dockerfile 与 Compose 配置全解析
docker·云原生·eureka·虚拟化·容器化
晚风吹长发1 天前
Docker使用——Docker容器及相关命令
linux·运维·服务器·docker·容器·架构
ShiXZ2131 天前
Docker Compose 安装与配置指南
运维·docker·容器
BullSmall1 天前
Anolis OS 8.10 Docker 部署 SonarQube 9.9 完整教程
运维·docker·容器
开发者联盟league1 天前
vscode 进入docker容器
vscode·docker
chexus1 天前
21. 深入 Nginx HTTP 缓存源码：CDN功能
nginx·http·缓存
热门推荐
012026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片02GitHub 镜像站点03如何新建文件夹？ 电脑新建文件夹的4种方法04AI科技热点日报 | 2026年07月01日05幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南06国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）07AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路08微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新09【解构】DeepSeek V4 发布：技术报告深度解读 + 横向对比六大开源模型，我们的判断是……102026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？