DockerでReact＋Flask環境構築に挑戦！node_modulesが作成されない問題との格闘記
私は最近、ReactとFlaskを組み合わせたフルスタックアプリの学習に取り組んでいます。
バックエンドにはSQLiteを使い、フロントエンドはReact＋Viteで開発することに決めました。
さらに学習の一環として、すべてDockerでコンテナ管理する環境を作ろうと挑戦中です。
目次
1. 環境構成の検討
目標はシンプルです。
・フロントエンド：React + Vite
・バックエンド：Flask + SQLite
・開発環境：Docker + docker-compose
まずはDockerでフロントとバックエンドのコンテナを作成するところからスタートしました。
Dockerfileとdocker-compose.ymlを用意し、各コンテナの依存関係やネットワークも設定していきます。
2. 初回 docker-compose up –build
最初の一歩として、docker-compose up –buildを実行しました。
しかし、思わぬ問題が発生。
Docker APIへの接続で500 Internal Server Errorが出て、コンテナが正常に起動しません。
原因を調べたところ、どうやらDockerデーモンがうまく動いていなかった可能性が高いことが判明。
デーモンを再起動して再試行すると、バックエンド側のコンテナはようやく起動するようになりました。
3. バックエンド側の確認
Flaskコンテナは起動しましたが、ブラウザで localhost:5000 にアクセスすると初期状態では Not Found が表示されます。
ここでPythonバージョンの不一致に気づき、pyenvを使ってホスト側とコンテナ側のPythonを3.9.7に統一しました。
さらにVSCodeのPython環境設定も合わせることで、開発環境の整合性が取れるようになりました。
バックエンドはここで安定動作するようになりました。
4. フロントエンド側の問題
次にReact＋Viteコンテナを起動してみたところ、vite: not found というエラーが発生。
原因を調べると以下のことが分かりました。
・Dockerコンテナ内には node_modules が存在しない
・ローカルにグローバルでインストールしたViteは、コンテナ内では使えない
・npm installを実行しても node_modules が作成されないことがある → キャッシュの影響が疑われる
これが今回最大の壁となっています。
5. 対策・試行
問題解決に向けていくつか試行しました。
１．docker-compose build –no-cache で再ビルド
→ しかしまだ node_modules は生成されず
２．docker-compose run –rm frontend bash でコンテナに入って直接確認
→ 確かに node_modules が存在しない
３．最終手段として RUN npm install -g vite でグローバルインストールを検討
→ これなら確実にViteコマンドが使えるようになる
ちなみに、Dockerfile内で npm install -g npm@latest を入れる手もありますが、ビルド時間が長くなるだけで必須ではありません。
6. 現状
現状の状況をまとめると以下の通りです。
・バックエンド（Flask + SQLite）：安定して動作
・フロントエンド（React + Vite）：まだ起動できず、node_modules が生成されない
次のステップとしては、Dockerfile内で確実にViteがインストールされるように調整すること、
さらに node_modules が正しく作成されるようにビルド順序やキャッシュ処理を見直すことが課題です。
7. 振り返り
今回の格闘で感じたことは、Dockerを使うと環境差異を完全に切り離せる反面、小さな設定やキャッシュの影響で思わぬトラブルが起きやすいということです。
特にフロントエンド周りは依存関係が多いため、node_modulesやnpmのキャッシュでハマるのかなと感じています。
ただ、この試行錯誤の過程は学習として価値があるとも感じています。
・Dockerの挙動理解
・コンテナ内外の環境差異の確認
・npmやnode_modulesの管理
どれも今後のReact＋Docker学習に役立つ知見です。
8. 今後の方針
次回は以下を重点的に試します。
・DockerfileでViteを確実にインストール
・node_modulesが作成されるビルド順序の最適化
・キャッシュ影響を回避する方法の模索
バックエンドが安定したことで、フロント側に集中できる状況になりました。
学習としても、こうしたトラブルシュート経験は非常に貴重です。
今回の挑戦はまだ完全成功には至っていませんが、試行錯誤の記録としてブログにまとめることで、同じように学習中の人にとって参考になる内容になると思います。
