本文檔適合的場景是:解決因分佈、帶寬、服務器性能帶來的訪問延遲問題,將運行於 Rainbond 的 Nodejs 前端項目進行動靜分離,通過 阿里雲CDN 加速 對象存儲OSS 中的靜態資源,提升用戶訪問速度。
實現原理:Rainbond 支持 Nodejs 前端項目的源碼構建,在項目CI 結束後通過自定義腳本自動將靜態文件(css,js,img等)推送至 對象存儲OSS ,使用阿里雲 CDN 對 對象存儲OSS 中的靜態資源進行加速,實現動靜分離,有效提升內容加載速度。
操作步驟
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獲取。