シスアド：(開発環境-10)システムの状態を確認する

ここまでのステップが完了したら、システムの状態を確認します。

1. バックエンドを起動する

まずは、バックエンドを起動します。
以下のコマンドを実行して、バックエンドを起動します。

cd （プロジェクトのディレクトリ）¥hamachi-app
docker compose -f docker-compose.dev.yml up

※ プロジェクトのディレクトリは、hamachi-appディレクトリでC:\Users\（ユーザー名）\Documents\hamachi-app\hamachi-appのような場所です。

事前にDocker Desktopを起動しておく

もしもDocker Desktopが起動していない場合は、起動しておいてください。

2. フロントエンドを起動する

次に、フロントエンドを起動します。
以下のコマンドを実行して、フロントエンドを起動します。

cd （プロジェクトのディレクトリ）¥hamachi-app
npm run dev

※ プロジェクトのディレクトリは、hamachi-appディレクトリでC:\Users\（ユーザー名）\Documents\hamachi-app\hamachi-appのような場所です。

3. ブラウザで確認する

最後に、ブラウザでシステムの状態を確認します。
ブラウザを開いて、http://localhost:5173にアクセスします。

これで、システムの状態を確認することができます。

そもそもウェブページが出ないとき

フロントエンドに問題があります。
正しく起動コマンドを実行しているか、またはエラーが出ていないかを確認してください。

ウェブページの表示でエラーが出るとき

残念な事にフロントエンドやバックエンド双方の問題が疑われます。
ネットワーク系のエラーなら、フロントエンドのAPIエンドポイントURL（getBasedHost）が正しく設定されているか、またはバックエンドが正しく起動しているかを確認してください。