WSL2とAWS Bedrockで Claude Artifacts を模擬

## 結論

WSL2で使えた。
手順はほぼ、このレポジトリが言っている通り。
https://github.com/aws-samples/open_artifacts_for_bedrock

yarnのhostのipアドレスを登録しておくのだけ注意。　→　[ここ](#windowsにyarnのhostを登録)

## Claude Artifactは便利

無料プランはすぐ制限かかる。
月額20ドルは妥当だとは思うが、あれこれ契約すると費用が嵩む。
https://claude.ai/upgrade
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017728/a4fd2000-f0ce-c5f6-8b20-6961096a4609.png)

## AWS Bedrockという選択肢

ちゃんと計算してないが週末に集中的に使うとかならこのAPIの従量課金が得だお思われる。

## AWSの公式サンプル open artifacts for bedrock を使う

https://github.com/aws-samples/open_artifacts_for_bedrock

内容はこのビデオ

https://www.youtube.com/watch?v=KqqVYtA_X-8

## 構成


```mermaid
graph TB
    subgraph WSL2["WSL2"]
        subgraph NextJS["Next.js Application"]
            UI[UI Components]
            VercelAI[Vercel AI SDK]
            CodeInterceptor[Code Interceptor]
        end
        subgraph Docker["Docker"]
                PythonEnv[Python 3.10 Environment]
        end
    end
    
    User[User] --> UI
    UI <--> VercelAI
    VercelAI <--> CodeInterceptor
    CodeInterceptor <--> PythonEnv
    
    subgraph AWS["Amazon Web Services"]
        Bedrock[Amazon Bedrock]
        Claude[Claude 3.5 Model]
    end
    
    VercelAI <--> Bedrock
    Bedrock --> Claude
    
    style WSL2 fill:#f0f0f0,stroke:#333,stroke-width:2px
    style AWS fill:#FF9900,stroke:#333,stroke-width:2px
    style NextJS fill:#cce7ff,stroke:#333,stroke-width:2px
    style Docker fill:#d0e9f6,stroke:#333,stroke-width:2px


````


## 手順１：wsl2の準備

まっさらなwsl2環境からスタート。

### windowsにyarnのhostを登録

全体を通してwslっぽい作業はこれだけ。

C:\Windows\System32\drivers\etc\hosts　を管理者権限で開いて以下を加える。
```　C:\Windows\System32\drivers\etc\host
104.16.21.35    registry.yarnpkg.com
```

### BedrockのAPIキーを入手
こちらを参考に。
https://qiita.com/icoxfog417/items/869e2093e672b2b8a139#1-amazon-bedrock-

### WSLでdockerをインストール　 
WSL2 の Linux ディストリビューション内で Docker エンジンをインストールします：
```　
sudo apt-get update
sudo apt-get install -y docker.io
```
Docker サービスを開始し、自動起動を有効にします：
```　
sudo service docker start
sudo systemctl enable docker
```
現在のユーザーを docker グループに追加して、sudo なしで Docker コマンドを実行できるようにします：
```　
sudo usermod -aG docker $USER
```
WSL インスタンスを再起動するか、ログアウトしてログインし直します。
Docker が正しくインストールされたか確認します：

```
docker --version
docker run hello-world
```


### wslでNode.js をインストール　 

```　
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash
nvm install --lts
node -v
```

### wslでyarn をインストール　 
```　
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update
sudo apt install yarn
yarn -v
```

## 手順2：レポジトリの入手と実行

### open artifacts for bedrock 
レポジトリを好きな場所でclone
```　
git clone https://github.com/aws-samples/open_artifacts_for_bedrock.git
```
中にあるdockerfileをビルド
```　
cd open_artifacts/docker_files 
docker build -t python3.10 .
```

クローンしてできたopen_artifacts_for_bedrockディレクトリに.envファイルを作成。
AWSで入手したBedrockのAPIキーを設定する。AWS_REGIONも東京ならap-northeast-1など変えておく。

このファイルを設定する場合は、USERNAMEとPASSWORDは何か設定しておかないと出来上がったものに入れなかった。

``` .env
AWS_ACCESS_KEY_ID=*******
AWS_SECRET_ACCESS_KEY=******
AWS_REGION=us-east-1
PYTHON_DOCKER_IMAGE=python3.10
MODEL_ID=anthropic.claude-3-5-sonnet-20240620-v1:0
USERNAME=
PASSWORD=
```

実行
```
cd ..
yarn
yarn dev
```

## 参考

https://qiita.com/moritalous/items/a8c1d9125634c3aea7e2

https://blog.serverworks.co.jp/open-artifacts-for-amazon-bedrock

https://stackoverflow.com/questions/52135815/yarn-is-having-troubles-with-the-network-connection