04.【个人网站】如何使用Vercel部署网站

源码：https://github.com/Jessie-jzn/Jessie-Blog.dev
网站：https://www.jessieontheroad.com/

详细介绍

Vercel 是一个前端开发平台，专注于提供简单、快速的部署和管理静态网站和前端框架应用（例如 Next.js）的服务。它通过无缝的持续集成和交付（CI/CD）流程，使开发者可以轻松地将代码从本地推送到生产环境。

主要特点

1. 简单部署：
   • Vercel 提供了简单的一键部署体验，支持从 GitHub、GitLab 和 Bitbucket 仓库导入项目，并且可以自动检测并配置大多数主流框架和静态网站生成器（例如 Next.js、React、Vue.js、Angular、Gatsby 等）。
2. 自动化 CI/CD：
   • 每次推送到 Git 仓库，Vercel 都会自动构建、测试和部署项目，确保网站始终是最新的。这种无缝的持续集成和交付让开发流程更加高效和可靠。
3. 全球 CDN：
   • Vercel 利用全球内容分发网络（CDN）来加速网站加载速度。每个部署都会自动分发到全球 CDN 节点，确保用户可以快速访问网站内容。
4. Preview Deployments：
   • 每次推送或拉取请求（Pull Request）都会生成一个预览部署链接，方便开发团队在实际合并代码之前进行预览和测试。
5. 自定义域名：
   • Vercel 支持自定义域名配置，并且提供免费 SSL 证书。用户可以轻松地将自己拥有的域名绑定到 Vercel 部署的项目上。
6. Serverless Functions：
   • Vercel 支持无服务器函数（Serverless Functions），可以用来处理后端逻辑、API 接口等。无服务器函数可以与前端代码无缝集成，提供动态内容和功能。
7. 分析与监控：
   • Vercel 提供网站性能分析工具，可以监控网站的性能指标，帮助开发者优化网站性能。

适用场景

• 静态网站和博客：适合使用静态网站生成器（如 Hugo、Jekyll）的博客和文档网站。
• 单页应用（SPA）：适合使用前端框架（如 React、Vue.js、Angular）的单页应用。
• 服务器端渲染（SSR）应用：特别适合使用 Next.js 框架的服务器端渲染应用。
• 电子商务网站：适合需要快速响应和高性能的电子商务网站。
• 企业网站：适合企业的宣传和展示网站，提供快速、可靠的访问体验。

部署流程

1. 注册和登录：
   • 访问 Vercel 官网，注册一个账号或使用已有账号登录。
2. 创建新项目：
   • 登录后，点击 Vercel 仪表盘中的 “New Project” 按钮。
   • 选择网站项目的代码仓库（例如 GitHub、GitLab 或 Bitbucket）。如果还没有将代码托管在这些平台上，先将代码上传到其中一个代码托管服务。
3. 导入 Git 仓库：
   • 在 “Import Git Repository” 页面，选择要部署的代码仓库。
   • Vercel 会自动检测并配置项目设置。可以根据需要进行修改。
4. 配置项目：
   • 项目名称：确认或更改项目名称。
   • 框架预设：Vercel 会根据项目自动检测框架（例如 Next.js）。如果没有正确检测，可以手动选择适合的框架。
   • 构建设置：如果需要，可以修改构建命令和输出目录。通常，Vercel 会自动为大多数常见框架配置这些选项。
5. 部署项目：
   • 点击 “Deploy” 按钮，Vercel 将开始构建和部署项目。
   • 部署过程完成后，会看到一个唯一的域名，网站将托管在该域名下。
6. 自定义域名（可选）：
   • 如果你想使用自定义域名，可以在项目设置中配置。
   • 前往 “Domains” 标签页，添加你的自定义域名，并按照指示将域名的 DNS 记录指向 Vercel 提供的地址。
7. 管理和监控：
   • 在 Vercel 仪表盘中，可以查看部署历史、性能分析、日志等，方便管理和监控项目。
8. 持续集成：
   • Vercel 会自动为你设置持续集成（CI）。每次你将代码推送到指定的 Git 分支时，Vercel 会自动重新构建和部署你的网站。

界面设置

1. General（常规设置）：
   • Project Name（项目名称）：可以更改项目的名称。
   • Framework Preset（框架预设）：选择项目使用的前端框架，Vercel 会自动配置相应的构建和部署设置。
   • Root Directory（根目录）：设置项目的根目录，如果你的项目不在仓库的根目录下，可以在这里指定子目录。
2. Domains（域名设置）：
   • Domains（域名）：添加自定义域名，并且 Vercel 会自动配置 HTTPS（SSL 证书）。
   • Redirects（重定向）：设置 URL 重定向规则，将旧域名或特定路径重定向到新的域名或路径。
3. Environment Variables（环境变量）：
   • 添加、编辑和管理环境变量。你可以设置不同环境（如开发、预览和生产）下的环境变量。
4. Git Integration（Git 集成）：
   • Production Branch（生产分支）：指定哪个 Git 分支用于生产部署（通常是 main 或 master）。
   • Deploy Hooks（部署钩子）：创建自定义部署钩子 URL，可以手动触发部署或与其他 CI/CD 工具集成。
5. Integrations（集成）
   • 添加和管理第三方集成工具（如 Sentry、Slack、GitHub Actions）。
6. Deployment Protection（部署保护）
   • 配置部署保护机制，例如需要批准的拉取请求（Pull Request）才能部署到生产环境。
7. Functions（函数设置）
   • Memory Limit（内存限制）：设置无服务器函数的内存限制（单位为 MB）。
   • Timeout（超时）：设置无服务器函数的超时时间（单位为秒）。
   • Regions（区域）：选择无服务器函数的部署区域。
8. Data Cache（数据缓存）
   • 配置数据缓存设置以优化项目的性能。
9. Cron Jobs（定时任务）
   • 配置定时任务，允许你在指定的时间或间隔执行特定的操作或脚本。
10. Security（安全性）
    • 设置项目的访问权限，控制哪些用户或团队成员可以查看或修改项目。
    • Token（令牌）：创建和管理 API 访问令牌，用于与其他服务集成。
11. Advanced（高级设置）
    • Edge Config：管理和配置边缘计算功能。
    • API Routes：管理和配置 API 路由。
    • Build Step：自定义构建步骤和行为。
    • Prioritize Production Builds（优先生产环境构建）：在生产环境构建将优先于预览环境构建。
    • Directory Listing（目录列表）：如果目录中没有索引文件，则显示目录内容。

总结

Vercel 是一个功能强大且易于使用的前端开发平台，特别适合需要频繁部署和更新的前端项目。通过其强大的自动化部署和全球 CDN 加速，开发者可以专注于编写代码，而无需担心部署和性能优化问题。