webエンジニアの風速です。
今回はVercelにNext.jsのアプリをデプロイしてみました。
VercelとはNext.jsの開発元のVercel社が提供している、主にフロントエンドのプロジェクトをホスティングできるPaaSです。
いろいろ機能はありますが今回はデプロイまで。
始める前に
Vercelのアカウントが必要なので作成しておきます。
Vercelを使い始めるには、ProjectsとDeploymentsを理解しておくと役立つそうなので以下に書いておきます。
Projects
ProjectsとはVercelにデプロイしたアプリケーションのことです。1つのリポジトリ（例えばmonorepo）に複数のProjectsを接続し、Projectsごとに複数のデプロイを行うことができます。ダッシュボードですべてのProjectsを表示し、プロジェクトダッシュボードから設定を行うことができます。
Deployments
Deploymentsは、プロジェクトのビルドが成功した結果です。Deploymentsは、既存のプロジェクトやテンプレートをインポートしたとき、または接続されているインテグレーションを通じて Git コミットをプッシュしたとき、または CLI から vercel deploy を使用したときにトリガーされます。すべてのDeploymentsは自動的に URL を生成します。
やってみた
ダッシュボードの右上からNew Projectすると色々選択できます。Githubからデプロイできそうなので、今回はそれを試してみようと思います。
Githubに接続し、リポジトリのアクセスは全部と、選択があったのでNext.jsをさわってみたやつをリポジトリにあげたので、そちらをデプロイします。
権限を与えるとダッシュボードから選択できました。
Importを押すとデプロイの設定画面に遷移します。
一旦デフォルトで、下に行きDeployを押すとビルドが始まり、デプロイされます。
デプロイされました。
テキストをhome -> Dashboardにしてdevelopブランチにプッシュすると、developブランチがデプロイされます。
変更が反映されています。
developをmainにマージすると、mainが再度デプロイされて、デプロイごとに見れます。
- 初回のデプロイ
- 最新のデプロイ
感想
今回はデプロイまでをwebでぽちぽちしただけですが、cliからもできます。
ブランチやデプロイごとに環境（おそらくこれがDeployments？）が用意され、CI/CDまで簡単にできてしまうのはすごいですね...
ほかにもモノレポの場合にフロントエンドのみデプロイなど、細かな設定が色々できるみたいです。
今回は触れられなかったのですが、developの環境にあるツールバーにもいつか書けたらと...
参考