はじめに
Kiro CLI(旧Amazon Q Developer CLI)をEC2にインストールして、Vibe Codingで静的ウェブサイトのコンテンツの制作ならびに、デプロイまでを行います。
必要なもの
必要なものを列挙します。
- 楽しむ気持ち
- 準備をいとわない姿勢
- AWS Builder ID
- (当然) AWSアカウント
AWS Builder ID
AWS Builder IDの取得方法は、以下のページを参考にしてください。
参考: Create your AWS Builder ID
取得したらログインしておいてください。すぐ使います。
このIDがあると、AWS Skill BuilderというAWS謹製の学習コンテンツを学べるIDにもなります。無料で学べるコンテンツも充実しているので、持っておいて損はないIDです。ぜひつくりましょう。
AWSアカウント
当然、AWSアカウントは必要になります。すでにお持ちの方はスキップしてください。
参考: AWS アカウント作成の流れ
ハンズオン
ハンズオンの流れを示します。
- EC2インスタンスの作成
- Kiro CLIのAuthentication
- Vibe Coding & Deploy
以下、ひとつひとつをゆっくりと、もう少し詳しく説明します。
1. EC2インスタンスの作成
以下のEC2インスタンスを立ち上げます。
- OS: Ubuntu 24.04
- インスタンスタイプ: t3.medium
- VPC, セキュリティグループ: default
- EBS: GP3 16GB
- IAMインスタンスプロファイルに以下のIAMポリシーを持つIAMロール
- AmazonSSMManagedInstanceCore: セッションマネージャーで接続するため
- AmazonS3FullAccess: 構築するシステムに応じて、広げたり、狭くしてください。後述のプロンプト例でもちょっと広いのかもしれませんが、とりあえず事足りるマネージドな管理ポリシーを使っています
- ユーザーデータは以下をお使いください。Kiro CLIとAWS CLIのインストールをしています
#!/bin/bash
apt-get update -y
# AWS CLI インストール
curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
apt-get install -y unzip
unzip -q awscliv2.zip
./aws/install
rm -rf aws awscliv2.zip
# Kiro CLI インストール
wget https://desktop-release.q.us-east-1.amazonaws.com/latest/kiro-cli.deb
dpkg -i kiro-cli.deb
apt-get install -f -y
rm kiro-cli.deb
CDKのお心得がある方は、 https://github.com/haw/strong-system-dot-com/tree/main/docs/day5/cdk をご覧いただいたほうが通じるかもしれません。
2. Kiro CLIのAuthentication
無事にEC2インスタンスが立ち上がったとします。
2-1. セッションマネージャーで接続
セッションマネージャーで接続をします。
ユーザをubuntuに切り替えます
sudo su - ubuntu
2-2. Kiro CLIのAuthentication
いよいよ本題です。Kiro CLIのAuthenticationをします。
kiro-cli login --use-device-flow
この資料では「Use with Builder ID」で進めます。エンターキーを押します。
そうすると以下のようなURLが表示されますので、AWS Builder IDでログインしているブラウザに貼り付けてアクセスをします。
2-3. Open this URL
あとは迷わず「次へ」「次へ」です。その一足がVibe Codingへと近づいています。
ここまでくれば、画面の案内の通りに、このページは閉じても大丈夫です。
セッションマネージャーの方がどうなっているかというと、Device authorizedされています 
おめでとうございます
準備は整いました。
3. Vibe Coding & Deploy
準備、お疲れさまでした。あとはけっこうあっけないです。kiro-cli chatでチャットを開始します。起動したディレクトリにファイルが作られるので、必要に応じてディレクトリを掘ったりして移動してください。大学生のころのことを思い出して、この記事ではホームディレクトリに全部置きます。
kiro-cli chat
あとは、プロンプトを打ち込んでyを押していけば完成です。
プロンプト例を示します。
「ようこそ Awesome YAMAUCHI のページへ」というタイトルで、自己紹介ページを作成してください。
私の名前は山内修、会社はストロングシステム、住んでいる場所は福岡県飯塚市です。
山と川に囲まれた自然豊かな土地です。
会社の横には https://www.haw.co.jp/wp-content/uploads/2019/06/haw_logo_2019_06.png の写真を掲載してください。
これをバージニア北部リージョンのAmazon S3バケットにindex.htmlとして配置し、
ウェブサイトホスティング機能を有効にして、一般公開してください。
HTML以外にCSSやJSファイルを作成していただいてもかまいません。
バケット名はawesomeに続けて今日の日付を8桁 + ランダムな文字列10桁で設定してください。
サイト訪問者を楽しませるためテトリスを実装してください。
プロンプトはご自由にアレンジしてください。
ノリでyを数回押している間に完成です。
Tips
- プロンプトを打ち込むときに改行したい: Ctl + J です
-
/usageコマンドで、Kiro CLIの残使用量を見ることができます。このプロンプトを一回流して、yを複数回押したとして、だいたい1 credit未満です - 離席などしてセッションマネージャーの接続がきれた。再開したい。そんなときも安心です。さきほどKiro CLIを起動した同じディレクトリで、
kiro-cli chat --resumeです - Kiro CLIのヘルプをみたい:
/helpです - Kiro CLIを終わりたい:
/quitです
完成例
完成例です。テトリスをプレイできます。
さいごに
Kiro CLI(旧Amazon Q Developer CLI)をEC2にインストールして、Vibe Codingで静的ウェブサイトのコンテンツの制作ならびに、デプロイまでを行いました。
みなさまご存知の通り、「テトリス作って」でテトリスができてしまうことが驚きですし、Kiro CLIはまさにAWSの専門家です。
AWSのことはKiro CLIに聞け！
おまけ
> ありがとうございます。いいサイトができました。もっとモダンで刺激的なサイトに作り変えてください。
早速、ノリで変更してもらいました。
モダンで刺激的なサイトになりました！
