🌙 深夜 coding · 直播分享

我 Vibeeeeeeeeerrrrrr 出一个网页后，
怎么让全世界看到它？

从 file:// 到 https:// · 一节课讲清部署

山河同学livestream · 90 min · 含现场实操

大家好，欢迎来到深夜 coding 这一期直播。今天我们要聊一个所有 Vibe Coding 玩家都绕不开、但大部分教程都讲得很糊的话题——部署。

你可能已经会用 Cursor、Claude Code、Coze 这些工具搓出一个网页了。但搓完之后呢？打开浏览器看到地址栏写着 localhost:3000，发给朋友——朋友说"打不开"。这一刻你就站在了"部署"这道门前。

今天 90 分钟，我们就一起把这扇门彻底拆开看清楚。前 40 分钟讲理论：网址到底在说什么、错误码到底是谁的锅、部署有几种姿势。后 50 分钟现场实操：跟弹幕一起 Vibe 出一个小玩意，然后把它真的送上公网。

讲之前先说一句：这次直播完全面向小白。如果你已经能熟练 deploy、配 Nginx，可能会觉得有点慢，但你可能能拿到一些怎么把这件事讲给身边人听的视角。Let's go。

agenda

今晚要讲的 5 件事

01为什么 localhost 链接发朋友打不开 · URL 入门~12min

02网页崩了别慌 · 错误码图鉴 + 找 AI 排查的姿势~10min

03部署的三种段位 · Vercel / 宝塔 / Nginx~25min

04让 AI 当你的运维副驾~8min

05🔥 现场实操：Vibe 出一个东西 + 部署上公网~30min

过一下今天的议程。

第一件事，URL 入门。我们会从一个最朴素的问题入手——"我把 localhost 的链接发给朋友，为什么他打不开？"——把 file://、localhost、公网 URL 这三种地址的区别讲清楚，顺便拆解一下浏览器地址栏里的协议、域名、IP、端口分别是啥。

第二件事，错误码图鉴。404、500、502、503 这些数字看起来吓人，其实有规律。我会给你一张表，30 秒就能判断"锅"在哪。同时教你怎么把报错喂给 AI，这个比报错本身还重要。

第三件事是今天的核心—— 部署的三种段位。我把它分成 Vercel 一键托管、宝塔可视化、Nginx + systemd 命令行三档，告诉你什么场景该选哪个，不要一上来就开 VPS 把自己劝退。

第四件事，让 AI 当你的运维副驾。我会给你几个实战 Prompt 模板，部署炸了之后怎么求救。

最后是现场实操——我会跟弹幕一起 Vibe 出一个东西，然后把它真的部署到公网，全程让你看到、让你能复刻。

// part 01 · 为什么部署

"我把链接发给朋友，
他说打不开……"

你的网页住在你的电脑里。
它需要先搬到一台一直开着的电脑，
才能让全世界访问到。

这件事就叫部署 / Deploy。

开场我们从一个最常见的尴尬时刻说起。你做完一个网页，特别兴奋，截屏发朋友圈，朋友评论说："链接呢？给我看看。" 你把浏览器地址栏的链接复制给他——http://localhost:3000——他打开，啥也没有。

这一刻就是"部署"这个概念真正登场的瞬间。在那之前你做的所有事情，本质上都是给自己看。代码在你硬盘里，浏览器在你电脑里，服务跑在你这台机器的 3000 端口——朋友的电脑里没有这些东西，自然打不开。

部署是什么？大白话——把你的网页从你的电脑搬到一台一直开着的电脑上，让全世界都能访问它。

这里有两个关键词。一个是"一直开着"——你的电脑会关机、会休眠、会断网，所以不能用它做服务器。第二个是"全世界都能访问"——这台电脑必须有一个公网地址，所有人输入这个地址都能找到它。

整个直播都是围绕"怎么完成这次搬家"展开的。下面我们先搞懂地址。

// part 01 · url 入门

浏览器地址栏的三种状态

📁 file://

「我在读自己硬盘里的文件」

file:///Users/zhangsan/index.html

发给朋友 → 打不开。因为他电脑里没那个文件。

🏠 localhost / 127.0.0.1

「我自己电脑当了服务器」

http://localhost:3000

发给朋友 → 也打不开。服务器只对自己开放。

🌐 公网 URL

「真正能让别人访问到」

https://myapp.vercel.app

这才是部署之后拿到的链接。

我们一个一个看。

第一种，file:// 开头的地址。这种是你双击 HTML 文件时浏览器自动给你的。它的意思非常直白——"我现在打开的是这台电脑硬盘里的一个文件"。所以你把这种链接发给别人，别人电脑里根本没那个路径，自然打不开。这是新手最常犯的错。

第二种，localhost 或者 127.0.0.1。这种是你跑 npm run dev 之后看到的。这两个其实是同一个东西，localhost 是名字，127.0.0.1 是 IP——都指向"自己访问自己"。你的电脑临时变成了一台服务器，但只对自己开放，朋友的电脑就算输入完全一样的地址，访问的也是朋友自己的电脑，不是你的。

第三种才是真正的公网 URL——比如 https://myapp.vercel.app。这种链接是部署之后拿到的，全世界任何人在任何网络下输入都能访问。今天后半场的目标就是教你怎么从前两种变成第三种。

记住一个判断诀窍：链接里如果有 localhost 或者数字开头的 IP，都不能直接给别人。

// part 01 · url 拆解

公网 URL 长什么样？

https://www.example.com:443/blog/post?id=42

协议怎么通信
http / https

域名方便人记
example.com

端口同一台机的房间号
80 / 443 / 3000

路径具体哪个页面
/blog/post

参数额外信息
?id=42

域名背后真正的地址是 IP · 比如 110.242.68.66
DNS 就是把名字翻译成IP的电话簿。

这页是一张拆解图。我们看一个完整的 URL：https://www.example.com:443/blog/post?id=42。这串字看起来吓人，其实就五段东西。

第一段 https——协议。它是浏览器和服务器约定好的"说话方式"。http 是明文，https 是加密的，今天 99% 网站都用 https。

第二段 www.example.com——域名。这是给人记的名字。机器之间真正用来通信的其实是 IP 地址，一串数字，比如 110.242.68.66。DNS 就是把域名翻译成 IP 的"电话簿"，每次你输入域名，浏览器都会先去 DNS 查一下背后的 IP 是啥。

第三段 :443——端口。一台服务器可以同时跑很多服务，端口就是"房间号"。80 是 http 默认、443 是 https 默认。本地开发的 3000、5173 也是端口。

第四段 /blog/post——路径，这家网站具体的哪个页面。

第五段 ?id=42——参数，告诉服务器一些额外信息。

这套拆解记住了，后面讲 Nginx 配置、域名绑定都会用到。

// part 02 · 错误码

网页崩了？先看三个家族

↪️ 3xx · 重定向

不是错误，是"往别处去"。比如 301（永久跳转）、302（临时跳转）。看到这个不用慌。

😵 4xx · 你的锅

请求本身有问题——地址写错、没权限、没登录。
关键词：客户端问题。

🔥 5xx · 服务器的锅

请求没错，服务器自己挂了 / 配置错了 / 跑得太慢。
关键词：去服务器看日志。

记住这一条 → 看到 4xx 看自己请求，看到 5xx 看后端日志。

很多人看到错误码就开始紧张，其实它有非常清晰的规律。我先讲三个家族。

第一个家族，3xx。它根本不是错误。3xx 的意思是"这个地址我已经搬家了，你去新地址"。最常见的是 301 永久跳转和 302 临时跳转——比如你访问 http://example.com，服务器自动给你跳到 https://example.com，背后就是 301 在工作。看到 3xx 别慌。

第二个家族，4xx。这是"你的锅"——请求本身有问题。要么地址写错了，要么你没权限，要么没登录。关键词：客户端问题。出现 4xx，应该先查自己请求是不是错了，而不是去看服务器。

第三个家族，5xx。这是"服务器的锅"——请求没毛病，但服务器自己挂了。或者你的代码报错了、或者反代配错了、或者后端死循环了。关键词：去服务器看日志。这种问题不去看日志，你猜十年也猜不出来。

记住一句话：4xx 看自己请求，5xx 看后端日志。这是部署排错最基本的方向感。

// part 02 · 错误码

你最常遇到的6 个错误码

码	名字	大白话	多半是谁的锅
404	Not Found	这个地址压根没东西	路由没配 / 文件路径错 / 部署没成功
403	Forbidden	东西在，但不让你看	权限 / 防火墙 / Nginx 不让访问
500	Internal Server Error	服务器代码炸了	后端代码报错，看 stack trace
502	Bad Gateway	Nginx 找后端，后端没回	Node 进程挂了 / 端口写错
503	Service Unavailable	服务器累趴了 / 在维护	负载过高 / 临时下线 / 限流
504	Gateway Timeout	后端在干活但太慢，Nginx 等不及了	死循环 / 慢查询 / 外部 API 超时

同样是 404，浏览器原生页 vs 你网站样式 → 锅在的位置完全不同。

具体说说最常见的 6 个错误码。我把它做成一张表，建议截图存到手机里，遇到的时候直接查。

404 · Not Found——地址压根没东西。原因可能是：前端路由没配好、文件路径写错了、或者部署根本没成功。这是出现频率最高的错。

403 · Forbidden——东西在，但不让你看。常见于 Nginx 配置 deny、或者云厂商的访问控制。

500 · Internal Server Error——服务器代码自己炸了。这种你必须去看 stack trace，没有第二种办法。

502 · Bad Gateway——这个超级常见。大白话就是"Nginx 找后端，后端没人接电话"。一般是你的 Node 进程挂了，或者 Nginx 反代的端口和实际监听端口不一致。

503 · Service Unavailable——服务器累趴了或者在维护。比如负载特别高、被云厂商限流、或者你主动下线了。

504 · Gateway Timeout——后端在干活，但太慢了，Nginx 等不及主动断开。常见于死循环、数据库慢查询、调用外部 API 超时。

这里有一个小技巧——同样是 404，看到浏览器自带的白底黑字 404 页面，意味着请求根本没到你的应用，可能是 DNS 错了或者 Nginx 没起；看到带你网站样式的"页面找不到"，说明请求到了你的应用，但前端路由匹配不上。同一个数字，两种意思。

// part 02 · 提问姿势

把报错喂给 AI 的正确姿势

❌ 差的提问

"我网页 502 了怎么办？"

AI 只能给你 8 个通用建议，照着试一遍，可能哪个都不对。

✅ 好的提问

"我的 Next.js 部署在 VPS，Nginx 反代到 :3000。刚 push 完代码后 502。"

+ nginx error log 末尾 50 行
+ systemctl status myapp 输出
+ 操作系统 / Node 版本

求救 5 件套（背下来）

我做了什么 — 部署 / 改了 nginx / 升级了依赖
期望看到什么 — 正常页面
实际看到什么 — 错误码 + 截图
关键日志原文 — 不是"日志说有错"，是把日志贴进来
环境 — 平台 / 系统 / 版本号

这一页是整场直播最实用的一页之一，请所有人都认真听一下。

大部分人找 AI 排错，问法是这样："我网页 502 了怎么办？"。AI 这时候只能给你 8 个通用建议——检查端口、看进程、看防火墙、看 nginx 配置……你照着一条条试，可能试到天亮都不对。因为 AI 没有任何上下文，全靠猜。

正确的提问应该长这样："我的 Next.js 部署在 VPS，Nginx 反代到 3000 端口。刚 push 完代码后突然 502。下面是 nginx error log 的末尾 50 行：xxx。systemctl status myapp 输出是 xxx。系统是 Ubuntu 22.04，Node 是 20。" ——你看，背景、现象、日志、环境，全齐了。AI 拿到这种信息基本一句话就能定位。

我把它总结成求救 5 件套，建议大家背下来：① 我做了什么 ② 期望什么 ③ 实际什么 ④ 日志原文 ⑤ 环境。

这个模板不只适用于部署，所有技术问题都可以用。你会发现 AI 突然变聪明了一个量级——其实是你变成了一个更会提问的人。

// part 03 · 部署的三档段位

部署的三种段位

TIER 1

🚀 托管平台

Vercel / Netlify / Cloudflare Pages

✓ 推 GitHub 自动部署
✓ 30 秒上线 · 免运维
✓ 自带 HTTPS + 全球 CDN
✓ 90% 个人项目用这个

本场覆盖：第 10 · 11 页

TIER 2

🎛️ 自己服务器 + 宝塔

点点点的可视化面板

✓ 数据存自己手里
✓ 跑长任务无限制
✓ 国内可备案
✓ 适合稍有需求的玩家

本场覆盖：第 12 · 13 页

TIER 3

⚙️ 纯命令行

Nginx + systemd + Certbot

✓ 完全控制
✓ 适合学习底层原理
✓ AI 协助效率非常高
✓ 初次部署 2 小时跑通

本场覆盖：第 14-16 页

⚠️ 能用懒的，绝不上硬核的。不要一上来就开 VPS 写 Nginx——那是劝退新手最快的路。

下面进入今天的核心内容——部署的三种段位。我把它从最懒到最硬核排列。

段位 1：托管平台。代表选手是 Vercel，还有 Netlify、Cloudflare Pages。这种方式的玩法就是"把代码推到 GitHub，剩下平台全帮你搞定"——构建、部署、HTTPS、CDN、自动域名，30 秒就能上线。我自己90% 的个人项目都用这个，强烈推荐新手第一次部署直接从这里开始。

段位 2：自己买服务器 + 宝塔面板。当你的项目需要数据存自己这边、需要跑长期后台任务、或者需要国内备案时，就要上自己的服务器了。宝塔面板是国内最流行的可视化方案，把命令行操作全变成点点点，新手友好度非常高。

段位 3：纯命令行 Nginx + systemd。这是真正的"专业玩法"——所有配置都看得见，所有报错都查得到。曲线稍陡，但配合 AI 一起搞，效率反而非常高。我个人非常推荐你至少学一次，因为这会让你彻底搞懂"网站是怎么活在服务器上的"。

送大家一句话——能用懒的，绝不上硬核的。不要一上来就开 VPS、写 Nginx、配 systemd，那是劝退新手最快的路。先用 Vercel 把第一个项目跑通，建立信心，再慢慢往下层走。

// part 03 · tier 1

Tier 1 · Vercel 一键部署

代码推到 GitHub
打开 vercel.com，用 GitHub 登录
点 Add New → Project
选你的仓库，点 Import
框架自动识别，一般不用改
有 API Key 就填 Environment Variables
点 Deploy，等 30 秒
拿到 https://你的项目.vercel.app 🎉

之后每次 git push → 自动重新部署。

# 也可以走 CLI（让 AI 帮你跑）
npm i -g vercel

cd my-app
vercel login

# 部署到预览环境
vercel

# 部署到生产环境
vercel --prod

# 或者直接对 Claude Code 说：
# 「帮我把当前项目部署到 Vercel 生产环境」
      

第 10 页，我们详细看一下 Tier 1 的代表选手——Vercel。

左边是网页端 8 步流程。第一步：代码推到 GitHub，没仓库就先建一个。第二到第四步：打开 vercel.com，用 GitHub 登录，点 Add New → Project，选你的仓库。第五步：Vercel 会自动识别你用的是 Next.js、Vite、CRA 还是别的，一般不用改任何配置。第六步：如果你的项目用到 API Key 这种敏感变量，在 Environment Variables 里填一下。第七步：点 Deploy。第八步：等 30 秒，拿到一个 .vercel.app 的链接，这就是你人生第一个公网网址。

最妙的事情在之后——你以后每次 git push，Vercel 都会自动重新部署。你根本不用再点鼠标，写完代码推上去等一下就生效了。这种丝滑度，真的会让人上瘾。

右边是 CLI 玩法，给习惯命令行的朋友看的。但我强烈推荐你直接对 Claude Code 说："帮我把当前项目部署到 Vercel 生产环境"——AI 会自动处理 CLI 安装、登录引导、部署命令。你只要在终端旁边等着拿链接就行。

// part 03 · 自定义域名

想要专属域名？三步搞定

买域名

国内 → 阿里云万网 / 腾讯云 DNSPod（要备案）
国际 → Cloudflare Registrar（成本价）/ Namecheap（无需备案）

接入 Cloudflare（免费 CDN + HTTPS + 防 DDoS）

在 Cloudflare 添加站点 → 把域名注册商的 NS 换成 Cloudflare 给的两个地址 → 等 5-30 分钟生效。

在 Vercel 绑定域名

Project → Settings → Domains → 输入域名 → 按 Vercel 提示在 Cloudflare 加一条 CNAME → 几分钟后看到 Valid Configuration → 完成 🎉

⚠️ 服务器在国内必须备案 · 7-20 工作日 · 用 Vercel 等海外平台无需备案但国内访问会慢。

Vercel 给你的 .vercel.app 链接已经能用了，但你可能想要一个更专业的链接，比如 myapp.com。三步搞定。

第一步，买域名。如果你的服务面向国内用户，建议在阿里云万网或者腾讯云 DNSPod 买，因为它们能配合走备案。如果面向国际，强烈推荐 Cloudflare Registrar，它不加价、按成本价卖，比 GoDaddy 这些便宜不少。

第二步，接入 Cloudflare。这一步是送的——Cloudflare 免费给你 CDN 加速、HTTPS 证书、还有 DDoS 防护。流程是：在 Cloudflare 后台添加你的域名站点，然后回到你买域名的地方，把它的"DNS 服务器（NS）"换成 Cloudflare 给的两个地址。等 5 到 30 分钟生效，就接入完成了。

第三步，去 Vercel 绑定。进入你的 Vercel 项目 → Settings → Domains → 输入你的域名 → Vercel 会告诉你"请在 DNS 里加一条 CNAME 记录指向 xxx"，你回 Cloudflare 加上 → 几分钟后绑定成功。这套走完，你的 myapp.com 就指向 Vercel 上你的网站了。

最后一个重要提醒——备案这件事。如果你的服务器在国内（包括 Vercel 海外平台都不算），域名必须备案才能让国内用户访问。备案要 7 到 20 个工作日。如果你用 Vercel 这种海外平台，不需要备案，但国内访问速度会有点慢。两者取舍自己看。

// part 03 · tier 2

Tier 2 起手式 · 买 VPS + 登服务器

🇨🇳 国内（要备案）

阿里云 ECS · ¥99/年起 · 备案首选
腾讯云轻量 · ¥99/年起 · 微信生态好
华为云 · ¥99/年起 · 政企合规

🌍 国外（免备案）

Hetzner · ~$4/月 · 性价比之王
DigitalOcean · $6/月 · 文档完善
Vultr · $6/月 · 亚太节点

第一次 SSH 登服务器

# 在自己电脑的终端输入
ssh root@123.45.67.89

# 第一次问 Are you sure? 输 yes
# 然后输密码（输入不显示）

# 进去后改 root 密码
passwd

# 更新系统补丁
apt update && apt upgrade -y

# 配防火墙（云控制台或 ufw）
# 只开 22 / 80 / 443
        

OK 进入 Tier 2。第一件事——买服务器，行话叫 VPS。

选择上看你面向哪里的用户。面向国内必须备案，那就在国内云厂商买，阿里云 ECS、腾讯云轻量、华为云都行，新人活动价 ¥99/年，非常便宜。面向国际或者你不想搞备案，那就上海外，Hetzner 是性价比之王、DigitalOcean 文档最完善、Vultr 有亚太节点速度还行。

买完之后云厂商会给你一台机器，一个 IP 地址，一个 root 密码。接下来你要做的就是用 SSH 连上去。

SSH 大白话——一种远程钻进服务器命令行的方式。在你自己电脑的终端输 ssh root@你的服务器IP，第一次问 "Are you sure" 输 yes，然后输密码就进去了。输密码时屏幕不显示是正常的，不要以为键盘坏了。

进去之后第一天必做 3 件事。第一，passwd 改 root 密码——云厂商默认密码全网都能查到，不改就是在裸奔。第二，apt update && apt upgrade -y，把系统补丁全打上。第三，配防火墙，只开 22（SSH）、80（http）、443（https）这三个端口，其它全关，云厂商安全组里点点点就行。

这三件事做完，你的服务器就算正式"安家"了。

// part 03 · tier 2

Tier 2 · 宝塔面板：给 Linux 装图形界面

一行命令装宝塔

# Ubuntu / Debian
wget -O install.sh https://download.bt.cn/install/install-ubuntu_6.0.sh \
  && sudo bash install.sh ed8484bec

# 装完打印：面板地址 / 用户名 / 密码
# 截图存好！
        

访问 http://你的IP:8888/随机串进入面板

5 步建站

登录面板
装环境套餐 → LNMP 或单装 Nginx
网站 → 添加站点（填域名 / 根目录）
把代码拖进站点根目录（或 Git 克隆）
SSL → Let's Encrypt → 一键申请 + 强制 HTTPS

跑 Node 项目

软件商店搜「Node.js 版本管理器」→ 添加项目 → 选 Node 版本 + 启动命令 → 自动用 PM2 常驻 → 网站设置加反向代理到 127.0.0.1:3000 → 🎉

第 13 页，宝塔面板。如果你对 Linux 命令行还不熟，又想要自己一台服务器，宝塔就是国内新手 No.1 的选择。

宝塔本质上是给 Linux 装了一个图形界面。安装 Nginx、建站、绑域名、配 HTTPS、看资源占用、跑 MySQL，全都变成"点鼠标"。

装宝塔超级简单，就一行命令。在你的 SSH 终端里粘进去，等 5 分钟左右装完。装完它会在终端打印面板地址、用户名、密码——这三样务必立刻截图保存，关掉就找不回来了。

建站流程5 步。登录面板 → 装 LNMP 环境套餐（Linux + Nginx + MySQL + PHP）→ 在网站标签页点"添加站点"，填上域名和根目录 → 把你打包好的静态文件拖进去，或者用 Git 克隆 → SSL 标签下点 Let's Encrypt 一键申请证书 + 强制 HTTPS。完成 ✅。

如果你跑的是 Node 项目——比如 Express、Next.js standalone——宝塔有专门的 Node.js 管理器插件。流程是：软件商店搜"Node.js 版本管理器"装上，添加项目时选好 Node 版本和启动命令（一般是 npm start），面板会自动用 PM2 让进程常驻，崩了自动重启。然后回到网站设置里加一条反向代理，把域名转到 127.0.0.1:3000，搞定。

宝塔的坑：默认不显示 .env 等隐藏文件，要去右上角设置打开。

// part 03 · tier 3

Tier 3 · Nginx + systemd 架构

step 1

👤 浏览器

用户访问 https://example.com

step 2

🔀 Nginx

监听 80 / 443，处理 HTTPS，反向代理

step 3

🟢 Node 进程

监听 127.0.0.1:3000，真正的应用

─── HTTPS ───→ ─── HTTP ───→

📌 systemd

24 小时保安。让 Node 进程开机自启 + 崩溃自动重启。你睡觉它也在工作。

🔒 Certbot

免费 HTTPS 证书自动续期机器人。一行命令拿到小绿锁，一辈子不用再管。

四个角色配合 = 一个能扛真实流量的自托管站点。

OK，进入 Tier 3——纯命令行硬核派。这一档是真正的"专业玩法"，全自己配，全看得到。

先看架构图——四个角色。

Nginx，扮演"大堂经理"。它监听服务器的 80 和 443 端口，处理 HTTPS 加解密，然后把请求反向代理给真正干活的应用。所有外部流量都先经过它。

Node 进程，扮演"后厨"。它只在内网监听一个端口，比如 3000。外部用户根本访问不到它，必须经过 Nginx 转发。这种设计的好处是 Node 进程不需要操心 HTTPS、不需要操心限流，专心干自己的活就行。

systemd，扮演"24 小时保安"。它的工作是让 Node 进程永远活着——开机自动启动、崩溃了自动重启、你 ssh 退出了它继续跑。这是"服务"和"脚本"的本质区别。

Certbot，扮演"证书续期机器人"。Let's Encrypt 提供免费 HTTPS 证书，但证书 90 天就过期，Certbot 帮你自动续期，一辈子不用再管。

这四个角色配合起来，就是一个能扛真实流量的自托管站点。下面两页我们看具体怎么配。

// part 03 · tier 3

Nginx + systemd 实操

Nginx 反代到 :3000

# /etc/nginx/sites-available/myapp.conf
server {
  listen 80;
  server_name example.com www.example.com;

  location / {
    proxy_pass http://127.0.0.1:3000;
    proxy_http_version 1.1;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
  }
}
# 软链 + 测试 + 重载
ln -s sites-available/myapp.conf sites-enabled/
nginx -t && systemctl reload nginx
        

systemd 让 Node 永生

# /etc/systemd/system/myapp.service
[Service]
User=ubuntu
WorkingDirectory=/var/www/myapp
ExecStart=/usr/bin/node server.js
Restart=always
Environment=NODE_ENV=production
Environment=PORT=3000

[Install]
WantedBy=multi-user.target

# 启动 + 开机自启 + 看日志
systemctl daemon-reload
systemctl enable --now myapp
journalctl -u myapp -f
        

新手 3 大翻车点 → 忘了 nginx -t·安全组没开 80/443·端口写错

具体操作分两块。

左边是 Nginx 配置。新建一个文件 /etc/nginx/sites-available/myapp.conf，写一个 server 块。listen 80 表示监听 80 端口；server_name 写你的域名；location / 表示所有路径都走这个规则——proxy_pass 转给本地 3000 端口。

下面几行 proxy_set_header 是把真实用户的 IP、Host 头、WebSocket 升级请求传给后端，这几行不写会有一堆奇怪问题，建议无脑全部加上。

写完之后，把这个文件软链到 sites-enabled 启用它，然后必须跑 nginx -t 测试一遍语法。语法错的话不要重载，不然整站会挂掉。语法 OK 之后 systemctl reload nginx 平滑重载——这个命令不会断开现有连接。

右边是 systemd 服务文件。位置在 /etc/systemd/system/myapp.service。关键字段：WorkingDirectory 是项目目录，ExecStart 是启动命令，Restart=always 表示崩了自动重启。Environment 那两行是注入环境变量。

写完后跑 daemon-reload 让 systemd 重新读配置，enable --now 表示开机自启 + 立刻启动。看实时日志用 journalctl -u myapp -f，这条命令是后续排错最常用的。

新手三大翻车点：忘了 nginx -t 测试、云厂商安全组没开 80/443、配置里端口和实际监听端口不一致。基本上 90% 的 502 都是这三个。

// part 03 · tier 3

免费 HTTPS · Certbot 一行命令

# 装 certbot
sudo apt install certbot python3-certbot-nginx -y

# 申请证书 + 自动改 Nginx 配置 + 80 自动跳 443
sudo certbot --nginx -d example.com -d www.example.com

# 测试自动续期（90 天到期前会自动跑）
sudo certbot renew --dry-run
    

✅ 跑完这条会发生什么

• 你的网站获得 Let's Encrypt 免费 SSL 证书
• Nginx 配置被自动改成 listen 443 ssl
• HTTP 80 自动 301 跳到 HTTPS 443
• 浏览器小绿锁变绿 🎉

📅 之后呢

证书 90 天有效，Certbot 自动续期。

一辈子不用再管。

HTTPS 这件事在 5 年前是非常折腾的——要花钱买证书、要手动配 Nginx、过 1 年还得续。现在因为 Let's Encrypt 和 Certbot 这一对组合，变成了一行命令。

具体三步。第一，装 certbot 和它的 Nginx 插件，sudo apt install certbot python3-certbot-nginx -y。第二，跑核心命令：sudo certbot --nginx -d example.com -d www.example.com。第三，跑一次 certbot renew --dry-run 测试自动续期是否正常。

第二条命令执行完会发生 4 件事：① 你的网站拿到了一张 Let's Encrypt 免费 SSL 证书；② Certbot 自动修改了你的 Nginx 配置，加上了 listen 443 ssl 那一段；③ 80 端口的 HTTP 流量被自动 301 跳到 HTTPS；④ 浏览器地址栏的小绿锁变绿了。

这是整场直播单条 ROI 最高的命令，没有之一。一行字换一辈子的 HTTPS——Let's Encrypt 证书 90 天到期，Certbot 会在过期前自动续，你真的不用再管它。

所以总结一下 Tier 3 的完整流程：装 Nginx → 写反代配置 → 写 systemd 服务 → 跑 Certbot 拿证书。一个真严肃的网站就这样上线了。

// part 04 · ai 副驾

让 AI 当你的运维副驾

排错三件套（喂给 AI）

# Nginx 错误日志
sudo tail -n 100 /var/log/nginx/error.log

# 应用日志
sudo journalctl -u myapp -n 100 --no-pager

# 服务状态
sudo systemctl status nginx myapp
        

让 AI 直接登服务器干活

"请帮我 ssh 到 root@1.2.3.4，看 myapp.service 为什么失败。
关键命令在执行前先告诉我。"

现成的 Prompt 模板

📝 让 AI 写 Nginx 配置
"前端 Vite 静态文件在 /var/www/myapp/dist，/api/* 反代到 :8000，开 gzip，缓存 30 天，SPA fallback。给完整配置 + 每段解释。"

🚀 GitHub Actions 自动部署
"帮我写一个 GitHub Actions，push 到 main 后自动 ssh 到我的 VPS，git pull + npm install + systemctl restart myapp。"

🔍 故障定位
"为什么 502？给我 5 个最可能的原因，按概率从高到低。结合下面日志判断：[贴日志]"

⚠️ 红线：删除 / 覆盖配置 / 重启 DB 等不可逆操作，必须"先告诉我再执行"。

讲完三档段位，我们再花几分钟讲怎么让 AI 帮你扛运维。这件事很多人忽略，但它的 ROI 极高。

左上是排错三件套。出问题第一时间就跑这三条命令，把输出整段贴给 AI：① tail nginx error.log 拿 Nginx 错误；② journalctl -u myapp 拿应用日志；③ systemctl status 拿服务状态。这三个加起来，AI 基本能精准定位 80% 的部署问题。

左下更进一步——让 AI 直接登服务器干活。Claude Code 配合 SSH 工具，真的可以让 AI 帮你登服务器执行命令。你只要说："帮我 ssh 到 1.2.3.4，看一下 myapp.service 为什么失败"——AI 会自己 ssh 进去、看日志、分析原因、给修复方案。

但是！这里有一条红线——所有不可逆操作（删除文件、覆盖配置、重启数据库、drop 表）必须明确告诉 AI "关键命令在执行前先告诉我"。否则 AI 一时手快删掉东西，找都找不回来。这件事我自己踩过坑，无比强调一遍。

右边是三个高频 Prompt 模板，可以直接抄走用。让 AI 写 Nginx 配置时，明确告诉它前端在哪、API 反代到哪、要不要 gzip、要不要 SPA fallback——细节越多，输出越准。让 AI 写 CI/CD 时，描述清楚 trigger 条件 + 执行步骤。让 AI 排错时，要求按概率排序、必须基于你贴的日志判断，避免空答。

// part 05 · live demo + closing

🔥 现场实操 + 三档自查表

现场实操流程（30 min）

①

跟弹幕一起出题

5 分钟，做啥现场投票

②

Claude Code Vibe 出代码

15 分钟，跟着我一起看 AI 怎么干活

③

Vercel 一键部署

5 分钟拿到公网链接

④

故意翻车演练

5 分钟，制造一个 502，AI 协助定位

三档套餐自查表

场景	推荐	耗时
作品集 / Demo	Vercel	5 min
想绑自己域名	Vercel + CF	20 min
面向国内 / 备案	ECS + 宝塔	1 day
严肃项目 / 学底层	VPS + Nginx	2 h

🌙 能用托管，绝不开服务器。能用宝塔，绝不上命令行。

OK 前面的理论环节就讲到这里。剩下 30 分钟我们做现场实操。

实操4 步走。第一步，跟弹幕一起出题。我会在弹幕里收集小项目想法，大家投票选出今天要做啥——可能是一个生日提醒器、可能是一个随手记账、可能是一个深夜点宵夜召集器，都行。

第二步，Claude Code Vibe 出代码。15 分钟左右，我会全程开着屏幕，让大家看到我怎么和 AI 对话、怎么写 PRD、怎么让 AI 拆任务、怎么 review 输出。这部分的目标不是炫技，是让你看到"一个真实工作流"长什么样。

第三步，Vercel 一键部署。我会直接把项目推到 GitHub，连到 Vercel，30 秒拿到公网链接。然后把这个链接发到直播间，大家可以实时打开，看到我刚做出来的东西。

第四步是最有意思的——故意翻车演练。我会人为搞坏一个地方，制造一个 502 错误，然后让 AI 协助我 5 分钟内定位 + 修复。这是整场最贴近真实日常的部分，因为真实开发就是不停在炸和修。

右边是三档套餐自查表——你不同的项目场景对应不同方案，截图存好以后用。送大家一句心法："能用托管，绝不开服务器。能用宝塔，绝不上命令行。"不要折腾自己，把省下来的精力留给产品本身。

互动文档已经打开，大家把今晚做的东西部署完之后，到打卡区贴链接 + 一句话介绍。我直播结束会一个个点开看。Q&A 现在开始，弹幕走起。

我 Vibeeeeeeeeerrrrrr 出一个网页后，怎么让全世界看到它？

今晚要讲的 5 件事

"我把链接发给朋友，他说打不开……"

浏览器地址栏的三种状态

📁 file://

🏠 localhost / 127.0.0.1

🌐 公网 URL

公网 URL 长什么样？

网页崩了？先看三个家族

↪️ 3xx · 重定向

😵 4xx · 你的锅

🔥 5xx · 服务器的锅

你最常遇到的6 个错误码

把报错喂给 AI 的正确姿势

❌ 差的提问

✅ 好的提问

求救 5 件套（背下来）

部署的三种段位

Tier 1 · Vercel 一键部署

想要专属域名？三步搞定

Tier 2 起手式 · 买 VPS + 登服务器

🇨🇳 国内（要备案）

🌍 国外（免备案）

第一次 SSH 登服务器

Tier 2 · 宝塔面板：给 Linux 装图形界面

一行命令装宝塔

5 步建站

跑 Node 项目

Tier 3 · Nginx + systemd 架构

📌 systemd

🔒 Certbot

Nginx + systemd 实操

Nginx 反代到 :3000

systemd 让 Node 永生

免费 HTTPS · Certbot 一行命令

✅ 跑完这条会发生什么

📅 之后呢

让 AI 当你的运维副驾

排错三件套（喂给 AI）

让 AI 直接登服务器干活

现成的 Prompt 模板

🔥 现场实操 + 三档自查表

现场实操流程（30 min）

三档套餐自查表

我 Vibeeeeeeeeerrrrrr 出一个网页后，
怎么让全世界看到它？

"我把链接发给朋友，
他说打不开……"