【React】GitHubActionsでS3へのデプロイを自動化する

React

 

GitHubActionsを使用してReactアプリをS3へ自動デプロイしてみたいと思います。

 

構築の流れ

 

  1. AWSでOIDCを作成する
  2. 対象のリポジトリでGitHubActionsのワークフローを定義する
  3. 動作確認

 

AWSでOIDCを作成

 

GitHubActions→AWSへアクセスできるよう下記記事を参考にOIDCを作成します

 

・AWSコンソールで作成する方

 

・Terraformで作成する方

 

 

OIDCが使用するロールのポリシーでs3:PutObjectを許可してください

私が使っているポリシーを一例として載せておきます

 

<Reactアプリのアップロード先となるS3バケット名>
は、自分の使用しているバケット名に変更してください

 

ワークフローを定義する

PR作成時に動作するワークフロー

 

ワークフローを定義しているYAMLファイル

 

コード解説

 

まずは、いつ実行されるワークフローか定義します

CIのほうはmainブランチへのマージリクエストを作成した際に実行するよう定義。

 

実行する環境をUbuntuに指定します

 

stepsにワークフローを定義していきます

まずは、リポジトリのチェックアウトとNode.jsをインストールします

 

毎回、依存関係をインストールすると時間かかるので、node_mpodulesをキャッシュしておきます

 

次に依存関係をインストールします

npm ci をつかうと、package-lock.jsonだけをみてインストールするため、
npm install よりも時間を短縮できます

 

今回はテストのみ実行します。

他にもフォーマットやバリデーションなどを行ってもいいと思います。

 

mainブランチへマージしたときに動作するワークフロー

 

ワークフローを定義しているYAMLファイル

 

コード解説

 

CDのほうはmainブランチにpushされたときに実行されるようにします

Pull Requestをマージしたときだけでなく、
git push origin main でプッシュした際にも実行されるのでご注意ください!

 

envに今回使用するOIDCのロールを指定します

 

GitHubのIDトークンの取得とリポジトリへのアクセスを許可しておきます

 

stepsでCIの時と違うのはビルドしてS3にアップロードするところぐらいです。

S3にアップロードするためにAWSへアクセスするときに先ほどのOIDCのロールを指定します。

 

 

動作確認

ワークフローをリモートブランチにpush

 

testブランチを作成し、ワークフローをコミット、プッシュしていきます

 

PRを作成

 

pushできたら、GitHubへアクセスしPRを作成します。

pushしたリポジトリの画面に行くと↓の画像の赤枠のPR作るボタンを押下します

 

 

PR作成画面に遷移しますので、「Create pull request」を押下しPRを作成します。

 

 

PRの詳細画面に遷移し、PR作成時に動作するワークフローの実行結果を確認します。

青枠内のようにチェックが入っていればGitHubActionsは成功しています。

詳細な実行結果は Hide all checks > Details をクリックしてみることができます。

 

 

ワークフロー内の1つ1つの処理の実行結果を見ることができます

 

 

 

mainブランチへマージ

 

PR詳細画面に戻り、マージしていきますMerge pull request をクリックします。

 

 

Confirm merge をクリックします

 

 

Delete branch でマージ元のブランチは消しておきます。

 

 

GithubActions の実行結果を見に行きます。Actions をクリックします。

 

 

Merge pull request #1 from ***/test というような名前のワークフローがあります

赤枠内が✓となっていれば成功、×となっていたら失敗しています。

また、クリックして詳細画面に遷移できるので、失敗している場合は確認してみてください

 

 

次に、S3を確認してみます

Reactアプリを保存しているS3バケット内の最終更新日時を見てみます。

GitHubActionsを実行した時間になっていればOKです!

 

 

これで、Reactアプリの自動デプロイを設定できました!

 

GitHubActionsででたエラー

 

mainブランチへマージときに実行されるワークフローで出たエラーをまとめます。

同じく遭遇した方はご参考ください

 

OIDCが使用するロールの信頼関係のリポジトリが正しくない

 

 

こんなエラーが出た場合は、
OIDCが使用するロールの信頼関係で設定しているリポジトリが正しいか確認してください

 

下記のように設定されていればOKです

 

ワークフローにpermissionsを設定してない

 

 

これはワークフロー内でpermissionsを設定していないことが原因かもしれません。

↓をワークフローを定義しているのYAMLファイルに追記してください

 

GitHhubActionsのpermissionsってなんだ?と思った方は下記の記事を読んでみてください

 

ポリシーに権限が足りない

 

 

PutObject で Access Denied が出ています。

これは使用しているロールのポリシーでS3のPutObjectを許可しているか確認してください

 

参考記事

 

【GitHub Actions】ReactプロジェクトのCI/CDパイプラインを構築してみた - Qiita
GitHub Actions学習のまとめとして、Create React AppのプロジェクトのCI/CDパイプラインを構築してみました。…
GitHub ActionsでCI/CD環境を構築する ~ReactアプリをFirebaseへデプロイするyamlファイルの書き方~ | Snow System
CI/CD環境はこれまでCircleCIを利用してきたのですが、Reactのversion17でcreate-react-appしたプロジェクトをCircleCIでbuildする...
github actionsで自動テストし、ReactのアプリをApp Engineに自動デプロイする - Qiita
この記事ではgithub actionsを用いて、React+TypeScriptで作成したアプリを自動テストして、App Engineに自動デプロイする方法の一例を紹介します。僕自身、Circle…
https://dev.classmethod.jp/articles/deploy-web-site-with-github-actions
https://dev.classmethod.jp/articles/items-if-error-occures-when-deploying-on-github-actions/

コメント

タイトルとURLをコピーしました