维岳

第08课：部署上线与域名配置

13 min read

第08课：部署上线与域名配置

核心思想：部署就是把你的笔记本电脑变成”永不关机的电脑”，让全世界都能访问你的产品。

一、部署的概念：从本地到云端

为什么需要部署？

你在本地开发时，产品只有你能访问（在 http://localhost:3000）。要让别人也能用，你需要：

  1. 把代码打包成生产版本（构建）
  2. 上传到一台永不关机的服务器（服务器）
  3. 绑定一个域名（比如 myapp.com）
  4. 让用户通过域名访问（DNS解析）

三个关键步骤

flowchart LR
    A[开发完成] --> B[构建 Build]
    B --> C[上传到服务器 Deploy]
    C --> D[绑定域名]
    D --> E[用户可访问]

    subgraph 构建
        B1[压缩代码] --> B2[优化资源] --> B3[生成静态文件]
    end

    subgraph 部署
        C1[自动拉取代码] --> C2[安装依赖] --> C3[启动服务]
    end

    subgraph 域名
        D1[购买域名] --> D2[DNS解析] --> D3[SSL证书]
    end

    B --> B1
    C --> C1
    D --> D1

部署平台的选择

平台适合价格难度
扣子编程自带部署原型/测试免费最简单
VercelNext.js项目免费起步简单
Netlify静态网站免费起步简单
Railway全栈应用按用量付费中等
自购服务器大型项目贵困难

对于初学者，Vercel 是最优选择 —— 和Next.js无缝集成，免费额度足够个人项目使用。

二、扣子编程自带部署功能

如果你用的是扣子编程（Coze/扣子），部署是最简单的一步：

操作步骤

  1. 在扣子编程中完成产品开发
  2. 点击”发布”按钮
  3. 系统自动构建并生成一个可访问的URL
  4. 把URL分享给任何人，他们就能访问你的产品

整个过程只需要30秒，不需要了解任何部署知识。

局限性

扣子编程的自带部署适合原型验证和早期测试，但如果你想：

  • 绑定自己的域名
  • 使用自定义后端逻辑
  • 对接自己的数据库
  • 扩展到大量用户

——你需要”离开扣子编程”，使用专业的部署方案。

三、Vercel部署：从GitHub到生产环境

Vercel是目前部署Next.js项目最流行的平台。核心流程：

前提条件

  • 一个GitHub账号
  • 项目代码已推送到GitHub仓库
  • 一个Vercel账号（可以用GitHub登录）

部署流程

flowchart TD
    A[本地开发完成] --> B[git push 推送到GitHub]
    B --> C[登录 Vercel 导入仓库]
    C --> D[Vercel自动检测框架]
    D --> E{配置构建参数}
    E -->|使用默认配置| F[点击 Deploy]
    E -->|需要环境变量| G[添加环境变量]
    G --> F
    F --> H[Vercel构建+部署]
    H --> I[获得 *.vercel.app 域名]
    I --> J[自动持续集成]
    
    J --> K[每次git push自动重新部署]

持续集成（CI）

Vercel的最大优势：自动部署

  • 每次你 git push 到GitHub，Vercel自动检测到变化
  • 自动拉取最新代码，重新构建
  • 自动部署到生产环境
  • 整个过程不需要你手动操作

这意味着：你只需要关注开发，部署是自动的。

Vercel免费额度

  • 100GB带宽/月
  • 100小时构建时间/月
  • 无限静态网站
  • 自动SSL证书
  • 支持Serverless函数

对个人项目来说，免费额度绰绰有余。

四、自定义域名配置

免费域名 *.vercel.app 能用，但不够专业。如果你想有自己的品牌域名（比如 myapp.com），需要配置自定义域名。

第一步：购买域名

域名注册商推荐：

  • Namesilo（便宜，免费隐私保护）
  • Namecheap（界面友好）
  • Cloudflare（成本价，功能强大）
  • 阿里云/腾讯云（国内）

价格：一般 10-20 美元/年（约 70-140 元人民币）

选一个好域名：简短、好记、和产品名一致。不要用连字符和数字组合。

第二步：配置DNS解析

DNS（域名系统）的作用是把 myapp.com 指向你的服务器地址。

sequenceDiagram
    participant 用户
    participant 浏览器
    participant DNS服务器
    participant Vercel
    
    用户->>浏览器: 输入 myapp.com
    浏览器->>DNS服务器: myapp.com 指向哪里？
    DNS服务器-->>浏览器: 指向 vercel-server-ip
    浏览器->>Vercel: 请求 myapp.com 的页面
    Vercel-->>浏览器: 返回网页内容
    浏览器-->>用户: 显示页面

第三步：添加CNAME记录

在域名注册商的管理后台：

  1. 找到DNS管理/DNS设置
  2. 添加一条 CNAME记录
  3. 主机记录填 @ 或 www
  4. 目标值填 cname.vercel-dns.com
  5. 保存并等待生效（几分钟到几小时）

第四步：在Vercel中绑定域名

  1. 进入Vercel项目 → Settings → Domains
  2. 输入你的域名
  3. 点击 Add
  4. Vercel会自动验证DNS配置
  5. 验证通过后，域名生效

域名解析类型速查

记录类型作用示例
A记录域名指向IP地址myapp.com → 76.76.21.21
CNAME域名指向另一个域名www.myapp.com → myapp.vercel.app
MX记录邮件服务器用于域名邮箱
TXT记录文本信息用于验证所有权

五、环境变量：区分开发/生产环境

什么是环境变量？

环境变量是保存在项目外部的配置信息。它们不是写死在代码里的，而是根据运行环境动态读取的。

为什么需要环境变量？

你的代码中可能会有：

  • 数据库连接地址
  • API密钥
  • 第三方服务的Secret Key

这些信息：

  1. 不同环境值不同（开发环境连测试库，生产环境连正式库）
  2. 不能公开（推送到GitHub就泄露了）

.env文件

在项目根目录创建 .env 文件：

# 数据库连接
DATABASE_URL="postgresql://user:password@host:5432/db"
 
# API密钥
OPENAI_API_KEY="sk-xxxxxx"
 
# 应用配置
NEXT_PUBLIC_APP_URL="http://localhost:3000"

不同环境的env文件

文件用途是否提交到Git
.env本地开发（默认）❌ 不提交
.env.local本地覆盖❌ 不提交
.env.production生产环境❌ 不提交
.env.example模板（不含真实值）✅ 可以提交

安全提示：永远不要将包含真实密钥的 .env 文件提交到GitHub。在 Gitignore 中添加 .env。

在Vercel中配置环境变量

  1. 进入Vercel项目 → Settings → Environment Variables
  2. 逐个添加变量名和值
  3. 选择作用环境（Production、Preview、Development）
  4. 部署后，项目会自动读取这些变量

六、部署日志解读

部署失败时，最重要的是读懂部署日志。

常见部署日志信息

成功部署

Cloning repository...
Installing dependencies...
    ✓  Installed 1,234 packages
Building application...
    ✓  Build completed in 23.4s
Deploying to production...
    ✓  Deployment available at https://myapp.vercel.app

失败部署：依赖问题

Installing dependencies...
    ✖  ENOENT: package.json not found

原因：你的项目没有 package.json 文件，或者代码仓库的根目录不对。

解决方案：检查代码仓库结构，确保 package.json 在根目录。

失败部署：构建错误

Building application...
    ✖  TypeError: Cannot read properties of undefined
       at build.js:123:45

解决方案：复制错误信息给AI，让AI分析代码问题。

部署日志常见关键词

关键词含义应对
Module not found缺少依赖运行 npm install
SyntaxError代码语法错误检查代码语法
TypeError类型错误检查变量类型
ENOENT文件不存在检查文件路径
Permission denied权限不足检查文件权限
Timeout超时构建时间过长，优化代码

七、HTTPS和SSL证书

HTTP vs HTTPS

  • HTTP：明文传输，数据可以被窃听和篡改
  • HTTPS：加密传输，数据安全

现代互联网的标准：必读是HTTPS。 浏览器会标记HTTP网站为”不安全”。

SSL/TLS证书

HTTPS依赖于SSL证书。它做了三件事：

  1. 加密：数据在传输过程中不可读
  2. 身份验证：确认你访问的网站是真实的
  3. 数据完整性：确保数据没有被篡改

Vercel自动SSL

Vercel的优势之一：自动为你配置SSL证书。

  • 当你绑定域名时，Vercel自动申请并续期SSL证书
  • 整个过程不需要你手动操作
  • 证书永久有效（Vercel自动续期）

你不需要了解太多的SSL细节，只需要知道：

使用Vercel + 自定义域名 = 自动HTTPS。用户看到的网址是 https://myapp.com，前面有小锁标志。

八、部署检查清单

上线前，用这个清单确认一切就绪：

功能检查

  • 所有核心功能在本地正常跑
  • 没有未修复的严重bug
  • 错误状态有用户友好的提示
  • 移动端页面正常显示

配置检查

  • 环境变量全部正确配置
  • 数据库连接正常
  • API密钥已更新为生产环境密钥
  • 第三方服务已切换到生产环境

域名检查

  • 域名已购买
  • DNS解析生效
  • SSL证书已配置
  • 域名可以在浏览器打开

监控检查

  • 部署后全流程测试一遍
  • 检查控制台是否有报错
  • 确认数据能正常写入数据库
  • 确认用户能正常注册/登录

本课小结

部署上线是产品从”你的电脑”走向”全世界”的最后一步。你今天学的流程——构建、部署、域名、SSL——在任何一个Web项目中都会用到。

用Vercel部署，是你目前最省心的选择：免费、自动SSL、自动部署、和Next.js完美配合。

产品只有上线了，才算真正开始。

课后练习

  1. 将你的项目推送到GitHub，用Vercel部署
  2. 配置自定义域名（可以先用免费的 .vercel.app 域名）
  3. 在Vercel中配置数据库和API密钥等环境变量
  4. 部署成功后，在手机上访问你的产品，检查移动端显示是否正常

Graph View