🐥

LangChain、FastAPI、Next.jsを使用してシンプルなチャットボットを作成する（1回目）

2024/07/05に公開

Docker

LangChain、FastAPI、Reactを使用してシンプルなチャットボットを作成しながら、APIやReactの実践的な使い方を学びましょう。

この記事では、フロントエンドのUIをNext.jsのApp Routerで構築し、チャットボットのロジックを実行するサーバーをPythonのFastAPIとDockerを使用して構築する方法を詳しく解説します。

今回作成するアプリ

ソースコード：[ソースコードのURL]

今回作成するアプリは、二つの入力フィールドを持つシンプルなチャットボットです。一つのフィールドにはOpenAIのAPIキーを入力し、もう一つのフィールドにはプロンプトを入力します。ボタンを押すと、アシスタントからの返事が返ってきます。

前提条件

Dockerがデバイスにダウンロードされていること（まだの方はこちらからダウンロードしましょう）
Pythonに関する基礎知識（可能であればReactの基礎知識）

バックエンドの開発環境を作成する

まずはDockerを用いてFastAPIとPythonの開発環境を作成しましょう。
プロジェクト用のフォルダを作成してDockerfile、docker-compose.yaml、requirements.txtを作成しましょう。

Dockerfile

# ベースイメージとしてPython 3.11を使用
FROM python:3.11

# パッケージリストを更新
RUN apt-get update

# 日本語ロケールを設定（UTF-8）
RUN apt-get -y install locales && \
  localedef -f UTF-8 -i ja_JP ja_JP.UTF-8

# vimエディタをインストール
RUN apt-get install -y vim

# gitをインストール
RUN apt-get install -y git

# PostgreSQLクライアントライブラリをインストール
RUN apt-get install libpq5

# 環境変数を日本語ロケールに設定
ENV LANG ja_JP.UTF-8
ENV LANGUAGE ja_JP:ja
ENV LC_ALL ja_JP.UTF-8
ENV TZ JST-9

# ターミナルの種類を設定
ENV TERM xterm

# Pythonの依存関係をインストール
COPY requirements.txt .
RUN pip install --upgrade pip && \
  pip install --upgrade -r requirements.txt

# 不要になったrequirements.txtファイルを削除
RUN rm requirements.txt

# 作業ディレクトリを設定
WORKDIR /app

# アプリケーションのエントリーポイントを設定
CMD ["uvicorn", "src.main:app", "--host", "0.0.0.0", "--port", "70"]

docker-compose.yaml

version: '2'

services:
  chat-service:
    # Dockerfileのビルドコンテキストを現在のディレクトリに設定
    build: .

    # コンテナのポート70をホストのポート8000にマッピング
    ports:
      - "8000:70"

    # インタラクティブな端末を有効にする
    tty: true

    # 標準入力をオープンにする
    stdin_open: true

    # ホストの現在のディレクトリをコンテナの/appディレクトリにマウント
    volumes:
      - '.:/app'

requirements.txt

uvicorn==0.30.1
fastapi==0.110.0
python-dotenv==1.0.1
pytest==8.2.2
langchain==0.2.6
langchain-openai==0.1.14
langchain-community==0.2.6
isort==5.13.2

上記のファイルを作成したらDockerを起動させましょう。

docker-compose up -d

恐らくDockerのコンテナが立ち上がったと思います。
しかし、このままだとコンテナが立ち上がってもすぐに止まってしまうのでsrc/main.pyを作成して以下のコードを記述します。

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

origins = ["http://localhost:3000"]

app = FastAPI()
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["GET", "POST"],
    allow_headers=["*"],
)

@app.get("/")
def read_root():
    return {"Hello": "World"}

そしたら再度コンテナを立ち上げましょう

docker-compose up -d

Dockerのログを出力させて以下のような出力が出れば成功です。

chat-service-1  | INFO:     Started server process [1]
chat-service-1  | INFO:     Waiting for application startup.
chat-service-1  | INFO:     Application startup complete.
chat-service-1  | INFO:     Uvicorn running on http://0.0.0.0:70 (Press CTRL+C to quit)

続いて、localhost:8000/docsにアクセスしてAPIのドキュメント画面が出れば成功です。

次回はフロントエンドの環境構築を行います。

今回作成するアプリ

前提条件

バックエンドの開発環境を作成する

Discussion