angular
docker

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 の設定がちょっと雑…