概要

Angular2の5 Min Quickstart をDockerを使って試す。

環境は以下の通り

OS:Windows10
VirtualBox: 5.0.22
Vagrant: 1.8.4

フォルダ構成

Windows上のテスト用ディレクトリ以下.

- Vagrantfile
- share
　- angular2
　  - index.html
　  - styles.css 
    - app
      - app.component.js
      - main.js
  - gulp
    - tasks
      - task.js
  - Docker
    - angular2
      - Dockerfile
      - package.json
    - shell
      - angular.sh
      - env.conf

各ファイルの設定

以下のファイルはAngular2　5 Min Quickstart の通り

- share
　- angular2
　  - index.html
　  - styles.css 
    - app
      - app.component.js
      - main.js
  - Docker
    - angular2
      - package.json

仮想環境のプロビジョニングでDockerをインストールする。

Vagrantfile

# ==> Dockerインストールshell.ここから
$docker_install = <<SHELL
　　 # aptが使用中でupdateが成功しないことがあるため殺してからupdate。
    sudo killall -KILL apt.systemd.daily

　　#　以下、Dockerの公式インストール手順
    sudo apt-get update
    sudo apt-get install apt-transport-https ca-certificates

    sudo apt-key adv --keyserver hkp://p80.pool.sks-keyservers.net:80 --recv-keys 58118E89F3A912897C070ADBF76221572C52609D

    echo 127.0.1.1 $(hostname) >> /etc/hosts

    echo "deb https://apt.dockerproject.org/repo ubuntu-xenial main" > /etc/apt/sources.list.d/docker.list

    sudo apt-get update
    sudo apt-get purge lxc-docker
    apt-cache policy docker-engine

    sudo apt-get update
    sudo apt-get install -y linux-image-extra-$(uname -r)

    sudo apt-get update
    sudo apt-get -y install docker-engine

　　#　Dockerをsudoなしに実行できるようvagrantユーザをdockerグループに追加
    sudo gpasswd -a vagrant docker
SHELL
# <== Dockerインストールshell.ここまで

#　仮想環境設定
Vagrant.configure(2) do |config|
  config.vm.box = "bento/ubuntu-16.04"

  # ネットワーク設定。
  config.vm.network "private_network", ip: "192.168.50.12"

  # 使用するメモリ容量を変更。
  # デフォルトだと512で少ないためdockerのbuildが失敗しやすい
  config.vm.provider "virtualbox" do |vm|
    # メモリを1024MBに設定
    vm.memory = 1024
    # Vagrant1.8から利用出来るLinked Cloneをオンにする。
    vm.linked_clone = true
  end

  # dockerをインストール
  config.vm.provision "shell", inline: $docker_install

end

Dockerファイル設定。
angular2のインストールと、ファイル共有のためのgulpをインストール。

Docker/angular2/Dockerfile

FROM node:6.3.0

# Add our user and group first to make sure their IDs get assigned consistently
RUN groupadd -r vagrant && useradd -r -g vagrant vagrant 

ENV DOCKER_FILE_DIR=/vagrant/Docker/angular2
ENV WORK_DIR=/home/vagrant/angular2-quickstart

RUN mkdir -p ${WORK_DIR}
WORKDIR ${WORK_DIR}

# COPY命令では../のように親ディレクトリは指定できない。
# 構築時にコンテクストのディレクトリ以下をDockerデーモンに送るため
COPY package.json $WORK_DIR/package.json
RUN npm install

RUN mkdir app

#タスクランナーインストール
ENV GULP_DIR=/home/vagrant/gulp
RUN mkdir -p ${GULP_DIR}
WORKDIR ${GULP_DIR}

# package.jsonを書き出し
# nameをgulpにすると以下のエラーとなる
# npm WARN install Refusing to install gulp as a dependency of itself
RUN echo '{ "name": "my_gulp",  "scripts": { "gulp":"gulp" }}' > package.json

# install
RUN npm install -g gulp 
RUN npm install --save-dev gulp 
RUN npm install --save-dev require-dir 
RUN npm install --save-dev gulp-if 

#gulpfileを書き出し
RUN echo "var requireDir = require('require-dir'); requireDir('/home/vagrant/share/gulp/tasks/', { recurse: true }); " > gulpfile.js 

ENV SHARE_DIR=/home/vagrant/share
RUN mkdir -p ${SHARE_DIR}

CMD ["npm", "run", "gulp" ]

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "npm run lite",
    "lite": "lite-server"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",

    "core-js": "^2.4.0",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "0.6.12",

    "angular2-in-memory-web-api": "0.0.14",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0"
  }
}

gulp用の設定ファイルを記述.
共有フォルダのangular2を監視してファイルをコピーする。
また、angular2を起動する。

share/gulp/taks.js

var gulp = require('/home/vagrant/gulp/node_modules/gulp');
var spawn = require('child_process').spawn;

var angular2_dir = "/home/vagrant/angular2-quickstart";

gulp.task('default', ['copy', 'watch', 'angular2']);

gulp.task('copy',function(){
    var base_dir = "/home/vagrant/share/angular2",
        dist_dir = angular2_dir;
    return gulp.src(
        [ base_dir + '/*', base_dir + '/app/*' ],
        { "base": base_dir }
    )
    .pipe( gulp.dest( dist_dir ) );
});

gulp.task('angular2', function(){
  spawn('npm',['start'], {cwd:angular2_dir});
});

gulp.task('watch',['copy'],function(){
  gulp.watch(['/home/vagrant/share/angular2/**'], ['copy']);
});

docker起動用のシェルを記述

Docker/shell/env.conf

#!/bin/bash

# docker用ディレクトリ
path_Dockerfile_dir="/vagrant/Docker"


#共通関数

# dockerファイルからビルド
build(){
  local dir=$1
  local imageName=$2

  # 移動してビルド
  cd $dir && docker build -t $imageName .
}

# 前回のコンテナをチェック。残っていれば削除
checkBeforeContainer(){
  local containerName=$1

  # 前回のコンテナが残っているかチェック。
  docker ps -a | grep $containerName >/dev/null 2>&1

  # コンテナが残っている場合は削除。
  if [ $? -eq 0 ]; then
    docker rm -f $containerName
  fi
}

# 引数が指定されていない時はrunを行う
default(){
  if [ $1 -eq 0 ] ; then
    run
    exit
  fi
}

# 指定されたオプションで処理を切り替える。
main(){
  local opt=$1
  local buildDir=$2
  local imageName=$3
  local containerName=$4

  case ${opt} in
    b)
      build ${buildDir} ${imageName}
      ;;
    r)
      run
      ;;
    d)
      run_d
      ;;
    i)
      run_d
      docker exec -it ${containerName} /bin/bash
      ;;
    \?)
      exit 1
      ;;
  esac
}

Docker/shell/angular.sh

#!/bin/bash 

source "/vagrant/Docker/shell/env.conf"

imageName="hibo/angular2"
containerName="angular2"
host_src_dir="/vagrant/share"
container_src_dir="/home/vagrant/share"
docker_dir="${path_Dockerfile_dir}/angular2"

# -t: docker側の標準出力をホストの標準出力につなげる。
# -i: ホスト側のキーボードで打った文字をコンテナに送る
# -p:ポートフォワディング ホスト側：コンテナ側
# -e:環境変数
# -u:user
# -v: ディレクトリ共有
# -w: ワークディレクトリ
run(){
  docker run --name $containerName --rm -it \
             -p 80:3000 \
             -m "300M" --memory-swap "512M" \
             -e "NODE_ENV=production" \
             -v $host_src_dir:$container_src_dir \
             $imageName 
}

run_d(){
  docker run --name $containerName -d -i \
             -p 80:3000 \
             -m "300M" --memory-swap "512M" \
             -e "NODE_ENV=production" \
             -v $host_src_dir:$container_src_dir \
             $imageName 
}

checkBeforeContainer $containerName
default $#

while getopts brdi opt
do
  main ${opt} $docker_dir $imageName $containerName
done

ファイルをすべて準備できたら、

vagrant up
vagrant ssh-config --host angular >> ~/.ssh/config
ssh angular

ssh接続できたら、仮想環境で以下を実行。

/vagrant/Docker/shell/angular.sh -b
/vagrant/Docker/shell/angular.sh

Dockerが立ち上がったら、ブラウザで192.168.50.12にアクセスすると
angular2のquickstartの画面が見えるはず。

参考資料

5 Min Quickstart
gulp doc
gulpを基礎から
 node.js doc
Node.js 製のタスクランナー gulp.js を使ってみる
 Vagrant ssh-configでvagrant sshを快適にする

Dockerを使ってangular2のquickstart - javascriptを試してみた

概要

フォルダ構成

各ファイルの設定

参考資料