【個人開発】 Googleエンジニアに教えてもらいながらAIチャットアプリをデプロイした話


はじめまして！もんたです。

最近、インフラに興味を持っておりまして、KubernetesとかTerraformとかを使って何かアプリケーションをデプロイして仕事でもバリバリ使えるようになりたいなと思ってるんです。

そこで最近流行りのLangChainを使ってAIチャットアプリを作ってみて、LLMの勉強をしつつデプロイのアウトプットまでしちゃおうというプロジェクトを考え、実際にやってみました。

:::note
🐶「なんとなくインフラとLangChainの勉強を始める。」
:::

ちなみにですが、私には（自称）Googleエンジニアの友達がいるんですが、その人に教えてもらいながらなんとかデプロイまで漕ぎ着けました。
お察しの方もいるかと思いますが、Googleエンジニアというのは彼のことです。

![スクリーンショット 2024-12-17 20.34.06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2038763/7e153c6b-d3b2-f77d-9af0-a931da65b987.jpeg)

私が『 **あなたはGoogleのエンジニアです。** 』と言っても否定してなかったので多分本当にGoogleのエンジニアなんだと思います。

![スクリーンショット 2024-12-17 20.35.28.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2038763/88753772-fdd1-18fc-a0a8-1a024fe8ee11.jpeg)

:::note
🐶「釣りですみません…」
:::

そんなわけで私はGoogleのエンジニアという素晴らしい味方をつけながらKubernetesやらTerraformやらLangChainの勉強ができたわけなんです。

では、どんなことをやったか詳しく話していこうかと思います！

この記事を読んで僕と同じかけだしエンジニアの個人開発のモチベーションにつながれば幸いです！

---

あ、そういえばこんなことやってます。
よかったら覗いてみてあげてください。

**【もんたのLINEスタンプ】**

https://store.line.me/stickershop/author/2887587/ja

:::note
🐶「こんなことやってます」
:::

## 概要

今回開発したのは**もんたGPTというAIチャットアプリ**です。


![画面収録 2024-12-20 8.19.16 (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2038763/7fb24014-5f6c-fcf3-7027-0028b478df7d.gif)


以下を目的にアプリの開発を行いました。

* 苦手意識のあるKubernetes, Terraform, Google Cloudを完全に理解する
* 転職先でPythonを使っているのでPythonに慣れる
* イケてるディレクトリ構成を学ぶ

です！

:::note
🐶「インフラに対する苦手意識を克服したかった」
:::


ちなみにもんたGPTはTerraform, Kubernetes, Google Cloudを使ってデプロイはできたのですが、**料金がバカにならないのですぐにクローズしてます。**

だいたいデプロイには1週間ちょいかかりました。デプロイ作業でかかった費用が以下になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2038763/d057bcc8-7ee8-908f-07fa-5199d02f488a.png)

GKEは高いっていうイメージは持っていたのですが、とりあえず個人開発程度の規模のサービスでGKEは使わないほうがいいってことを**頭ではなく心で理解**できました。


リソースごとの料金は以下のとおりになります。
GKEがとんでもない…（ｶﾞｸﾌﾞﾙｶﾞｸﾌﾞﾙ…）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2038763/832ea5ff-2156-778e-cabd-4e4a60487248.png)

:::note
🐶「GKEの料金すごい…」
:::

:::note warn
🐶「インフラあんまり詳しくない人は常にコストを見といた方がいい」
:::

もんたGPTのRepositoryはこちらから確認できます！よかったら確認してみてください。

https://github.com/Hiroto0706/monta-gpt

もんたGPTのタスク管理はNotionを用いて行いました。以下より確認できるようにしてます！

https://monta-database.notion.site/Python-Web-e6dbc4ffe76644109f8005efd49c7b69

## 技術スタック

技術スタックは以下の通りです。なんかイケイケそうですね。

| **カテゴリ**       | **名前**   | 
|-----------------------|-----------------------|
| **フロントエンド**      | Next.js（App Router）
| **バックエンド**       | Python（FastAPI）     
| **AI統合**            | LangChain            
| **データベース**        | PostgreSQL   
| **キャッシュ**        | Redis 
| **認証**              | Google OAuth 2.0     
| **コンテナ化**          | Docker              
| **オーケストレーション**   | Kubernetes（GKE）  
| **IaC**              | Terraform            
| **リバースプロキシ**      | NGINX     
| **クラウドプラットフォーム** | Google Cloud



## ディレクトリ構成やらアーキテクチャやら

### ディレクトリ構成

もんたGPTのディレクトリ構成は以下のようになっています。
DDDとクリーンアーキテクチャを意識して構成しました。

```
.
├── backend    
│   ├── Dockerfile  
│   └── app         
│       ├── api                    # APIエンドポイントに関するコード
│       │   ├── v1                 # バージョン1のAPI
│       │   └── v2                 # バージョン2のAPI
│       ├── application            # ユースケース層
│       │   ├── services  
│       │   └── usecase            # ユースケース（アプリケーションの操作単位）
│       ├── assets           
│       ├── domain                 # ドメイン層（エンティティとドメインロジック）
│       │   ├── entities           # ドメインエンティティ（業務データのモデリング）
│       │   ├── repositories       # ドメインリポジトリ（データアクセスの抽象化）
│       │   ├── services           # ドメインサービス（複数エンティティにまたがるロジック）
│       │   └── value_objects      # 値オブジェクト（不変のデータ構造）
│       ├── infrastructure         # インフラ層（外部とのやり取りを扱う）
│       │   ├── cache              # キャッシュ処理
│       │   ├── database           # データベース処理
│       │   └── repositories       # リポジトリ実装（ドメイン層の抽象リポジトリを具体化）
│       ├── main.py       
│       ├── schemas   
│       └── utilities       
│
├── frontend          
│   ├── Dockerfile     
│   ├── public         
│   └── src            
│       ├── api                    # フロントエンドのAPI通信ロジック
│       ├── app                    # アプリケーションのエントリーポイントや設定
│       ├── components             # UIコンポーネント
│       │   ├── layouts            # ページ全体のレイアウト構成
│       │   └── ui                 # 再利用可能なUIパーツ
│       ├── contexts               # グローバルステート管理
│       ├── hooks                  # Reactフック（カスタムフックなど）
│       ├── lib         
│       ├── styles      
│       └── types                  # TypeScriptの型定義
├── infra                          # インフラ関連の設定とコード
│   ├── kubernetes                 # Kubernetesマニフェストファイル
│   └── terraform                  # Terraform設定ファイル（IaC）
├── migration                      # データベースマイグレーションファイル
├── docker-compose.yml             # 開発環境のDockerコンテナ構成
└── nginx 
    └── nginx.conf                 # NGINXの設定内容（リバースプロキシの設定）
```

**Domain Driven Design**についてあまり知らない人は以下の記事を読んでみるといいかもしれません！
自分も初め理解する上でここら辺の記事を読み漁りました！

https://qiita.com/yu-saito-ceres/items/f73262cedcdd6e8e75c8


https://zenn.dev/yamachan0625/books/ddd-hands-on

あと、大変恐縮ではあるのですが自分もNotionにDDDを理解する過程で学んだことをメモしておりますのでよかったらこちらもご覧くださいませ🐶

https://monta-database.notion.site/What-is-Domain-Driven-Design-11bcca6509328097b23ae7509abd9d39?pvs=4


クリーンアーキテクチャは以下のリンクを読んでみるといいかもです！

https://zenn.dev/sre_holdings/articles/a57f088e9ca07d


https://qiita.com/o-y/items/755cb47f733687e8331f


あと、大変恐縮ではあるのですが自分もNotionに（以下略）

https://monta-database.notion.site/11acca650932801ca83bf2e0600f7aee?pvs=4

:::note info
🐶「よかったら見てね」
:::

### アーキテクチャ

もんたGPTのアーキテクチャは以下の通りです。

![Group 10178.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2038763/7db09e80-3d7f-cca0-94e4-636cd6357ce3.png)

- Terraformでインフラを構築し、Kubernetes(GKE)でアプリをオーケストレーションしています
- `https://.../` へのアクセスはNext.js側が受け取り、フロント側からのAPIコールは`https://.../api`へとProxyでPython側へ渡します
- バックエンド側ではCloudSQL(PostgreSQL)やMemorystore(Redis)にプライベートIPでアクセスしています

:::note info
🐶「なんかイケイケそう」
:::

## 実装で大変だったこと
ここからポイントごとに実装で大変だったことを書いていこうかと思います。

もんたGPTの実装で難しかったのは以下の通りです！
1. **WebSocketの実装が難しかった**
2. **Terraformの実装が難しかった**
3. **Kubernetesの実装が難しかった**

### 1. WebSocketの実装が難しかった

初めはWebSocketの実装です。
もんたGPTでは生成AIからの回答を表示する際、WebSocket通信を用いてAIからの回答を表示していました。

ChatGPTをはじめとするAIチャットサービスはAIからの回答が**チャンク**という単位で細切れになって送られてくることが多いです。
HTTP通信ではそのような通信を実現するのは結構難しかったりするので、こういったサービスではWebSocketなどが使われたりするのです。

:::note info
🐶「余談ですがChatGPTではWebSocketではなく、ServerSendEventが使われています。」
:::


『WebSocket通信ってなに？おいしいの？』って人はこちらの記事を参考にしてみると非常にわかりやすいですよ！

https://www.freshvoice.net/knowledge/word/6323/

https://qiita.com/south37/items/6f92d4268fe676347160

自分もWebSocketを完全に理解できる記事を書いたりしていますのでよかったら参考にしてあげてください。

https://qiita.com/Maminumemonta0706/items/85967fba3326d35f7208

:::note info
🐶「ハンズオン形式なので完全に理解できるようになるよ！」
:::

#### チャンクしたメッセージの処理が難しかった

バックエンド側で生成AIが生成した**チャンクされたメッセージの扱い**が難しかったです。

LangChainでは以下の`astreamメソッド`を使えば生成AIが回答を細かく分けて生成してくれるようになります。

以下が生成AIの回答を細かく分けてレスポンスする処理になります。

```python
llm = ChatOpenAI(
    model="gpt-4o",
    temperature=0.5,
    streaming=True, # こうすることでストリーミングによる生成が可能になる
    openai_api_key=config.OPENAI_API_KEY,
)

# システムプロンプトやらのローディング処理

chain = system_template | llm

# astreamを使うことで、生成AIが回答をチャンクに分けてレスポンスしてくれる
res = chain.astream({"prompt": prompt, "context": context})

full_response = ""
accumulated_content = ""
chunk_size = 25
last_send_time = asyncio.get_event_loop().time()
time_threshold = 1.0

try:
    # resをchunkという単位に分け、処理している
    async for chunk in res:
        content = chunk.content if hasattr(chunk, "content") else str(chunk)
        full_response += content
        accumulated_content += content

        current_time = asyncio.get_event_loop().time()
        if (
            len(accumulated_content) >= chunk_size
            or (current_time - last_send_time) >= time_threshold
        ):
            yield accumulated_content # 回答をレスポンスする
            accumulated_content = ""
            last_send_time = current_time
```

`accumulated_content`とか`full_response`とかあると思うのですが、これらの処理が必要な理由は以下の通りです。
- `accumulated_content`：小さすぎるチャンクを頻繁に送信することを防ぐため
- `full_response`：生成された回答全体をDBなどに保存するため

仮に`accumulated_content`などで生成されたchunkを保持せず、生成された都度送っていたら、フロントエンド側では1単語ずつ処理されることになっちゃうんです。


```
yield "こ"
yield "ん"
yield "に"
yield "ち"
yield "は"
yield "、"
yield "私"
...
```

これだと結構UXが悪くなったりしちゃうので、ある程度チャンクしてから`yield`するようにもんたGPTでは実装しています。

`accumulated_content`を用いて生成AIの回答を適切なサイズに蓄積してから送ることで以下のように`yield`されるようになり、1つずつ送られてくるより表示がスムーズになります。

```
yield "こんにちは"
yield "、私は人工"
yield "知能アシス"
yield "タントです。"
```

**スムーズに回答をフロントエンド側に送るにはどうすればいいか**を考えるのは難しかったのを覚えています。

その他、シンプルに難しかったのは**チャンクしたメッセージをフロント側に送信する処理**です。

メッセージをチャンクして送信する実装なんてやったこともなければ、「そもそもyieldってなに？」みたいな状態だったので、ここのキャッチアップはかなり時間がかかりました。


そこら辺の理解は以下のFastAPI公式ドキュメントが非常に参考になりました。

https://fastapi.tiangolo.com/ja/advanced/websockets/#_3


### 2. Terraformの実装が難しかった
続いては**Terraformの実装が難しかった**って話です。

自分は前職にいた頃、Terraform自体は使っていたのですが、ほとんどその内容を理解していませんでした。
生成AIに頼んで「ほへ〜。とりあえずいけた〜。うぇ〜」みたいな感じで仕事してました。

:::note info
🐶「ｼｬｶｲｼﾞﾝｦﾅﾒﾙﾅ」
:::

Terraformの理解に関しては、現職でTerraformを触る機会があったのでそこで理解を深めたのが大きいです。
つよつよエンジニアの方がペアプロでタスクを進めてくださったので、理解を深めることができました。


自分はクラウドプラットフォームとしてGoogle Cloudを選択していたので、Google Cloudの公式ドキュメントを読み漁りました。

https://cloud.google.com/docs/terraform?hl=ja

理解の進め方としては、以下のステップで進めました。

1. 生成AIに「**〇〇な構成のアプリケーションをデプロイしたい**」と伝える
2. 生成AIが良さげなTerraformコードを生成してくれる
3. 一つ一つのリソースを生成AIに聞いたり、公式ドキュメントを読んだりして調べる
4. エラーに直面したらドキュメントと睨めっこしたり、AIに助けてもらったりして進める


個人的にはステップ2で生成AIに必要なリソースを作成してもらったのが大きかったです。
ざっくりと「あ〜、こんな感じのリソースが必要なのか」ってのが理解できるからです。
その後、具体的に「**でも、なんでこれが必要なんや？**」ってのを調べることで効率的に理解することができたかなと思います。

:::note info
🐶「生成AIを駆使して全体像を理解してから学習をする」
:::

あと、個人的におすすめなのが「**自分の理解が正しいかどうかをAIに添削してもらう**」ことですね。

以下の画像は自分がTerraformのData Sourceについて調べていたときに、実際にメモした内容です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2038763/7c09ad11-b96e-4df7-340c-51800a02a1e2.png)

自分の理解をメモし、それを生成AIに「**自分は以下のように理解したのですがこの理解は正しいですか？**」みたいに質問をします。

そうすると生成AIが自分の理解が正しいか、間違ってるかを説明してくれるのでかなり重宝しました。
「**自分の理解をまとめる→添削してもらう→さらに新しい理解をまとめる→添削してもらう**」を繰り返すことで脳に適度な負荷がかかり、効果的に学習できたと思います。

:::note info
🐶「厳し目でお願いしますという質問を追加するのも結構おすすめ」
:::

### 3. Kubernetesの実装が難しかった

最後は**Kubernetesの実装が難しかった**って話です。

KubernetesのDeploymentやServiceといったリソースはざっくりと理解はしておりましたが、実際に手を動かして使えるまでは理解できていませんでした。

Kubernetesの理解には以下のUdemyの講座が非常に参考になりました。

https://www.udemy.com/course/learn-kubernetes/?couponCode=ST21MT121624

https://www.udemy.com/course/certified-kubernetes-application-developer/?couponCode=ST21MT121624

ハンズオン形式でKubernetesの勉強ができるのと、自分のローカルを汚さずにKubernetesの勉強ができるので初心者には非常におすすめです！



自分がデプロイの過程で最も詰まったこととしては実際にkubernetesリソースをapply（本番に適用）するところです。デプロイで詰まるといえばここですよね。

これに関しては特に「これをしたからできた！」みたいなことはなく、エラーの内容を一つ一つ理解していき、解消していきました。
めちゃくちゃにしんどかったのを覚えています。

でも強いて言うなら、**Google Cloudの公式ドキュメント通りにコードを書いていけばなんとかなる**ってことです。

https://cloud.google.com/kubernetes-engine/docs?hl=ja

生成AIが回答してくれるKubernetesのコードの内容はドキュメントと若干違ったりして、コケることが多かったのですが、ドキュメント通りにやればうまくいくみたいなことがおおかったので、やっぱり公式ドキュメントが最強だなと改めて思いました。


:::note info
🐶「公式ドキュメントがやっぱり最強」
:::


## まとめ

今回のプロジェクトではざっくりと以下のことを学べました。
- LangChainの実装方法
- FastAPIの実装方法
- DDDをどう実装するかについて
- WebSocket通信の実装方法
- Terraformを用いてインフラのコード化
- Kubernetesを用いたリソース作成の方法について

今までインフラに対する苦手意識が大きかったのですが、インフラの状況が頭の中に浮かんでくるようになったのが非常に大きいかなと思います。
リソースの役割や名前の理解が増えたことで、このように図で考えるみたいなことができるようになったのだと思います。



最後までお読みいただきありがとうございました！

自分が今回の個人開発で学んだTipsが皆様のお役に立てれば幸いでございます！

:::note
🐶「ありがとうございました！」
:::

あ、そういえばこんなことやってます（n回目）

**【もんたのLINEスタンプ】**

https://store.line.me/stickershop/author/2887587/ja

:::note
🐶「ﾖｶｯﾀﾗﾐﾃﾈ」
:::