使阿里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>
複製程式碼