Dockerコンテナ内で独自にDevContainersっぽく使えるAngularプロジェクト環境を構築してみる

            
            + VSCodeにエクステンションと「devcontainer.json」と呼ばれる設定ファイルを入れるだけで、
    あとは自動でDockerコンテナの開発環境がバックグラウンドで準備される
+ 開発コンテナには必要なライブラリやランタイムをDockerのVolume内で隔離・管理できる
+ プロジェクトのリソースファイルと開発環境を分離できるので、
    類似のプロジェクトでは開発コンテナの統一・再利用が可能となる
        

            
            $ ng new my-workspace --no-create-application
$ cd my-workspace
$ ng generate application app-a
$ ng generate application app-b
$ ng generate application app-c
#...
        

            
            {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "app-a": {
      ...
    },
    "app-b": {
      ...
    },
    "app-c": {
      ...
    },
    //...中略
  },
  //...中略
}
        

            
            version: '3.9'

services:
  app:
    #...他のタグは省略
    volumes:
      #👇リソースはprojectフォルダにバインドマウント
      - ./:/app/project
      #👇念の為node_modulesをバインドマウントから除外
      - /app/project/node_modules/
      #👇cacheボリュームをworkspaceフォルダにマウント
      - cache:/app/workspace
    #👇作業ディレクトリをワークスペースのフォルダに指定
    working_dir: "/app/workspace"

volumes:
  #👇ワークスペースとなるボリューム名(名前は任意)
  cache:
        

            
            /app
├── workspace (Volumeマウントかつ作業フォルダ)
└── project (Bindマウント)
        

            
            .
├── app-a
│   ├── src (リソースフォルダ)
│   ├── ...
│   ├── package.json
│   └── docker-compose.yml (上で説明した内容を適用)
├── app-b
│   ├── src (リソースフォルダ)
│   ├── ...
│   ├── package.json
│   └── docker-compose.yml (上で説明した内容を適用)
└── app-c
    ├── src (リソースフォルダ)
    ├── ...
    ├── package.json
    └── docker-compose.yml (上で説明した内容を適用)
        

            
            $ cd app-a
#👇初回はコンテナにアタッチモードで中に入って作業
$ docker-compose up -d && docker-compose exec app bash

###...アタッチモードでワークスペースに入る

#👇プロジェクトのpackage.jsonをワークスペースへ持ってくる
$ cp ../project/package.json ./package.json
#👇package.jsonからnpmパッケージをインストール
$ yarn install
        

            
            $ cd app-b
$ docker-compose up -d && docker-compose exec app bash

###...アタッチモード

#👇プロジェクトのリソースをワークスペースへコピー
$ cp -r ../project/ ./
#👇アプリをビルド・デバックサーバーを起動
$ yarn start
        

            
            $ cd app-c
$ docker-compose up -d && docker-compose exec app bash

###...アタッチモードでワークスペースに入る

#👇プロジェクトのリソースをワークスペースへコピー
$ cp -r ../project/ ./
#👇アプリをビルド・デバックサーバーを起動
$ yarn start