諸注意
まだまだ勉強不足､理解不足故保証はできません｡
直接関係なさそうな部分は省略しています｡
結論とか学んだこととか
node_modulesディレクトリはホストからコンテナにコピーするのは難しい場合がある｡
そういうときはnode_modulesディレクトリをvolumes機能を使って別の場所に置いとく｡
筆者のスペック
数年間色々やってるけど､まだエンジニアとして就職できてない｡
docker
2024年の3月にやっと勉強し始めた人間｡公式チュートリアルを1通りやった程度｡
ことの始まり
上記の記事を参考にdockerでvueの開発環境を構築していたら､参考サイトではエラーがでてないのに自分の場合は途中でエラーが出てきてしまった｡
エラーが出たときのディレクトリ構造
docker-compose.yml
front(vueのプロジェクト名がついたフォルダ)/
├ vueプロジェクトを生成時に作られたディレクトリ達､ファイル達
└ dockerfile
エラーが出た当初のファイル達
docker-compose.yml
services:
front:
build: ./front
container_name: front
ports:
- 5173:5173
working_dir: /app
volumes:
- ./front:/app
dockerfile
FROM node:18-slim
WORKDIR /app
COPY . /app
run apt-get update
CMD ["yarn", "dev", "--host"]
エラーがでた箇所
vueのプロジェクトを作成した後に､
docker compose run --rm front yarn install
でホスト側にnode_modulesディレクトリ生成後､docker compose buildを実行するとCANCELED [front internal] load build context と出てきた｡
原因
ネットで色々調べたり､chatgptと問答していたら
大きなファイルやディレクトリがあると､dockerはビルドをキャンセルしてしまう
という答えらしきものにたどり着いた｡
要するにnode_modulesディレクトリが大き過ぎてキャンセルされてしまったと思われる｡
対処
ホストにあるnode_modulesをコンテナにコピーしようとするとキャンセルされてしまう｡
↓
ならば､コンテナでnode_modulesディレクトリを生成して､それをホスト側にコピーすればよいのでは?
と思い､ビルド時にyarn installするようにdockerfileを編集
dockerfile
FROM node:18-slim
WORKDIR /app
COPY . /app
run apt-get update
+ run yarn install
CMD ["yarn", "dev", "--host"]
結果
ビルドは問題なくできた｡しかし
第2の問題発生
ビルドはできたが､docker compose up をしたら
/bin/sh: 1: vite: not found
というエラーが出てきた｡
viteが無いらしい｡
しかし､yarn installはしたはず…｡
原因
ネット上を調べた回ったところ以下のサイトいわく
dockerfileでyarn installしてnode_modulesディレクトリを生成しても､docker-compose.ymlのvolumeで全部上書きされて消えてしまうようだ｡
詳しい仕組みや原因などは､参考サイトに詳しく書いてあるため直接見たほうが早いと思われる｡
対処
上記のサイトを参考に､docker-compose.ymlを編集しnode_modulesを名前付きボリュームで別管理した｡
docker-compose.yml
services:
front:
build: ./front
container_name: front
ports:
- 5173:5173
working_dir: /app
volumes:
- ./front:/app
+ - node_modules:/app/node_modules
+ volumes:
+ node_modules:
結果
問題なくビルドもできコンテナも問題なく建てられ､vueも問題なく動いた｡
駄文
node_moduleディレクトリが生成された後に必ずエラーが起きるのでnode_moduleディレクトリあたりが怪しいと薄々気づいてはいた｡
dockerfileでディレクトリごと丸ごとコピーするしたとしても､どうせvolumes機能で上書きされるのなら､package.jsonだけコピーしてnode_modulesディレクトリを生成すればよいのでは?
なぜ参考サイトではできたのに､私はできなかったのか考察
私の場合は､vue router,pinia,eslint,prettierなど色々追加してしまった故にnode_modulesディレクトリが肥大化してしまってキャンセルされてしまったと予想｡