使用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