Claude Code ハンズオン環境をClaude Codeで構築してみた

ハンズオン環境の全体構成

まず、完成した環境の全体像をご覧ください。

参加者がブラウザでURLにアクセスしてから、Claude Codeが使えるようになるまでの流れは以下のとおりです。

この構成を作るにあたり、大きく3つの課題がありました。以降では、課題ごとに検討したアプローチと採用した理由を説明します。

課題1：受講者ごとの環境をどう用意するか（ステップ7〜9）

AWS上にVS Code（code-server）とClaude CLIが入った環境を人数分用意する必要があります。最初に直面したのが「どういう構成でその環境を準備するか」というコスト・運用両面での検討です。

検討したアプローチ

A案：1台のEC2で複数受講者に対応する

最初に思い浮かんだのは、1台のEC2インスタンス上に受講者全員分の環境をまとめて構築するアプローチです。シンプルで管理もしやすい反面、受講者間の環境が分離されないため、ファイル操作やプロセスが干渉するリスクがあります。

B案：コンテナで受講者ごとに環境を分離する（採用）

受講者1人につき1つのコンテナを起動する構成です。環境が完全に分離されるため、他の受講者の操作が影響を及ぼしません。

採用理由

コンテナ化を選んだ決め手は再利用性です。コンテナイメージとして管理しておけば、他のハンズオンテーマでも同じ仕組みを流用できます。人数の増減も、起動するコンテナ数を変更するだけで対応できる点も運用上のメリットでした。

ステップ7でCodeBuildを使ってDockerイメージをビルドし（S3から教材ファイルも同時に取り込み）、ステップ8でECRにプッシュ、ステップ9でECS Fargateが人数分のコンテナを起動する流れになっています。

課題2：アクセスURLを1つに統一したい（ステップ1〜4・6）

受講者ごとにコンテナを分けると、次の問題が生じます。「受講者ごとに異なるURLを案内する」ことになり、ハンズオン進行の妨げになります。セミナー中に「あなたは3番のURLを使ってください」という案内は、混乱のもとです。

やりたいこと： 全員が同一のURLにアクセスし、認証後に自分のコンテナへ自動で振り分けられる。

採用したアプローチ：ALBによるパスベースルーティング

ALB（Application Load Balancer）を活用して、ステップ1〜4の流れでリクエストをauth-gatewayまで届け、ステップ6でユーザーごとのコンテナへ振り分けます。

認証後、ユーザーのニックネーム（user1、user2 ...）をもとに /user{N}/ へリダイレクトし、そのパスに対応するコンテナへ転送します。自分以外のパスにはアクセスできない制御も加えています。

なお、ステップ3でCloudFrontをALBの前段に置いているのは、code-serverのWebSocket通信に必要なHTTPS終端と、ALBへの直接アクセス防止（シークレットヘッダー検証）のためです。

課題3：code-serverへの認証をどう組み込むか（ステップ5）

ALBで1つのURLに集約できたとして、次の問題が出てきました。

code-server自体には、外部IDPとの連携機能がありません。

code-serverにはパスワード認証の仕組みはあるものの、CognitoのようなIDPと連携してOIDC認証を行う機能が標準では用意されていません。受講者全員に個別のパスワードを発行・管理する運用も、規模が増えると現実的ではありません。

採用したアプローチ：OAuth2-Proxy + Cognito

auth-gatewayというコンテナを別途用意し、その中でnginx + OAuth2-Proxyを動かす構成を採用しました（ステップ5）。

• OAuth2-ProxyがCognito（OIDC）と連携し、ログイン・セッション管理を担当
• nginxがOAuth2-Proxyと連携し、認証済みリクエストのみをcode-serverへ転送

code-server自体には手を加えず、認証の仕組みを前段に追加する形で解決しています。

実際にやった作業

TerraformによるIaC化

上述の構成全体をTerraformで実装しました。Route 53・CloudFront・ALB・ECS Fargate・Cognito・IAMなど、必要なリソースを1つのモジュールとしてまとめています。terraform apply 一発で環境が立ち上がる状態を目標に設計しています。

この実装作業はClaude Codeとの対話を通じて進めました。インフラ構成の設計から、Terraformコードの記述・修正まで、AIとやりとりしながら構築を進めています。

コンテナイメージの構成

code-serverコンテナはUbuntu 24.04をベースに、以下を組み込んでいます。

• code-server（ブラウザ版VS Code）
• Claude Code CLI
• AWS CLI（ECS TaskロールでAmazon Bedrockにアクセス）
• ハンズオン用教材ファイル

Claude CodeはAmazon Bedrockを経由してClaude Sonnet 4.5を呼び出す設定にしており（ステップ10）、受講者側でAPIキーを準備する必要はありません。

auth-gatewayコンテナはnginx公式イメージをベースに、OAuth2-Proxyを組み込んでいます。

ハンズオン進行の改善：受講者フィードバックをもとに操作方法を変更

環境の整備と並行して、ハンズオンの進め方自体も回を重ねるごとに改善しています。

初回は、Claude CLIとコマンドラインを使って操作してもらう形式でした。しかし実施後、受講者の方からいくつかのご意見をいただきました。

• 「コマンド操作が多く、ハンズオンのテンポが落ちてしまう」
• 「チャット画面だけで完結できると、より直感的に使えそう」
• 「プログラミングの経験がないので、コマンドラインの操作に戸惑ってしまった」

これらのフィードバックを受け、3回目の開催からはcode-serverにClaude CodeのVS Code拡張機能（プラグイン）を組み込み、チャット画面のみで操作してもらう構成に変更しました。コマンドラインを使わず、チャットでの指示だけでハンズオンが完結するため、プログラミング経験のない受講者の方にも参加しやすくなっています。

このような進行方法の変更もコンテナイメージに反映できるため、環境をコンテナ化しておいた利点が活きています。

Cognitoユーザー登録スクリプトの工夫

受講者アカウントの登録にはCognitoを使用しますが、Cognitoのデフォルト設定では1日あたりのメール送信数に上限があります。招待メールを送ると1ユーザー1通消費されるため、参加者が多い場合に制限に引っかかる可能性があります。

この点を考慮し、登録スクリプトを2つのモードで切り替えられるようにしました。

CSVにメールアドレス・パスワード・ニックネームを記載してスクリプトを実行するだけで、受講者アカウントをまとめて登録できます。

まとめ

Claude Codeハンズオンの環境構築は、「1つのURLで全員がアクセスできる、個人ごとに分離されたブラウザ完結の開発環境」という要件を満たすために、いくつかの技術的な組み合わせが必要でした。

• ECS Fargate（ステップ7〜9）：受講者ごとのコンテナ分離と再利用性
• ALB + OAuth2-Proxy + Cognito（ステップ4〜6）：1URLでのアクセス集約と認証
• CloudFront（ステップ3）：HTTPS終端とセキュリティ

構成はTerraformで管理しているため、次回以降の開催でも同じ仕組みを再利用できます。

環境構築の詳細について興味のある方は、クラスメソッド 人材ソリューション部までお気軽にお問い合わせください。

また、Claude Codeハンズオンセミナーは5月も開催予定です。ご興味のある方はぜひお申し込みください。

• セミナー詳細・申し込みはこちら