Docker-compose(Vue、Nginx)を利用した環境で、Vue.js(※)を更新したものの画面に反映されず困ったので解決方法をメモ書きします。
※画面表示を担当するファイル。ざっくりいうとHTMLファイルみたいなもの。
始めに次の対応を行いましたが、更新ファイルは反映されませんでした。
- docker-compose down --volumes と docker-compose up -d コマンドの実行。
- ブラウザ(google chrome)のデベロッパーツールを起動し、「キャッシュの削除と際読み込み」を実行
- Nginxコンテナの/var/cache/nginx/配下にあるキャッシュファイルの削除
結論
Dockerのビルドキャッシュが使い回されていたため。
ビルドキャッシュとは、Dockerfileをビルド(docker-compose buildコマンド実行)時に、Dockerfile記載された内容のインストール、コピーの結果をキャッシュとして保存する機能です。
今回はDockerfileを次のように定義していたので、更新したはずのローカルファイルは読み込まれず、ビルドキャッシュから読み込まれてしまっていました。
COPY <ローカルの更新ファイルの入ったディレクトリ> <Dockerコンテナのディレクトリ>
解決策
docker-compose buildコマンド実行時に--no-cacheオプションを使用して実行する。
--no-cacheオプションはビルド時に、イメージのキャッシュを使用しない設定となります。参考
つまり、docker-composeの起動は次のように実施します。
※コンテナが停止していない場合は先にdocker-compose downを実行。
$ docker-compose build --no-cache
$ docker-compose up -d
ちなみに--no-cacheオプションを使用しないと、ビルドキャッシュが使用される設定となります。
また、以下のコマンドを使用すると、ビルドキャッシュそのものを削除できます。参考
$ docker builder prune
ビルドキャッシュの状態はdocker system dfコマンドのBuild Cache欄で確認できます。
$ docker system df
TYPE TOTAL ACTIVE SIZE RECLAIMABLE
Images 20 3 7.179GB 6.422GB (89%)
Containers 3 3 153.9kB 0B (0%)
Local Volumes 5 0 398.4MB 398.4MB (100%)
Build Cache 119 0 62.58MB 62.58MB
実際にビルドキャッシュを削除してみます。
$ docker builder prune
WARNING! This will remove all dangling build cache. Are you sure you want to continue? [y/N] y
Deleted build cache objects:
4gngy24osebxkm9w1ofxli86r
u1ew5sa41kaerq1p3g0g0wh45
w73ieliu2ome1goe26acefs2d
hlyj40um883ivmy7897mc9qvp
gfmgwkra5zqdzygz2prg4h5yh
ybru8xoj10nbwt39fle28eiek
1dhcg4lfnqf7isqhkb5x5i5gz
xh34n2rbgu1wd5hltgfc7j6xf
anr8ibfxwxvim36cxusuifaz2
Total reclaimed space: 62.58MB
すると、SIZEとRECLAIMABLEが0となり、Build Cacheがなくなりました。
$ docker system df
TYPE TOTAL ACTIVE SIZE RECLAIMABLE
Images 20 3 7.179GB 6.422GB (89%)
Containers 3 3 153.9kB 0B (0%)
Local Volumes 5 0 398.4MB 398.4MB (100%)
Build Cache 110 0 0B 0B
