More than 1 year has passed since last update.

CodeCatalyst Blueprintの"Single-page application"をやってみた

Last updated at 2023-09-12Posted at 2023-09-12

はじめに

CodeCatalystば2022年のre:Inventで発表された、｢開発ツールをオールインワンで提供する｣サービスです
CodeCatalystにはBlueprintという機能があり、様々なユースケースに沿ったサンプルプロジェクトを用意してくれています
- Amazon CodeCatalyst Blueprints
今回はその中の"Single-page application"(いわゆるSAP)に関するBlueprintを試しつつ、ちょっとだけ詳しめにレポートしてみようと思います

お断り

CodeCatalystは、AWSアカウントの他にBuilder IDというものを発行する必要があります
その発行手順や初期設定云々については省略させてください
- 他の方が丁寧に解説してくださっていますのでそちらをご参照ください･･･
- (記事書きながら作ればよかったと後悔しています)

Blueprintを用いたプロジェクトの作成してみよう

CodeCatalystのコンソール内のSpaceに移動します
※CodeCatalystはSpaceの中にProjectを作成していきます
画面右の｢Create Project｣を押下します
"Start with a blueprint"の中の"Single-page application"を選択し、｢Next｣を押下します
※画面右にて、テーマに応じた説明資料があるのでここで詳細が確認できます
プロジェクト名やデプロイ先のアカウント、デプロイに使用するIAMロール等の設定画面が表示されます
上記、画面右の｢View code｣を押下すると、プロジェクトのソースを確認できます
※CDKや、ワークフローというCodeCatalystのCI/CDの設定ファイル、ソースコード等が詰まっています
上記、画面右の｢View workflow｣を押下すると、ワークフローの設定を視覚的に確認できます


※↑YAMLを確認してみると、こちらはmainへのPULL REQUESTをトリガーとして起動するテスト用ワークフローということがわかります


※同じく↑YAMLを確認してみると、こちらはmainへのPUSHをトリガーとして起動するデプロイ用ワークフローということがわかります
画面左、下部の設定項目ではBlueprintの内容に応じた設定項目があり、例えば"Hosting"がデフォルトの｢Amplify Hosting｣の状態ではCDKのソース内もAmplifyのリソースをデプロイしようとしますが･･･

｢CloudFront + S3｣にすると、動的にソース側が変化します
残りのデプロイ先のリージョン、リポジトリ名、スタック名は任意に設定してください。

※なお、2023年9月現在デプロイ先のリージョンは以下の4つに限られています(東京、大阪も早く追加してほしいです･･･)
すべて入力したら｢Create project｣を押下、するとプロジェクトが作成されます
画面左、"CI/CD"の｢Workflows｣を見てみるとPUSHをトリガーとして起動するデプロイ用ワークフローが実行されていることがわかります



※あくまで参考ですが、完了まで約8分半でした

デプロイを確認してみよう

AWSマネジメントコンソールを開き、CloudFormationを確認するとちゃんとデプロイされていることがわかります
スタックの出力を確認すると、デプロイされたSAPのURLがありますので押下します
Reactのサンプル画面が表示されました！

まとめ

いかがでしょうか、ここまで全体で何分かかりましたか？
ただデプロイするだけまだしも、CodeCatalystにかかればIaCやCI/CDも含めたプロジェクトをこんなにも爆速で手にすることができます！
CodeCatalystはエンジニアの味方！！
(今後他のBlueprintも試してレポート上げていきたい！目指せCodeCatalystおじさん)

おまけ1 PULL REQUESTで起動するテスト用をワークフローあえて失敗させてみよう

※このテストコードをあえて失敗するように変更して挙動を確認していく

必要はないものの、それっぽく、issueを作成してみる(任意です)

※チーム開発の際は"Assignees"にて誰に紐付けるかまでこちらで設定可能
次に、ブランチを作成する
作成したブランチにて、テストコードを編集する
※お作法としてコンソール上から編集はするべきではないとは思うますが今回はデモのためご了承ください
mainブランチに対してプルリクエストを出す


※画面右上にて、Issueと紐づけすることが可能
紐づけているメールアドレス宛にプルリクエストの通知メールが来ます
mainブランチにプルリクエストを出したことにより、ソースブランチ側でPULL REQUESTをトリガーとするテスト用ワークフローが実行される
※↓手違いでスクショをミスしてしまったため、無関係な2回目の実行部分を黒線で消しています
ワークフローのログを確認すると、意図した箇所で失敗していることがわかります