Github ActionsでAWS CloudFormationスタック（Amplify Console にアプリをデプロイ）をデプロイしてみよう

お布団の中が大好き、新卒エンジニアのハウンです?

先日、韓国人メンバー同士で開催したイベント「Developers.IO Korea Online」で発表セッションを公開しましたことで、日本語でも残しておきたく別の記事として書くことになりました。

参照記事について

本記事の内容は以下のAWS公式ブログからの検証となります。

タイトルには Github Actions から AWS CloudFormation スタックをデプロイするとしか書かれてないので、スタックの中身って何なんだと思ってしまうところですがご安心を?　記事を読んでみると React アプリを AWS Amplify Console にデプロイするスタックだということがわかります。

始めての方でも2-30分でサクッとできちゃうくらい、参照リンク先のレポジトリにほぼ用意されてます。ぜひ試してみてください。

テンプレートから新しいレポジトリの作成

まずはAWS CloudFormation Action for GitHub Actions React Starter のテンプレートページを見てみましょう。

中身を見ると、ワークフローとスタックのyamlやReactアプリのソースコードが既に用意されていることが確認できます。このまま新しくレポジトリを作成してコピーしてみます。「Use the template」をクリックして次のページに進みます。

レポジトリと名前とパブリックレポジトリかプライベートレポジトリのどちらで作成するかを決定しましたら、「Create repository from template」を選択してレポジトリを作成します。

すると、レポジトリがテンプレートと同じように作成されたことが確認できます。

レポジトリの中身は?

テンプレートでもレポジトリ中身は確認できたわけですが、ここでワークフローとスタックのyamlがどんな内容で構成されているかについて調べてみました。

ワークフロー（deploy.yaml）

ワークフローはjobsと書かれているジョブというものが本体になります。ここではAmplify Consoleにデプロイするという一つのジョブだけ作成されていることがわかります。

このジョブはまたstepsと書かれている部分で複数のステップに分かれます。このステップ達はワークフローに記述された順番通りに実行されます。

各ステップのnameを見ればわかるように、CLIの使用時に設定するcredentialsの情報や環境設定、スタックでAmplify Consoleにデプロイする際の設定などが書かれています。

スタック（stack.yaml）

皆さんがご存じであろう、CloudFormationのテンプレートそのまんまです。AWSリソース作成のための内容が書かれています。

Amplify用のロール、アプリケーション、ブランチ、ドメインを作成します。ただし、ドメインは元々使用していたドメインに変更する場合でなければ、無視しても構いません。

デプロイする前に

冒頭くらいにも記述した通り、ほぼ完成されているものなのでそのままデプロイできるのではないか？と思えますが、実は少し手作業が必要になります。

もしyamlのコードを読んでみて、何か気づいた点はありませんか？

そうです。アクセストークンやアカウント情報などは皆さん各自が使用している環境のものを使う必要があります。ですので、Githubレポジトリのアクセストークンを作成し、外部からの参照を防ぐためにアカウント情報と共にSecretsに保存します。

そして、もしIAM Roleからの環境にデプロイする場合は、deploy.yamlにAssuming Roleのための値を追加する必要があります。

詳しい内容につきましては、Configure AWS Credentials" Action For GitHub ActionsのAssuming Role に記述されている内容を参照してください。

デプロイ

準備が整いましたら、デプロイするためにActionsというメニューに移動します。

（Assuming Roleのせいで何回か失敗した痕跡があります?）左のDeployという文字を選択すると、「Run workflow」と書かれているボタンが見えます。一度クリックするとブランチとデプロイするリージョンを入力する欄とボタンが表示されます。

ちなみに、これはdeploy.yamlに書かれたコード（on: workflow_dispatch: ）によって表示されるものです。Pushされたら自動的にデプロイした方が楽じゃない？と思える部分ですが、Amplify Consoleは独自のビルドパイプラインを持っていてアプリのソースがPushされると自動的に変更される仕組みになっています。ですので、Pushする度に毎回デプロイを実行する必要はなく、スタックの内容が変更された時のみデプロイを行います。

リージョンはus-east-1がデフォルトとして設定されてますが、皆さんが普段使用しているリージョンに変更しても構いません。

設定が終わりましたら、「Run workflow」ボタンを押してデプロイを実行します。

デプロイした項目をクリックしてみるとログを確認することができます。ワークフローに書かれている通りのステップで実行されてますね。もし、デプロイに失敗してもどの段階で失敗しているか書かれているので、エラー探しも難しくありません。

デプロイが完了しましたら、AWS Management ConsoleにログインしてAWS Amplifyに接続します。

CloudFormationスタックによって作成されたアプリケーションが確認でき、クリックすると真ん中に「Run build」というボタンが表示されているのが見えます。ボタンをクリックしてビルドを実行します。

すると、ビルドパイプラインが実行され、デプロイが完了したらReactデモアプリのページが表示されることが確認できます。

最後に

上記のAWSブログは韓国語や日本語に翻訳されたものがなかったので、実際に試してみてより多くの方に共有したいと思いました。

特にGithub Actionsは今回のCX部研修の課題でも使用する予定となっていて、使いどころがあるのではないかなと勝手に期待しています笑

ただ、今回は研修の課題や資格試験の準備で中々勉強できなかったのが惜しかったです。次回のブログではもっと良質のブログが書けるように頑張りたいです。

今回のブログもどなたのお役に立てれば幸いです✿