フロントエンドは以下を使用して構築されています:
フロントエンドコードは以下のように構成されています：
frontend/src- メインのフロントエンドコード。frontend/src/assets- 静的アセット。frontend/src/client- 生成された OpenAPI クライアント。frontend/src/components- フロントエンドの各種コンポーネント。frontend/src/hooks- カスタムフック。frontend/src/routes- ページを含むフロントエンドの各種ルート。frontend/src/theme.tsx- Chakra UI のカスタムテーマ。
API のみのアプリを開発していて、フロントエンドを削除したい場合は、簡単に行えます：
-
./frontendディレクトリを削除します。 -
compose.ymlファイルで、frontendサービス/セクション全体を削除します。 -
compose.override.ymlファイルで、frontendサービス/セクション全体を削除します。
これで、フロントエンドのない（API のみの）アプリができました。🤓
必要に応じて、以下のファイルからFRONTEND環境変数も削除できます：
.env./scripts/*.sh
ただし、これらを削除するのはクリーンアップのためだけであり、残しておいても特に影響はありません。
開始する前に、Node Version Manager (nvm)または Fast Node Manager (fnm)がシステムにインストールされていることを確認してください。
-
fnm をインストールするには、公式 fnm ガイドに従ってください。nvm を使用したい場合は、公式 nvm ガイドを使用してインストールできます。
-
nvm または fnm をインストールした後、
frontendディレクトリに移動します：
cd frontend.nvmrcファイルで指定されている Node.js バージョンがシステムにインストールされていない場合は、適切なコマンドを使用してインストールできます：
# fnmを使用する場合
fnm install
# nvmを使用する場合
nvm install- インストールが完了したら、インストールしたバージョンに切り替えます：
# fnmを使用する場合
fnm use
# nvmを使用する場合
nvm usefrontendディレクトリ内で、必要な NPM パッケージをインストールします：
npm install- そして、以下の
npmスクリプトでライブサーバーを起動します：
npm run dev- その後、ブラウザで http://localhost:5173/ を開きます。
このライブサーバーは Docker 内で実行されているわけではなく、ローカル開発用であり、これが推奨されるワークフローです。フロントエンドに満足したら、フロントエンドの Docker イメージをビルドして起動し、本番環境に近い環境でテストできます。ただし、変更のたびにイメージをビルドするよりも、ライブリロード機能を持つローカル開発サーバーを実行する方が生産的です。
利用可能な他のオプションについては、package.jsonファイルを確認してください。
-
Docker Compose スタックを起動します。
-
http://localhost/api/v1/openapi.jsonから OpenAPI JSON ファイルをダウンロードし、frontendディレクトリのルートに新しいファイルopenapi.jsonとしてコピーします。 -
生成されたフロントエンドクライアントコードの名前を簡略化するために、以下のスクリプトを実行して
openapi.jsonファイルを修正します：
node modify-openapi-operationids.js- フロントエンドクライアントを生成するには、以下を実行します：
npm run generate-client- 変更をコミットします。
バックエンドが変更される（OpenAPI スキーマが変更される）たびに、これらの手順を再度実行してフロントエンドクライアントを更新する必要があることに注意してください。
リモート API を使用したい場合、環境変数 VITE_API_URL にリモート API の URL を設定できます。例えば、 frontend/.env ファイルに以下のように設定できます：
VITE_API_URL=https://my-remote-api.example.comそうすると、フロントエンドを実行する際に、その URL を API のベース URL として使用します。
フロントエンドには、Playwright を使用した初期のエンドツーエンドテストが含まれています。テストを実行するには、Docker Compose スタックが実行されている必要があります。以下のコマンドでスタックを起動します：
docker compose up -dその後、以下のコマンドでテストを実行できます：
npx playwright testまた、ブラウザを表示してテストの実行中に操作できる UI モードでテストを実行することもできます：
npx playwright test --uiDocker Compose スタックを停止して削除し、テストで作成されたデータをクリーンアップするには、以下のコマンドを使用します：
docker compose down -vテストを更新するには、テストディレクトリに移動し、既存のテストファイルを修正するか、必要に応じて新しいファイルを追加します。
Playwright テストの作成と実行に関する詳細情報については、公式のPlaywright ドキュメントを参照してください。