使用Shell腳本打包前端項目並部署鏡像

1.提前安裝好Node、Git、Docker環境（此處略過不講）

2.git clone '前端項目url' 拉取前端項目

• 編寫Dockerfile腳本打包鏡像

FROM nginx   #設置基礎鏡像
COPY nginx.conf /etc/nginx/nginx.conf   
COPY dist/ /usr/vuejs/nginx/   
EXPOSE 80   #僅僅只是聲明端口
CMD ["nginx", "-g", "daemon off;"]   #啟動nginx鏡像

• 修改nginx文件

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;
    underscores_in_headers on;
    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    gzip  on; # 壓縮開關
    gzip_comp_level 6; # 壓縮等級 [1-9] 推薦6 壓縮級別(級別越高,壓的越小,越浪費CPU計算資源)
    gzip_min_length 200; # 開始壓縮的最小長度(再小就不要壓縮了,意義不在)
    gzip_types application/javascript text/css text/xml;


    server {
        listen       80;
        server_name  ysske.cn;

        add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

        location / {

            try_files $uri $uri/ /index.html;
            #root   html;
            #index  index.html index.htm;
        }

         root /usr/vuejs/nginx/;
         index index.html;

    }
}

• 編寫update.sh腳本打包鏡像

cd yssk-web  #前端項目目錄
git pull
npm install --registry=https://registry.npm.taobao.org
npm run build:prod  #打包前端項目生成dist文件
rm -rf dockerbuild
mkdir dockerbuild
cp -r dist ./dockerbuild
cp Dockerfile ./dockerbuild
cp nginx.conf ./dockerbuild
cd dockerbuild
docker build -t   yssk-web-cws .  #用Dockerfile腳本打包鏡像
cd ..
rm -rf dockerbuild

• 編寫docker.sh腳本刪除並重啟鏡像

docker rm -f web-yssk-cws
docker run --rm -d -p 9628:80 --name web-yssk-cws yssk-web-cws:latest