Vercelは2015年にリリースされたNext.js及びReactに最適化されたホスティングサービスです。バックエンドとSSRを備えるNext.jsで作ったアプリをデプロイしようとすると、Herokuやfirebaseでは特別な設定を要し、正常に動かすのはやや手間です。場合によっては、まっさらなLinuxサーバを借りて設定をした方が早いかもしれません（なお、問題なく動きます）。VercelはNext.jsを作ったチームによって作られており、Next.jsのアプリをデプロイするのに特別な設定はいりません。本稿では既にローカルの環境にNext.js又はReactで作成したWebアプリがあるとして、それをVercelにデプロイする方法をご紹介します。環境変数の設定方法についても解説いたします。
プロジェクトのGitHubへのプッシュ
VercelはGithubとの連携が非常にスムーズで、原則GitHubを経由してデプロイ及び更新をします。よって、Webアプリが完成したらまずはGitHubのレポジトリーにあげる（プッシュする）必要があります。GitHubでの新規レポジトリーの作成方法は私の記事（もとの英語版、google翻訳版）をご覧ください。なお、レポジトリーは非公開（private）で問題ございません。
Vercelでのアカウント作成
VercelではEmailでアカウントを作成することもできますが、GitHubと連携させてアカウントを作成することをお勧めいたします。ホームページを訪れ右上のSignupを押すと下記の画面が現れますので、「Continue with GitHub」を選んでください。
無事ログインできると、下記のような画面が現れます。私は既にannuityというプロジェクトが1つありますが、初めてログインされる場合は中央には何もないと思います。右上のNew Projectを押します。
New Projectを押すと、最近のgihubのレポジトリーが日付の新しい順で一覧表示されると思います。目的のレポジトリーで青い「import」の部分をクリックします。なお、Nextで作成されたものはロゴの部分にNextのマークがあります。
Vercelでのプロジェクトの設定
Project Nameとあるところは、任意のプロジェクト名を記載できますが（yoheiko-spotifyは例です）、このプロジェクト名が原則そのままドメイン名となります。「https://プロジェクト名.vercel.app」という具合です。但し、既にこのURLが使われている場合はプロジェクト名の後ろにランダムな文字列を付与されてしまいます。なお、Vercelのプロジェクト名に使用できる文字は英数字とハイフンのみです。
Framework Presetとあるところは、Next.jsを選択してください。なおReactの場合は、ここでcreate-react-appを選択することでデプロイが可能です。Root Directoryの部分ではGitHub上のRootディレクトリーがデフォルト値になっていますが、ここで異なる階層をrootに選ぶこともできます。環境変数がない方は、このまま下段のDeployを押して押せばデプロイされます。環境変数がある方は次のセクションを、ない方はその先の「ビルド中にエラーになった場合」をご覧ください。
Vercelでの環境変数の設定方法
.env.localなどで環境変数がある場合は、上記のEnvironment Variablesをクリックして、一つ一つ本番環境用に設定します。環境変数の値に、「http://loacalhost:3000」などのローカルのURLがある場合はここで「https://プロジェクト名.vercel.app」置き換えることになります。ランダムな文字列がプロジェクト名の後に挿入された場合でも後から環境変数の編集が可能ですのでご安心ください。下記のように1セット入力を終えたら、右のAddを押して追加していきます。
全ての環境変数の入力を終えたら、Deployをクリックします。
ビルド中にエラーになった場合
なんらかの事情で開発環境で動くものが、ビルドするとエラーを起こすことは少なくありません。エラーが起きた場合は、下記画面上にログが出るので、ローカルの開発環境に戻って同エラーを解消の上、GitHubにプッシュします。GitHubが更新されたらVercelの画面に戻り、下記画面上部のChangeボタンを押すと、更新されたGitHubレポジトリーをもとにもう一度デプロイできます。
デプロイがうまく行くと、下記のようなCongratulations!表示の紙吹雪とともに、アプリのトップ画面が表示されます。下記は私のSpotifyのクローンの画像ですので、皆さんはそれぞれの画像が表示されるはずです。画像の部分をクリックするとデプロイしたアプリが表示されます。また、Go to Dashboardの部分をクリックすると本アプリのダッシュボードが表示され、先ほどの環境変数の変更、独自ドメインの設定など各種設定が可能になります。独自ドメインの設定方法については、私のこちらの記事「Vercelで独自ドメインを設定する方法」をご覧ンください。
アップデート時は、開発環境からGitHubにプッシュするだけで自動で本番環境の更新も実施してくれます。今日も最後まで読んで頂きありがとうございました。
