[第八屆IT邦幫忙鐵人賽] Deploy : CDN Solution 2 - 資料夾命名規則

前言

上一篇我們透過 gulp-replace 與 gulp-hash 更改檔案名稱與引入程式名稱方法處理 cache 的問題,而在這一篇,提供利用多一層版本資料的方式解決相同的問題。這種做法的另一優點在於:若佈署後發生程式錯誤情形,仍可以透過引入上一版本資料夾的方式先行處理,減少服務無法運作時間。若有錯誤或任何建議,請各位先進不吝提出,謝謝!


 

介紹

與上篇相同,我們的專案架構如下(詳細內容不再贅述):
http://ithelp.ithome.com.tw/upload/images/20161215/20091494IXa59zRTc2.png

`

我們實作步驟如下:

  1. 清除 publish 內所有資料
  2. 將檔案傳入 publish/js/版本號碼/ 內。
  3. 依據傳入的版本號碼更改引入檔案路徑

`

這次我們只需要使用兩種套件:
npm install --save-dev gulp-replace
npm install --save-dev gulp-clean
http://ithelp.ithome.com.tw/upload/images/20161215/20091494ayTQ9Rii8P.png

http://ithelp.ithome.com.tw/upload/images/20161215/20091494NmoE3ginFb.png

與上一篇相同,我們先使用下列程式碼清除publish內資料

var	clean = require('gulp-clean');

gulp.task('FolderProcess',function(){
    gulp.src(['publish/*'], {read: false})
        .pipe(clean({force: true}));
        
        //下方程式碼略
});

`

接下來,我們只需要將js移動到版本資料夾內即可:

gulp.task('FolderProcess',function(){
    //上方程式碼略...
    
    gulp.src(['js/app_desktop.js','js/vendors.js'])
        .pipe(gulp.dest('publish/js/'+ args.buildVersion + '/'));
        
    //下方程式碼略...
});

`

最後,我們要更改 index.html 內的程式碼,更改方法如下:
Step 1.從 assets.json取得目前新js檔案名稱。
Step 2.替換 index.html 內的檔案名稱(cdn url + 新js檔名)。

var replace = require('gulp-replace');

gulp.task('uploadCDN',function(){
   
  //上方程式碼略
    gulp.src(['index.html'])
        .pipe(replace('app_desktop.js', 'http://cdn.website.com/js/' + args.buildVersion + '/app_desktop.js'))
        .pipe(replace('vendors.js', 'http://cdn.website.com/js/' + args.buildVersion + '/vendors.js'))
        .pipe(gulp.dest('publish/'));

`

我們的程式碼最後如下:

var	clean = require('gulp-clean');
var replace = require('gulp-replace');


gulp.task('FolderProcess',function(){
	gulp.src(['publish/*'], {read: false})
        .pipe(clean({force: true}));
		
    gulp.src(['js/app_desktop.js','js/vendors.js'])
        .pipe(gulp.dest('publish/js/'+ args.buildVersion + '/'));

    gulp.src(['index.html'])
        .pipe(replace('app_desktop.js', 'http://cdn.website.com/js/' + args.buildVersion + '/app_desktop.js'))
        .pipe(replace('vendors.js', 'http://cdn.website.com/js/' + args.buildVersion + '/vendors.js'))
        .pipe(gulp.dest('publish/'));

我們執行指令如下:

gulp FolderProcess --build-version 1.0.0.1

http://ithelp.ithome.com.tw/upload/images/20161216/20091494zlVXljqggl.png

http://ithelp.ithome.com.tw/upload/images/20161216/20091494mDu1JwcaSj.png

http://ithelp.ithome.com.tw/upload/images/20161216/20091494FecVk2LHLc.png


上一篇:Deploy : CDN Solution 1 - Hash and Replace
下一篇:IIS remote management : 變更站台實體路徑與移除舊有資料
返回目錄


參考資料

註:本系列文章將於2016 IT邦幫忙鐵人賽進行同時,一併發佈於個人blogger與dotblog。