使阿里oss实现前端代码自动上传-CSDN博客

前端代码自动上传

我司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 <anonymous>
复制代码