建站
咨詢
售后
建站咨詢
新聞中心
前言
創(chuàng)新互聯(lián)建站服務(wù)項(xiàng)目包括杜集網(wǎng)站建設(shè)、杜集網(wǎng)站制作、杜集網(wǎng)頁(yè)制作以及杜集網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，杜集網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到杜集省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
是否有很多人跟我一樣有這樣的一個(gè)煩惱，每天有寫不完的需求、改不完的BUG，每天擼著重復(fù)、繁瑣的業(yè)務(wù)代碼，擔(dān)心著自己的技術(shù)成長(zhǎng)。
其實(shí)換個(gè)角度，我們所學(xué)的所有前端技術(shù)都是服務(wù)于業(yè)務(wù)的，那我們?yōu)槭裁床幌朕k法使用前端技術(shù)為業(yè)務(wù)做點(diǎn)東西？這樣既能解決業(yè)務(wù)的困擾，也能讓自己擺脫每天只能寫重復(fù)繁瑣代碼的困擾。
本文主要為筆者針對(duì)當(dāng)前團(tuán)隊(duì)內(nèi)的一些業(yè)務(wù)問題，實(shí)現(xiàn)的一個(gè)自動(dòng)化部署平臺(tái)的技術(shù)方案。
背景
去年年初，由于團(tuán)隊(duì)里沒有前端，剛好我是被招過來的第一個(gè)，也是唯一一個(gè)FE，于是我接手了一個(gè)一直由后端維護(hù)的JSSDK項(xiàng)目，其實(shí)也說不上項(xiàng)目，接手的時(shí)候它只是一個(gè)2000多行代碼的胖腳本，沒有任何工程化痕跡。
業(yè)務(wù)需求
這個(gè)JSSDK，主要作用是在后端了為業(yè)務(wù)方分配appKey之后，前端將appKey寫死在JSSDK中，上傳到CDN后，為業(yè)務(wù)方提供數(shù)據(jù)采集服務(wù)的腳本。
有的同學(xué)可能有疑問，為什么不像一些正常的SDK一樣，appKey是以參數(shù)的形式傳入到JSSDK中，這樣就可以統(tǒng)一所有業(yè)務(wù)方使用同一個(gè)JSSDK，而不需要為每個(gè)業(yè)務(wù)業(yè)務(wù)方都提供一個(gè)JSSDK。其實(shí)我剛開始也是這么想的，于是我向我的leader提出了我的這個(gè)想法，被拒絕了，拒絕原因如下：
- appKey如果以參數(shù)形式傳入，對(duì)業(yè)務(wù)方的接入成本有所增加，會(huì)出現(xiàn)appKey填錯(cuò)的問題。
- 業(yè)務(wù)方接入JSSDK之后，希望每次JSSDK版本迭代對(duì)業(yè)務(wù)方來說是無感知的（也就是版本迭代是覆蓋式發(fā)布），如果所有業(yè)務(wù)方使用同一個(gè)JSSDK，每次JSSDK的版本迭代，一次發(fā)版會(huì)一次性對(duì)所有業(yè)務(wù)方都有影響，會(huì)增加風(fēng)險(xiǎn)。
由于我的leader現(xiàn)在主要是負(fù)責(zé)產(chǎn)品推廣，經(jīng)常和業(yè)務(wù)方打交道，可能他更能站在業(yè)務(wù)方的角度來考慮問題。所以，我的leader選擇犧牲項(xiàng)目的維護(hù)成本來降低SDK的接入成本和規(guī)避風(fēng)險(xiǎn)，可以理解。
那既然我們改變不了現(xiàn)狀，那就只能適應(yīng)現(xiàn)狀。
項(xiàng)目痛點(diǎn)
那么針對(duì)原來沒有任何工程化情況的胖腳本，每次新增一個(gè)業(yè)務(wù)方，我需要做的事情如下：
- 打開一個(gè)胖腳本和JSSDK接入文檔，拷貝一份新的。
- 找后端要分配好的appKey，找對(duì)對(duì)應(yīng)的appKey那一行代碼手動(dòng)修改。
- 手動(dòng)混淆修改完好的腳本并上傳到CDN。
- 修改JSSDK接入文檔中CDN的地址，保存后發(fā)送給業(yè)務(wù)方。
整個(gè)過程都需要手動(dòng)進(jìn)行，相對(duì)來說非常繁瑣，并且一不小心就會(huì)填錯(cuò)，每次都需要對(duì)腳本和接入文檔進(jìn)行檢查。
針對(duì)以上情況，得到我們需要解決的問題：
- 怎樣針對(duì)一個(gè)新的業(yè)務(wù)方快速輸出一份新的JSSDK和接入文檔？
- 怎樣快速對(duì)新的JSSDK進(jìn)行混淆并上傳到CDN。
自動(dòng)化方案
介紹方案之前，先上一張平臺(tái)截圖，以便先有一個(gè)直觀的認(rèn)識(shí)：
SDK自動(dòng)化部署平臺(tái)主要實(shí)現(xiàn)了JSSDK的編譯，發(fā)布測(cè)試（在線預(yù)覽），上傳CDN功能。
服務(wù)端技術(shù)棧包括：
- 框架 Express
- 熱更新 nodemon
- 依賴注入 awilix
- 數(shù)據(jù)持久化 sequelize
- 部署 pm2
客戶端技術(shù)棧就不介紹了，Vue全家桶 + vue-property-decorator + vuex-class。
項(xiàng)目搭建參考：
Vue+Express+Mysql 全棧初體驗(yàn)
https://juejin.im/post/5ce96694f265da1bc5523f69
自動(dòng)化部署平臺(tái)主要依賴于 GIT + 本地環(huán)境 + 私有NPM源 + MYSQL，各環(huán)節(jié)之間進(jìn)行通信交互，完成自動(dòng)化部署。
主要達(dá)到的效果：本地環(huán)境拉取git倉(cāng)庫(kù)代碼后，進(jìn)行需求開發(fā)，完成后發(fā)布一個(gè)帶Rollup的SDK編譯器包到私有NPM倉(cāng)庫(kù)，自動(dòng)化部署平臺(tái)在工程目錄安裝指定版本的SDK，并且備份到本地，在SDK編譯時(shí)，選擇特定版本的Rollup的SDK編譯器，并傳參（如appKey，appId等）到編譯器中進(jìn)行編譯，同時(shí)自動(dòng)生成JSSDK接入文檔等后打包成帶描述文件的Release包，在上傳到CDN時(shí)，將描述文件的對(duì)應(yīng)的信息寫入MYSQL中進(jìn)行保存。
版本管理
由于JSSDK原本只是一個(gè)腳本，我們必須實(shí)現(xiàn)項(xiàng)目的工程化，從而完成版本管理，方便快速版本切換進(jìn)行發(fā)布，回滾，進(jìn)而快速止損。
首先，我們需要將項(xiàng)目工程化，使用Rollup進(jìn)行模塊管理，并且在發(fā)包NPM包的時(shí)候，輸入為各種參數(shù)（如appKey）輸出為一個(gè)Rollup Complier的函數(shù)，然后使用rollup-plugin-replace在編譯時(shí)候替換代碼中具體的參數(shù)。
lib/build.js，JSSDK中發(fā)包的入口文件，提供給SDK編譯時(shí)使用
- import * as rollup from 'rollup';
- const replace = require('rollup-plugin-replace');
- const path = require('path');
- const pkgPath = path.join(__dirname, '..', 'package.json');
- const pkg = require(pkgPath);
- const proConfig = require('./proConfig');
- function getRollupConfig(replaceParams) {
- const config = proConfig;
- // 注入系統(tǒng)變量
- const replacereplacePlugin = replace({
- '__JS_SDK_VERSION__': JSON.stringify(pkg.version),
- '__SUPPLY_ID__': JSON.stringify(replaceParams.supplyId || '7102'),
- '__APP_KEY__': JSON.stringify(replaceParams.appKey)
- });
- return {
- input: config.input,
- output: config.output,
- plugins: [
- ...config.plugins,
- replacePlugin
- ]
- };
- };
- module.exports = async function (params) {
- const config = getRollupConfig({
- supplyId: params.supplyId || '7102',
- appKey: params.appKey
- });
- const {
- input,
- plugins
- } = config;
- const bundle = await rollup.rollup({
- input,
- plugins
- });
- const compiler = {
- async write(file) {
- await bundle.write({
- file,
- format: 'iife',
- sourcemap: false,
- strict: false
- });
- }
- };
- return compiler;
- };
在自動(dòng)化部署平臺(tái)中，使用shelljs安裝JSSDK包：
- import {route, POST} from 'awilix-express';
- import {Api} from '../framework/Api';
- import * as shell from 'shell';
- import * as path from 'path';
- @route('/supply')
- export default class SupplyAPI extends Api {
- // some code
- @route('/installSdkVersion')
- @POST()
- async installSdkVersion(req, res) {
- const {version} = req.body;
- const pkg = `@baidu/xxx-js-sdk@${version}`;
- const registry = 'http://registry.npm.baidu-int.com';
- shell.exec(`npm i ${pkg} --registry=${registry}`, (code, stdout, stderr) => {
- if (code !== 0) {
- console.error(stderr);
- res.failPrint('npm install fail');
- return;
- }
- // sdk包備份路徑
- const sdkBackupPath = this.sdkBackupPath;
- const sdkPath = path.resolve(sdkBackupPath, version);
- shell.mkdir('-p', sdkPath).then((code, stdout, stderr) => {
- if (code !== 0) {
- console.error(stderr);
- res.failPrint(`mkdir \`${sdkPath}\` error.`);
- return;
- }
- const modulePath = path.resolve(process.cwd(), 'node_modules', '@baidu', 'xxx-js-sdk');
- // 拷貝安裝后的文件，方便后續(xù)使用
- shell.cp('-rf', modulePath + '/.', sdkPath).then((code, stdout, stderr) => {
- if (code !== 0) {
- console.error(stderr);
- res.failPrint(`backup sdk error.`);
- return;
- }
- res.successPrint(`${pkg} install success.`);
- });
- })
- });
- }
- }
Release包
Release包就是我們?cè)谏蟼鞯紺DN之前需要準(zhǔn)備的壓縮包。因此，打包JSSDK之后，我們需要生成的文件有，接入文檔、JSSDK DEMO預(yù)覽頁(yè)面、JSSDK編譯結(jié)果、描述文件。
首先，打包函數(shù)如下：
- import {Service} from '../framework';
- import * as fs from 'fs';
- import path from 'path';
- import _ from 'lodash';
- export default class SupplyService extends Service {
- async generateFile(supplyId, sdkVersion) {
- // 數(shù)據(jù)庫(kù)查詢對(duì)應(yīng)的業(yè)務(wù)方的CDN文件名
- const [sdkInfoErr, sdkInfo] = await this.supplyDao.getSupplyInfo(supplyId);
- if (sdkInfoErr) {
- return this.fail('服務(wù)器錯(cuò)誤', null, sdkInfoErr);
- }
- const {appKey, cdnFilename, name} = sdkInfo;
- // 需要替換的數(shù)據(jù)
- const data = {
- name,
- supplyId,
- appKey,
- 'sdk_url': `https://***.com/sdk/${cdnFilename}`
- };
- try {
- // 編譯JSSDK
- const sdkResult = await this.buildSdk(supplyId, appKey, sdkVersion);
- // 生成接入文檔
- const docResult = await this.generateDocs(data);
- // 生成預(yù)覽DEMO html文件
- const demoHtmlResult = await this.generateDemoHtml(data, 'sdk-demo.html', `JSSDK-接入頁(yè)面-${data.name}.html`);
- // 生成release包描述文件
- const sdkInfoFileResult = await this.writeSdkVersionFile(supplyId, appKey, sdkVersion);
- const success = docResult && demoHtmlResult && sdkInfoFileResult && sdkResult;
- if (success) {
- // release目標(biāo)目錄
- const dir = path.join(this.releasePath, supplyId + '');
- const fileName = `${supplyId}-${sdkVersion}.zip`;
- const zipFileName = path.join(dir, fileName);
- // 壓縮所有結(jié)果文件
- const zipResult = await this.zipDirFile(dir, zipFileName);
- if (!zipResult) {
- return this.fail('打包失敗');
- }
- // 返回壓縮包提供下載
- return this.success('打包成功', {
- url: `/${supplyId}/${fileName}`
- });
- } else {
- return this.fail('打包失敗');
- }
- } catch (e) {
- return this.fail('打包失敗', null, e);
- }
- }
- }
編譯JSSDK
JSSDK的編譯很簡(jiǎn)單，只需要加載對(duì)應(yīng)版本的JSSDK的編譯函數(shù)，然后將對(duì)應(yīng)的參數(shù)傳入編譯函數(shù)得到一個(gè)Rollup Compiler，然后將 Compiler 結(jié)果寫入Release路徑即可。
- export default class SupplyService extends Service {
- async buildSdk(supplyId, appKey, sdkVersion) {
- try {
- const sdkBackupPath = this.sdkBackupPath;
- // 加載對(duì)應(yīng)版本的備份的JSSDK包的Rollup編譯函數(shù)
- const compileSdk = require(path.resolve(sdkBackupPath, sdkVersion, 'lib', 'build.js'));
- const bundle = await compileSdk({
- supplyId,
- appKey: Number(sdkInfo.appKey)
- });
- const releasePath = path.resolve(this.releasePath, supplyId, `${supplyId}-sdk.js`);
- // Rollup Compiler 編譯結(jié)果至release目錄
- await bundle.write(releasePath);
- return true;
- } catch (e) {
- console.error(e);
- return false;
- }
- }
- }
生成接入文檔
原理很簡(jiǎn)單，使用JSZip，打開接入文檔模板，然后使用Docxtemplater替換模板里的特殊字符，然后重新生成DOC文件：
- import Docxtemplater from 'docxtemplater';
- import JSZip from 'JSZip';
- export default class SupplyService extends Service {
- async generateDocs(data) {
- return new Promise(async (resolve, reject) => {
- if (data) {
- // 讀取接入文檔，替換appKey，cdn路徑
- const supplyId = data.supplyId;
- const docsFileName = 'sdk-doc.docx';
- const supplyFilesPath = path.resolve(process.cwd(), 'src/server/files');
- const content = fs.readFileSync(path.resolve(supplyFilesPath, docsFileName), 'binary');
- const zip = new JSZip(content);
- const doc = new Docxtemplater();
- // 替換`[[`前綴和`]]`后綴的內(nèi)容
- doc.loadZip(zip).setOptions({delimiters: {start: '[[', end: ']]'}});
- doc.setData(data);
- try {
- doc.render();
- } catch (error) {
- console.error(error);
- reject(error);
- }
- // 生成DOC的buffer
- const buf = doc.getZip().generate({type: 'nodebuffer'});
- const releasePath = path.resolve(this.releasePath, supplyId);
- // 創(chuàng)建目標(biāo)目錄
- shell.mkdir(releasePath).then((code, stdout, stderr) => {
- if (code !== 0 ) {
- resolve(false);
- return;
- }
- // 將替換后的結(jié)果寫入release路徑
- fs.writeFileSync(path.resolve(releasePath, `JSSDK-文檔-${data.name}.docx`), buf);
- resolve(true);
- }).catch(e => {
- console.error(e);
- resolve(false);
- });
- }
- });
- }
- }
生成預(yù)覽DEMO頁(yè)面
與接入文檔生成原理類似，打開一個(gè)DEMO模板HTML文件，替換內(nèi)部字符，重新生成文件：
- export default class SupplyService extends Service {
- generateDemoHtml(data, file, toFile) {
- return new Promise((resolve, reject) => {
- const supplyId = data.supplyId;
- // 需要替換的數(shù)據(jù)
- const replaceData = data;
- // 打開文件
- const content = fs.readFileSync(path.resolve(supplyFilesPath, file), 'utf-8');
- // 字符串替換`{{`前綴和`}}`后綴的內(nèi)容
- const replaceContent = content.replace(/{{(.*)}}/g, (match, key) => {
- return replaceData[key] || match;
- });
- const releasePath = path.resolve(this.releasePath, supplyId);
- // 寫入文件
- fs.writeFile(path.resolve(releasePath, toFile), replaceContent, err => {
- if (err) {
- console.error(err);
- resolve(false);
- } else {
- resolve(true);
- }
- });
- });
- }
- }
生成Release包描述文件
將當(dāng)前打包的一些參數(shù)存在一個(gè)文件中的，一并打包到Release包中，作用很簡(jiǎn)單，用來描述當(dāng)前打包的一些參數(shù)，方便上線CDN的時(shí)候記錄當(dāng)前上線的是哪個(gè)SDK版本等
- export default class SupplyService extends Service {
- async writeSdkVersionFile(supplyId, appKey, sdkVersion) {
- return new Promise(resolve => {
- const writePath = path.resolve(this.releasePath, supplyId, 'version.json');
- // Release描述數(shù)據(jù)
- const data = {version: sdkVersion, appKey, supplyId};
- try {
- // 寫入release目錄
- fs.writeFileSync(writePath, JSON.stringify(data));
- resolve(true);
- } catch (e) {
- console.error(e);
- resolve(false);
- }
- });
- }
- }
打包所有文件結(jié)果
將之前生成的JSSDK編譯結(jié)果、接入文檔、預(yù)覽DEMO頁(yè)面文件，描述文件使用archive打包起來:
- export default class SupplyService extends Service {
- zipDirFile(dir, to) {
- return new Promise(async (resolve, reject) => {
- const output = fs.createWriteStream(to);
- const archive = archiver('zip');
- archive.on('error', err => reject(err));
- archive.pipe(output);
- const files = fs.readdirSync(dir);
- files.forEach(file => {
- const filePath = path.resolve(dir, file);
- const info = fs.statSync(filePath);
- if (!info.isDirectory()) {
- archive.append(fs.createReadStream(filePath), {
- 'name': file
- });
- }
- });
- archive.finalize();
- resolve(true);
- });
- }
- }
CDN部署
大部分上傳到CDN都為像CDN源站push文件，而正好我們運(yùn)維在我的自動(dòng)化部署平臺(tái)的機(jī)器上掛載了NFS，即我只需要本地將JSSDK文件拷貝到共享目錄，就實(shí)現(xiàn)了CDN文件上傳。
- export default class SupplyService extends Service {
- async cp2CDN(supplyId, fileName) {
- // 讀取描述文件
- const sdkInfoPath = path.resolve(this.releasePath, '' + supplyId, 'version.json');
- if (!fs.existsSync(sdkInfoPath)) {
- return this.fail('Release描述文件丟失，請(qǐng)重新打包');
- }
- const sdkInfo = JSON.parse(fs.readFileSync(sdkInfoPath, 'utf-8'));
- sdkInfo.cdnFilename = fileName;
- // 將文件拷貝至文件共享目錄
- const result = await this.cpFile(supplyId, fileName, false);
- // 上傳成功
- if (result) {
- // 將Release包描述文件的數(shù)據(jù)同步到MYSQL
- const [sdkInfoErr] = await this.supplyDao.update(sdkInfo, {where: {supplyId}});
- if (sdkInfoErr) {
- return this.fail('JSSDK信息記錄失敗，請(qǐng)重試', null, jssdkInfoResult);
- }
- return this.success('上傳成功', {url})
- }
- return this.fail('上傳失敗');
- }
- }
項(xiàng)目成效
項(xiàng)目效益還是很明顯，從本質(zhì)上解決了我們需要解決的問題：
- 完成了項(xiàng)目的工程化，自動(dòng)化生成JSSDK和接入文檔。
- 編譯過程中自動(dòng)化進(jìn)行混淆，并實(shí)現(xiàn)了一鍵上傳至CDN。
節(jié)省了人工上傳粘貼代碼的時(shí)間，大大地提高了工作效率。
這個(gè)項(xiàng)目還是19年前半年個(gè)人花業(yè)余時(shí)間完成的工具項(xiàng)目，后來得到了Leader的重視，將工具正式升級(jí)為平臺(tái)，集成了很多業(yè)務(wù)相關(guān)的配置在平臺(tái)，我19年的前半年KPI就這么來的，哈~~~
總結(jié)
或者這一套思路對(duì)每個(gè)業(yè)務(wù)都比較適用
- 了解業(yè)務(wù)的背景
- 發(fā)現(xiàn)業(yè)務(wù)的痛點(diǎn)
- 尋找解決方案并主動(dòng)推進(jìn)實(shí)現(xiàn)
- 解決問題
其實(shí)每個(gè)項(xiàng)目中的痛點(diǎn)都一般都是XX的性能低下、XX非常低效，還是比較容易發(fā)現(xiàn)的，這個(gè)時(shí)候只需要主動(dòng)的尋找方案并推進(jìn)實(shí)現(xiàn)就OK了。
前端技術(shù)離不開業(yè)務(wù)，技術(shù)永遠(yuǎn)服務(wù)于業(yè)務(wù)，離開了業(yè)務(wù)的技術(shù)，那是完全沒有落腳點(diǎn)的技術(shù)，完全沒有意義的技術(shù)。所以，除了寫寫頁(yè)面，利用前端頁(yè)面實(shí)現(xiàn)工具化、自動(dòng)化，從而推進(jìn)到平臺(tái)化也是一個(gè)不錯(cuò)的落腳點(diǎn)選擇。
當(dāng)前題目：前端賦能業(yè)務(wù)：Node實(shí)現(xiàn)自動(dòng)化部署平臺(tái)
轉(zhuǎn)載來源：http://www.5511xx.com/article/djhhecd.html
