【Kiro CLI】CodeCommit + AmplifyでTODOアプリをデプロイしてみた

はじめに

皆さんこんにちは！パーソル＆サーバーワークスの小泉です。
今回はKiro CLIで作成したTODOアプリを、CodeCommit + Amplify Hostingでデプロイしてみました。

やりたいこと

• Kiro CLIでTODOアプリを作成
• CodeCommitにプッシュ
• Amplify Hostingで自動デプロイ
• パスワード保護を有効にして公開

構築手順

1. CodeCommitリポジトリの作成

まずCodeCommitにリポジトリを作成します。

aws codecommit create-repository \
  --repository-name todo-app \
  --repository-description "Simple TODO app" \
  --region ap-northeast-1

2. TODOアプリを作成してプッシュ

Kiro CLIを使って簡単なTODOアプリのindex.htmlを作成しました。

CodeCommitへプッシュします。

git init
git branch -M main
git remote add origin https://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/todo-app
git add .
git commit -m "Initial commit"
git push origin main

3. Amplify Hostingでデプロイ

Amplifyコンソールから「Amplifyを使用して構築を開始」を選択し、GitプロバイダーとしてCodeCommitを選択します。

リポジトリtodo-appとブランチmainを選択します。

アプリケーションの設定を行います。今回はパスワード保護を有効にし、サービスロールは新規作成を選択しました。

4. デプロイ結果の確認

デプロイが完了すると、AmplifyコンソールからデプロイされたURLにアクセスできます。

パスワード保護を設定したため、アクセス時に認証が求められます。

認証後、TODOアプリが表示されました。ただ最初のデプロイでは文字化けが発生していました。

5. Kiro CLIで改善して再デプロイ

Kiro CLIを使ってUIを改善し、再度プッシュしたところ、Amplifyが自動でビルド・デプロイを実行してくれました。

文字化けも解消され、UIもきれいになりました。

まとめ

CodeCommit + Amplify Hostingを使えば、pushするだけで自動デプロイが実現でき、Kiro CLIとの組み合わせでコード生成からデプロイまでをシームレスに行えることがわかり、世の中どんどん便利になっていくなと感じました。

この記事は私が書きました

小泉 和貴

記事一覧

全国を旅行することを目標に、仕事を頑張っています。