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

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

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

操做步驟

Demo：好雨科技 Rainbond 前端開源項目 Rainbond-uigit

推送靜態文件

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

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

項目package.json文件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服務。api

通常同一個代碼在開發測試階段不須要發佈到CDN，可使用環境變量ENABLE_CDN控制是否開啓CDN加速，在生產環境中設置該變量。緩存

環境變量CDN_ACCESS_KEY_ID``CDN_ACCESS_KEY_SECRET定義阿里雲OSS帳戶信息，其餘CDN服務以相似方式進行定義。bash

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獲取。