こんにちは！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
に置いておきました。開発の際に参考になれば幸いです。
勉強になりました。
