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

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

published_date
最新编辑 2024年09月08日
slug
详细讲解vercel及部署流程
tags
Website
Vercel

详细介绍

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

主要特点

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

适用场景

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

部署流程

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

界面设置

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

总结

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

系列文章

✔️
01.【个人网站】如何使用Notion作为数据库进行全栈开发
✔️
02.【个人网站】如何在Next中集成Notion数据库
✔️
03.【个人网站】如何做网站自定义页面 URL 映射
✔️
04.【个人网站】如何使用Vercel部署网站
✔️
05.【个人网站】基于i18n在Next项目中搭建国际化网站
✔️
06.【个人网站】使用Mailchimp做网站邮件订阅功能
 

About

My desire to practice my skills and share my acquired knowledge fuels my endeavors.

Contact Me : znjessie858@gmail.com

Subscribe

Subscribe to receive notifications of my latest posts and unsubscribe at any time!