前端基於gulp自動化上傳部署方案

最近研究基於Git+Jetkins的CI/CD方案，對於專業團隊來講這套方案很好用。但做爲一我的普通的前端開發者，搭建一個gitlab和jetkins屬實有點太費時間精力了。因此這裏咱們就用了gulp+docker的簡易版本是實現方案，快速部署生成環境方便測試。

gulp配置

安裝環境

npm i -g gulp
npm i gulp-ssh
npm i gulp-sftp
複製代碼

Glup-sftp引入問題解決

1. 打開並複製node_modules下的gulp-sftp的index.js到任意項目文件夾下更名index.copy.js

2. index.copy.js下的275行的file.pipe(stream); // start upload剪切到283行後並改爲以下所示

   // start upload
           if ( file.isStream() ) {
             file.contents.pipe( stream );
           } else if ( file.isBuffer() ) {
             stream.end( file.contents );
           }
   複製代碼

3. 在根目錄下建立gulpfile.js並引入複製的index.js

   const gulp = require('gulp')
   const GulpSSH = require('gulp-ssh')
   // npm下載的gulp-sftp存在pipe is not a function須要修改其目錄下的index.js
   const ftp = require('./src/assets/gulp-sftp/index.copy.js')
   ​
   // 是上傳地址配置，能夠在.gitignore中忽略此文件上傳，爲了安全本地擁有就能夠了
   const config = require('./serveConfig')
   ​
   // docker路徑
   const remotePath = `/root/vue/docker-build`
   const configSSH = {
     ssh: {
       // 正式
       host: config.devDist.host,
       port: config.devDist.port,
       username: config.devDist.user,
       password: config.devDist.pass
     },
     remotePath,
     commands: [
       // 運行打包命令
       'cd /root/vue/docker-build/',
       'sh build.sh'
     ]
   }
   ​
   const gulpSSH = new GulpSSH({
     ignoreErrors: false,
     sshConfig: configSSH.ssh
   })
   /**
    * 自動上傳到服務器
    */
   gulp.task('upload', function() {
     console.log('## 正在上傳文件到服務器上')
     const configOption = process.argv[3].split('--')
     return gulp
       .src('.' + config.publicPath + '**')
       .pipe(ftp(config[configOption[1]]))
   })
   ​
   /**
    * 上傳後運行docker打包命令...
    */
   gulp.task('build', () => {
     console.log('正在運行dockerfile打包命令...')
     return gulpSSH.shell(configSSH.commands).pipe(gulp.dest('logs'))
   })
   ​
   複製代碼

4. 建立serveConfig.js服務器的配置文件

   module.exports = {
     devDist: { // 部署正式服務器上
       // 部署到服務器的路徑
       remotePath: '/root/vue/docker-build/dist',
       // ip地址
       host: '.......',
       // 賬號
       user: 'root',
       // 密碼
       pass: '.......',
       // 端口
       port: 22
     },
     publicPath: '/dist/' // 要本地上傳的文件路徑
   }
   ​
   複製代碼

5. 修改package.json下的build命令

"build:prod": "vue-cli-service build && gulp upload --devDist && gulp build"
複製代碼

Docker配置

編寫Dockerfile及打包的基礎環境

1. 建立同配置文件的目錄

2. 編寫Dockerfile，nginx/default.conf, nginx.conf, build.sh文件

   • Dockerfile

     FROM nginx
     COPY dist/ /usr/share/nginx/html/
     ENV LANG C.UTF-8
     COPY nginx/default.conf /etc/nginx/conf.d/default.conf
     COPY nginx.conf/ /etc/nginx/nginx.conf
     複製代碼

   • 建立nginx文件夾並下建立default.conf

     server {
         listen 8000;
         server_name localhost;
     ​
         #charset utf-8;
         #access_log  logs/host.access.log  main;
         # 反向代理配置
         location /api {
             proxy_pass http://passEndDj/;  #代理的域名
             add_header 'Access-Control-Allow-Origin' '*';
             add_header 'Access-Control-Allow-Credentials' 'true';
         }
         charset utf-8;
     ​
         access_log  /var/log/nginx/host.access.log  main;
         error_log  /var/log/nginx/error.log  error;
     ​
         location / {
             root   /usr/share/nginx/html;
             index  index.html index.htm;
             charset utf-8;
         }
     }
     複製代碼

   • nginx.conf

     ​
     worker_processes  4;
     ​
     error_log  /var/log/nginx/error.log warn;
     pid        /var/run/nginx.pid;
     ​
     ​
     events {
         worker_connections  1024;
     }
     ​
     ​
     http {
         include       /etc/nginx/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  /var/log/nginx/access.log  main;
     ​
         sendfile        on;
         #tcp_nopush     on;
     ​
         keepalive_timeout  65;
         
         # 後端服務器地址配置
         upstream passEndDj {
             server 後端服務器接口地址 ;
         }
     ​
         #開啓gzip壓縮 不須要下面能夠註釋;
         gzip on;
         gzip_min_length 1k;
         gzip_buffers 4 16k;
         #gzip_http_version 1.0;
         gzip_comp_level 2;
         gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
         gzip_vary off;
         gzip_disable "MSIE [1-6].";
         # gzip結束
     ​
         include /etc/nginx/conf.d/*.conf;
     }
     複製代碼

   • build.sh

     docker stop TestVue
     docker rm TestVue
     docker rmi test-vue:1.0
     docker build -f Dockerfile -t test-vue:1.0 .
     docker run -p 8888:8000 -d --name TestVue test-vue:1.0
     複製代碼

   • 目錄結構

     -rwxrwxrwx 1 root root 193 Aug  9 15:22 build.sh
     drwxr-xr-x 2 root root   6 Aug 12 16:12 dist
     -rw-r--r-- 1 root root 156 Aug  8 12:58 Dockerfile
     drwxr-xr-x 2 root root  26 Aug  8 20:46 nginx
     -rw-r--r-- 1 root root 997 Aug 12 15:30 nginx.conf
     複製代碼

   結束測試

   npm run build:prod
   複製代碼

\