TwitterFacebookRSS Feed
AWS CloudShell × Claude Code × Amazon Bedrock でWebフロントエンド開発を体験する

AWS CloudShell × Claude Code × Amazon Bedrock でWebフロントエンド開発を体験する

ryudaiです！今回は初心にかえって、「はじめてWebフロントエンド開発をする」人のためのチュートリアルを考えていきます。

前提として

  • すべての作業はAWS上で完結すること
  • すべてのコードはClaude Codeに書いてもらうこと

とし、実施のハードルをなるべく下げることを意識していきます。

※以下、リージョンは「ap-northeast-1」を想定しています。

①リポジトリを用意する: AWS CodeCommit

まず開発を始めるにあたって、Gitは使っていきたいですよね。

最近CodeCommitがGAに復活したということで、積極的に使っていきたいと思います。

リポジトリ名は「front-sample」としています。

②AWS CloudShellを用意する

次に、メインの開発環境であるCloudShellを用意していきます。

CloudShellの画面を開き、「Open ap-northeast-1 environment」をクリックして起動します。

③リポジトリをクローンする

CloudShellが立ち上がったので、先程作成したCodeCommitのリポジトリをクローンしてきます。

CodeCommitの「front-sample」リポジトリの「HTTPS(GRC)」タブを開きます。

この画面の下部「ステップ2」に書いてあるコマンドをCloudShellで実行します。

実行するコマンドは以下の通りです:

# git-remote-codecommitというツールでCodeCommitへの認証を行う
pip install git-remote-codecommit

# クローンする
git clone codecommit::ap-northeast-1://front-sample

また、後ほどコミットの際に必要になってくるので、Gitで使うユーザー名とメールアドレスを設定しておきます。

git config --global user.name "<ここに名前を入れます>"
git config --global user.email "<ここにメールアドレスを入れます>"

④Claude Codeをインストールする

ここでお待ちかねのClaude Codeの登場です！

インストールは公式の手順書通りですが、以下のコマンドを実行します。

curl -fsSL https://claude.ai/install.sh | bash

また、Claude CodeのバックエンドとしてBedrockを使う設定は、(こちらも公式の手順通りですが)以下のコマンドを実行します。

export CLAUDE_CODE_USE_BEDROCK=1

⚠️お使いのAWSアカウントではじめてBedrockのClaudeを使う場合、以下のようなエラーが出ます。

これを解消するには、Bedrockの「モデルカタログ」ページからAnthropicにユースケースを送信する必要があります(1,2分で回答できます)。

回答してから反映されるのに数分かかるので、この間にコーヒーを淹れておきましょう☕

⑤HTMLを作成する

まず、忘れずに

cd front-sample

を実行しておきましょう。

そして「claude」コマンドを実行してカラーテーマの設定などをしていきます。

claude

準備が整うと以下のような画面になります。

ここで、HTMLを作成しgit pushまでを行うようにプロンプトに入力してみます。

HTMLファイル(index.html)を新しく作成してください。
内容は現在時刻を表示するデジタル時計とします。
モダンで落ち着いたテーマで作成してください。
作業後にgit pushまで実施してください。

私の環境では、以下のように作成が完了したと言っています。

実際にCodeCommitを確認すると、確かにindex.htmlが作成されているのがわかります。

⑥AWS Amplify HostingでHTMLを公開する

作成した画面は確認したくなるものなので、ここではAmplifyを使ってデプロイしていきます。

Amplifyの画面で「アプリケーションをデプロイ」ボタンをクリックします。

ソースコードプロバイダーの選択画面では「CodeCommit」を選択します。

リポジトリは「front-sample」、ブランチは「master」になります。

アプリケーションの設定画面ではデフォルトのまま次へ進みます。

最後に「保存してデプロイ」を押して完了です。

masterブランチが以下のように「デプロイ済み」のステータスになったら、表示されているドメインにアクセスしてみましょう！

私の手元では、無事にきれいなブルーのデジタル時計が作成されていました！

⑦おまけ: テーマを変えてみる

時間に余裕のある方は、ソースコードの更新も体験していきましょう。

Claude Codeに以下のようなプロンプトを入力します。

このアプリケーションを暖色系でポップな見た目に変更してください。

pushまで終わると、Amplifyの方で自動的にデプロイが走ります。便利ですね…！

デプロイが確認したら再度アプリケーションの画面を開いてみましょう。可愛らしい見た目になったでしょうか？

まとめ

今回は以下のことを学びました。

  • AWS CloudShell上でClaude Codeを使いWebフロントエンドを開発できた
  • Claude Codeの裏でAmazon Bedrockを利用することができた
  • AWS CodeCommitでソースコードを管理できた
  • AWS Amplify HostingとAWS CodeCommitを連携してフロントエンドを自動デプロイできた

今回作成したリソースはほとんど料金がかかりませんが、片付ける際には以下を削除しておきましょう:

  • CloudShellの環境
  • CodeCommitのリポジトリ「front-sample」
  • Amplifyのアプリ「front-sample」