Next.jsをvercelにホスティングしてみる
Next.jsの開発会社であるvercelは実はクラウドサービスとしてwebサーバーをホスティングするサービスを持っています。
Next.jsで書いたコードを自動でビルドして、デプロイするための非常に親和性に優れたサービスということで、どんなものなのか使ってみたいと思います。
vercelとは
VercelはCI/CDとWebサーバーが合わさったサービスで、個人利用なら無料で利用できます。
GitHubなどのリポジトリと連携することで手軽にアプリケーションをデプロイすることが可能です。また、CDNが含まれているため高速なページ表示が可能となっています。
vercelを使ってみよう！
まずはこちらから、サインアップは済ませておきます
Githubを連携させるイメージなので、Githubを普段使っていることが前提です
Github レポジトリーの登録
レポジトリーはアカウント配下のすべてのレポジトリーを選択できますし、特定のレポジトリーのみを選択することも可能です。
追加すると、以下のような画面になります。
Vercel上で新しくプロジェクトを作成します。
ビルドとデプロイが成功するとこのようにCongratulations！と表示されます
Vercelのダッシュボードの確認
Vercelには以下のようなダッシュボードが用意されていて、ログが見れたりします。
CI/CDの動作確認
Deploymentsの項目にいくと、Githubからのdeploymentのhistoryを確認することができます。
Github上でMainブランチにMergeすると、自動でVercel側でBuildとDeployが開始されました。
成功するとこのようになります。
まとめ
Webサーバーのホスティングサービスとしては、かなりモダンな仕組みになっていることがわかりました。
特段CI/CDについては追加の設定をしていないのですが、ここまで簡単だとは思いませんでした。これでローカルのVSコードでガリガリと開発する、GitにPush、自動でVercelにデプロイされる、という綺麗な流れができました。
Discussion