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

　Dockerとdocker-composeでのAngularの開発環境の構築手順です。
　完成しているソースは以下にあります。

Docker-sample/Angular_15 at main · tsuneken5/Docker-sample

Contribute to tsuneken5/Docker-sample development by creating an account on GitHub.

環境
プロジェクトディレクトリの作成
Dockerfileの作成
docker-compose.ymlの作成
.dockerignore
イメージのビルド
プロジェクトの作成
コンテナの起動

環境

ホストOS：Windows 11 23H2
ゲストOS：Ubuntu 20.04.5
Docker version：20.10.12
Docker Compose version：2.10.2
Node.js：18.11
Angular：15.0.0

プロジェクトディレクトリの作成

　下記のコマンドを実行し、プロジェクトディレクトリを作成します。

　今回は sample-app としています。

$ mkdir sample-app

　Dockerfileとdocker-compose.yamlと.dockerignoreも空で良いので作成しておきます。

$ touch Dockerfile
$ touch docker-compose.yml
$ touch .dockerignore

　ディレクトリ構成は下記のようになります。

$ tree -a -F --dirsfirst
.
├── sample-app/
├── .dockerignore
├── Dockerfile
└── docker-compose.yml

Dockerfileの作成

　nodeイメージを取得し、npmを利用してangularをインストールします。

FROM node:18.13.0

RUN apt-get update -qq && apt-get install -y vim
RUN npm update -g npm
RUN npm install -g @angular/cli@15.0.0

COPY ./sample-app /home/node/sample-app
WORKDIR /home/node/sample-app

EXPOSE 4200

CMD ["ng", "serve", "--host", "0.0.0.0"]

　nodeやAngularのバージョンは各自の環境に合わせて変更してください。

docker-compose.ymlの作成

version: '3'

services:
  angular:
    build:
      context: .
    command: ng serve --host 0.0.0.0
    user: node:node
    volumes:
      - ./sample-app:/home/node/sample-app
    working_dir: /home/node/sample-app
    ports:
      - "4200:4200"

.dockerignore

# Angular
**/node_modules
**/dist

#git
**/.git**

イメージのビルド

$ docker-compose build

プロジェクトの作成

$ docker-compose run --rm angular ng new sample-app --directory .

　sample-app はプロジェクト名に合わせて変更してください。

コンテナの起動

　下記のコマンドでコンテナを起動します。

$ docker-compose up -d

　コンテナ起動後、ブラウザから「http://localhost:4200/」にアクセスして、Angularの画面が表示されれば成功です。

【Docker】Windows11 + WSL2 ＋ Docker で Anuglar開発環境を作成する

環境