はじめに

前回の記事でAngularの学習をしたいのによくわからないエラーが出て鬱陶しいと思ったので他の方法でAngularの環境構築できないか考えました。そう言えばDockerを使えばマシンのOS関係なくAngularの環境構築できると思いました。
Dockerの構築をしたことがなかったので、調べたことのアウトプットとDockerを用いたAngularの環境構築の仕方を解説します。

Dockerとは

コンテナ仮想化を用いてアプリケーションを開発・配置・実行するためのオープンプラットフォームである。[wikipediaより]

Dockerのメリットとして、開発用マシンで作成したDockerイメージを他のメンバーのマシンに簡単にコピーできます。つまり、MacやWindowsなどのOSに関係なく開発環境を作ることができます。これで、予想外のエラーは発生しなくなると思います！

Dockerのダウンロード方法などは以下を参照して下さい。
https://docs.docker.jp/get-docker.html

準備

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

.
├── docker
│   └── node
│       └── Dockerfile
└── docker-compose.yml

準備が完了したら環境構築していきます。

環境構築

1. docker-compose.ymlの作成

docker-compose.ymlは、アプリケーションを動かすための処理を記述しているファイルです。
docker-compose.ymlを開き以下のコードをコピペして下さい。

docker-compose.yml

version: '3'
services:
  node:
    build: ./docker/node
    ports:
      - "4200:4200"
    volumes:
      - ".:/projects"
    tty: true

version: docker-composeで使用するバージョンを定義
service: アプリケーションを動かすための各要素
node: コンテナ
build: docker-compose.ymlを実行し、ビルドされるときのpath
port: DockerImageを立ち上げる際のポート番号
　　　- ホスト側のポート:コンテナ側のポート
volumes: マウントする設定ファイルのパスを指定
　　　- ホスト側のパス:コンテナ側のパス
tty: 標準入出力先のデバイス

今回は簡単なAngularの環境構築をするだけなので作成するのはnodeコンテナだけです。
buildはDockerfileが保存されているpathを指定しています。
portsはAngularの開発サーバーが利用している4200番を指定しています。
volumesコンテナの /projects ディレクトリで見えるようにボリューム指定しています。
コンテナは何もサービスを起動しないとコンテナ起動時にすぐに終了してしまうので、tty:true にしています。

2.Dockerfileの作成

Dockerfileは、Dockerのイメージを自動で作成してくれるファイルです。
nodeイメージの最新を取得し、npmを利用してangularをインストールします。

Dockerfile

FROM node
WORKDIR /projects
RUN npm install -g @angular/cli
EXPOSE 4200

FROM: 環境のベースを指定
WORKDIR: 操作するディレクトリの絶対パスを指定
RUN: イメージを作成する際、実行したいコマンドなどを記載
EXPOSE: コンテナの公開ポートを設定する

node:最新を指定します。
WORKDIR:Angularのワークスペースはコンテナの /projects ディレクトリで見えるように/projectsを指定します。
RUN:npm installでAngular CLIをインストールします。
EXPOSE:Angularの開発サーバーが利用している4200番を指定しています。

3.dockerの起動

docker-compose.ymlとDockerfileの設定を完了するとdocker-compose.yml のあるディレクトリで以下のコマンドを実行しDockerコンテナの作成と起動をします。

$ docker-compose up -d

-dをつけることでバックグラウンドでDockerコンテナの起動がされます。

Dockerコンテナがビルドされているか確認しましょう。

$ docker ps

以下のようにコンテナの情報が表示されれば、Dockerコンテナがビルドされていいます。

CONTAINER ID   IMAGE       COMMAND                  CREATED         STATUS              PORTS                    NAMES
62e23e232d94   test_node   “docker-entrypoint.s…”   2 minutes ago   Up About a minute   0.0.0.0:4200->4200/tcp   test_node_1

4.Angularの起動

3.dockerの起動でビルドしたコンテナ内に移動します。

$ docker-compose exec node bash

コンテナ内でng newを実行し、Angularアプリを起動します。

root@62e23e232d94:/projects#  ng new angular-app
root@62e23e232d94:/projects#  cd angular-app
root@62e23e232d94:/projects#  ng serve --host 0.0.0.0

ng newでangular-appというAngularアプリ作成します。
作成したAngularアプリ直下に移動し、ng serveでAngularアプリの起動します。
--hots=0.0.0.0 をつけて開発サーバーを起動しないとコンテナの外から見ることができません。

※コンテナを停止したい場合はコンテナ内を抜けてから以下を実行します。
docker-compose down

http://localhost:4200/ にアクセスし以下の画像が表示されると、Angularアプリの起動は成功しています！

まとめ

Dockerを用いてマシンの環境を気にせずAngular開発を行う方法をまとめさせていただきました。
これからはDockerを使って環境構築すると便利だと思いました。

DockerでAngularの環境構築をしてみた