Docker上でフロントエンドサーバーが表示されず404エラーが返ってくる問題を解決した体験談
はじめに
Docker上で，ReactとJavaのプロジェクトを動作させようとした際に起こった問題です．
Dockerのコンテナを起動してフロントエンドのサーバーにアクセスしようとした際、localhost:3000 にアクセスしても何も表示されず、ブラウザのコンソールには404エラーが表示される問題に直面しました。
その後調査を進めていくと，localでnpm run devしても同様の問題が発生することが分かりました
本記事では、この問題の原因を特定し、解決に至るまでの過程を詳しく解説します。
問題の概要
発生した問題
localhost:3000 にアクセスすると、ページが表示されずブラウザのコンソールに「Failed to load resource: the server responded with a status of 404 ()」というエラーが表示される。
試したこと:
Dockerコンテナを使用してフロントエンドサーバーを起動。
Dockerを使用せず、ローカル環境でnpm run devコマンドを実行してフロントエンドサーバーを起動。
結果
どちらの場合も同様に404エラーが発生。
問題発生時の状況
以下は、Dockerコンテナを起動した際のコンテナ一覧の一部です。
87b1dbe2ebf9 frontend "docker-entrypoint.s…" 11 minutes ago Up 11 minutes 0.0.0.0:3000->3000/tcp frontend
ef0f349ec797 backend "java -jar /app/app.…" 11 minutes ago Up 11 minutes 0.0.0.0:9000->9000/tcp backend
ブラウザのコンソールには以下のエラーが表示されました。
Failed to load resource: the server responded with a status of 404 ()
さらに、ホストマシンでポート3000が他のプロセスによって使用されていないか確認したところ、以下のような結果が得られました。
netstat -ano | findstr :3000
TCP [::1]:3000 [::]:0 LISTENING 17900
TCP [::1]:3000 [::1]:50679 TIME_WAIT 0
TCP [::1]:50680 [::1]:3000 TIME_WAIT 0
トラブルシューティング
-
Dockerコンテナのログ確認
最初に、frontend コンテナのログを確認しましたが、エラーは見当たりませんでした。docker logs frontendログには以下のようなメッセージが表示されていました。
client@0.0.0 dev vite --mode development --host Re-optimizing dependencies because vite config has changed VITE v5.4.5 ready in 471 ms ➜ Local: http://localhost:3000/ ➜ Network: http://172.21.0.2:3000/ -
ポート競合の確認
netstat コマンドでポート3000が既に使用されていることを確認しました。プロセスID 17900 がポート3000をリッスンしており、これが原因でDockerコンテナが正常に動作していない可能性がありました。 -
ブラウザのデベロッパーツール確認
ブラウザのデベロッパーツールで具体的にどのリソースが404エラーを返しているのかを確認しましたが、特定のAPIエンドポイントや静的ファイルが見つからないことが原因でした。 -
フロントエンドの設定確認
フロントエンドの設定ファイル（例: vite.config.js や .env）でAPIのベースURLが正しく設定されているかを確認しました。また、バックエンドのエンドポイントが正しく動作しているかも確認しました。 -
不要なDockerコンテナの削除
環境をシンプルにするため、以下の不要なDockerコンテナを削除しました。docker rm -f docker-worker-1 docker-api-1 docker-sandbox-1 docker-weaviate-1 docker-web-1 -
ローカルでのサーバー起動
Dockerを使用せずに、ローカル環境でnpm run devコマンドを実行してフロントエンドサーバーを起動しましたが、同様に404エラーが発生しました。
問題の発見と解決
原因の特定
最終的に、Viteプロジェクトのルートディレクトリにあるindex.htmlファイルを，なんだこれイランやろのノリで削除していたことが原因だと思い，復元すると無事アクセスできました。index.htmlはViteがフロントエンドアプリケーションを起動するためのエントリーポイントであり、これが存在しないと正常にサーバーが動作しません
解決方法
index.htmlの復元
誤って削除してしまったindex.htmlファイルをプロジェクトのルートディレクトリに復元しました。以下は基本的なindex.htmlの内容です。
html
コードをコピーする
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
サーバーの再起動
index.htmlを復元後、再度サーバーを起動しました。
npm run dev
ブラウザでの確認
http://localhost:3000 にアクセスすると、正常にフロントエンドが表示されました。
なぜ解決されたのか
Viteはindex.htmlをエントリーポイントとして使用し、そこからJavaScriptファイルを読み込んでアプリケーションを構築します。index.htmlが存在しない場合、サーバーはリクエストに対して適切なレスポンスを返せず、404エラーが発生します。index.htmlを復元することで、Viteは正しくアプリケーションを起動し、ブラウザにページを表示できるようになりました。
問題の振り返りと学び
今回の問題を通じて、以下の点を学びました。
重要なファイルの削除には注意する: index.htmlのようなエントリーポイントとなる重要なファイルは、誤って削除しないように注意が必要です。
トラブルシューティングの体系的アプローチ: 問題が発生した際には、ログの確認、ポートの確認、設定ファイルの確認など、体系的に原因を特定することが重要です。
ローカルとDocker環境の両方でのテスト: 同じ問題が異なる環境でも再現する場合、コードや設定ファイル自体に問題がある可能性が高いことを確認できました。
まとめ
フロントエンドのサーバーが404エラーを返す問題は、様々な原因が考えられますが、今回はエントリーポイントであるindex.htmlの削除が原因でした。適切なファイル構成を保つことと、問題発生時には体系的なトラブルシューティングを行うことで、迅速に問題を解決できることを学びました。
皆さんも同様の問題に直面した際には、エントリーポイントとなるファイルの存在をまず確認することをお勧めします。