部署至 Vercel

Vercel 是一个定位在部署前端应用的云端平台，除了 Next.js 以外，也支援了现今许多常见的前端框架，例如 Nuxt.js、Svelte、Angular 等，而且也可以用来部署静态页面，例如 Gatsby.js、Hugo 等。

将部署同步 Git 环境

想一起动手的读者，可以直接 clone 这个 repo https://github.com/leochiu-a/next-deploy-test

现今 Vercel 提供了三种 Git 环境的选项，分别是 GitHub、GitLab、Bitbucket，不论 repo 是公有或是私有，都可以透过 Vercel 授权推上至 git 的专案。

在将专案推上至一个 git 的云端环境後，可以在 Vercel 中点击「import」选择该专案的 repo：

开始部署前，有些选项可以设置，像是专案的名称、将部署的专案框架，以及在部署时使用的指令、环境变数等。因为我们使用的专案很单纯，基本上除了专案名称之外，都可以选择不用做任何的变动，就可以点击「Deploy」开始部署 Next.js 的应用程序了。

因为是一个简单的应用，所以部署到 Vercel 上的速度非常地块，仅仅只需要 1 分钟以内就可以完成部署，在第一次部署体验上算是相当不错。

笔者很久没有开新的 GitHub 专案了，这次在部署的时候才发现预设的 branch 已经从 master 变成 main，去年 2020 年的时候有听说这个消息，但後来一直没跟进这个消息後来的结果，现在看到也算是耳目一新。

Vercel 也有跟进这个更名，在专案的部署设定也有提到将 main branch 作为预设 production branch，如果想要修改也可以进入到设定中修改，像是许多旧有的专案仍然还是用 master 做为 production branch，不用担心不能顺利部署的问题。

DPS: Develop, Preview, Ship

在官方文件中还有提到「DPS」这个 Vercel 提出的概念：

• Deploy 指的是在部署至 Vercel 的时候，既有的 server 仍然会继续运行，而在部署成功之後会经由 React Fast Refresh 的优点更新网站。
• Preview 指的是在 git push 後，在每一个 branch，每一个 pull request 都可以部署一个 preview app，Vercel bot 会留下一个已经部署的 url，你的团队就可以即时的讨论刚才的修改。
• Ship 的概念其实就是 CI/CD，在推送至特定的 branch 後，就会即时的触发部署流程。

接下来我们来实验看看，使用已经上面已经部署至 Vercel 的 repo，在这个 repo 中新建立一个 branch，并且推送一个 commit，然後创建 pull request。创建完毕後，在 pull request 的下方可以看到 Vercel 正在为这个 commit 部署一个 preview app。

在部署完之後，Vercel bot 就会在留言中留下已经部署完毕的连结，以及 vercel 中关於这次部署的相关讯息的连结，在 review PR 的人就可以透过这个连结即时地浏览修改的部分，能够减少需要将 remote branch 拉下来至本地端运行的过程，能够增加团队协作的效率。

顺带一提，现在关於 preview 的方式越来越方便，GitHub 在近期也推出了 codespace 的服务，可以直接在 GitHub 上面用 vscode review PR，甚至开 preview app，真的是非常酷 XD

除了技术面之外

除了技术面之外，顺带一提 Vercel 这家公司，它成立於 2015 年，目前公司的募资进度已经到了 C 轮，在 C 轮总共募资了 102 Ｍ 美金，相当於 29 亿台币左右，总募资金额有 163M 美金，Vercel 的未来是非常值得期待的。

常见部署网页应用在 AWS、GCP、Azure 上，现今又多了一种选择，如果未来有单纯部署前端应用的需求，也许可以考虑部署在 Vercel 上。

Reference

• https://nextjs.org/docs/deployment
• https://techcrunch.com/2021/06/23/vercel-raises-102m-series-c-for-its-next-js-based-front-end-development-platform/
• https://www.crunchbase.com/organization/vercel
• https://www.git-tower.com/learn/git/faq/git-rename-master-to-main/
• https://github.com/features/codespaces