コンテンツにスキップ
TutoriaLLM

アプリケーションを開発する

TutoriaLLMのリポジトリ構成

リポジトリ構成

TutoriaLLMには、フロントエンドとバックエンドの２つのシステムがあります。フロントエンドは、React+Vite+Tanstack Router で構築されており、バックエンドは、Hono+Node.js で構築されています。また、データベースとして PostgreSQLを使用しています。 また、これらの２つのシステムに拡張機能を提供するExtensionシステムがあります。これにより、Minecraftなど外部のアプリケーションと連携する機能を構築することができます。

フロントエンド

フロントエンドは、React+Vite+Tanstack Router で構築されています。任意のエディタを使用してコードを編集し、Node.jsを利用したローカル環境でアプリを利用することができます。

バックエンド

バックエンドは、Hono+Node.js で構築されています。データベースとして PostgreSQLを使用する必要があります。バックエンドは、フロントエンドと連携して、アプリケーションのデータを管理します。 また、バックエンドはDocker imageとして提供されており、Docker compose などを使用してデータベースと接続した上で、サーバーにデプロイすることができます。 このページでは、開発目的のために、ローカル環境でアプリを利用する方法を説明します。

リポジトリのクローン

GitHub リポジトリをクローンして、開発を行います。お好みのエディタを使用してコードを編集し、Node.jsを利用したローカル環境でアプリを利用することができます。

GitHub リポジトリ TutoriaLLM の GitHub リポジトリを確認してください。

環境変数の設定

以下は環境変数の例です。/apps/frontend/.env と /apps/backend/.env に設定してください。

/apps/frontend/.env

VITE_BACKEND_URL=http://localhost:3001

/apps/backend/.env

OPENAI_API_KEY="sk-xxxxxx"
OPENAI_API_ENDPOINT="https://your-openai-api-endpoint"


CORS_ORIGIN="http://localhost:3000"
POSTGRES_USER=postgres
POSTGRES_PASSWORD=postgres
DB_PORT=5432
POSTGRES_DB="tutoriallm_db"
DB_HOST="db.tutoriallm.local"


DOMAIN="localhost"
EMAIL="[email protected]"


DEFAULT_USER_PASSWORD="admin"
DEFAULT_USER_NAME="admin"

データベースとの接続

TutoriaLLM は、PostgreSQLと接続する必要があります。また、vector が利用できる PostgreSQL が必要です。ここでは、Docker composeを使用してpgvectorを利用する方法を説明します。

/docker-compose.yml
services:
  db:
    container_name: tutoriallm_db
    image: pgvector/pgvector:pg14
    ports:
      - "5432:5432"
    env_file:
      - ./apps/backend/.env
    environment:
      - POSTGRES_USER
      - POSTGRES_PASSWORD
      - POSTGRES_DB
      - PGDATA=/var/lib/postgresql/data/pgdata
      - TZ=UTC
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U $POSTGRES_USER -d $POSTGRES_DB"]
      interval: 5s
      timeout: 60s
      retries: 5
      start_period: 5s
    volumes:
      - db_data_db:/var/lib/postgresql/data
volumes:
  db_data_db:

サーバーの起動

データベースを起動します。

Terminal window
docker compose up

フロントエンドとバックエンドを以下のコマンドで起動します。

Terminal window
# フロントエンド
cd apps/frontend
pnpm i && pnpm dev


# バックエンド
cd apps/backend
pnpm i && pnpm dev

型定義の共有

このリポジトリでは、pnpm workspaceを使用して、フロントエンドとバックエンドで型定義を共有しています。 型定義はバックエンドで定義し、フロントエンドで使用することができます。

Terminal window
# バックエンドで型定義を生成
cd apps/backend
pnpm run build

拡張機能の開発

拡張機能は、デフォルトでは/packages/extensionsに配置されています。拡張機能を作成する場合は、このディレクトリに配置してください。 index.tsでエクスポートされた値をフロントエンドとバックエンドが読み込むために利用します。

拡張機能を定義した後、以下のコマンドでビルドします。

Terminal window
# 拡張機能のビルド
pnpm run build

ビルド後、自動的にフロントエンドとバックエンドに型定義が共有されます。