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

# はじめに

- CodeCatalystば2022年のre:Inventで発表された、｢開発ツールをオールインワンで提供する｣サービスです
- CodeCatalystにはBlueprintという機能があり、様々なユースケースに沿ったサンプルプロジェクトを用意してくれています
    - [Amazon CodeCatalyst Blueprints](https://codecatalyst.aws/explore/blueprints)
- 今回はその中の"Single-page application"(いわゆるSAP)に関するBlueprintを試しつつ、ちょっとだけ詳しめにレポートしてみようと思います
![スクリーンショット 2023-09-12 23.50.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/cdd8611c-82b4-6714-f47e-bd3af3cfaa1b.png)

# お断り

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

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

1. CodeCatalystのコンソール内のSpaceに移動します
※CodeCatalystはSpaceの中にProjectを作成していきます
![スクリーンショット 2023-09-12 21.56.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/646d45c9-c55f-025a-607c-d5a5d6b4b23f.png)
1. 画面右の｢Create Project｣を押下します
![スクリーンショット 2023-09-12 21.03.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/6f06d774-e7e3-9cb5-a1a8-d9832f4fbed8.png)
1. "Start with a blueprint"の中の"Single-page application"を選択し、｢Next｣を押下します
※画面右にて、テーマに応じた説明資料があるのでここで詳細が確認できます
![スクリーンショット 2023-09-12 21.04.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/dbab6724-00a8-0c16-d5e6-286f255117ee.png)
1. プロジェクト名やデプロイ先のアカウント、デプロイに使用するIAMロール等の設定画面が表示されます
![スクリーンショット 2023-09-12 21.06.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/59c8696f-a5b5-b3d1-dfa7-62a55f701d22.png)
1. 上記、画面右の｢View code｣を押下すると、プロジェクトのソースを確認できます
※CDKや、ワークフローというCodeCatalystのCI/CDの設定ファイル、ソースコード等が詰まっています
![スクリーンショット 2023-09-12 21.07.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/35b24e1d-a917-9806-e7cf-f16179273616.png)
1. 上記、画面右の｢View workflow｣を押下すると、ワークフローの設定を視覚的に確認できます
![スクリーンショット 2023-09-12 21.08.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/037c2e13-36b7-c413-64a4-e0100e40020f.png)
![スクリーンショット 2023-09-12 22.15.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/69c6d944-8ac2-e75b-4ea1-0de5ce4baad9.png)
※↑YAMLを確認してみると、こちらはmainへのPULL REQUESTをトリガーとして起動するテスト用ワークフローということがわかります
![スクリーンショット 2023-09-12 21.10.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/74c843d8-7f21-1051-f7dd-fa2de5016df9.png)
![スクリーンショット 2023-09-12 22.14.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/25d0eec0-26e0-94d2-a9f3-6a7303b9b310.png)
※同じく↑YAMLを確認してみると、こちらはmainへのPUSHをトリガーとして起動するデプロイ用ワークフローということがわかります
1. 画面左、下部の設定項目ではBlueprintの内容に応じた設定項目があり、例えば"Hosting"がデフォルトの｢Amplify Hosting｣の状態ではCDKのソース内もAmplifyのリソースをデプロイしようとしますが･･･
![スクリーンショット 2023-09-12 21.13.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/be449117-1837-6557-83d1-78df482f2340.png)
｢CloudFront + S3｣にすると、動的にソース側が変化します
![スクリーンショット 2023-09-12 21.17.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/dfe00963-4da2-8350-3691-b147c01fd052.png)
1. 残りのデプロイ先のリージョン、リポジトリ名、スタック名は任意に設定してください。
![スクリーンショット 2023-09-12 21.40.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/4df5c0ff-955a-f8aa-5b56-b6c56c592d4a.png)
※なお、2023年9月現在デプロイ先のリージョンは以下の4つに限られています(東京、大阪も早く追加してほしいです･･･)
![スクリーンショット 2023-09-12 21.18.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/fd3a21f4-89be-a4a9-356f-a0b72bded992.png)
1. すべて入力したら｢Create project｣を押下、するとプロジェクトが作成されます
![スクリーンショット 2023-09-12 21.20.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/32c56421-6c24-3301-7358-bec4ce5b93d0.png)
![スクリーンショット 2023-09-12 21.21.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/4d544830-2217-54bc-a301-2100d3e66996.png)
1. 画面左、"CI/CD"の｢Workflows｣を見てみるとPUSHをトリガーとして起動するデプロイ用ワークフローが実行されていることがわかります
![スクリーンショット 2023-09-12 21.22.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/7230dd40-0bb4-1285-d541-e74946bae9d9.png)
![スクリーンショット 2023-09-12 21.23.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/7dccc899-391d-8939-45b0-860a7da960b9.png)
![スクリーンショット 2023-09-12 22.33.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/33b0647e-aad4-39d9-7390-7fdf8f476701.png)
※あくまで参考ですが、完了まで約8分半でした

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

1. AWSマネジメントコンソールを開き、CloudFormationを確認するとちゃんとデプロイされていることがわかります
![スクリーンショット 2023-09-12 22.36.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/7a4b3999-479e-95d8-11b2-420646ccd386.png)
1. スタックの出力を確認すると、デプロイされたSAPのURLがありますので押下します
![スクリーンショット 2023-09-12 22.39.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/0bb62c6f-bbc5-2871-1317-52ab089321e7.png)
1. Reactのサンプル画面が表示されました！
![スクリーンショット 2023-09-12 22.39.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/8a8ead2c-0128-c2e9-87ea-b8b5e739bf1c.png)

# まとめ

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

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

![スクリーンショット 2023-09-12 22.53.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/b7fd511a-2596-c939-0aa7-09bae7bbd16e.png)
※このテストコードをあえて失敗するように変更して挙動を確認していく

1. 必要はないものの、それっぽく、issueを作成してみる(任意です)
![スクリーンショット 2023-09-12 22.55.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/4ac0fbbc-a54b-7e40-906a-a92cd082800e.png)
![スクリーンショット 2023-09-12 22.56.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/d4148d31-5875-a467-0269-f0fcccf4e90c.png)
![スクリーンショット 2023-09-12 22.57.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/ce352473-148d-aae8-9663-0d72faf26dd9.png)
※チーム開発の際は"Assignees"にて誰に紐付けるかまでこちらで設定可能
![スクリーンショット 2023-09-12 22.57.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/53397785-d036-9fd0-e88b-4674cf78cdd4.png)
![スクリーンショット 2023-09-12 22.58.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/264c0d18-27a3-fb1f-c3d9-143627d18bf5.png)
1. 次に、ブランチを作成する
![スクリーンショット 2023-09-12 22.58.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/441f4e7c-bf14-f768-15f9-0109c66bca2a.png)
![スクリーンショット 2023-09-12 23.02.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/d9ae0e62-578e-f354-e0c9-6fd8ee65bf4c.png)
![スクリーンショット 2023-09-12 23.02.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/c6d6f41d-0950-e9c7-1102-ca3bd5552030.png)
1. 作成したブランチにて、テストコードを編集する
※お作法としてコンソール上から編集はするべきではないとは思うますが今回はデモのためご了承ください
![スクリーンショット 2023-09-12 23.04.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/3b09bbc2-1386-fba7-ad4f-956c02875804.png)
![スクリーンショット 2023-09-12 23.05.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/98f678b5-85f4-2ed8-4815-86e035490b18.png)
![スクリーンショット 2023-09-12 23.05.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/bb0c1c87-8a1b-ae0e-5c40-c01111266544.png)
1. mainブランチに対してプルリクエストを出す
![スクリーンショット 2023-09-12 23.08.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/b94c8a13-746c-877f-b16d-e31e6429321f.png)
![スクリーンショット 2023-09-12 23.09.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/40b7a74a-4529-4f4c-f16a-0901476a5bb5.png)
※画面右上にて、Issueと紐づけすることが可能
![スクリーンショット 2023-09-12 23.09.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/2c960a8a-fe72-d295-ff0b-0d39130d80ff.png)
1. 紐づけているメールアドレス宛にプルリクエストの通知メールが来ます
![スクリーンショット 2023-09-12 23.11.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/aee36865-a385-daf1-00e4-557348eaf065.png)
1. mainブランチにプルリクエストを出したことにより、ソースブランチ側でPULL REQUESTをトリガーとするテスト用ワークフローが実行される
※↓手違いでスクショをミスしてしまったため、無関係な2回目の実行部分を黒線で消しています
![スクリーンショット 2023-09-12 23.16.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/f217837b-f47d-2e01-00df-0bd358f662a6.png)
1. ワークフローのログを確認すると、意図した箇所で失敗していることがわかります
![スクリーンショット 2023-09-12 23.17.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/d2738515-7920-53c6-e19b-bf638d360a78.png)

# おまけ2 プロジェクトとスタックの削除

※私自身削除するのは初めて知ったのですが、CodeCatalyst上でプロジェクトを削除しても、スタックは存続するので注意してください

1. "Project setting"の画面下部の｢Delete project｣を押下する
![スクリーンショット 2023-09-12 23.52.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/dc2da469-476d-91dc-a68a-76f53f49e574.png)
1. "delete"を入力し、｢Delete project｣を押下する
![スクリーンショット 2023-09-12 23.52.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/f2ca5afa-ed86-15f2-f5dd-2c98a5940374.png)
1. CloudFormtionの画面に移動して画面右上｢削除｣を押下する
![スクリーンショット 2023-09-12 23.55.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1079261/208cf0cd-e1e2-afe3-4057-cff729ecdf1b.png)
※(追記)URLが写っちゃってますが、削除済みなのでそのままにしておきます
1. 該当のスタックが"DELETE_COMPLETE"になったことを確認する