【デプロイ編】React Application Architecture for Production が勉強になりすぎる

2023-06-17

a year ago

開発環境

今回の記事はReactのベストプラクティスと呼び声の高いbulletproof-reactで有名なAlan氏が2023年1月に公開した著書「React Application Architecture for Production」の紹介です。

ソースコードは公開されているので、こちらを眺めるだけでも学べることはたくさんあると思いますが、個人的に気になる部分を本記事含めいくつかの記事に分けて紹介します。

※上記で記した開発環境のバージョンは実際に動作確認した際に利用したバージョンです。著者で紹介されているバージョンと異なりますのでご了承ください。

今回はVercelでのデプロイについて紹介します。

GithubAcitonsを利用してCI/CDのパイプラインを構築し、自動でテスト、デプロイを行う想定です。

そして、デプロイ前にテストを実行し、テストがパスすればデプロイするという流れになります。

この流れを構築する上でいくつか設定する必要があるので、そのポイントを3つ紹介します。

VercelでGithubの対象レポジトリを連携する設定を行うと、以降のデプロイはpushするたびに自動的に実行されます。

これは非常に便利ですが、今回のようにデプロイ前にテストを実行したいケースでは、この設定を解除する必要があります。

そのために、プロジェクトルートにvercel.jsonを配置します。

{
  "version": 2,
  "github": {
    "enabled": false
  }
}

vercel.json

自動連携を①で解除した後に、手動で連携を行います。

連携にはVercel CLIを利用します。

$ npx vercel

一連の質問に回答していきながら設定していきます。

※設定の詳細はReact Application Architecture for Productionの中で紹介されているので、ここでは割愛します。また、環境変数の設定など他にも設定が必要な箇所がありますが、同じく割愛します。

GithubActionsでは以下の設定をするとジョブ実行前に依存する処理が正常に完了するまで待機させることができます。

deploy:
  name: Deploy To Vercel
  runs-on: ubuntu-latest
  needs: [code-checks, e2e] # ここで依存するジョブを設定する

今回の例ではcode-checks, e2eという他のジョブを定義し、それらが正常に完了した場合、deployジョブが実行されます。

VercelとGithubActionsを利用する際に、テストを組み込んだパイプラインの流れを紹介しました。

Vercelは2023年5月にVercel Storageを発表し、よりフルスタックに、機能が充実してきています。

Nextjsの開発元がVercelであるので、今後も話題の中心にいる？と思うので、個人開発レベルで触れるならどんどん触って試していきたいですね。