Angular プロジェクトのビルド成果物を Docker で動かす

前提

• 既存の Angular プロジェクトに Docker を導入する
• production build した生成物を動かしたい
  • ので、 Nginx も使う
• Docker for Mac インストール済み

Dockerfile を用意する

• ベースの image は node:8.11.3-alpine を指定
  • Node.js が欲しい、かつ軽量な Alpine Linux を選択
• 任意の名前で WORKDIR を設定
• host 側のファイル一式を WORKDIR にコピー
• $ yarn と $ yarn build を実行するように RUN で設定

Dockerfile

FROM node:8.11.3-alpine

WORKDIR /training-docker

COPY . .

RUN yarn

RUN yarn build --prod

docker-compose.yml を用意する

• service を web と nginx の 2 つを用意

web container

• image は上で用意した Dockerfile をビルドして作成
• Dockerfile ビルド時の ng build で生成される dist/ を container 間で共有する volumes にマウント

nginx container

• nginx の image は nginx をから作成
• 8080 ポートをポートフォワーディングする
• web container で dist/ を置いた volumes にマウント
  • ro つけると Read Only になる
• host 側に用意していた Nginx の config file もマウント

docker-compose.yml

version: '3'
services:
  web:
    build: .
    container_name: "traning-docker"
    volumes:
      - www:/training-docker/dist
  nginx-proxy:
    image: nginx
    container_name: "training-nginx"
    ports:
      - "8080:8080"
    volumes:
      - ./.docker/nginx:/etc/nginx/conf.d:ro
      - www:/www:ro
volumes:
  www:

.docker/nginx/default.conf

server {
  listen 8080;
  server_name localhost;

  location / {
    root /www/training-docker-with-angular;
    index index.html;
  }
}

Docker の起動・終了

• docker-compose を使って起動する

# image がない場合は build から走る
$ docker-compose up

• 起動したら http://localhost:8080/ につなぐと画面が表示される
• 起動している Nginx container に入る場合

# container id を確認
$ docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                            NAMES
9c63974154e0        nginx               "nginx -g 'daemon of…"   42 minutes ago      Up 27 seconds       80/tcp, 0.0.0.0:8080->8080/tcp   training-nginx

# 対象 container に入る
$ docker exec -it 9c63974154e0 /bin/sh
## /www/training-docker-with-angular に dist/ のファイルが格納されているのが確認できる

• 停止する

$ docker-compose stop

まとめ

• コマンド一発で起動できる
• hosting サービスを使わなくても production build の動作確認が可能
• Nginx の設定がちょっと雑…