自从使用Docker作为部署工具后，给开发人员提供了很大的便利。
近日在项目中前端应用的部署也使用了Docker，现将方法记录如下。

最初的想法：使用安装有Nginx的容器存储静态页面

  将前端页面直接build到安装有Nginx的容器中，这种应该是比较直观的想法。项目使用webpack构建，需要npm环境，因此使用node的镜像较为方便。

# 镜像选择node:8-slimFROM node:8-slim# 更新源并安装nginxRUN 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;# Importentdaemon 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.orgWORKDIR /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;
        }
    }

页面访问也没有问题。

作者：蝗虫的小腿儿
链接：https://www.jianshu.com/p/02c81ca7f0bc