前端组件使用shell hook对接CDN快速部署

本文档适合的场景是:解决因分布、带宽、服务器性能带来的访问延迟问题,将运行于 Rainbond 的 Nodejs 前端项目进行动静分离,通过 阿里云CDN 加速 对象存储OSS 中的静态资源,提升用户访问速度。

实现原理:Rainbond 支持 Nodejs 前端项目的源码构建,在项目构建结束后通过脚本自动将静态文件(css,js,img等)推送至 对象存储OSS ,使用阿里云 CDN 对 对象存储OSS 中的静态资源进行加速,实现动静分离,有效提升内容加载速度。

前端组件使用shell hook对接CDN快速部署 - 图1

操作步骤

Demo:好雨科技 Rainbond 前端开源项目 Rainbond-ui

推送静态文件

npm 是 Nodejs 的包管理器,提供了 pre 和 post 两种钩子,对于任何在 package.json 的 scripts 字段中定义的命令,可以通过 pre 以及 post 名称前缀,额外定义该任务在执行前、后的额外执行的钩子命令。例如:

“postbuild” 中定义了在编译后需要执行的脚本 cdn_release.sh

项目package.json文件

  1. {
  2. "name": "rainbond-ui",
  3. "version": "5.3.0",
  4. "description": "rainbond front-end project.",
  5. "private": true,
  6. "scripts": {
  7. "start": "umi dev",
  8. "start:no-mock": "cross-env MOCK=none umi dev",
  9. "build": "umi build",
  10. "postbuild": "./cdn_release.sh", #在执行npm install之后,自动执行脚本cdn_release.sh
  11. "image": "umi build && docker build -t registry.cn-hangzhou.aliyuncs.com/goodrain/rainbond-ui:V5.2.1-pre-release .",
  12. "site": "roadhog-api-doc static && gh-pages -d dist",
  13. "analyze": "cross-env ANALYZE=true roadhog build"
  14. },

该脚本做了两件事:
1.安装 OSS 命令行工具 ossutil ,
2.将源码编译后的静态文件以日期分割推送至OSS

  • 使用环境变量ENABLE_CDN控制是否开启CDN加速
  • 环境变量CDN_ACCESS_KEY_ID``CDN_ACCESS_KEY_SECRET定义阿里云OSS账户信息

cdn_release.sh脚本

  1. #!/bin/bash
  2. osstool="./ossutil64"
  3. os=$(uname -s)
  4. osstool_install() {
  5. if [ ! -f ${osstool} ]; then
  6. echo "installing ossutil binary"
  7. if [ "$os" == "Darwin" ]; then
  8. wget http://gosspublic.alicdn.com/ossutil/1.6.14/ossutilmac64 -O ${osstool}
  9. else
  10. wget http://gosspublic.alicdn.com/ossutil/1.6.3/ossutil64 -O ${osstool}
  11. fi
  12. chmod +x ${osstool}
  13. cat >~/.ossutilconfig <<EOF
  14. [Credentials]
  15. language=CH
  16. endpoint=http://oss-cn-shanghai.aliyuncs.com
  17. accessKeyID=${CDN_ACCESS_KEY_ID}
  18. accessKeySecret=${CDN_ACCESS_KEY_SECRET}
  19. EOF
  20. fi
  21. }
  22. if [ "${ENABLE_CDN}" == 'true' ]; then
  23. echo "Upload static file to oss"
  24. osstool_install
  25. now_day=$(date '+%Y-%m-%d')
  26. ${osstool} mkdir "oss://grstatic/cdn-demo/publish/${now_day}/"
  27. ${osstool} cp -u -r dist/ "oss://grstatic/cdn-demo/publish/${now_day}/"
  28. fi

定义访问路径

静态资源推送至OSS以后,需要修改项目 css,js,img 资源访问路径,否则后续客户端的请求依然会发送至源站。

依然采用环境变量ENABLE_CDN的方式进行控制,如果在编译过程中检测到该环境变量值为true,则访问路径为OSS中的静态资源文件。

项目config.js文件

  1. import defaultSettings from '../src/defaultSettings';
  2. import routerConfig from './router.config';
  3. import moment from 'moment';
  4. const dayFormat = moment(new Date())
  5. .locale('zh-cn')
  6. .format('YYYY-MM-DD');
  7. let publcPath = '/static/dists/';
  8. if (process.env.SEPARATION === 'true') {
  9. publcPath = `/`;
  10. }
  11. if (process.env.ENABLE_CDN === 'true') {
  12. //如果ENABLE_CDN环境变量的值为true,则路径如下
  13. publcPath = `https://static.goodrain.com/cdn-demo/publish/${dayFormat}/`;
  14. }

使用该项目在平台中进行编译,编译过程中添加以下环境变量

环境变量简介
BUILD_ENABLE_CDNtrue是否开启CDN
BUILD_CDN_ACCESS_KEY_ID阿里云OSS Access key
BUILD_CDN_ACCESS_KEY_SECRET阿里云OSS Access secret

阿里云CDN加速OSS资源

参考 通过CDN加速OSS资源 进行阿里云CDN的配置,对静态资源进行缓存,配置完成后客户端访问 css,js,img 资源时将会优先从CDN获取。

前端组件使用shell hook对接CDN快速部署 - 图2