Docker × Anguler × 開発環境の整理

Goal
背景
コーディング
デバッグ環境
- Chrome attach
- Execute with Chrome

Goal

デバッグ環境と開発環境を整理する。

背景

Angular,NPMのバージョンアップを効率よくするため、ビルド環境をDockerで構築した。
結果として、開発環境（コーディングする環境）はWindows（ホストPC）、ビルド環境はDockerとすることができた。
一方、コーディングする際のインテリセンスの有効化や、デバッグ方法が確立できていなかったため、それを行う。

コーディング

DockerでAngularアプリケーションを起動させることができた。その際、Dockerで起動させる時のパフォーマンス劣化を防ぐため、node_moduleの同期を切った。これにより、ホストＰＣ上のVS Codeでソースコードを開くと、node_moduleへのパスが認識されず、常にエラーとして表示されるようになる。
さらに、インテリセンスも聞かないため、コーディングがこの上なくやりにくい状況となる。

インテリセンス、パスの検証の有効化

Node_Moduleへのパスを解決するために、１）node_moduleの同期を有効化する、２）ホストPCへのNodeインストール、３）同期を有効化して、NPM isntallを行った後、同期を解除して開発を行う、の３案が考えられる。

alternative 1

実行速度がありえないほど遅くなるため、長期的に非効率となるため、却下。

alternative 2

ホストPCにNodeをインストールしたくないために、Dockerを導入したので、本末転倒。だが、場合によってはいたしかななし・・・？

alternative 3

Step1: node_moduleのインストール

ホストPCにnode_moduleを設定するため、node_moduleディレクトリも含めてマウントしたDockerを起動する。

version: '3'
services:
  sample:
    tty: true
    image: myangular
    container_name: myangular
    build:
      context: . 
      dockerfile: Dockerfile
    ports:
      - "4200:4200"
    volumes:
      - ./..:/data
      - /data/node_modules //ここを消してCompose Upする
    working_dir: /data
  sample-api:
    image: json-server
    container_name: backend
    ports:
      - "3000:3000"
    volumes:
      - ./data/:/data
    working_dir: /data

その後、npm installをDockerコンテナ内で実行してnode_moduleをインストールする。

Step2: node_moduleの同期を切ってコンテナを立ち上げなおす。

Step1と同様の手順で今度はnode_moduleの同期を切ってコンテナを起動する。Step1では、ホストPC用のnode_moduleを設定したが、コンテナを起動しなおすことで、コンテナ内のnode_moduleが空になる。コンテナを起動したら、再度 npm installを実行してコンテナ内にもnode_moduleをインストールした状態にする。

Step3: インテリセンスの確認

エラーメモ：NgModule only refers to a type, but is being used as a value here.のエラーが発生　-> VSCodeを再起動したら治った。

デバッグ環境

結果的にどちらでも実行ができた。参考）browser-debugging
忘備録として設定値を残す。

Chrome attach

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Execute with Chrome

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to Chrome",
      "port": 9222,
      "request": "attach",
      "type": "chrome",
      "webRoot": "${workspaceFolder}"
    }
  ]
}