Have ideas to improve npm?Join in the discussion! »

    auto-deploy2cdn

    0.8.0 • Public • Published

    Auto-Deploy-CDN

    ⛰️背景

    常规流程

    方式一:前端开发完后通过Git将最新的代码更新到远程仓库中,后端git pull下来后,执行build操作,然后将静态资源部署到CDN上,部署到CDN上的资源可能需要进行刷新才能生效,最后将除去静态资源的文件部署到应用服务器上。

    方式二:前端直接在本地进行build,将build后的东西打包发给后端,让其进行部署到CDN、发布应用的操作。

    痛点及为什么要这么做

    首先,build之后的操作是后端负责,后端一般会写一些shell脚本来自动化执行,但是每个项目都写一个shell脚本不符合DRY原则。

    其次,打包后的资源引用位置是由前端决定的(webpack里的publicPath),所以我们部署CDN的操作完全可以让我们来做,一旦我们build并上传资源到CDN后,打开index.html就可以做【预测试】(上线测试服前的测试)。

    最后,后端的职责在整个部署发布链路中被简化了,我们只要提供一个包含index.html和其他非静态资源给后端就可以了,后端拿到这些资源部署到应用 服务器。

    最最最后,静态资源应该使用contentHash或者chunkHash,当我们迭代时,用户不需要再重新下载所有的js或css文件,而是增量下载,更好的利用了缓存。

    🏠项目结构

    |── README.md
    ├── index.js // 包出口
    ├── utils // 工具函数
    ├── templates // 模版
    ├── operations // 操作集
    ├── node_modules // 依赖

    Operations

    Operations目前提供了git、svn、刷新CDN的操作集,可以将operation理解为积木

    Git

    Operations.gitAdd() ————>【git add .】

    Operations.gitcommit(commitMessage)————>【git commit -m ${commitMessage}】

    Operations.gitPush(branch)————>【git push -u origin ${branch}】

    Operations.gitOps(branch, commitMessage) ————>上述opeation的整合

    Svn

    Operations.svnCoResource(remote, tempDir)————> 在tempDir下执行svn checkout remote

    Operations.svnAddOrUpdate(project, tempDir)————> 在tempDir下执行svn add or svn update,project是仓库的名称

    Operations.svnCommit(project, commitMessage, tempDir) ————> 在tempDir下执行svn commit -m ${commitMessage}

    **Operations.svnUpdateRemote(project, commitMessage, tempDir) **————> svnAddOrUpdate 与 svnCommit的整合

    refreshCDN

    Operations.refreshCDN({ svnDir = '', commitMessage = '', refreshHost = '', refreshPath = '' })————> 刷新CDN,svnDir指需要刷新的svn二级目录如ke,commitMessage为本次刷新填写的信息,refreshHost和refreshPath组合后就是执行刷新时的请求的url。

    Templates

    Templates是用各种operation组装完成的流程,例如自动化部署CDN资源,可以将templates理解为用积木搭好的建筑物

    deploy_css_js
    /**
     *
     * @param svnRemote  svn远程仓库地址
     * @param svnProjectName svn远程仓库名字
     * @param refreshHost 刷新CDN的域名
     * @param refreshPath 刷新CDN的路径
     * @param svnDir svn二级目录
     * @param autoGit 是否自动执行Git更新操作
     * @param autoRefresh 是否自动触发CDN生效操作
     * @param buildDir 打包后的构建目录
     * @param assetsDir 静态资源目录,若未指明则为buildDir
     * @param distDir 除去静态资源的资源存放的目录
     * @param includes 需要部署到CDN的资源类型,默认['css', 'js']
     */
    function deploy_css_js({
        svnRemote,
        svnProjectName,
        autoGit = true,
        autoRefresh = true,
        includes = ['css', 'js'],
        buildDir = 'build',
        distDir = 'dist',
        assetsDir = buildDir,
        refreshHost,
        refreshPath,
        svnDir
      }) {/**/}
    deploy_images
    /**
     * 
     * @param {sourcePath} 集中化管理images的js文件地址
     * @param {uploadOptions} 上传图片的配置,参见node http.reqeust(options)
     * @param {successCode} 表示上传成功的HTTP状态码,例如302、200
     */
    function deploy_images({sourcePath, uploadOptions, successCode}){/**/}

    思路

    Operation + Template的模式:开发者可以通过提供的Operations组装自定义的template,也可以使用仓库提供的Templates(template契合需求时)。所以这个项目的核心是Operations,而不只是对外输出的templates(当然,templates很重要

    ✨Templates示例

    Deploy_CSS_JS

    webpack build完成后就触发这个过程,通过npm script hooks完成

    1. 在项目根目录下新建一个temp目录,作为后续操作的工作目录。
    2. 在temp目录下拉取SVN上已存在的静态资源。(例如:temp/test)
    3. 将build目录下中的静态资源移动到temp/test目录下。
    4. 在temp/test目录下执行SVN更新的操作,这个时候完成了静态资源的部署。
    5. 如果新部署的资源需要刷新后才能生效,那么执行刷新操作(这个过程存在差异性,可以覆写refreshCDN.js)【可选】
    6. 删除temp目录,将build目录下剩余的文件移入dist目录并删除build目录
    7. 这个时候执行Git操作,更新到远程仓库【可选】
    8. 后端人员git pull,获取到dist目录,将其部署到服务器,大功告成!【后端操作】

    Deploy-Images(暂不使用)

    webpack build开始前触发这个过程,通过npm script hooks完成

    1. 项目中对图片的引用需要中心化管理到一个js文件中,例如images.js(里面包含了所有页面/组件引用的图片地址)
    2. 进行build前,导出所有变量,对这些变量进行判断:如果是本地地址,则上传该图片到CDN后并用url替换
    3. 执行webpack build

    **ps: 由于Node使用的为CommonJS,而在这里Node需要获取通过ES6module导出的变量,所以务必启用experimental-modules,启用方式见使用方法 **

    📦 安装

    npm

    npm i auto-deploy2cdn --save-dev

    yarn

    yarn add auto-deploy2cdn --save-dev

    🔨使用方法

    Deploy-CSS-JS(用于部署静态资源,例如CSS、JS)

    1. 编写一个deploy.js
    const { templates } = require('auto-deploy2cdn')
    templates.deploy_css_js({
      svnDir: 'ke',
      svnProjectName: 'yoj',
      svnRemote: 'https://xxx.yyy.com/svn/ydstatic/ke/yoj/',
      autoGit: false,
      autoRefresh: true,
      distDir: 'v-1.2',
      buildDir: 'build',
      assetsDir: 'build/assets',
      includes: ['css', 'js'],
      refreshHost: 'xxx.yyy.com',
      refreshPath: '/IT/updateshared/',
    })
    2. 利用npm scripts hooks 触发
      "scripts"{
        "start": "node scripts/start.js",
        "postbuild": "node scripts/deploy.js", // build
        "build": "node scripts/build.js",
      }

    Deploy-Images

    1. 编写一个upload.js
    const { templates } = require('auto-deploy2cdn')
    templates.deploy_images({
      uploadOptions: {
        host: 'xxx.ydstatic.com',
        path: '/upload?method=uploadImage&product=xue&tourl=',
        method: 'POST'
      },
      sourcePath: 'test/constants/images.js',
      successCode: 302
    })
    2. 利用npm scripts hooks 触发
     "scripts"{
        "start": "node scripts/start.js",
        "prebuild": "node --experimental-modules scripts/upload.js", // build ES6module
        "postbuild": "node scripts/deploy.js", 
        "build": "node scripts/build.js",
      }

    Custom-Templates

    1.编写一个custom_template
    const { operations } = require('auto-deploy2cdn')
    function custom_template() {
      operations.gitAdd()
        operations.gitCommit()
        operations.gitPush()
    }
    2. 在合适的场景下触发,例如npm scripts

    Keywords

    Install

    npm i auto-deploy2cdn

    DownloadsWeekly Downloads

    1

    Version

    0.8.0

    License

    MIT

    Unpacked Size

    25.9 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar