Angular with devcontainerで遅すぎて困った話

ng serveが進まない

ぼく「凍結してたAngularプロジェクトを再開するぞ」

ぼく「Angularのバージョンアップついでにdevcontainerに移行しよう」

ぼく「ng update --forceかけて、色々と更新したろ。」

ぼく「あとは他のライブラリもまとめてバージョンアップやな」

ぼく「おーわりっと。ちゃんと動くかng serveして確認しよう」

〜〜５分後〜〜

ぼく「はて、ng serveのログすら一切流れてこんのだが。

ぼく「初めからやろう。rm -rf node_modulesっと。」

〜〜10分後〜〜

ぼく「なんも消えてないんだが？？？」

原因？

ぼく「もしかして、コンテナにローカルボリュームをアタッチしているせいでIOが異様に重くなっている？」

ぼく「しゃーない。node_modulesだけでもVolumesにアタッチすっか」

devcontainerの構成

以下のように、.devcontainerディレクトリを使う方式でdevcontainerを構成。

元々はVSCodeから生成できるdevcontainerのテンプレートを使っていたが、
上記の理由により全体的に変更をしていきます。

/ Project-Root
   ├ /.devcontainer
   │   ├ devcontainer.json
   │   ├ docker-compose.yml
   │   └ Dockerfile
   ├ /src
   ├ /e2e
   ├ angular.json
   ├ ...
  (その他略)

変更後の各ファイル

devcontainerは恐らくほぼデフォルト。

devcontainer.json

{
    "name": "My App",

    "dockerComposeFile": "docker-compose.yml",
    "service": "app",
    "workspaceFolder": "/workspace",

    "settings": {
        "terminal.integrated.shell.linux": "/bin/sh"
    },

    "extensions": [
        "dbaeumer.vscode-eslint",
        "johnpapa.angular-essentials"
    ],
    "forwardPorts": [4200],
}

Dockerfileも、Dockerhubの公式Nodeイメージを使用するように変更。

Dockerfile

FROM node:14.15.4-buster

RUN npm install -g @angular/cli

EXPOSE 4200

最後に、docker-composeがキモ。

docker-compose.yml

version: '3'

services:
  app:
    build: .
    tty: true
    volumes:
      - node_data:/workspace/node_modules
      - ../:/workspace:cached
volumes:
  node_data:

• node_dataという名前のボリュームを切る
• node_modulesに作成したボリュームをアタッチ

こうすることで、ローカルにはnode_modulesを置かなくなるので、
ある程度は早くなるらしい。

やってみた

ぼく「うん、若干遅いけど数秒もあればビルドが始まるな。」

ぼく「これでなんとかなるな。」

ぼく「うーん。エラーはないけどレイアウト崩れまくっとるな」

ぼく「さすがに8->11はやりすぎたかな？」

まとめ

• Angularはnode_modulesが肥大化するので、devcontainer使ってる場合は注意。
• バージョンアップはこまめにしましょう。

さいごに

Angular on devcontainerのベストプラクティスがあったらどなたか教えてください・・・