前端基于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
   

\