第一章 本周导学

1-1 本周介绍和学习方法

  • 云发布原理、架构和实现
  • OSS API(OSS接入指南)
  • 上线发布流程(支持Hash和History模式发布)
  • 附赠：Node高分库分享(awesome-nodejs)

第二章 云发布模块架构设计

2-1 前端发布OSS架构设计

  • CloudBuild实例添加参数：prod（是否为正式版本）
  • 添加准备阶段 ：获取OSS文件，询问是否覆盖

2-2 云发布架构和流程设计

点击查看【processon】

第三章 云发布功能开发

本章内容更新代码为分支 lesson31

3-1 实现云发布前的预检查逻辑

在上一节中，mdoels/git/lib/index.js中，有preparePublish方法，之前检查命令是否为npm或cnpm 在上一节基础上，这里添加了，执行构建命令是否为 build，代码如下

  1. // models/git/lib/index.js
  4. async preparePublish(){
  5.   log.info('开始进行云构建前代码检查')
  6.   …………
  7.   const pkg = this.getPackageJson()
  8.   const buildCmdArray = this.buildCmd.split('')
  9.   const buildLastCmd = buildCmArrat.slice(-1).toString()
  10.   if(!pkg.scripts || !Object.keys(pkg.scripts).includes(lastCmd)){
  11.     throw new Error(`${this.buildCmd}命令不存在`)
  12.   }
  13.   log.success('云构建代码预检查通过')
  14. }
  16. getPackageJson(){
  17.     const pkgPath = path.resolve(this.dir,'package.json')
  18.   if(!fs.existSync(pkgPath)){
  19.       throw new Error(`package.json不存在,源码目录:${this.dir}`)
  20.   }
  21.   return fse.readJsonSync(pkgPath)
  22. }

3-2 静态资源服务器类型选择逻辑开发

  • 上一节我们检查了build这个命令
  • 接着，我们需要选择上传资源服务器的类型，也就是OSS
    • 这里的代码是为了后续如果要修改资源服务器类型，可以进行代码的再开发—添加其他资源服务器类型。
    • 与检查git_token或者git_server等一样，本节需要去新建或者检查.git_publish文件，代码实现如下
  • 最后，cloudscope-cli publish这个命令添加了 —prod这个参数,以及.git_publish文件内容，传入到 Cloudbuild类中去
  1. // models/git/lib/index.js
  2. const GIT_PUBLISH_FILE='.git_publish'
  3. const GIT_PUBLISH_TYPE=[{
  4.     name:'OSS',
  5.     value:'oss'
  6. }]
  8.  async preparePublish(){
  9.    log.info('开始进行云构建前代码检查')
  10.    ………………
  11.    log.success('云构建代码预检查通过')
  13.    const gitPublishPath = this.createPath(GIT_PUBLISH_FILE)
  14.    let gitPublish = readFile(gitPublishPath)
  15.    if(!gitPublish){ // 如果没有读取到.git-publish文件中的内容
  16.      gitPublish = await this.choicePublish(gitPublishPath)
  17.      log.success('git publish 写入成功',`${gitPublish} -> ${gitPublishPath}`)
  18.    }else{ // 如果读取到了 内容
  19.      log.success('git publish 文件读取成功！')
  20.    }
  21.    this.gitPublish = gitPublish
  22.  }
  24. async choicePublish(gitPublishPath){
  25.   const gitPublish = (await inquirer.prompt({
  26.     type:'list',
  27.     name:'gitPublish',
  28.     message:'请选择你想要上传代码的平台',
  29.     choices:GIT_PUBLISH_TYPE
  30.   })).gitPublish;
  31.   writeFile(gitPublishPath,gitPublish)
  32.   return gitPublish
  33. }

关于 —prod参数的传入，与—refreshToken等一样，这里就不做演示了。

3-3 云发布服务端预检查逻辑实现

本节是服务端相关的代码实现，同样代码为分支 lesson31 主要是拿到云构建结果的dist或者build目录

  1. // app/io/controller/build.js
  2.  await prePublish(cloudBuildTask,socket,helper)
  4. async function prePublish(cloudBuildTask,socket,helper){
  5.   socket.emit('build',helper.parseMsg('pre-publish',{
  6.     message:'开始发布前检查'
  7.   }))
  8.   const prePublishRes = await cloudBuildTask.prePublish()
  9.   if(!prePublishRes || Object.is(prePublishRes.code,FAILED)){ 
  10.     socket.emit('build',helper.parseMsg('pre-publish failed',{
  11.       message:'发布前检查失败,失败原因：' + (prePublishRes && prePublishRes.message ? prePublishRes.message:'未知')
  12.     }))
  13.     throw new Error('发布终止')
  14.   }else{
  15.     socket.emit('build',helper.parseMsg('pre-publish',{
  16.       message:'发布前检查通过'
  17.     }))
  18.   }
  19. }
  21. //app/models/cloudBuildTask.js
  22. async prePublish(){
  23.   //获取构建结果
  24.   const buildPath = this.findBuildPath()
  25.   //检查构建结果
  26.   if(!buildPath){
  27.     return this.failed('未找到构建结果，请检查')
  28.   }
  29.   this._buildPath = buildPath
  30.   return this.success()
  31. }
  35. findBuildPath(){
  36.   const buildDir =['build','dist']
  37.   const buildPath = buildDir.find(dir=>fs.existsSync(path.resolve(this._sourceCodeDir,dir)))
  38.   this._ctx.logger.info('buildPath',buildPath)
  39.   if(buildPath){
  40.     return path.resolve(this._sourceCodeDir,buildPath)
  41.   }
  42.   return null
  43. }

3-4 创建OSS bucket+OSS实例化开发(服务端)

  • cnpm install -S ali-oss
  • 客户端传递prod参数到服务端，服务端根据prod参数，获取不同环境的OSS
  1. // app/models/CloudBuildTask.js
  2. const OSS = require('./OSS')
  3. const config = require('../../config/db')
  4. class CloudBuildTask(options,ctx){
  5.     constructor(){
  6.         this._prod = options.prod === 'true' ? true : false
  7.   }
  8. }
  10. async prepare(){
  11.   fse.ensureDirSync(this._dir)
  12.   fse.emptyDirSync(this._dir)
  13.   this._git = new Git(this._dir)
  14.   if(this._prod){ //生产准备OSS
  15.     this.oss =new OSS(config.OSS_PROD_BUCKET)
  16.   }else{//测试
  17.     this.oss =new OSS(config.OSS_DEV_BUCKET)
  18.   }
  19.   console.log(this.oss)
  20.   return this.success()
  21. }
  23. // app/models/OSS.js
  24. 'use strict';
  25. const OSS = require('ali-oss');
  26. const config = require('../../config/db')
  27. class OSS{
  28.     constructor(bucket){
  29.         this.oss = new OSS({
  30.             region:config.OSS_REGION,
  31.             accessKeyId: config.OSS_ACCESS_KEY,
  32.             accessKeySecret: config.OSS_ACCESS_SECRET_KEY,
  33.             bucket,
  34.         })
  35.     }
  36. }
  38. module.exports = OSS
  40. //app/config/db.js
  41. const fs = require('fs')
  42. const path = require('path')
  43. const userHome = require('user-home')
  44. const OSS_ACCESS_KEY = ''
  45. const OSS_ACCESS_SECRET_KEY = fs.readFileSync(path.resolve(userHome,'.cloudscope-cli','oss_access_secret_key')).toString()
  46. const OSS_PROD_BUCKET=''
  47. const OSS_DEV_BUCKET=''
  48. const OSS_REGION=''

以上关于OSS Key等的配置，可去阿里云免费试用一个月OSS对象存储功能，填入相应的值。

3-5 云发布核心流程：上传OSS功能开发

代码逻辑如下

  • npm i -S glob
  1. // app/io/controller/build.js
  3. await publish(cloudBuildTask,socket,helper)
  5. async function publish(cloudBuildTask,socket,helper){
  6.   socket.emit('build',helper.parseMsg('publish',{
  7.     message:'开始发布'
  8.   }))
  9.   const publishRes = await cloudBuildTask.publish()
  10.   if(!publishRes || Object.is(publishRes.code,FAILED)){ //  downlod下载失败
  11.     socket.emit('build',helper.parseMsg('publish failed',{
  12.       message:'发布失败'
  13.     }))
  14.     return 
  15.   }else{
  16.     socket.emit('build',helper.parseMsg('publish',{
  17.       message:'发布成功'
  18.     }))
  19.   }
  20. }
  22. // app/models/CloudBuildTask.js
  23.   async publish(){
  24.     return new Promise((resolve,reject) =>{
  25.       glob('**',{
  26.         cwd:this._buildPath,
  27.         nodir:true,
  28.         ignore:'**/node_modules/**'
  29.       },(err,files) =>{
  30.         if(err){
  31.           resolve(false)
  32.         }else{
  33.           Promise.all(files.map(async file=>{
  34.             console.log(file)
  35.             const filePath = path.resolve(this._buildPath,file)
  36.             const uploadOSSRes = await this.oss.put(`${this._name}/${file}`,filePath) 
  37.             return uploadOSSRes
  38.           })).then(()=>{
  39.             resolve(true)
  40.           }).catch(err=>{
  41.             this._ctx.logger.error(err)
  42.             resolve(false)
  43.           })
  44.         }
  45.       })
  46.     })
  47.   }
  49. // app/models/OSS.js
  51.  async put(object, localPath, options = {}) {
  52.    await this.oss.put(object, localPath, options);
  53.  }

最后经过测试，在阿里云控制台看到相关的OSS文件已上传。

3-6 OSS域名绑定 + CDN绑定

  • 域名绑定
  • CDN绑定

第四章 云发布流程完善

4-1 获取OSS API开发

服务端

  • router.js中添加路由 router.get(‘/project/oss’, controller.project.getOSSProject);

本节主要是获取OSS上传的文件，使用oss的

  1. // app/controller/project.js
  2. const { failed } = require("../utils/request")
  3. const OSS = require('../models/OSS')
  4. const config = require('../../config/db')
  6. async getOSSProject(){
  7.   const { ctx } = this
  8.     const ossProjectType = ctx.query.type
  9.   const ossProjectName = ctx.query.name
  10.   if(!ossProjectName){
  11.     ctx.body = failed('项目名称不存在)
  12.     return
  13.   }
  14.   if(!ossProjectType){
  15.       ossProjectType = 'prod'
  16.   }
  17.   let oss;
  18.   if(Object.is(ossProjectType,'prod')){
  19.       oss = new OSS(config.OSS_DEV_BUCKET)
  20.   }else{
  21.     oss = new OSS(config.OSS_PROD_BUCKET)
  22.     }
  23.   const ossList = await oss.list(ossProjectName)
  24.   ctx.body = ossList
  25. }
  28.   //app/utils/request.js
  29.   'use strict'
  30.   function success(message,data){
  31.       return {
  32.             code:0,
  33.           message,
  34.           data
  35.     }
  36.   }
  37.   function failed(message,data){
  38.       return {
  39.             code:-1,
  40.           message,
  41.           data
  42.     }
  43.   }
  45.   module.exports = {
  46.       success,
  47.     failed
  48.   }
  51. //app/models/OSS.js
  52. async list({prefix}){
  53.     const ossFileList = await this.oss.list({prefix})
  54.   if(ossFileList && ossFileList.objects){
  55.       return ossFileList.objects
  56.   }
  57.   return []
  58. }

4-2 覆盖发布逻辑开发

服务端提供了获取OSS文件列表的接口，接着要在客户端去请求OSS上是否有文件，且是否发布。 代码如下：

  1. // models/cloudbuild/index.js
  2. const getProjectOSS = require('./getProjectOSS')
  3. async prepare(){
  4.   // 判断是否处于正式发布
  5.   if(this.prod){
  6.     // 1.获取OSS文件 
  7.     const name = this.git.name
  8.     const type = this.prod ? 'prod':'dev'
  9.     const ossProject = await getProjectOSS({name,type})
  10.     console.log(ossProject)
  11.     //2.判断当前项目OSS文件是否存在
  12.     if(Object.is(ossProject.code,0) && ossProject.data.length>0){
  13.       // 3.询问客户是否进行覆盖安装
  14.       const cover = (await inquirer.prompt({
  15.         type:'list',
  16.         defaultValue:true,
  17.         name:'cover',
  18.         message:`OSS已存在[${name}]项目，是否强行覆盖发布？`,
  19.         choices:[{
  20.           name:'覆盖发布',
  21.           value:true
  22.         },{
  23.           name:'放弃发布',
  24.           value:false
  25.         }]
  26.       })).cover
  27.       if(!cover){ //放弃发布
  28.         throw new Error('发布终止')
  29.       }
  30.     }
  31.   }
  32. }
  34. // models/cloudbuild/cloudbuild.js
  35. const request = require('@cloudscope-cli/request')
  37. module.exports = function (data) {
  38.   return request({
  39.     url:'/project/oss',
  40.     method:'get',
  41.     params:data
  42.   })
  43. }

4-3 服务端缓存文件清除功能实现

本节主要是对redis以及缓存文件进行清除,并在build结束后，断开链接

  1. // app/io/middleware/auth.js
  2. //清除缓存文件
  3. const cloudBuildTask = await createCloudBuildTask(ctx,app)
  4. await cloudBuildTask.clean()
  6. // app/models/CloudBuildTask 
  7. async clean(){
  8.   if (fs.existsSync(this._dir)) {
  9.     fse.removeSync(this._dir);
  10.   }
  11.   const { socket } = this._ctx;
  12.   const client = socket.id;
  13.   const redisKey = `${REDIS_PREFIX}:${client}`;
  14.   await this._app.redis.del(redisKey);
  15. }
  17. // app/io/controller/build.js
  18.  socket.emit('build',helper.parseMsg('build success',{
  19.    message:`云构建成功，访问链接：https://${cloudBuildTask._prod ? 'cloudscope-cli' : 'cloudscope-cli-dev'}.liugezhou.online/${cloudBuildTask._name}/index.html`
  20.  }))
  21. socket.disconnect()

4-4 自动提交代码 BUG 修复

本地未出错

4-5 history模式发布原理讲解

使用 createWebHistory发布代码时，在OSS服务器，改变url地址，再刷新的话，会显示404，在nginx中有try_files的配置，而我们这里没有，因此除了将createWebhistory改为createWebHashHistory模式外，本节课讲述history模式发布解决这个问题—-通过本地方式演示。

  • 首先，history模式，需要在nginx上做配置
  • 然后，分两个步骤实现
    • index.html放到nginx服务器指定位置,配置好这个nginx
    • css/js等文件上传到OSS服务器上

  1. vue.config.js中配置OSS路径publicPath

    module.exports= { publicPath:’https://xxxx.online/vue-router-demo/‘ }

  2. 本地打包文件dist下目录手动上传至oss服务器 ：vue-router-demo目录下。

  3. 将本地dist/index.html下文件复制到Desktop/vue-router/index.html中。

  4. 配置您选配置文件

    1. server {
    2. listen  8081;
    3. server_name resource;
    4. root /Users/liumingzhou/Desktop/ ;
    5. autoindex on;
    6. location / {
    7.  add_header  Access-Control-Allow-Origin *;
    9. }
    10. location /vue-router-demo {
    11.  try_files  $uri  $uri/  /vue-router-demo/index.html;
    12. }
    13. add_header   Cache-Control "no-cache, must-revalidate";
    14. }

  5. 这个时候启动本地nginx服务器，访问8081端口，再刷新页面，histpry路由模式就不会报404了

4-6 history模式远程发布原理讲解

  • 登录ESC服务器
  • 配置nginx
  • 本地文件上传到服务器
    • scp -r /User/liugezhou/Desktop/vue-router-demo/index.html root@liugezhou:upload/test


4-7 脚手架自动上传模板逻辑开发

4-8 获取 OSS 文件 API 开发

4-9 上传模板功能实现

通过三个新的参数：sshUser 、sshIp、sshPath继续下一步，具体代码就不贴了，这几章就只是流程的问题了。

4-10 自动打tag+合并代码至master分支流程开发

本节课直接看着仓库代码，具体的流程还需要后续深度学习。


第五章 本周加餐：node常用三方库介绍

5-1 Node高分库：PDF文件生成工具——PDFKit

awesome-nodejs

本节sam老师，主要是讲解了这个pdfkit库。

  • 创建一个nodejs项目:npm init -y
  • npm install -S pdfkit
  • 新建kit/index.js,官方仓库代码copy如下： ```javascript const PDFDocument = require(‘pdfkit’); const fs = require(‘fs’);

// Create a document const doc = new PDFDocument();

// Pipe its output somewhere, like to a file or HTTP response // See below for browser usage doc.pipe(fs.createWriteStream(‘output.pdf’));

// Embed a font, set the font size, and render some text doc .font(‘fonts/PalatinoBold.ttf’) .fontSize(25) .text(‘Some text with an embedded font!’, 100, 100);

// Add an image, constrain it to a given size, and center it vertically and horizontally doc.image(‘path/to/image.png’, { fit: [250, 300], align: ‘center’, valign: ‘center’ });

// Add another page doc .addPage() .fontSize(25) .text(‘Here is some vector graphics…’, 100, 100);

// Draw a triangle doc .save() .moveTo(100, 150) .lineTo(100, 250) .lineTo(200, 250) .fill(‘#FF3300’);

// Apply some transforms and render an SVG path with the ‘even-odd’ fill rule doc .scale(0.6) .translate(470, -380) .path(‘M 250,75 L 323,301 131,161 369,161 177,301 z’) .fill(‘red’, ‘even-odd’) .restore();

// Add some text with annotations doc .addPage() .fillColor(‘blue’) .text(‘Here is a link!’, 100, 100) .underline(100, 100, 160, 27, { color: ‘#0000FF’ }) .link(100, 100, 160, 27, ‘http://google.com/‘);

// Finalize PDF file doc.end();

  2. <a name="vXmEg"></a>
  3. #### 5-2 Node Excel处理库讲解
  4. [https://github.com/dtjohnson/xlsx-populate](https://github.com/dtjohnson/xlsx-populate)
  6. <a name="G6Tqw"></a>
  7. #### 5-3 命令行交互库Listr讲解
  9. - [np](https://github.com/sindresorhus/np)：Better npm publish
  10. - np核心库：[listr](https://www.npmjs.com/package/listr)
  11. <a name="v9tmg"></a>
  12. #### 5-4 利用Listr对项目自动创建Tag逻辑进行优化
  13. ```javascript
  14. const Listr = require('listr')
  15. const { Observable } = require('rxjs')
  17. const tasks = new Listr([
  18.     {
  19.         title:'Task1',
  20.         task:()=>new Listr([{
  21.             title:'Task1-1',
  22.             task:()=>{
  23.                 return new Observable(o=>{
  24.                     o.next('Task-1-1')
  25.                     setTimeout(() => {
  26.                         o.next('Task-1-1-1')
  27.                         o.complete()
  28.                     }, 1000);
  30.                 })
  31.             }
  32.         }])
  33.     },
  34.     {
  35.         title:'Task2',
  36.         task:()=>{
  37.             throw new Error('error')
  38.     },
  39. }
  40. ])
  41. tasks.run()
  42. process.on('unhandledRejection',(e)=>{
  43.     console.log(e.message)
  44. })