我尝试使用Docker测试了Angular 2的快速入门
总结
使用Docker来尝试Angular2的5分钟快速入门。
（2016/7/13）修正了没有按照必要步骤进行而强行进行的部分。
环境如下所示
-
- OS:Windows10
-
- VirtualBox: 5.0.22
- Vagrant: 1.8.4
文件夹结构
- Vagrantfile
- share
- angular2
- index.html
- styles.css
- app
- app.component.ts
- main.ts
（2016/7/13）- lib.es6.d.ts
（2016年7月13日）- lib.es6.d.ts
- gulp
- tasks
- task.js
- Docker
- angular2
- Dockerfile
- package.json
- systemjs.config.js
- tsconfig.json
- typings.json
- shell
- angular.sh
- env.conf
每个文件的配置
以下的文件遵循Angular2 5分钟快速入门的步骤。
- share
- angular2
- index.html
- styles.css
- app
- app.component.ts
- main.ts
- Docker
- angular2
- package.json
- systemjs.config.js
- tsconfig.json
- typings.json
从(2016/7/3) typescript/lib/lib.es6.d.ts下载lib.es6.d.ts，并将其放入share/angular2/app/文件夹中。
- share
- angular2
- app
- lib.es6.d.ts
(2013/07/16) 若缺少了这一部分，就会发生错误TS2304：找不到名称的错误。
(2013/07/16) 错误的原因是没有进行typings install。
在虚拟环境中进行Docker的安装并进行配置。
# ==> 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
dockerfile设置。安装angular2并安装gulp以进行文件共享。
(2016/7/13) 添加 RUN npm run postinstall 以安装 typings。
FROM node:4.4.7
# 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
# ======================================================================
#タスクランナーインストール
ENV GULP_DIR=/home/vagrant/gulp
RUN mkdir -p ${GULP_DIR}
WORKDIR ${GULP_DIR}
# package.jsonを書き出し
# nameをgulpにするとエラーとなる
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
# ======================================================================
RUN mkdir -p ${WORK_DIR}
WORKDIR ${WORK_DIR}
# COPY命令では../のように親ディレクトリは指定できない。
# 構築時にコンテクストのディレクトリ以下をDockerデーモンに送るため
COPY package.json $WORK_DIR/package.json
RUN npm install
# 各種設定ファイル用意
COPY tsconfig.json ${WORK_DIR}/tsconfig.json
COPY typings.json ${WORK_DIR}/typings.json
COPY systemjs.config.js ${WORK_DIR}/systemjs.config.js
# typings install
RUN npm run postinstall
RUN mkdir app
# ======================================================================
ENV SHARE_DIR=/home/vagrant/share
RUN mkdir -p ${SHARE_DIR}
# ======================================================================
WORKDIR ${GULP_DIR}
CMD ["npm", "run", "gulp" ]
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"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",
"systemjs": "0.19.27",
"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",
"typescript": "^1.8.10",
"typings":"^1.0.4"
}
}
编写gulp的配置文件。
监视共享文件夹中的angular2，并复制文件。
然后启动angular2。
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,
stdio: ['pipe', process.stdout, process.stderr]});
});
gulp.task('watch',['copy'],function(){
gulp.watch(['/home/vagrant/share/angular2/**'], ['copy']);
});
编写用于启动Docker的shell脚本
#!/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
}
#!/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快速入门页面。
参考文献
5分钟快速入门
lib.es6.d.ts
堆栈溢出
