🗿
【#1】AWSで生成AI利用基盤構築してみた！

2025/01/02に公開
 背景生成AIが流行している中、自分で実験し、他の人に利用してもらってフィードバックを得るための環境を構築したいと考え、自前で生成AI利用基盤を作ることを決めました。調査を進める中で、AWSが生成AIチャットボット構築用のパッケージをGitHubで公開していることを知り、これを利用して基盤をデプロイし、追加機能をカスタマイズするところまで実践してみました。

本記事では、基盤構築やカスタマイズの内容を紹介し、今後の機能拡張についての展望も述べます。

 対象読者・生成AIに興味がある人

・会社で生成AI関連のプロジェクトに参画している人

 今回の実施内容（概要）・AWSからGitHubへ公開されている「Generative AI Use Cases JP」を用いて、生成AI利用基盤を構築します。

⇒そのため、生成AIモデルもAWSからリリースされているAmazon Bedrockを中心に構成します。

⇒基本的にはリポジトリ内のREADMEに記載されている通り構築を進めますが、Ubuntu上Dockerコンテナで作業を進めたいため、ソースを一部修正して進めます。
・利用基盤に利用基盤に経済アナリストとしてのシステムプロンプトを内包したページを追加します。

⇒特定のプロンプトを持たせたチャットのやり取りができるページを作成し、ある分野に特化した生成AIを利用してもらうことを想定します。

 システム構成今回は、点線で囲われた箇所以外のリソースをデプロイします。

また、デプロイ時にAWS CloudFormationのスタックが作成されます。



※システム構成図はこちらから抜粋

 ローカル環境・Ubuntu-24.04

・Docker Engine 27.4.0

・Docker compose 2.31.0

 実施内容
 1.AWS上で生成AIモデルのデプロイまずはAWS上で生成AIモデルのデプロイを行う必要があります。

※「Generative AI Use Cases JP」のソースコード上、デフォルトでバージニア北部リージョン (us-east-1)の下記モデルを利用する設定となっているため、今回は下記モデルをデプロイします。

・Anthropic Claude 3 Sonnet (テキスト生成)

・Stability AI SDXL 1.0(画像生成)
AWSモデルアクセスページから対象のモデルをデプロイします。

画面左の「モデルアクセス」タブへ移動します。



対象の2モデルを選択した状態で「次へ」ボタンを押下します。







ユースケースの入力を促されます。会社名のところは個人名の記載でも問題ありません。



記載内容に問題が無ければ「送信」ボタンを押下しましょう。

モデルが使用可能の状態となります。






 2.ローカル環境の構築アプリのデプロイや開発作業はDockerコンテナで行うため、Ubuntuでコンテナを作成します。

 環境構築用ファイル作成まずはDockerfileを作成します。

後続のコマンド実行で必要となるaws cli jq nodejs等のインストールを定義しています。
Dockerfile
# AWS CLI2 を利用するDockerfile
FROM python:3.9

# 前提パッケージのインストール
RUN apt-get update && \
    apt-get install -y less vim curl unzip sudo git jq && \
    curl -fsSL https://deb.nodesource.com/setup_18.x | bash - && \
    apt-get install -y nodejs && \
    rm -rf /var/lib/apt/lists/*

# aws cli v2 のインストール
RUN curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip" && \
    unzip awscliv2.zip && \
    ./aws/install && \
    rm -rf awscliv2.zip aws

# 作業ディレクトリの設定
WORKDIR /work

# デフォルトのコマンドを設定（bashを起動）
CMD ["/bin/bash"]
次にdocker-compose.ymlを作成します。

コンテナ内にローカルサーバを立て、コンテナ外からアクセスできるようにportsの設定も組み込みます。
docker-compose.yml
version: "3"
services:
  gen-ai:
    build: ./
    container_name: gen-ai
    volumes:
      - .:/work
    ports:
      - 8080:8080
    env_file:
      - .env
    tty: true
.envファイルにAWSクレデンシャル情報を記載しておくと、aws cliへのログインがスムーズになるため、事前に作成しておきましょう。
.env
AWS_ACCESS_KEY_ID=[YOUR_ACCESS_KEY_ID]
AWS_SECRET_ACCESS_KEY=[YOUR_SECRET_ACCESS_KEY]
AWS_DEFAULT_REGION=ap-northeast-1
AWS_DEFAULT_OUTPUT=json
[YOUR_ACCESS_KEY_ID]、[YOUR_SECRET_ACCESS_KEY]にはそれぞれ自身のAWS IAMユーザのACCESS_KEY_ID、SECRET_ACCESS_KEYを入力してください。

 コマンドを実行し環境構築ここまでで作成したファイルをUbuntu上の同一ディレクトリに配置し、下記コマンドを実行していきます。
下記コマンドでdocker-compose.ymlを実行し、コンテナイメージのビルド、コンテナの作成を行います。
docker compose up -d
下記コマンドでコンテナを起動し、コンテナの中に入ります。
docker exec -it gen-ai /bin/bash

 3.資材のクローンし、初回デプロイコンテナ内で下記コマンドを実行しGitHubからgenerative-ai-use-cases-jp

をクローンしましょう。
git clone https://github.com/aws-samples/generative-ai-use-cases-jp.git
クローンができたら、下記コマンドでgenerative-ai-use-cases-jpディレクトリに移動します。
cd generative-ai-use-cases-jp
※今後のデプロイコマンドや開発環境を立ち上げるコマンドは原則、generative-ai-use-cases-jpディレクトリで行います。
下記コマンドによりデプロイを実行します。
# 上二つは初回デプロイ時のみ実行します。
npm ci
npx -w packages/cdk cdk bootstrap
npm run cdk:deploy
ここまででデプロイが完了します。

実行結果として表示されるGenerativeAiUseCasesStack.WebUI = [エンドポイント]のURLをブラウザに入力すると、アプリへアクセスできます。


 4.サインアップし、アプリにアクセスAWS CloudFrontのエンドポイントへブラウザからアクセスするとアプリへ接続できます。

サインイン画面に遷移しますので、「アカウントを作る」タブからアカウントを作成しましょう。

ユーザ名（メールアドレス）とパスワードを入力し、「アカウントを作る」ボタンを押下すると入力したメールアドレス宛にメールが届きますので、サインアップを完了させましょう。

再度サインイン画面で登録したアカウントでサインインすると下記のような画面に移ります。

アプリ利用例：「チャット」タブで質問を投げると、質問に対する回答を生成AIモデルが返してくれます。


 5.セルフサインアップ機能の削除デフォルト設定でセルフサインアップ機能が有効になっていると、サイトにアクセスできてしまった人全員がアカウントを作成でき、不正利用される可能性が高くなるため、セルフサインアップ機能を無効化する。

※セルフサインアップ機能を無効化しても、Amazon Cognitoでユーザ追加自体は可能です。
packages/cdk/cdk.jsonのselfSignUpEnabledの値をfalseに変更します。

下記コマンドをコンテナ上で実行し、再度デプロイします。
npm run cdk:deploy
デプロイ完了後にアプリへ再度ブラウザから接続すると、「アカウントを作る」タブが消えています。


 6.経済アナリストタブ追加特定のシステムプロンプトが最初から設定されたチャットページを追加します。

フロント側の設定を色々変えていく必要があります。

 ローカル開発環境を立ち上げるフロントエンドの改修を行う必要があるため、ローカル開発環境を立ち上げ、改修内容をすぐに確認できるようにします。
まずはコンテナ外からコンテナ内のローカルホストへアクセスできるようにpackages/web/package.jsonにてポートの設定をし、リッスンするアドレスを0.0.0.0に設定します。
packages/web/package.json
    "dev": "vite --port 8080 --host 0.0.0.0",
下記コマンドを実行するとローカル環境が立ち上がり、ブラウザからhttp://localhost:8080/を開くと、ローカル上のアプリへ接続できます。

サインインを求められますが、先ほど作成したアカウントでサインイン可能です。
. ./setup-env.sh
npm run web:dev


※npm run web:devwコマンドを使えば、setup-env.shの実行もしてくれる仕組みにはなっていますが、今回コンテナへはbashではいっており、コマンドを修正しないとうまく実行されないため、手動でsetup-env.shの実行も、npm run web:devを実行する前に行っています。

 メニュー追加ここからは経済アナリストタブ追加のために必要となる各ファイルの改修を進めていきます。
packages/web/src/App.tsxに対して下記を追加します。

この改修をしたところまでで、画面側に「経済アナリスト」タブが出現してきますが、まだチャットページを用意していないため、404エラーが発生します。
packages/web/src/App.tsx
  {
    label: '経済アナリスト',
    to: '/ecoana',
    icon: <PiImages />,
    display: 'usecase' as const,
  },

 リンク先用意次に、packages/web/src/main.tsxに対して下記を追加します。

これで「経済アナリストタブ」をクリックしたときにはGenerateEcoAnaPage.tsxを参照するという設定が出来上がりました。

ただし、現段階ではGenerateSqlPage.tsxが無いため、画面側ではエラーが発生しているはずです。
packages/web/src/main.tsx
中略
import GenerateEcoAnaPage from './pages/GenerateEcoAnaPage';
中略
  {
    path: '/ecoana',
    element: <GenerateEcoAnaPage />,
  },
中略

 ページ作成ここから「経済アナリスト」タブの遷移先ページを作成していきます。

最初から用意されていたチャットページと同様のUIがあればよいので、こちらのページの UI をそのまま利用して作成していきます。

下記コマンドをgenerative-ai-use-cases-jpディレクトリ直下で実行し、チャットページファイルをコピーします。
cp packages/web/src/pages/ChatPage.tsx packages/web/src/pages/GenerateEcoAnaPage.tsx
コピーが実施されたら画面側で「経済アナリスト」タブがチャット画面として機能している状態となります。


 システムプロンプト追加最後に作成した「経済アナリスト」タブの初期プロンプトを追加します。

packages/web/src/prompts/claude.tsに追加したい先のパス向けにシステムプロンプトを追加することでアプリに反映されます。

※システムプロンプトの内容は自由に設定いただいて大丈夫です。
packages/web/src/prompts/claude.ts
  '/ecoana': 'あなたはプロの経済アナリストです。株や個人の投資について、専門的な知識を保有しています。以降の質問に対して、プロの経済アナリストとして回答してください。回答内容は初心者に向けて明瞭でわかりやすい言葉を使って段階的に解説してください。専門的な言葉や複雑な考え方が出てきたら、それを理解しやすくするための例や比喩を用いて詳しく説明してください。',
ここまで「経済アナリスト」タブに先ほどのシステムプロンプトが設定されています。

AIモデルに素性を確認するような質問を投げると、追加したシステムプロンプトが反映されていると分かる答えが返ってきます。




 最後に今回はgenerative-ai-use-cases-jpを用いて生成AI利用基盤を構築し、ちょっとしたカスタマイズとして特定のプロンプトを最初から内包したチャットページを作成するところまで実施してみました。
今後は世間の生成AIに対するユースケースを確認し、そのユースケースに対応した機能を今回構築した基盤に追加していきたいと考えています。
最後までお読みいただき、本当にありがとうございました。

 参考文献https://aws.amazon.com/jp/cdp/ai-chatapp/

https://github.com/aws-samples/generative-ai-use-cases-jp?p=cdp&c=ai&z=3

https://pages.awscloud.com/jp-ai-chat-bot-videos.html

https://aws.amazon.com/jp/blogs/news/how-to-generative-ai-use-cases-jp/
背景

対象読者

今回の実施内容（概要）

システム構成

ローカル環境

実施内容

1.AWS上で生成AIモデルのデプロイ

2.ローカル環境の構築

環境構築用ファイル作成

コマンドを実行し環境構築

3.資材のクローンし、初回デプロイ

4.サインアップし、アプリにアクセス

5.セルフサインアップ機能の削除

6.経済アナリストタブ追加

ローカル開発環境を立ち上げる

メニュー追加

リンク先用意

ページ作成

システムプロンプト追加

最後に

参考文献

Discussion
