跳到主要内容

Vercel部署个人博客

· 阅读需 5 分钟
ulli

vercel 介绍 Vercel 是一款为开发者提供的全套云原生平台，为用户提供无服务器、自动化部署和构建等服务。它具有高度的可扩展性和稳定性，并且易于使用。本文将就如何使用 Vercel 进行网站部署、自定义域名、持续集成/部署以及 Serverless 和 Edge Functions 等方面进行详细的介绍。与之相似的产品 Netfily，如果你想部署私有化，推荐 Coolify

DNS 污染

值得注意的是，由于某些原因，目前在国内已经无法直接访问 Vercel.app，需要使用 CNAME 解析来访问你的域名。 因此想要在国内访问，建议不要使用 Vercel 部署了，最好选用 Netlify。

注册账号​

进入 Vercel 官网，先去注册一个账号，建议注册一个 Github 账号后，使用 Github 账号来登录 Vercel。

部署网站​

  1. 进入 Dashboard

  2. 点击 New Project 可以从已有的 git repository 中导入，也可以选择一个模板。

  3. 点击 Deploy，然后静等网站安装依赖以及部署，稍后将会出现下方页面。

此时网站已经成功搭建完毕了，点击图片即可跳转到 vercel 所提供的二级域名访问。

以上步骤不需要用户输入任何命令，非常简单易懂，即可完成网站的部署。

自定义域名​

如果有自己的域名，还可以在 vercel 中进行设置。

  1. 进入项目的控制台，在 Settings -> Domains 中添加您的域名。
  2. 在域名服务商处将域名解析到 Vercel 提供的记录值 cname.vercel-dns.com。
  3. 回到 Vercel 平台，即可看到该记录值已经成功生效。
  4. 访问您的自定义域名，即可访问您的网站，同时具备更快的访问速度。

自动颁发 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 肯定是一个不错的选择。

Loading Comments...