使阿里oss实现前端代码自动上传-白红宇

前端代码自动上传

我司H5项目是由前端开发后自己部署在云端的, 之前每次开发测试完成打包后都是自己手动上传代码;本着重复性的工作都可以交给机器去做的原则,决定写一个脚本命令可以实现自动上传;

一. 开始着手;

我司用的是阿里云;就从文档开始入手吧;https://help.aliyun.com/document_detail/32070.html?spm=a2c4g.11186623.6.786.P96P8G; 参考文档后了解到在项目中可以使用node执行上传;复制代码

1.1 首先在项目的package.json中配置脚本命令;(项目使用的是vue技术栈)

并安装ali-oss插件;

"scripts": {    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",    "devbuild": "cross-env NODE_CONFIG=dev node build/build.js && cross-env NODE_CONFIG=dev node file",    "build": "cross-env NODE_CONFIG=pro node build/build.js && cross-env NODE_CONFIG=pro node file"  },  "devDependencies": {    "ali-oss": "^6.0.0",  }复制代码

1.2 在项目目录里新增一个file.js文件;该文件负者具体的上传工作;

const fs = require('fs');const co = require('co'); // 异步流程控制co 模块;const path = require('path');const filePathRoot = path.resolve(__dirname, './dist');const OSS = require('ali-oss');const files = [];const uploadFlagList = [];let bucket = '';      // oss的bucket空间名let remotePath = '';  // 远程oss文件名(根据自己需要配置)const NODE_CONFIG = process.env.NODE_CONFIG;if (NODE_CONFIG == 'dev') {    bucket = 'xxx';    remotePath = 'xxx';} else if (NODE_CONFIG == 'pro') {    bucket = 'xxx';    remotePath = 'xxx';}// 构建oss对象,这里可以找你们的后台或者运维人员开通上传oss的账号权限;const client = new OSS({    region: 'xxx',    accessKeyId: 'xxx',    accessKeySecret: 'xxx',    bucket});(() => {    // 递归取出 打包后./dist 文件夹下所有文件的路径    function readDirSync(filePath) {        const filePaths = fs.readdirSync(filePath);        filePaths.forEach((item) => {            const cur_path = `${filePath}/${item}`;            const info = fs.statSync(cur_path);            if (info.isDirectory()) {                readDirSync(cur_path);            } else {                files.push(cur_path);            }        });    }    readDirSync(filePathRoot);      co(function* () {        try {            for (let index = 0; index < files.length; index += 1) {                const fileObj = files[index];                // 提交文件到oss，这里要注意，阿里云不需要创建新文件夹，只要有路径，没有文件夹会自动创建                const result = yield client.put(fileObj.replace(filePathRoot, remotePath), fileObj);                uploadFlagList.push(result);                if(!result) break;            }            const uplaodFlag = uploadFlagList.find(item => item.res.statusCode != 200);            if (uplaodFlag) {                console.log('上传失败');                        } else {                console.log('上传成功');                        }         } catch (e) {            console.log('上传失败,请查看日志: ', e);        }    });})();复制代码

二. 愉快的打包测试吧.

"devbuild": "cross-env NODE_CONFIG=dev node build/build.js && cross-env NODE_CONFIG=dev node file"复制代码

执行打包命令 npm run devbuild(开发测试包,下一次介绍下配置的不同环境的输出包和多页应用输出配置); 项目打包后即开始执行NODE_CONFIG=dev node file.js文件;

该js 递归遍历取出打包后./dist 文件夹下所有文件的路径并上传到你指定好的oss空间内, 如果有一个上传失败的控制台会输出log('上传失败!')提醒你;

一般遇到的问题是么有空间名,或者空间名不对;上传失败,请查看日志:  Error: Please create a bucket first    at Client.proto._objectRequestParams (C:\xxxxx\node_modules\ali-oss\lib\object.js:530:11)    at Client.putStream (C:\xxxxxxxxx\node_modules\ali-oss\lib\object.js:122:23)    at Client.put (C:\xxxxxx\node_modules\ali-oss\lib\object.js:69:23)    at 
    
     复制代码