Zenn
🐳

Windows10 + WSL2 ＋ Docker で Anuglar開発環境を作成する

2021/12/20に公開
Angular
Docker
tech

2021年12月18日時点のWindows10での情報です

Windows+Volta＋Angularプロジェクトを作成する（まとめ）では、Node.jsのバージョン管理ツールを使って、Angularプロジェクトを作成しました。

バージョン管理ツールは開発メンバーでバージョン管理ツールを揃える必要があったり、
バージョン管理ツールを乗り換える際に、過去のプロジェクトも修正する必要があったりという問題もあります。
そこでWindows10＋Dockerを使ってAngular開発環境を作成し、チームメンバーで開発環境の作成効率化に、Dockerがどれほど有効なのかを検証して行きたいと思います。

■ Windows10にWSL2とDockerをインストールする方法はこちら
Windows10(Home,Pro)でDockerをインストールしてみる

■ Dockerの基本的な操作はこちら
Windows10 で Hello from Docker！してみた。

Windows10 + WSL2 ＋ Dockerで開発する方法

Windows10 + WSL2 + Dockerで開発する方法は、主に2種類あるようです。

ホスト側からDockerコンテ内に接続して開発する方法

VSCodeの拡張機能「Remote Container」を使用して、ホスト側でDockerコンテナに接続して
開発を行います。
※こちらで開発環境を作成してみたのですが、とても遅くて開発するにはストレスを感じました。

Dockerコンテナ内で開発する方法

Dockerコンテ内で開発作業を行う方法で、こちらが今回の記事になります。

Dockerコンテ内に開発環境を作成

VisualStudioCodeに拡張機能 「Docker」をインストール

まずはVSCodeを起動し、拡張機能から「Docker」をインストールしておきます。

インストールが終了すると、Dockerアイコンが表示されます。

Dockerfile、docker-compose.ymlファイルを作成

ホストPC上に適当な作業フォルダを作成します。
例としてF:¥sampleworkフォルダを作成しました。
このフォルダをVsCodeで開き、Dockerfileとdocker-compose.ymlファイルを作成します。

Dockerfile

Dockerfileとはコンテナのイメージとなるファイルです。
Dockerfileの内容です。

Dockerfile
FROM node:16
WORKDIR /app
RUN npm install -g @angular/cli@13.1.2
EXPOSE 4200
  • FROM・・・使用するイメージを指定します。node.jsのバージョン16を使用することにしました。
  • WORKDIR・・・RUNコマンドを実行する際の作業ディレクトリを指定します。
  • RUN・・・angular/cliのグローバルインストールを実行します。
  • EXPOSE・・・どのポートを公開するかを明示します。4200ポートの公開を明示します。

node.jsのバージョンですが、2021/12/18時点でnode.jsの推奨版が16.13.1でしたので、バージョン16を使用することにします。

次にdockerhubでnode.jsを検索します。

node.jsの公式イメージからどのLinuxディストリビューションを使用するか決めます。

node.jsのバージョン16には、以下のようなLinuxディストリビューションがあります。

イメージ名 説明
bullseye Devianディストリビューションのバージョン11
bullseye-slim Devianディストリビューションのバージョン11 の軽量イメージ
buster Devianディストリビューションのバージョン10
buster-slim Devianディストリビューションのバージョン10 の軽量イメージ
stretch Devianディストリビューションのバージョン9
stretch-slim Devianディストリビューションのバージョン9 の軽量イメージ
alpine シンプル・軽量なLinuxディストリビューション
Dockerfileのベストプラクティスでは、Debianディストリビューションの利用が推奨されています。
Debianディストリビューションは、バージョンごとにコードネームがあり、bullseye(v11)、buster(v10)、stretch(v9)となります。
Debianほどのフルセットが必要でない場合は、軽量版のalpineを使用します。
またslimがつくものは、使用頻度の低いツールやライブラリが除外されたイメージになります。

dockerhubのnode.jsのページをの下の方にスクロールしていくと、以下のような記述があります。

node:<version>

これがデファクトのイメージです。必要なものが何なのかわからない場合は、おそらくこれを使うことになるでしょう。

何を使えばよいかわからない場合は、node:16を指定するとよいようです。
node:16はbusterディストリビューションが使用されています。

docker-compose.yml

docker-compose.ymlとは、コンテナのイメージをビルドしコンテナを作成したり、コンテナの起動・停止を行うためのツール「Docker Compose」の定義ファイルです。
docker-compose.ymlの内容です。

docker-compose.yml
version: '3'

services:
  angular-app:
    build: .
    ports:
      - 4200:4200
    volumes:
      - ./app:/app
    environment:
      - CHOKIDAR_USEPOLLING=true
    tty: true
    stdin_open: true
  • build・・・カレントフォルダのDockerfileからイメージを構築します。
  • ports・・・ホスト側のポートとコンテナ側のポートをマッピングします。
  • volumes・・・ホスト側のカレントフォルダ下のappフォルダと、コンテナ内のappフォルダ（DockerfileのWORKDIRで指定したフォルダ）をマウントします。
  • environmentのCHOKIDAR_USEPOLLING=true・・・ホットリロード（プログラムの変更を瞬時にUIに反映する機能）を有効にするために記述します。Node.jsでファイルの変更監視にchokidarが使用されているようで、そのオプションを設定する必要があるそうです。
  • tty・・・runコマンドの-tオプションと同じで、疑似端末（カーソルの移動や文字の入力などを行う端末）を割り当てます。
  • stdin_open・・・runコマンドの-iオプションと同じで、標準入出力をコンテナに割り当てます。

コンテナの作成

コンテナのイメージをビルドしコンテナを作成したり、コンテナの起動・停止を行うためのツール「Docker Compose」はDockerに同梱されており、Dockerインストール時に一緒にインストールされています。
「docker compose version」コマンドで確認してみると、「v2.2.1」がインストールされていました。

docker compose version

先ほど作成した「docker-compose.yml」ファイルから「Docker Compose」ツールでコンテナを作成します。
VSCodeのターミナルで「F:\samplework」カレントフォルダに、「docker compose up」コマンドでコンテナを作成します。

docker compose up -d

これでイメージとコンテナが作成されました。
「docker ps -a」コマンドと「docker image ls」コマンドで確認してみます

docker ps -a


docker image ls

コンテナに入り、angularプロジェクトを作成

コンテナが作成されたので、VSCodeのターミナルウィンドウからコンテナ内に入っていきます。

  1. VSCodeでDockerアイコンをクリックします。
  2. コンテナ「samplework_angular-app」を右クリックします。
  3. 「Atach Shell」をクリックします。


これでコンテナ内のappディレクトリに入りました。

ターミナルでanularのバージョンを確認してみます。

npx ng version

続いてanularプロジェクトを作成します。
プロジェクト名はサンプルとして「myapp」とし、とりあえずgitもスキップしました。

npx ng new myapp --strict --skip-git


cdコマンドで作成したプロジェクトのディレクトリに移動します。

cd myapp

作成したプロジェクトをローカル実行します。
「--host 0.0.0.0」と「--poll 1」オプションを指定します。

npx ng serve --host 0.0.0.0 --poll 1

「--host 0.0.0.0」を指定すると、コンテ内で起動するローカルサーバーが、ホスト側からアクセス可能になります。
また「--poll」オプションについては、
Angular CLIがWindowsホスト上のLinux VMの共有ディレクトリで動作している場合、つまりAngularaがWindows上のDockerで動作している場合、ホスト環境からのファイルの変更を検出しないそうです。pollオプションを指定しない場合はデフォルトの動作である「ファイルの変更を検出しない」」が適用されますが、「--poll 1」とオプションを指定すると「1ミリ秒間隔でファイル変更を検出する」ことになり、ポーリングが有効になるそうです。（詳しくはこちら）

ブラウザを起動しhttp://localhost:4200にアクセスします。
以下のページが表示されれば成功です。

ホットリロードが効くかどうかも確認します。
VSCodeから/app/myapp/src/app/app.component.htmlに変更を加えます。

ファイルを保存すると、UIが変更されます。

以上で、Windows10(WSL2)でDockerコンテナ内に開発環境を作成できました。

Githubに登録する

Dockerfileとdocker-compose.ymlファイルを含めてgitに登録します。
チームメンバーは下記のコマンドを実行するだけで環境構築できます。

cd <プロジェクトを配置したいフォルダ>
git clone <GitHubでコピーしたAngularプロジェクトのURL>
docker compose up -d

gitへの登録方法などはこちら
Windows＋Volta+AngularプロジェクトをGitHubにアップする
Windows＋Volta+Angularプロジェクトにメンバーを招待する

Discussion