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

本文主要是介绍04.【个人网站】如何使用Vercel部署网站，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

详细介绍

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

主要特点

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

适用场景

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

部署流程

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

界面设置

在这里插入图片描述

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