AI夹克

部署上线：把你的项目发布到互联网

三种部署方案对比

方案适合免费额度难度
Vercel前端/全栈项目慷慨⭐
Netlify纯静态/前端慷慨⭐
腾讯云 COS国内访问快需付费⭐⭐

方案一：Vercel（推荐）

Vercel 是最简单的部署平台，支持自动从 GitHub 部署。

步骤

  1. 把项目推送到 GitHub
  2. 打开 https://vercel.com → 用 GitHub 登录
  3. 点击 “Import Project” → 选择你的仓库
  4. Vercel 自动识别 Vite 项目 → 直接部署
  5. 获得一个 xxx.vercel.app 域名

配置环境变量

在 Vercel 项目设置中 → Environment Variables：

VITE_SUPABASE_URL=https://xxx.supabase.co
VITE_SUPABASE_ANON_KEY=xxx

自动部署

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

方案二：Netlify

步骤

  1. 打开 https://netlify.com
  2. “Import from Git” → 选择仓库
  3. Build command: npm run build
  4. Publish directory: dist
  5. Deploy

方案三：腾讯云 COS（国内）

步骤

  1. 腾讯云控制台 → 对象存储 COS → 创建存储桶
  2. 开启静态网站托管，索引文档设为 index.html
  3. 本地构建：npm run build
  4. 上传 dist/ 目录到 COS
  5. 绑定自定义域名 + CDN 加速

命令行上传

# 安装 COSCMD
pip install coscmd

# 配置
coscmd config -a SecretId -s SecretKey -b bucket-name -r ap-guangzhou

# 上传
coscmd upload -r dist/ /

自定义域名

以 Vercel 为例：

  1. 在域名服务商（如腾讯云 DNS）添加记录
  2. 类型 CNAME，指向 cname.vercel-dns.com
  3. Vercel 项目设置中添加自定义域名
  4. 等待 DNS 生效（几分钟到几小时）

部署后检查清单

  • 首页能正常加载
  • 所有页面跳转正常
  • API 请求能成功（F12 看 Network）
  • 环境变量正确配置
  • HTTPS 正常工作
  • 手机访问正常
  • 分享链接给朋友能打开

持续部署流程

本地改代码 → git push → 自动部署 → 几分钟后线上生效

这就是现代开发的节奏。

小结

部署没有想象中复杂。推荐路线：

  1. 用 Vercel 快速部署
  2. 用 GitHub + Vercel 实现自动部署
  3. 需要国内加速时加 CDN

下一篇我们回顾整个学习路线，规划后续进阶方向。