1. はじめに
ITアーキテクトを務めています松本と申します。
前回の記事でAmazon CodeCatalystの開発環境をVPCに接続して、Amazon Q Developerを利用できることを確認しました。今回は開発環境のVPCに対してAWS Network Firewallを導入します。ホワイトリスト形式のドメイン制限を行い、許可されていないドメインにはアクセスできないようにします。
これによりAIが想定外のWebサイトにアクセスできなくなり、さらに安心感が高まります。
2. AWS Network Firewallとは？
AWS Network Firewallは、VPC内を通過する通信に対してドメインや送信先IPなどで通信を制御できるファイアウォールです。今回はVPCに接続したAmazon CodeCatalystの開発環境がアクセスできる接続先をドメインベースで制限するために利用します。
3. 構築したAWSアーキテクチャ
今回構築したAWSアーキテクチャは以下の通りになります。
前回のアーキテクチャにAWS Network Firewallを導入し、アクセスできるドメインを制御します。
4. ホワイトリスト登録が必要なドメインの調査
こちらのドキュメントにAmazon Q Developer利用時にアクセスする可能性があるURLが整理されております。
ただ、Amazon CodeCatalystの開発環境の構築に必要なドメインやVSCodeの拡張機能のインストールに必要なドメインがよくわからなかったため、環境を構築して実際にAWS Network Firewallを通った通信がどのドメインにアクセスしているのかを観測してみました。ホワイトリストに登録したドメインも実際に観測したドメインのみになります。
観測の方法ですが、AWS Network Firewallのファイアウォールモニタリングダッシュボードという機能を利用します。
ファイアウォールモニタリングダッシュボードは2025年6月にリリースされた機能で、様々な角度から通信の分析を行うことができます。この機能を利用するとAWS Network Firewall上を流れたTLS SNIをログから自動で抽出してくれます。取得したドメインをホワイトリストに登録することで、Amazon CodeCatalystの開発環境構築からAmazon Q Developerへのプロンプト入力までを行うことができました。
以下の(a)から(d)までの4つのタイミングで調査した結果をまとめています。
- (a) Amazon CodeCatalystの開発環境を構築し、VSCodeでファイルが編集可能になるまでに追加したドメイン
- (b) Amazon CodeCatalystの開発環境上のVSCodeに、Amazon Q Developer拡張機能がインストール可能になるまでに追加したドメイン
- (c) VSCodeのAmazon Q Developer拡張機能のインストールからAWS Builder IDでログインするまでに追加したドメイン
- (d) AWS Builder IDでログインからAmazon Q Developerプロンプトを入力するまで追加したドメイン
ただし、3点ほど注意点があります。
- 開発環境側のVSCodeにプリインストールされている拡張機能があり、それらがアクセスしているドメインも含まれております
- 拡張機能のインストールに必要なドメインは、拡張機能ごとに異なることがあり、全ての拡張機能をこのドメイン一覧でインストールできるわけではありません
- 2025年8月現在の調査であり、今後必要なドメインが変更される可能性がある点はご留意ください
5. AWS Network Firewallの構築
構成図の通りにAWS Network Firewallを配置し、ルーティングを設定すればAWS Network Firewallを通過するようになります。標準的なアーキテクチャなので、詳細な構築方法は割愛します。ファイアウォールモニタリングダッシュボードの部分のみを記載いたします。
ファイアウォールモニタリングダッシュボード
ファイアウォールモニタリングダッシュボードは、AWS Network Firewallを通過した通信のログから、インサイト得るためのダッシュボードを自動で作成してくれる機能になります。ログからメトリクスが抽出されるため、AWS Network Firewallのログを有効化する必要があります。
今回は「ホワイトリストにないためにドロップされたドメイン」を突き止めるため、Alertログを有効化しております。
アクセス先ドメインの調査結果
ホワイトリストに一切ドメインを登録していない状態から、前述した(a)から(d)のタイミングで、ダッシュボードで拒否されたドメインをホワイトリストに追加していくという流れにしました。
以下が実際にホワイトリストに登録したドメインです。これらをホワイトリストに登録するとAmazon CodeCatalystからAmazon Q Developerが利用可能になります。
(a) Amazon CodeCatalystの開発環境を構築し、VSCodeでファイルが編集可能になるまでに追加したドメイン
- git.us-west-2.codecatalyst.aws
- update.code.visualstudio.com
- vscode.download.prss.microsoft.com
- mobile.events.data.microsoft.com
- marketplace.visualstudio.com
- www.vscode-unpkg.net
- main.vscode-cdn.net
(b) Amazon CodeCatalystの開発環境上のVSCodeに、Amazon Q Developer拡張機能がインストール可能になるまでに追加したドメイン
- amazonwebservices.gallery.vsassets.io
- ms-ceintl.gallery.vsassets.io
- amazonwebservices.gallerycdn.vsassets.io
- ms-ceintl.gallerycdn.vsassets.io
(c) VSCodeのAmazon Q Developer拡張機能のインストールからAWS Builder IDでログインするまでに追加したドメイン
- idetoolkits-hostedfiles.amazonaws.com
- codecatalyst.global.api.aws
- raw.githubusercontent.com
- oidc.us-east-1.amazonaws.com
- aws-language-servers.us-east-1.amazonaws.com
- idetoolkits.amazonwebservices.com
- api.github.com
- ide-toolkits.app-composer.aws.dev
- aws-toolkit-language-servers.amazonaws.com
- cognito-identity.us-east-1.amazonaws.com
(d) AWS Builder IDでログインからAmazon Q Developerプロンプトを入力するまで追加したドメイン
- codewhisperer.us-east-1.amazonaws.com
6. Amazon Q DeveloperによるReactアプリの作成
Amazon Q Developerが利用可能になったので、Reactで簡単なTODO管理アプリを作成してみましょう
Amazon CodeCatalystのGateway repositoriesの利用
ホワイトリストのドメインにnpmレジストリの登録がないので、このままでは依存ライブラリを開発環境にインストールすることはできません。npmレジストリのドメインをホワイトリストに登録しても良いのですが、今回はAmazon CodeCatalystのGateway repositoriesを利用します。
Gateway repositoriesは、パブリックなパッケージリポジトリに対してプロキシのような働きを行ってくれるリポジトリです。npmだけではなく、mavenやpipにも対応しています。
Gateway repositoriesのドメインは「packages.us-west-2.codecatalyst.aws」になっているため、このドメインもホワイトリストに登録してください。
Package repositoriesの作成
Gateway repositoriesを利用するためには、Package repositoriesを作成する必要があります。
-
サイドメニューからPackagesを選択し、Create package repositoryをクリックします。
Create package repository画面でRepository nameを入力します。 -
Select upstream repositoryをクリックして、Gateway repositoriesを選択します。
-
すると、Select gateway repositories画面が表示されるので、npm-public-registry-gatewayのCreateボタンを押下します。npm-public-registry-gatewayにチェックが入っていることを確認したらSelectボタンをクリックします。
-
Upstream repositoriesにnpm-public-registry-gatewayが表示されていることを確認したら、Createボタンを押します。
これでPackage repositoriesの設定は完了です。
.npmrcの作成
Gateway repositoriesはPackage repositories経由で利用します。Package repositoriesにアクセスするためには、PAT(Personal Access Token)が必要になります。ですので、Gateway repositoriesを参照するように.npmrcファイルを作成し、開発環境に配置します。Amazon CodeCatalystには設定を補助してくれる機能があるので、そちらを利用します。
-
先ほど作成したPackage repositoriesを選択します。
-
Connect to repositoryをクリックします。
-
Configuration detailsで、npm clientを選択するとPAT(Personal Access Token)の発行と.npmrcに記載する内容が表示されます。
-
画面に表示されている指示に従って.npmrcファイルを作成してください。
Amazon Q DeveloperによるReactアプリ作成
依存ライブラリがダウンロードできるようになったので、Amazon Q DeveloperにReactアプリを作成させてみましょう。Amazon CodeCatalystの開発環境にはNode.js v22がプリインストールされているので、すぐにAmazon Q DeveloperにNode.jsのアプリを作成してもらえます。
作成が完了したようなので、TODO管理アプリを起動させてみましょう。起動させると自動でVSCodeのポートフォワードが設定されるため、localhostでアクセスできるようになります。
簡単なTODO管理アプリが動いていることを確認できました。
7. まとめ
前回の記事ではAmazon CodeCatalystのリモートの開発環境を利用することで、Amazon Q Developerを動かすことができる環境を作成しました。ローカルPC上でAIを動かさないことから、意図しないファイルの破壊からローカルPCを守ることができます。今回の記事ではAWS Network Firewallによるドメイン制限を加えることができることを確認できました。意図しない通信を制限することができ、より安心してAmazon Q Developerを利用できます。
皆様もぜひAmazon CodeCatalystとAmazon Q Developerを組み合わせて、Agentic Coding環境を作成してみてください。
Discussion