​
Cloudflare DNS And HTTPS For Personal Services

guide2026-06-0210 min read

Use one domain as the control plane for VPS services, Vercel projects, HTTPS certificates, and public-safe documentation.

cloudflarednscaddyhttps

​
Summary

把个人 AI 基础设施跑起来以后，真正难维护的不是单个服务，而是入口层：哪个子域名指向 VPS，哪个交给 Vercel，什么时候用 Cloudflare 橙云代理，什么时候必须保持灰云，Caddy 如何自动申请证书，出问题时应该先查 DNS 还是先查应用。 这篇笔记把这些问题收成一条统一流程。它适合管理 blog.example.com、langflow.example.com、search.example.com、panel.example.com 这类个人服务入口，同时避免在公开教程里泄露真实域名、IP、订阅路径和内部服务名。

​
What This Solves

当个人项目变多以后，域名会很快失控：
  • 博客在 Vercel 上，服务在 VPS 上。
  • LangFlow、search、admin panel、API 都想用独立子域名。
  • 有些服务应该走 Cloudflare 代理，有些服务不能走代理。
  • Caddy 需要通过公网验证域名所有权并申请证书。
  • 公开教程又不能写真实域名、源站 IP、API key 或私有路径。
一个可维护的入口层应该分成三层： 
Cloudflare DNS
-> public entry points and proxy status
-> Vercel or VPS origin
-> Caddy / application routing
Cloudflare 管 DNS，Caddy 管 VPS 上的 HTTPS 和反向代理，Vercel 管托管项目的构建和部署。不要把这三件事混在一起排查。

​
Who This Is For

这篇文章适合已经有一个域名、一台 VPS、一个或多个 Vercel 项目，并且想把个人 AI 工具统一放到子域名下面的人。 它不假设你已经很熟 DNS，但你需要能：
  • 登录 Cloudflare 控制台。
  • 登录域名注册商后台改 nameserver。
  • SSH 到 VPS。
  • 编辑 Caddyfile。
  • 在 Vercel 项目里添加 custom domain。

​
Prerequisites

  • 一个已经购买的域名，例如 example.com。
  • 一个 Cloudflare 账号。
  • 一台 VPS 的公网 IP，例如 203.0.113.10。
  • VPS 上开放 80 和 443，并允许 Caddy 监听。
  • 一个 Vercel 项目，如果你要部署博客或前端站点。
  • 本地工具：dig、curl、systemctl。
公开笔记里不要写真实域名、真实 IP、API key、订阅链接、flow ID、project ID、登录路径或私有 WebSocket path。使用 example.com、203.0.113.10、$LANGFLOW_API_KEY、$FLOW_ID 这类占位值。

​
The Workflow

1

把域名的权威 DNS 交给 Cloudflare

在 Cloudflare 添加根域名，例如 example.com。Cloudflare 会给出两条 nameserver。然后到域名注册商后台，把原 nameserver 替换成 Cloudflare 提供的两条。等待生效后，Cloudflare DNS 页面就成为这个域名的主要控制面。以后新增服务入口、迁移 VPS IP、绑定 Vercel 域名，优先从这里看。
2

先画出服务入口表

不要边配边猜。先写一张表，决定每个子域名归谁处理。
HostnameTargetDNS RecordProxy StatusOwner
blog.example.comVercelCNAME / Vercel suggested recordUsually DNS only or per Vercel guidanceVercel
langflow.example.comVPS CaddyA -> 203.0.113.10Start DNS only, then decideCaddy
search.example.comVPS CaddyA -> 203.0.113.10Start DNS only, then decideCaddy
panel.example.comVPS CaddyA -> 203.0.113.10DNS only while issuing certCaddy
ssh.example.comVPS SSHA -> 203.0.113.10DNS onlySSH
这张表能防止一个常见错误：域名已经指向 Vercel，却还在 VPS 的 Caddyfile 里排查；或者 Cloudflare 开了代理，却在非 HTTP 端口上测试。
3

给 VPS 服务添加 A 记录

VPS 上由 Caddy 接管的服务，通常用 A 记录指向 VPS 公网 IP：
Type: A
Name: langflow
Content: 203.0.113.10
Proxy status: DNS only
TTL: Auto
这会创建 langflow.example.com。如果多个服务都在同一台 VPS 上，继续添加 search、panel、api 等子域名，Content 都可以先指向同一个 VPS IP。
4

用 Caddy 接住 VPS 上的 HTTPS

在 VPS 上让 Caddy 把不同子域名转发到不同本地端口：
langflow.example.com {
    reverse_proxy localhost:7860
}

search.example.com {
    reverse_proxy localhost:8080
}

panel.example.com {
    reverse_proxy localhost:9604
}
保存后重载：
sudo systemctl reload caddy
sudo systemctl status caddy --no-pager
Caddy 会为这些域名处理 HTTPS。前提是公网可以访问 VPS 的 80 和 443，并且 DNS 已经指向正确入口。
5

理解灰云和橙云

Cloudflare 的 DNS only 是灰云：Cloudflare 只返回 DNS 解析结果，流量直接去源站。Proxied 是橙云：HTTP/HTTPS 流量会经过 Cloudflare 网络，再转发到源站。实用规则：
SituationRecommended Status
Caddy 首次申请 Let’s Encrypt 证书先用 DNS only
SSH、数据库、邮件、非 HTTP 服务DNS only
普通网站或 API，端口受 Cloudflare 支持可以 Proxied
Vercel custom domain按 Vercel 提示配置，不要和 VPS 记录冲突
需要直接看到源站 IP 的调试DNS only
先用灰云把 Caddy 和源站跑通，再决定是否开启橙云。这样能把 DNS、证书、反代和 Cloudflare 代理问题分开。
6

给 Vercel 项目绑定域名

Vercel 项目的域名不要指向 VPS。进入 Vercel Project Settings -> Domains，添加 blog.example.com 或你要使用的域名，然后按 Vercel 给出的 DNS 记录在 Cloudflare 添加。常见形态是 CNAME 或 A 记录，具体以 Vercel 当前提示为准：
Type: CNAME
Name: blog
Target: cname.vercel-dns.com
Proxy status: DNS only
如果这个域名已经有指向 VPS 的 A 记录，先删掉或改掉冲突记录。一个 hostname 不应该同时被两个平台争抢。
7

验证解析、证书和源站

按层验证，不要只看浏览器打不开。
dig langflow.example.com
curl -I http://langflow.example.com
curl -I https://langflow.example.com
在 VPS 上检查 Caddy：
sudo systemctl status caddy --no-pager
sudo journalctl -u caddy --no-pager -n 80
检查本地服务：
curl -fsS http://127.0.0.1:7860/health_check
curl -I http://127.0.0.1:8080

​
Proxy And HTTPS Decision Table

LayerWhat It ControlsCommon SymptomWhere To Debug
Registrar nameserverWho controls DNSCloudflare records seem ignoredRegistrar dashboard
Cloudflare DNS recordHostname -> targetDomain resolves to wrong placeCloudflare DNS page, dig
Cloudflare proxy statusDirect origin vs Cloudflare edgeWorks on gray cloud, fails on orange cloudProxy status, supported ports, SSL/TLS mode
CaddyHTTPS and reverse proxy on VPSDomain reaches server but app does not loadCaddyfile, Caddy logs
App serviceLocal app processCaddy returns 502 or empty responseLocal port, Docker logs, health check
VercelBuild and hosted frontendCustom domain opens old or wrong projectVercel Domains, Git branch, production deployment

​
SSL/TLS Rules

Cloudflare has two TLS connections to think about: 
Browser -> Cloudflare -> Origin server
If Cloudflare proxy is on, the browser connects to Cloudflare first. Cloudflare then connects to your VPS or hosted origin. The safer operational target is:
  • origin has a valid certificate, usually from Caddy or the hosting provider;
  • Cloudflare SSL/TLS mode uses Full or Full strict when proxying;
  • avoid Flexible for services that already support HTTPS, because it can hide origin-side HTTP problems and cause redirect loops.
If Full strict fails, do not blindly downgrade and move on. Check whether the origin certificate exists, is valid for the hostname, and is not expired.

​
Common Failure Modes

Cloudflare says active, but the domain still goes somewhere else. The registrar may still be using old nameservers, or local DNS cache may be stale. Check authoritative nameservers before changing application config.
Caddy cannot issue a certificate. Confirm the DNS record points to the VPS, ports 80 and 443 are reachable from the public internet, and the service hostname is not accidentally routed to Vercel or another origin.
A service works on DNS only but fails on Proxied. The service may be using an unsupported port, a non-HTTP protocol, WebSocket behavior that needs checking, or a Cloudflare SSL/TLS mode that does not match the origin certificate.
Vercel custom domain does not show the latest blog. Check whether the domain is attached to the correct Vercel project, whether production deployment has completed, and whether Cloudflare DNS points to Vercel rather than the VPS.
Server logs show Cloudflare IPs instead of visitor IPs. That is expected when proxying through Cloudflare. If the app needs real client IPs, configure the reverse proxy or app to trust Cloudflare headers such as CF-Connecting-IP only from Cloudflare source ranges.

​
Public Tutorial Hygiene

Use this replacement table before publishing any deployment note:
Private ValuePublic Replacement
Real domainexample.com, langflow.example.com, blog.example.com
Real VPS IP203.0.113.10
API key$LANGFLOW_API_KEY, $OPENAI_API_KEY
Flow ID or project ID$FLOW_ID, $PROJECT_ID
Admin path/private-login-path/
Subscription linkhttps://panel.example.com/sub/private-token
WebSocket path/ws-private-path
When the article is public, the goal is to preserve the workflow, not the literal identifiers. A beginner can still follow the guide with placeholders.

​
Reference Notes

The operational rules above line up with these official references:

​
Final Checklist

  • The registrar nameservers point to Cloudflare.
  • Every public hostname has exactly one intended owner: Vercel, VPS Caddy, or another provider.
  • VPS service hostnames have A records pointing to the VPS IP.
  • Vercel hostnames follow the DNS records Vercel asks for.
  • Caddyfile contains one site block per VPS hostname.
  • Caddy reloads without errors.
  • Ports 80 and 443 are open to the VPS.
  • Cloudflare proxy status matches the protocol and port of the service.
  • SSL/TLS mode is compatible with the origin certificate.
  • Public notes use placeholder domains, IPs, keys, paths, and IDs.

​
What To Remember

Do not treat “the domain is broken” as one problem. Split it into ownership, DNS record, proxy status, HTTPS certificate, reverse proxy, app health, and deployment target. That mental model keeps a personal AI stack maintainable as it grows from one blog into many services.

​
Metadata

Quick Reference

Typeguide
Statuspublished
Date2026-06-02

Retrieval Tags

cloudflarednscaddyhttpsvpsvercel
Related
deploy langflow on a vpsdeploy x-ui with caddy httpsvercel deploymentpublic tutorial hygiene