自從使用Docker作為部署工具后黄鳍，給開(kāi)發(fā)人員提供了很大的便利纵朋。
近日在項(xiàng)目中前端應(yīng)用的部署也使用了Docker笼痛，現(xiàn)將方法記錄如下。
最初的想法：使用安裝有Nginx的容器存儲(chǔ)靜態(tài)頁(yè)面
??將前端頁(yè)面直接build到安裝有Nginx的容器中牺堰，這種應(yīng)該是比較直觀的想法。項(xià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
# 單獨(dú)提取加載package.json并安裝npm包院促，與代碼構(gòu)建分離筏养，避免因?yàn)榇a變更導(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"]
其中一個(gè)環(huán)境的配置文件大概就是下面這個(gè)樣子：
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/*;
}
以下是容器啟動(dòng)的命令，使用 -c 選項(xiàng)指定生效的nginx配置文件：
docker run -d --name web -p 9001:9001 xxxx/xxxx/xxxx:latest -c /etc/nginx/nginx.ci.conf
換一種思路：使用數(shù)據(jù)卷的方式發(fā)布前端頁(yè)面
??直觀的想法往往不是較好的解法弄抬，將前端頁(yè)面放置在nginx的容器中一同發(fā)布茎辐，我覺(jué)得不符合關(guān)注點(diǎn)分離。
??發(fā)布的時(shí)候掂恕，不僅需要部署前端頁(yè)面拖陆，還需要對(duì)nginx進(jìn)行配置。如果這二者發(fā)布在一個(gè)容器中懊亡，當(dāng)前容器的nginx只負(fù)責(zé)本容器的頁(yè)面服務(wù)依啰，而web server理應(yīng)還有其他用途，比如反向代理后端服務(wù)店枣、做負(fù)載均衡孔飒，勢(shì)必在更上一層還需要啟動(dòng)一個(gè)web server灌闺，部署容器自帶的nginx其實(shí)是一種資源浪費(fèi)。
??所以坏瞄，使用數(shù)據(jù)卷容器發(fā)布前端頁(yè)面桂对，用外部的nginx來(lái)提供服務(wù)，應(yīng)該是一個(gè)好的選擇鸠匀。如果有更好的方法蕉斜，不吝賜教。
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" ]
包含有前端頁(yè)面的數(shù)據(jù)卷容器啟動(dòng)：
docker run --name web -d xxxx/xxxx/xxxx:latest
啟動(dòng)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;
}
}
頁(yè)面訪問(wèn)也沒(méi)有問(wèn)題宅此。
