自從使用Docker作為部署工具后，給開發(fā)人員提供了很大的便利。
近日在項目中前端應(yīng)用的部署也使用了Docker，現(xiàn)將方法記錄如下。

最初的想法：使用安裝有Nginx的容器存儲靜態(tài)頁面

??將前端頁面直接build到安裝有Nginx的容器中，這種應(yīng)該是比較直觀的想法。項目使用webpack構(gòu)建，需要npm環(huán)境，因此使用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包，與代碼構(gòu)建分離，避免因為代碼變更導(dǎo)致鏡像構(gòu)建需要重新安裝npm包
ADD package.json /app/package.json
RUN cnpm install
COPY . /app/
# 構(gòu)建，生成最終部署文件，/var/www/html是構(gòu)建結(jié)果存放的目錄
RUN npm run build  && cp -r dist/* /var/www/html && rm -rf /app
# 復(fù)制不同環(huán)境的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"]

其中一個環(huán)境的配置文件大概就是下面這個樣子：

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

換一種思路：使用數(shù)據(jù)卷的方式發(fā)布前端頁面

??直觀的想法往往不是較好的解法，將前端頁面放置在nginx的容器中一同發(fā)布，我覺得不符合關(guān)注點分離。
??發(fā)布的時候，不僅需要部署前端頁面，還需要對nginx進行配置。如果這二者發(fā)布在一個容器中，當(dāng)前容器的nginx只負(fù)責(zé)本容器的頁面服務(wù)，而web server理應(yīng)還有其他用途，比如反向代理后端服務(wù)、做負(fù)載均衡，勢必在更上一層還需要啟動一個web server，部署容器自帶的nginx其實是一種資源浪費。
??所以，使用數(shù)據(jù)卷容器發(fā)布前端頁面，用外部的nginx來提供服務(wù)，應(yīng)該是一個好的選擇。如果有更好的方法，不吝賜教。

Dockerfile改成了構(gòu)建數(shù)據(jù)卷容器：

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" ]

包含有前端頁面的數(shù)據(jù)卷容器啟動：

docker run --name web -d xxxx/xxxx/xxxx:latest

啟動nginx容器，加載數(shù)據(jù)卷：

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;
        }
    }

頁面訪問也沒有問題。