angular × Docker × 開発環境の構築（改善）

Goal

Angular開発環境をDockerを使って構築する。の改善。 ref) www.kinakomotitti.net

改善ポイント

以前は、node_moduleディレクトリの同期のために、docker-compose.yamlを変種して、つど共有するVolumeの設定を変更していた。
この操作を設定ファイルの変更のみでできるように改善した。

　改善後のステップ

Templateをcloneする
.envファイルを編集して、ng newするかしないか、するなら名前は何にするかを設定する。
docker compose upする。

改善ポイント

改善後のdocker-compose.yaml

services:
  build:
    build: ./docker-images/my-angular-image
    container_name: angular-setup
    command: > 
      /bin/bash -c "
      echo start create new app &&
      if [ ${SKIP_GENERATE_APP} = false ];then ng new ${ANGULAR_APP_NAME} --routing true --skip-git --style scss;fi &&
      echo install pacakges &&
      cd ${ANGULAR_APP_NAME} && 
      ng add @angular-eslint/schematics --skip-confirmation &&
      npm install --save-dev eslint-config-prettier &&
      npm install &&
      exit
      "
    environment:
      - NG_CLI_ANALYTICS=false
    volumes:
      - ./angular:/project
    working_dir: /project

  devenv:
    tty: true
    container_name: angular
    build:  ./docker-images/my-angular-image
    depends_on:
      build:
        condition: service_completed_successfully 
    command: > 
      /bin/bash -c "
      npm install &&
      ng s --host 0.0.0.0
      "
    environment:
      - NG_CLI_ANALYTICS=false
    ports:
      - "4200:4200"
    volumes:
      - ./angular/${ANGULAR_APP_NAME}:/project/
      - /project/node_modules
    working_dir: /project

  sample-api:

手動作業をdocker-compose.yaml - commandに実装

node_moduleディレクトリを含めてDocker Containerにマウントすると、ng serveなどのコマンドを実行するたびに時間がかかる。これを解消するため、いったんnode_moduleを含めてマウントし、ローカルPCにModuleをインストールしたうえで、node_moduleのマウントを切ったうえで再度コンテナを立ち上げ、ng installを実行するといった作業を行っていた。
今回の改善で、この処理がコマンド一発で実行できるようにした。また、ローカルPCにnode moduleをインストールする、新しいアプリケーションを作成するといった作業をbuildサービスで実行し、buildが正常に成功したのち、開発用のコンテナ(devenv)を立ち上げるといった処理を追加した。