Nginx 与 Cloudflare 建站指南背景

Skills · Website Infrastructure

Build.
Route.
Publish.

用 Nginx、Certbot、Cloudflare、DNS 与端口完成可维护的发布链路。

Nginx · HTTPS
Cloudflare · Ports

ScopeVPS / Nginx / DNS / HTTPS ServerDebian 或 Ubuntu Accessroot SSH / VS Code Remote-SSH Updated2026-06-18

整体逻辑

Mental model

网站访问不是一个东西，而是一条链路。

浏览器访问域名时，会先通过 DNS 找到服务器 IP，再通过 80 或 443 端口进入 Nginx，Nginx 再把请求交给网站文件或后端服务。链路上任何一环错了，表现都可能是“打不开”。

Path

推荐搭建顺序

  1. 确认终端可以 ssh root@服务器IP。
  2. 用 VS Code Remote-SSH 连接同一个用户。
  3. 安装 Nginx 并确认 IP 可以访问默认页。
  4. 把网站文件放到 /var/www/站点名。
  5. 配置 Nginx server block。
  6. 先把 Cloudflare DNS 记录设为 DNS only，确保域名直连源站。
  7. 用 Certbot 申请 Let's Encrypt 证书并让 Nginx 自动写入 HTTPS 配置。
  8. 确认 HTTPS 正常后，把 Cloudflare 代理切回橙色云，并使用 Full strict。
  9. 最后检查 22、80、443、防火墙、安全组和自定义端口。
Roles

每个工具负责什么

  • 服务器：存放代码、运行 Nginx、开放端口。
  • Nginx：接收 HTTP/HTTPS 请求，返回静态文件或转发到应用。
  • Cloudflare：托管 DNS、提供代理、缓存、免费证书和基础防护。
  • VS Code：通过 SSH 编辑服务器上的文件，不负责网站访问。
Do not format

重装系统不是默认答案

如果终端 SSH 能连，通常说明服务器和 SSH 服务没坏。VS Code 一直要密码，多半是 Remote-SSH 用错用户、用错 Host 配置、远程 .vscode-server 残留，或本地 SSH key 没被读取。

Full checklist

从 0 到上线的完整顺序

阶段 要完成的事 通过标准
1. SSH 终端能用 root 或指定用户登录服务器。 ssh root@服务器IP 后进入 shell。
2. VS Code Remote-SSH 使用同一个 Host、User、Port。 能打开服务器目录，不再循环输入密码。
3. Nginx 安装 Nginx，确认服务运行。 http://服务器IP 能看到默认页。
4. 网站文件 上传 HTML、CSS、图片到 /var/www/my-site。 Nginx root 指向该目录后能打开首页。
5. 域名 DNS Cloudflare 添加 A/CNAME，首次申请证书前先 DNS only。 http://域名 能到你的服务器。
6. Certbot 用 certbot --nginx 申请证书并写入 HTTPS 配置。 https://域名 返回 200 或 301。
7. Cloudflare HTTPS 代理切回橙色云，SSL/TLS 选择 Full strict。 浏览器访问域名显示 HTTPS 正常。
8. 端口收口 只保留 SSH、80、443 和必要的后台端口。 ss -lntp 和安全组结果一致。

服务器准备

Login

先确认 SSH 是通的

Local terminal
ssh root@服务器IP

如果你在终端看到 root@主机名:~#，说明 SSH 链路是通的。VS Code 应该使用同样的用户和 IP，而不是默认用本地 Mac 用户名去连。

VS Code host

写一个明确的 SSH 配置

~/.ssh/config
Host my-site
  HostName 服务器IP
  User root
  Port 22

Remote-SSH 里选择 my-site，不要只输入 IP。只输入 IP 时，VS Code 可能默认使用你本地电脑的用户名。

Base packages

更新系统并安装基础工具

Server shell
apt update
apt upgrade -y
apt install -y curl wget vim unzip git ufw nginx

如果服务器刚买来，先不要急着改 SSH 端口。确认 22 端口、root 登录、VS Code 连接都稳定以后，再做进一步加固。

Nginx 静态站点

Check service

安装后先看服务状态

Nginx status
systemctl status nginx
nginx -t
systemctl reload nginx

浏览器打开 http://服务器IP 能看到 Nginx 默认页，说明 80 端口、Nginx 服务和最基础的访问链路已经通了。

Files

放置网站文件

Site folder
mkdir -p /var/www/my-site
chown -R root:root /var/www/my-site

# 放入 index.html、style.css、img 等文件
ls -la /var/www/my-site

纯 HTML/CSS/JS 网站不需要 Node 常驻进程。Nginx 直接读取目录里的文件并返回给浏览器。

Server block

创建一个站点配置

/etc/nginx/sites-available/my-site
server {
    listen 80;
    listen [::]:80;

    server_name example.com www.example.com;
    root /var/www/my-site;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}
Enable site
ln -s /etc/nginx/sites-available/my-site /etc/nginx/sites-enabled/my-site
rm -f /etc/nginx/sites-enabled/default
nginx -t
systemctl reload nginx

Certbot 证书

Important order

先 DNS only，再申请证书。

使用 Certbot 的 HTTP 验证时，Let's Encrypt 需要直接访问你的服务器 80 端口。Cloudflare 橙色云代理有时会让排错变复杂，所以第一次申请证书前，建议先把 A 记录临时切成 DNS only。

Install

安装 Certbot 和 Nginx 插件

Install certbot
apt update
apt install -y certbot python3-certbot-nginx

Debian/Ubuntu 上推荐安装 python3-certbot-nginx，这样 Certbot 可以读取 Nginx 配置并自动写入 443 server block。

Issue certificate

让 Certbot 自动配置 HTTPS

Certificate for root and www domain
certbot --nginx -d example.com -d www.example.com

执行过程中按提示填写邮箱、同意条款，并选择是否把 HTTP 自动重定向到 HTTPS。推荐选择自动跳转，成功后再执行 nginx -t 和 systemctl reload nginx。

Verify nginx after certbot
nginx -t
systemctl reload nginx
curl -I https://example.com
Renewal

检查自动续期

Renewal dry run
certbot renew --dry-run
systemctl list-timers | grep certbot

Certbot 通常会安装 systemd timer 自动续期。只要 dry run 成功，后续一般不需要手动续签。

Cloudflare after SSL

证书正常后再打开代理

  1. 浏览器确认 https://example.com 可以直接访问。
  2. Cloudflare DNS 把 A/CNAME 记录切回 Proxied 橙色云。
  3. SSL/TLS 模式选择 Full strict。
  4. 开启 Always Use HTTPS，视情况开启 Automatic HTTPS Rewrites。
Manual config shape

Certbot 写入后的 Nginx 配置大致长这样

Generated HTTPS server block shape
server {
    server_name example.com www.example.com;
    root /var/www/my-site;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }

    listen 443 ssl;
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
}

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

不建议第一次就手写证书路径。让 certbot --nginx 自动改配置更稳，之后再读它生成的文件，理解 80 跳转和 443 证书路径。

Cloudflare 托管

DNS

Cloudflare 负责 DNS，不是替你登录服务器。

记录 名称 内容 代理状态
A @ 服务器 IPv4 Proxied，橙色云
CNAME www example.com Proxied，橙色云

域名接入 Cloudflare 后，需要到域名注册商那里把 Nameserver 改成 Cloudflare 提供的两条 NS。DNS 生效可能需要等待。

SSL mode

HTTPS 模式怎么选

新手容易选错 SSL/TLS 模式。推荐最终使用 Full strict，前提是服务器 Nginx 上已经有有效证书。临时测试可以用 Flexible 或 Full，但不要长期混用导致跳转循环。

Certificate

两种常见证书路线

  • Cloudflare Origin Certificate：只给 Cloudflare 到源站使用，适合橙色云代理。
  • Let's Encrypt：公共信任证书，适合源站也要被直接访问的情况。

端口管理

Port table

先分清这些端口

端口 用途 是否需要公网开放
22 SSH / VS Code Remote-SSH 需要，但可以限制来源 IP 或改端口
80 HTTP / Let's Encrypt 验证 / 自动跳转 HTTPS 网站通常需要
443 HTTPS 网站通常需要
自定义面板端口 例如 3x-ui、后台管理面板 不建议直接暴露，优先 SSH 隧道或限制 IP
UFW

系统防火墙示例

Firewall
ufw allow 22/tcp
ufw allow 80/tcp
ufw allow 443/tcp
ufw enable
ufw status verbose

云服务器控制台的安全组也要同步开放。系统防火墙放行但安全组没放行，外部仍然访问不到。

Inspect

查看端口监听

Listening ports
ss -lntp
curl -I http://127.0.0.1
curl -I http://你的域名

如果本机 127.0.0.1 能访问，但公网 IP 不能访问，通常查防火墙、安全组或 Nginx listen 配置。

VS Code 工作流与排错

Remote edit

用 VS Code 管理网站文件

  1. Remote-SSH 连接 my-site。
  2. 打开 /var/www/my-site 文件夹。
  3. 编辑 index.html、style.css 和图片。
  4. 保存后浏览器刷新页面。
Password loop

VS Code 一直要密码时

  • 确认日志里是不是 本地用户名@服务器IP，而不是 root@服务器IP。
  • 执行 Remote-SSH: Kill VS Code Server on Host。
  • 服务器上删除 ~/.vscode-server 后重连。
  • 优先通过 ~/.ssh/config 固定 Host、User 和 Port。
Nginx debug

打不开网站时按这个顺序查

Debug checklist
systemctl status nginx
nginx -t
ss -lntp | grep -E ':80|:443'
curl -I http://127.0.0.1
curl -I http://服务器IP
curl -I http://你的域名
tail -n 80 /var/log/nginx/error.log

不要一上来格式化服务器。先判断问题发生在 SSH、Nginx、本机防火墙、云安全组、DNS、Cloudflare 代理还是证书链路。