Rainbond 部署的應用自動接入 CDN 進行靜態資源分發

本文檔適合的場景是:解決因分佈、帶寬、服務器性能帶來的訪問延遲問題,將運行於 Rainbond 的 Nodejs 前端項目進行動靜分離,通過 阿里雲CDN 加速 對象存儲OSS 中的靜態資源,提升用戶訪問速度。

實現原理:Rainbond 支持 Nodejs 前端項目的源碼構建,在項目CI 結束後通過自定義腳本自動將靜態文件(css,js,img等)推送至 對象存儲OSS ,使用阿里雲 CDN 對 對象存儲OSS 中的靜態資源進行加速,實現動靜分離,有效提升內容加載速度。

undefined

操作步驟

Demo:好雨科技 Rainbond 前端開源項目 Rainbond-ui

推送靜態文件

npm 是 Nodejs 的包管理器,提供了 pre 和 post 兩種鉤子,對於任何在 package.json 的 scripts 字段中定義的命令,可以通過 pre 以及 post 名稱前綴,額外定義該任務在執行前、後的額外執行的鉤子命令。例如:

"postbuild" 中定義了在編譯後需要執行的腳本 cdn_release.sh

項目package.json文件

{
  "name": "rainbond-ui",
  "version": "5.3.0",
  "description": "rainbond front-end project.",
  "private": true,
  "scripts": {
    "start": "umi dev",
    "start:no-mock": "cross-env MOCK=none umi dev",
    "build": "umi build",
    "postbuild": "./cdn_release.sh", #在執行npm install之後,自動執行腳本cdn_release.sh
    "image": "umi build && docker build -t registry.cn-hangzhou.aliyuncs.com/goodrain/rainbond-ui:V5.2.1-pre-release .",
    "site": "roadhog-api-doc static && gh-pages -d dist",
    "analyze": "cross-env ANALYZE=true roadhog build"
  },

該腳本做了兩件事: 1.安裝 OSS 命令行工具 ossutil,如果對接其他CDN服務,安裝不同的文件上傳工具。 2.將源碼編譯後的靜態文件以日期分割推送至OSS,如果其他即推送到對應的CDN服務。

一般同一個代碼在開發測試階段不需要發佈到CDN,可以使用環境變量ENABLE_CDN控制是否開啓CDN加速,在生產環境中設置該變量。

環境變量CDN_ACCESS_KEY_ID``CDN_ACCESS_KEY_SECRET定義阿里雲OSS賬戶信息,其他CDN服務以類似方式進行定義。

cdn_release.sh腳本

#!/bin/bash
osstool="./ossutil64"
os=$(uname -s)
osstool_install() {
    if [ ! -f ${osstool} ]; then
        echo "installing ossutil binary"
        if [ "$os" == "Darwin" ]; then
            wget http://gosspublic.alicdn.com/ossutil/1.6.14/ossutilmac64 -O ${osstool}
        else
            wget http://gosspublic.alicdn.com/ossutil/1.6.3/ossutil64 -O ${osstool}
        fi
        chmod +x ${osstool}
        cat >~/.ossutilconfig <<EOF
[Credentials]
language=CH
endpoint=http://oss-cn-shanghai.aliyuncs.com
accessKeyID=${CDN_ACCESS_KEY_ID}
accessKeySecret=${CDN_ACCESS_KEY_SECRET}
EOF
    fi
}

if [ "${ENABLE_CDN}" == 'true' ]; then
    echo "Upload static file to oss"
    osstool_install
    now_day=$(date '+%Y-%m-%d')
    ${osstool} mkdir "oss://grstatic/cdn-demo/publish/${now_day}/"
    ${osstool} cp -u -r dist/ "oss://grstatic/cdn-demo/publish/${now_day}/"
fi

定義訪問路徑

靜態資源推送至OSS以後,需要修改項目 css,js,img 資源訪問路徑,否則後續客戶端的請求依然會發送至源站。

依然採用環境變量ENABLE_CDN的方式進行控制,如果在編譯過程中檢測到該環境變量值爲true,則訪問路徑爲OSS中的靜態資源文件。

項目config.js文件

import defaultSettings from '../src/defaultSettings';
import routerConfig from './router.config';
import moment from 'moment';

const dayFormat = moment(new Date())
  .locale('zh-cn')
  .format('YYYY-MM-DD');
let publcPath = '/static/dists/';
if (process.env.SEPARATION === 'true') {
  publcPath = `/`;
}
if (process.env.ENABLE_CDN === 'true') {
//如果ENABLE_CDN環境變量的值爲true,則路徑如下
  publcPath = `https://static.goodrain.com/cdn-demo/publish/${dayFormat}/`;
}

使用該項目在平臺中進行編譯,編譯過程中添加以下環境變量

環境變量 簡介
BUILD_ENABLE_CDN true 是否開啓CDN
BUILD_CDN_ACCESS_KEY_ID 阿里雲OSS Access key
BUILD_CDN_ACCESS_KEY_SECRET 阿里雲OSS Access secret

請注意,使用 BUILD_ 爲前綴的變量在Rainbond中寓意是在構建階段生效,生效時會移除 BUILD_ 前綴。

阿里雲CDN加速OSS資源

參考 通過CDN加速OSS資源 進行阿里雲CDN的配置,對靜態資源進行緩存,配置完成後客戶端訪問 css,js,img 資源時將會優先從CDN獲取。

undefined

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章