C24. 在 Netlify 上部署项目

4.1. ⭐ 注册 Netlify 账号

Netlify 是一个支持静态网站和 Jamstack 应用的托管平台，提供免费的 HTTPS 和自动化部署。注册账号是部署的第一步。

📝 注册步骤：

1. 访问官网： 打开 https://app.netlify.com → 点击「Sign Up」。
2. 选择登录方式：
   • GitHub/GitLab：点击对应图标授权登录（推荐，方便后续集成仓库）。
   • 邮箱密码：填写邮箱和密码 → 验证邮箱完成注册。
3. 创建团队和站点： 首次登录会引导创建 Team（团队）和初始站点，可跳过直接进入控制台。

WARNING

• GitHub 登录需授权 Netlify 访问你的仓库权限。
• 免费用户可托管多个站点，但每月构建次数有限制。

4.2. 🌟 通过网页端手动上传第一个项目

适用于已生成静态文件的项目（如 React/Vue 的 dist 文件夹）。

📥 部署步骤：

1. 创建新站点： 点击「New site from file」→ 选择「Manual deploy」→ 点击页面拖拽文件或浏览本地文件。
2. 上传构建文件： 选择项目中的 dist 或 public 目录（例如 React 项目的 dist 文件夹）。
3. 配置站点名称： 部署完成后，点击「Site settings」→ 「Change site name」→ 输入自定义名称（如 my-portfolio）。
4. 访问站点： 在站点概览页面找到 URL（格式为 https://<site-name>.netlify.app）。

TIP

• 默认会分配随机子域名，可随时修改。
• 确保上传的是构建后的文件，而非源代码。

示例项目准备：

# 在本地执行构建命令
npm run build     # 生成 dist 文件夹

4.3. ⭐ 通过 Netlify CLI 上传本地项目

CLI（命令行工具）提供自动化部署能力，适合开发者快速迭代。

🚀 安装与使用：

1. 安装 CLI 工具：

   npm install netlify-cli -g

2. 登录 Netlify：

   netlify login    # 通过浏览器完成 OAuth 授权

3. 绑定项目目录： 进入项目根目录 → 执行：

   netlify link     # 选择要绑定的站点（或新建站点）

4. 部署命令：

   netlify deploy   # 默认上传当前目录内容

   • 参数说明：
     • --prod：标记为生产环境部署。
     • --dir dist：指定上传目录（如 dist）。

WARNING

• 首次部署需配置 netlify.toml 文件（可选，但推荐）。
• 需确保当前目录已绑定到 Netlify 站点。

4.4. 🌟 通过 GitHub 部署项目

结合 Git 仓库实现自动化部署，代码提交后自动触发构建。

🔄 部署流程：

1. 创建新站点： 点击「New site from Git」→ 选择 GitHub → 授权访问仓库。
2. 选择仓库与分支：
   • 选择目标仓库 → 选择默认分支（如 main 或 master）。
3. 配置构建设置：
   • Build command：输入构建命令（如 npm run build）。
   • Publish directory：填写构建输出目录（如 dist）。
   • Environment variables（可选）：添加敏感信息（如 API 密钥）。
4. 部署与监控： 点击「Deploy site」→ 查看构建日志 → 成功后获取站点 URL。

配置示例（netlify.toml）

[build]
  command = "npm run build"
  publish = "dist"

[context.production.environment]
  API_KEY = "your-secret-key"  # 环境变量示例

知识回顾

1. 账号注册： 通过 GitHub 或邮箱注册 → 授权仓库权限 → 创建团队/站点。
2. 手动部署： 上传 dist 或 public 文件夹 → 自定义站点名称 → 获取随机子域名。
3. CLI 工具： 安装 netlify-cli → 绑定项目 → 使用 netlify deploy 快速部署。
4. GitHub 集成：
   • 连接仓库 → 配置构建命令和发布目录 → 自动化部署。
   • 支持环境变量和 CI/CD 流水线。
5. 注意事项：
   • 静态文件需提前构建，避免上传源代码。
   • 免费用户需注意构建次数限制（每月 100 次左右）。
   • 自定义域名需配置 DNS 的 CNAME 记录。

课后练习

1. （单选）Netlify 免费用户每月默认构建次数上限是？

   • A. 50 次
   • B. 100 次
   • C. 无限制
   • D. 200 次

2. （填空）在 GitHub 部署配置中，设置发布目录的字段名是 ______。

3. （操作题）尝试完成以下步骤：

   1. 创建一个空文件夹 test-app → 初始化 Git 仓库。
   2. 通过 Netlify CLI 绑定并部署该文件夹（需提前构建？为什么？）。
   3. 访问生成的随机子域名 URL。

4. （思考题）为什么 Netlify 要求上传的是构建后的文件夹（如 dist）而非源代码？

5. （实践题）将你的 React 项目通过 GitHub 集成部署到 Netlify，要求：

   • 配置 netlify.toml 文件。
   • 设置环境变量 API_URL 为 https://api.example.com。
   • 部署成功后截图提交。