Angular + Docker + Visual Studio Code + WSL開発環境構築

最終的な実装結果はこちら。

事前準備

やること

1. WSLのインストール¹
2. Visual Studio Code (VS Code)のインストール²
3. VS Codeの拡張機能のインストール
   • Remote Development³
4. Dockerエンジンのインストール⁴

チェックリスト

• WSLの起動: ターミナルでwsl -vを実行しWSLのバージョンが取得できる。
• VS Codeの起動: インストールしたVS Codeが起動できる。
• VS Code拡張機能の導入: VS CodeでCTRL+SHIFT+Xを打ち，表示された拡張機能一覧にRemote Developmentがある。
• Dockerの起動: ターミナルでdocker run hello-worldを実行し，「Hello from Docker!」が表示される。

Dockerコンテナの準備

やること

新しいプロジェクトのディレクトリを作成

mkdir /path/to/new_project
cd /path/to/new_project

Dockerfileとdocker-compose.ymlの作成

ディレクトリ構成

.
├── Dockerfile
└── docker-compose.yaml

Dockerfile

FROM node:latest

RUN mkdir /usr/local/app
WORKDIR /usr/local/app

RUN rm -rf node_module
RUN npm install -g @angular/cli

docker-compose.yaml

services:
  web:
    build:
      context: .
    ports:
      - 4200:4200
    volumes:
      - .:/usr/local/app
    stdin_open: true
    tty: true

チェックポイント

• Dockerfile: docker build .でDockerイメージが作成される。
• docker-compose.yaml: docker compose upでコンテナが起動する。
• Angular CLI: docker compose run --rm web ng versionでAngular CLIのバージョン情報が出力される。

Angularプロジェクトの作成

やること

プロジェクトの新規作成

docker compose up -d
docker compose exec web ng new my-app --directory .

チェックポイント

• docker compose exec web ng serve --host 0.0.0.0を実行した後，ブラウザで http://localhost:4200 にアクセスしてAngularの初期画面が表示される。

1. WSL公式ページ ↩

2. Visual Studio Code 公式ページ ↩

3. Remote Development ↩

4. Dockerエンジンのインストール ↩