はじめに
「フロントエンド開発をやってみたいけどローカルの環境汚染が気になる。。。」
「新しい技術を試したいけど、PCにNode.jsやツールを直接インストールしたくない...」
そんな方に向けて、Docker DesktopとVS Codeのみを使い、コンテナ内でAngular開発を完結させる手順をまとめました。
構成
Host OS: Windows / macOS / Linux (Docker Desktop導入済み)
Editor: VS Code (+ Dev Containers 拡張機能)
Framework: Angular (TypeScript)
開発用ディレクトリと設定ファイルの準備
まず、プロジェクトの基板となるフォルダを作成し、その中に以下の2つのファイルを作成します。
Dockerfile
Angular CLIをインストールしたNode.jsイメージを作成します。
# 軽量なNode.jsイメージを使用
FROM node:20-slim
# Angular CLIをグローバルにインストール
RUN npm install -g @angular/cli
# 作業ディレクトリの設定
WORKDIR /app
# コンテナが勝手に終了しないように維持する
CMD ["tail", "-f", "/dev/null"]
docker-compose.yml
ポートマッピングやボリューム（同期）の設定をします。
services:
app:
build: .
volumes:
- .:/app # ローカルのファイルをコンテナに同期
ports:
- "4200:4200" # Angularの開発サーバー用
tty: true
コンテナの起動とAngularプロジェクトの生成
ターミナル（コマンドプロンプト）で作成したフォルダに移動し、以下の手順で実行します。
コンテナの起動
$ docker compose up -d
Angularプロジェクトの初期化
カレントディレクトリ（.）に展開しつつ、プロジェクト名を指定します。
Angularプロジェクトを開始するにはng newを使います。(参考：Angular CLIの ng new リファレンス)
$ docker compose exec app ng new my-project --directory .
ここで、my-projectは作成するプロジェクト名です。
--routing --style scssなど生成時のオプションを指定できますが、
しなくてもコンソール上で質問してきてくれるので問題ないです。
VS Codeでの開発体験を最大化する
ローカルのVS Codeで開発するために、拡張機能 「Dev Containers」 をインストールします。
-
VS Codeでプロジェクトフォルダを開く
-
左下の青いアイコン [><] をクリック
-
「Reopen in Container」 を選択
これでVS Code自体がコンテナ内で動作し、コンテナ内の node_modules を参照して強力な補完が効くようになります。
開発サーバーの起動
VS Code内のターミナル（または docker compose exec）で以下を実行します。
$ ng serve --host 0.0.0.0
--host 0.0.0.0 : これを付けないと、コンテナの外側（ブラウザ）からアクセスできないため必須です。
参考：Angular CLI の ng serve リファレンス
ブラウザで http://localhost:4200 にアクセスし、初期画面が表示されれば成功です！
まとめ
この構成のメリットは、
- PCを買い替えても、Dockerさえあれば数分で同じ開発環境が戻ってくる
- チーム開発の場合、チームメイトと環境の差異が起きにくい
ことです。ぜひやってみてください。