使阿里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 <anonymous>
複製代碼