加入会员
小由和小迪

访问受限

课程专属内容

了解课程绑定授权码

部署上线 ​

课程导读

把本地开发好的网站部署到公网，随时随地访问，也可以分享给他人使用。

一、两种部署方式 ​

部署上线常见两条路：

方式特点适合场景
第三方平台连 GitHub 自动构建部署，上手快小工具、静态站、轻量接口
自建服务器环境、数据库、存储完全自控重要项目、常驻后端、复杂架构

二、方式一：第三方平台（Vercel） ​

部署链路：本地代码 → 推送到 GitHub → Vercel 拉取仓库 → 自动构建并发布。

1. 课前准备 ​

准备项说明
GitHub 账号可用邮箱注册，或 Google / Apple 登录
Vercel 账号建议用 GitHub 账号关联登录
本地项目本课以基础篇开发的 OCR 图片识别网站 为例
GitHubVercel

2. 推送代码到 GitHub ​

初始化 Git 并启动 Claude Code ​

OCR 项目开发时还没学 Git，需先补初始化：

  1. 进入项目目录
  2. 执行 git init
  3. 启动 Claude Code

示例提示词：

text
帮我在 GitHub 中创建一个仓库，然后将这个项目推送上去。

安装 gh CLI ​

Claude Code 可能提示 gh CLI 未安装。gh 是 GitHub 官方命令行工具，可在终端完成登录、建库、推送等操作。

登录 GitHub ​

安装完成后，Claude Code 会给出登录命令。复制这一行，粘贴到对话框里执行：

text
!gh auth login

为什么要加 !

Claude Code 对话框里输入的内容，默认都会当成发给 AI 的消息。但 gh auth login 是终端命令，需要真正执行——在命令前加 !，表示进入命令行执行模式。

按提示操作：

  1. 复制一次性验证码
  2. 在浏览器打开给出的地址
  3. 粘贴验证码并确认

登录成功后，告诉 Claude Code「已登录」，它会继续创建仓库并推送代码。

.gitignore ​

路径为何不上传
node_modules/依赖体积大，部署时重新安装即可（部署时一般会自动完成）
.env存放 API Key 等敏感信息，不能进仓库

如果项目没有真实 .env，只有 .env.example——它只列变量名和示例格式，不含真实密钥。他人克隆后复制为 .env，再填入自己的配置即可。

UGit「推送到远程」

在 Git 版本管理课里，UGit 有个「推送到远程」选项。之前没勾选，是因为还没有远程仓库；现在有了 GitHub 仓库，可以勾选。以后每次本地提交会同步推送到 GitHub，换电脑也能直接拉取。

将仓库改为私有 ​

在 GitHub 头像 → Repositories 可看到刚上传的仓库。默认带 public 标签，表示代码公开可见。

若不想公开源码，可以：

  • 让 Claude Code 把这个项目设置为私有仓库
  • 或在建库时直接说明要建私有仓库

3. 适配并部署到 Vercel ​

让 Claude Code 做 Vercel 适配 ​

在 Vercel 导入项目 ​

  1. 打开 Vercel，用 GitHub 账号 登录
  2. 点击右上角 Add New… → Project
  3. 选择 Import Git Repository
  4. 授权 GitHub：可授权全部仓库，或只授权指定仓库
  5. 在列表中找到 OCR 项目 → Import → Deploy

4. 配置线上环境变量 ​

  1. 进入项目 → Settings → Environment Variables
  2. 点击 Add，填写变量名和值
  3. 变量名对照本地 .env（可在 Warp 终端或项目文件中查看）
  4. 变量值填入你的智谱 API Key
  5. 保存后按提示 Redeploy，新变量才会生效

什么时候不用配环境变量？

本课 OCR 项目没有设置页，Key 只能写在服务端，所以必须在 Vercel 配置。若你的网页已有设置入口，让用户自行填写 API Key，则不必在 Vercel 里再配置。

5. Vercel 的适用边界 ​

限制说明
平台规则项目可能需要按 Vercel 要求改造
架构适配更适合前端、静态站、轻量 Serverless 接口；长期常驻后端进程不太合适
免费额度构建次数、流量、函数执行时长等受套餐限制

小结：做小工具、小网站，Vercel 很省事；若项目更重要、或需要完全掌控数据库与服务器环境，可看下面的自建服务器方式。

三、方式二：自建服务器 ​

以 腾讯云轻量应用服务器 为例，部署网页开发课中的 智谱 AI 工具站。

部署链路：购买服务器 → SSH 登录 → Claude Code 部署 → 开放端口

1. 购买服务器 ​

腾讯云
  1. 选择 轻量应用服务器（新用户可看活动价）
  2. 小型项目 最低配置 即可
  3. 地域选就近节点；镜像选 Linux，本课用 Debian 13
  4. 附加项可跳过
系统说明
macOS / Windows日常电脑常用
Linux服务器常用，稳定、省资源，适合长期跑网站和脚本

Linux 是开源系统，常见发行版有 Debian、Ubuntu 等，各有特点。

2. 初始配置 ​

  1. 控制台 → 找到服务器 → 确认 运行中
  2. 重置密码（便于后续登录）
  3. 记录公网 IP

3. SSH 密钥登录 ​

推荐 密钥登录（比纯密码更安全）。

生成密钥 ​

bash
ssh-keygen -t ed25519

私钥留本地且勿泄露；公钥需上传到服务器。

上传公钥 ​

macOS / Linux：

bash
ssh-copy-id root@你的服务器IP

Windows（PowerShell）： Windows 一般没有 ssh-copy-id，用下面这条等价命令：

powershell
type $env:USERPROFILE\.ssh\id_ed25519.pub | ssh root@你的服务器IP "mkdir -p ~/.ssh && cat >> ~/.ssh/authorized_keys"

按提示执行返回的 SSH 登录命令

连接成功 ​

终端出现类似 root@VM-16-5-debian 即表示已登录。

4. 让 Claude Code 部署网站 ​

启动 Claude Code，说明部署需求，并提供服务器登录信息（IP、用户名、密钥等），由它 SSH 完成部署。

部署后会给出访问地址。

5. 开放防火墙端口 ​

端口用来区分同一台服务器上的不同服务。示例站点需开放 3000：

  1. 控制台 → 防火墙 → 添加规则，端口填 3000
  2. 保存后刷新网站，能打开并正常对话即部署成功

6. 部署方式与登录鉴权 ​

不想让 AI 直接操作服务器 ​

可让 Claude Code 输出 Markdown 部署文档（含命令与配置说明），你按文档手动执行。

增加登录授权码 ​

默认知道 IP 和端口即可访问。若仅自用或分享给朋友，可让 Claude Code 加 登录页 + 授权码，写入服务器环境变量即可。

手动修改授权码 ​

  1. 再次 SSH 登录（可安装 Warp 远程服务器扩展 方便浏览文件）
  2. 终端执行 cd .. 切到根目录，在侧边栏找到网站 .env
  3. 修改授权码并保存（或让 Claude Code 代改）
  4. 让 Claude Code 重启网站 后，用新授权码登录

关于域名和备案 ​

正式对外建议购买 域名 并解析到服务器；

服务器在 中国大陆 需 备案。腾讯云控制台可完成，按官方指引操作即可。