自从使用Docker作为部署工具后，给开发人员提供了很大的便利。
近日在项目中前端应用的部署也使用了Docker，现将方法记录如下。
最初的想法：使用安装有Nginx的容器存储静态页面
将前端页面直接build到安装有Nginx的容器中，这种应该是比较直观的想法。项目使用webpack构建，需要npm环境，因此使用node的镜像较为方便。
# 镜像选择node:8-slim
FROM node:8-slim
# 更新源并安装nginx
RUN apt-get update && apt-get install -y nginx
# 使用cnpm加快npm包的安装速度
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
WORKDIR /app
# 单独提取加载package.json并安装npm包，与代码构建分离，避免因为代码变更导致镜像构建需要重新安装npm包
ADD package.json /app/package.json
RUN cnpm install
COPY . /app/
# 构建，生成最终部署文件，/var/www/html是构建结果存放的目录
RUN npm run build && cp -r dist/* /var/www/html && rm -rf /app
# 复制不同环境的nginx配置文件到镜像的nginx配置目录
COPY ./nginx.ci.conf /etc/nginx/
COPY ./nginx.lt.conf /etc/nginx/
COPY ./nginx.ot.conf /etc/nginx/
# 不在命令中使用 -g daemon off，可以在配置文件中配置
ENTRYPOINT ["nginx"]
其中一个环境的配置文件大概就是下面这个样子：
user www-data;
worker_processes 4;
pid /run/nginx.pid;
# Importent
daemon off;
events {
worker_connections 2048;
use epoll;
}
http {
##
# Basic Settings
##
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
# server_tokens off;
# server_names_hash_bucket_size 64;
# server_name_in_redirect off;
include /etc/nginx/mime.types;
default_type application/octet-stream;
##
# SSL Settings
##
ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
ssl_prefer_server_ciphers on;
##
# Logging Settings
##
log_format main '$remote_addr - $remote_user [$time_local] '
'"$request" $status $bytes_sent '
'"$http_referer" "$http_user_agent" '
'"$gzip_ratio"';
access_log /dev/stdout main;
error_log /dev/stderr;
##
# Gzip Settings
##
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
##
# Virtual Host Configs
##
server {
listen 9001;
server_name 127.0.0.1;
location / {
root /var/www/html;
index index.html index.htm;
}
}
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
}
以下是容器启动的命令，使用 -c 选项指定生效的nginx配置文件：
docker run -d --name web -p 9001:9001 xxxx/xxxx/xxxx:latest -c /etc/nginx/nginx.ci.conf
换一种思路：使用数据卷的方式发布前端页面
直观的想法往往不是较好的解法，将前端页面放置在nginx的容器中一同发布，我觉得不符合关注点分离。
发布的时候，不仅需要部署前端页面，还需要对nginx进行配置。如果这二者发布在一个容器中，当前容器的nginx只负责本容器的页面服务，而web server理应还有其他用途，比如反向代理后端服务、做负载均衡，势必在更上一层还需要启动一个web server，部署容器自带的nginx其实是一种资源浪费。
所以，使用数据卷容器发布前端页面，用外部的nginx来提供服务，应该是一个好的选择。如果有更好的方法，不吝赐教。
Dockerfile改成了构建数据卷容器：
FROM node:8-slim
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
WORKDIR /app
ADD package.json /app/package.json
RUN cnpm install
COPY . /app/
RUN npm run build && mkdir /var/www/html -p && cp -r dist/* /var/www/html && rm -rf /app
VOLUME [ "/var/www/html" ]
包含有前端页面的数据卷容器启动：
docker run --name web -d xxxx/xxxx/xxxx:latest
启动nginx容器，加载数据卷：
docker run --name nginx -d --volumes-from web -v /etc/nginx/nginx.conf:/etc/nginx/nginx.conf -p 9001:9001 nginx:stable-alpine
附一小段nginx.conf的配置：
##
# Virtual Host Configs
##
server {
listen 9001;
server_name 127.0.0.1;
location / {
root /var/www/html;
index index.html index.htm;
}
}
页面访问也没有问题。
