LoginSignup
6

More than 5 years have passed since last update.

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

Posted at

前提

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6