vercel 介绍 Vercel 是一款为开发者提供的全套云原生平台,为用户提供无服务器、自动化部署和构建等服务。它具有高度的可扩展性和稳定性,并且易于使用。本文将就如何使用 Vercel 进行网站部署、自定义域名、持续集成/部署以及 Serverless 和 Edge Functions 等方面进行详细的介绍。与之相似的产品 Netfily,如果你想部署私有化,推荐 Coolify
值得注意的是,由于某些原因,目前在国内已经无法直接访问 Vercel.app,需要使用 CNAME 解析来访问你的域名。 因此想要在国内访问,建议不要使用 Vercel 部署了,最好选用 Netlify。
注册账号
进入 Vercel 官网,先去注册一个账号,建议注册一个 Github 账号后,使用 Github 账号来登录 Vercel。
部署网站
进入 Dashboard
点击 New Project 可以从已有的 git repository 中导入,也可以选择一个模板。
点击 Deploy,然后静等网站安装依赖以及部署,稍后将会出现下方页面。
此时网站已经成功搭建完毕了,点击图片即可跳转到 vercel 所提供的二级域名访问。
以上步骤不需要用户输入任何命令,非常简单易懂,即可完成网站的部署。
自定义域名
如果有自己的域名,还可以在 vercel 中进行设置。
- 进入项目的控制台,在 Settings -> Domains 中添加您的域名。
- 在域名服务商处将域名解析到 Vercel 提供的记录值 cname.vercel-dns.com。
- 回到 Vercel 平台,即可看到该记录值已经成功生效。
- 访问您的自定义域名,即可访问您的网站,同时具备更快的访问速度。
自动颁发 SSL 证书
默认状态下,Vercel 将会颁发并自动更新 SSL 证书。(着实方便,不用自己手动去申请证书,配置证书)
持续集成(CI)/持续部署(CD)
To update your Production Deployment, push to the "main" branch.
当主分支有代码被推送,Vercel 将会重新拉取代码,并重新构建、单元测试和部署,构建速度极快。
Serverless
除了部署静态站点之外,Vercel 还支持 Serverless,即可轻松部署后端服务,具有一定限制。
如需了解更多关于 Vercel 部署 Serverless 服务的信息,请参考 这里。
Edge Functions
Vercel 支持 Edge Functions,即可理解为在 Vercel 的 CDN 上运行的函数,执行效率高。该类函数和静态资源一样,都通过 CDN 分发,因此速度非常快。
更多关于 Vercel Edge Functions 的信息,请参考官网介绍:Edge Functions。
Vercel CLI
有时候并不想登录网页,然后新建项目,选择仓库,拉取部署,而是希望直接在项目下输入命令来完成部署。vercel 自然肯定提供相对应的脚手架 CLI 供开发者使用。
安装
npm i -g vercel
在项目根目录中输入
vercel --prod
第一次将进行登录授权,选择对应平台,将会自动打开浏览器完成授权,接着将会确认一些信息,一般默认回车即可,下为执行结果
Vercel CLI 24.2.1
? Set up and deploy “H:\学习\前端\vue\blog”? [Y/n] y
? Which scope do you want to deploy to? draculabo
? Link to existing project? [y/N] n
? What’s your project’s name? blog
? In which directory is your code located? ./
Auto-detected Project Settings :
- Build Command: pnpm build
- Output Directory: build
- Development Command: pnpm start
? Want to override the settings? [y/N] n
🔗 Linked to draculabo/blog (created .vercel and added it to .gitignore)
🔍 Inspect: https://vercel.com/draculabo/blog/6t8Vt8rG3waGVHTKU7ZzJuGc6Hoq [2s]
✅ Production: https://online-tools-phi.vercel.app [copied to clipboard] [2m]
📝 Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).
💡 To change the domain or build command, go to https://vercel.com/draculabo/blog/settings
执行完毕后,将会在根目录创建.vercel 文件夹,其中 project.json 中存放 orgId 和 projectId,下面将会用到。此时在dashboard中也能看到该项目被部署了。
不过这样部署上去的代码,并不会连接 git 仓库,需要到控制台中选择仓库即可。
如果想在 github actions 中使用,则新建一个 steps,设置好对应的变量。
- name: Deploy to Vercel
run: npx vercel --token ${{VERCEL_TOKEN}} --prod
env:
VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
还有一个 VERCEL_TOKEN 需要到 Vercel Settings Tokens 新建一个 Token。
总结
Vercel 是一款值得推荐的全套云原生平台,易于使用,同时拥有高可扩展性和稳定性。无服务器、持续集成/部署等功能让用户的网站建设变得更为简单,如果您正在寻找这样的产品,Vercel 肯定是一个不错的选择。