DockerでAngular10の環境を構築してみる

こんにちは!kossyです!



さて、今回はDockerでAngularの環境を構築する手順について、
ブログに残してみたいと思います。




環境
Docker 19.03.12
docker-compose 1.26.2
Docker Desktop for Mac 2.3.0.4



Dockerfile作成

何はともあれまずはDockerfileを作成します。
コンテナ内でAngularアプリのボイラープレートを作るためだけに使用しますので、
中身はnodeを入れてangular-cliをnpm installするだけにしています。

// 作業ディレクトリ作成

$ mkdir angular-sample

$ cd angular-sample

// dockerfile作成

angular-sample$ touch Dockerfile

Dockerfile

FROM node:12.18
RUN npm install -g @angular/cli

コンテナ内でAngularアプリ作成

次にコンテナ内に入ってAngularアプリの雛形を作成していきます。

angular-sample$ docker run -it -v $PWD:/myapp -p 4200:4200 angular-sample bash

root@コンテナID:/$cd myapp

root@コンテナID:/$ng new angular-sample

? Would you like to add Angular routing? (Y/n)  // どちらでもいいです

? Which stylesheet format would you like to use? // これもどちらでもOK

以下の記事を参考にさせて頂きました。

この操作でローカルの作業ディレクトリ内にangular-sampleが作成されれば成功です。


開発環境用のDockerfile・Docker-compose.yml を作成

次に開発環境用のDockerfileを作成します。先ほど作ったDockerfileの中身を修正していきます。

FROM node:12.18
ENV LANG en_US.UTF-8

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

RUN mkdir /myapp
WORKDIR /myapp

ENV LANG en_US.UTF-8文字コード変換のエラーの発生を防ぐ意図があります。
Docker: コンテナのlocaleを設定したい - Qiita

vimは何かと便利なので入れています。その他は作業ディレクトリを指定する以外は
特に差分はありません。

次にdocker-compose.ymlを作成します。

angular-sample $ touch docker-compose.yml

./docker-compose.yml



version: '3'

services:
  node:
    build: .
    ports:
      - "4200:4200"
    volumes:
      - ".:/myapp"
    tty: true

ポート番号はangularのデフォルトで採用されている4200番を用いています。
他アプリとぶつからないように変更するのもいいと思います。

あとはdocker-compose buildをして、docker-compose upします。

angular-sample $ docker-compose build

angular-sample $ docker-compose up

もう一つターミナルを開いて、以下のコマンドでコンテナ内に入り、ng serveします。

angular-sample $ docker-compose exec node bash 

nodeはdocker-compose.ymlで指定したservices名で、コンテナ内に入るためにbashを指定しています。


あとは、コンテナ内で ng g component 等のコマンドを叩いて開発するも良し、
docker-compose run node ng g component とローカルで叩いて開発するも良しです。




今回作成したDockerfileやdocker-compose.ymlは

https://github.com/kossy0701/angular-sample

に置いておきました。開発の際に参考になれば幸いです。



勉強になりました。