YonBIP前端去iframe资源上传oss部署文档说明

说明：必须是完成去iframe的前端模块，静态资源上传到阿里云OSS；

一：现状

目前YonBIP项目前端项目是node方式启动，承担以下功能：

  1. 请求路由功能；
  2. 静态资源托管；

目前已经去iframe的领域(请求路由功能由公共前端mdf-node提供)，各个领域的前端项目只剩余静态资源托管功能。

二：实现目标

目前在进行前端去node，静态化资源以及静态资源使用oss方式存储，方案有如下步骤：

  1. dockerfile修改，去掉node，增加nginx，减少资源消耗—非推送镜像方式的应用均可关闭流水线最后一步”执行部署”节点；
  2. 静态资源上传到oss；

  3. 使用CDN进行加速；

    三：脚本程序说明

    功能

  4. version的生成；

  5. version.json文件的修改；

  6. 静态资源上传；

    环境标识信息

  7. daily 日常

  8. pre 预发
  9. prod 生产
  10. sandbox 沙箱

    脚本命令规范

    1. {项目domain名称}_static_{环境标识}.sh
    示例
    1. finpub_static_daily.sh

    domain 信息

    | 领域 | 模块 | domain | 应用名 | | —- | —- | —- | —- | | 财务 | 财务公共（会计期间 会计期间方案） | finbd | finbe-web | | 财务 | 总账（凭证查询） | finpub | finpub-web |

四：脚本程序更新步骤

1：修改dockerfile

在流水线dockerfile里面按照自己的情况修改执行目录， domain信息，脚本名称；
示例

  1. ##上传静态资源到oss
  2. RUN   cd  /design/fipub_web \   ###进入到项目的目录里面，需要获取git信息
  3.     &&  curl  -s   http://10.3.35.108:6666/soft/node_static/daily/finpub_static_daily.sh   |bash

2: 修改脚本

脚本只需要修改如下三处

  1. 环境标识 env
  2. domain信息 domain
  3. 静态资源所在位置 source_dir

示例

  1. env=online
  2. domain=fiarap
  3. source_dir="/design/fiarap_web/static/public/fiarap"

五：完整示例脚本

  1. #!/bin/bash
  2. ##auth  david  lihbt@yonyou.com
  3. ##本脚本是基础服务前端资源上传到oss
  5. env=pre
  6. domain=productcenter
  7. commitid=`git rev-parse --short HEAD`
  8. version=${env}_${commitid}_`date "+%Y%m%d%H%M%S"`
  9. source_dir="/design/UPC-Web/static/public/productcenter/"
  10. bucket_name=iuap-design-cdn
  11. versionjsonname=${env}_version.json
  13. echo -e "\033[31m ======================================== \033[0m"
  14. echo -e "\033[31m =======正在更新${domain}前端资源到OSS==== \033[0m"
  15. echo -e "\033[31m ======================================== \033[0m"
  18. function download (){
  19. curl  -o /tmp/ossutil64.tar.gz  http://10.3.35.108:6666/soft/node_static/ossutil64.tar.gz
  20. tar  xvf /tmp/ossutil64.tar.gz
  21. mv ossutil64 /usr/bin/ossutil64 
  22. chmod +x /usr/bin/ossutil64
  23. }
  25. function update_version_json(){
  26. echo -e "\033[31m =======修改version.json文件==== \033[0m"
  27. sed -i  's#\("version": "\).*#\1'"$version"'"#g'  ${source_dir}/version.json
  28. echo -e "\033[31m =======version.json文件为：${source_dir}/version.json==== \033[0m"
  29. }
  31. function  config_file (){
  32. cat <<EOF> /myconfig
  33. [Credentials]
  34. language=CH
  35. endpoint=oss-cn-beijing.aliyuncs.com
  36. accessKeyID=LTAI8odMXQNqlOps
  37. accessKeySecret=SddOYShX0VVsLhIKcpA4cRc052DjL5
  38. EOF
  39. }
  41. function update_file_to_oss (){
  42. #commitid=`git rev-parse --short HEAD`
  43. echo -e "\033[31m =======本次代码提交的commitid为:${commitid}==== \033[0m"
  44. echo -e "\033[31m =======本次代码提交的version为:${version}==== \033[0m"
  45. ##查看oss资源
  46. ossutil64  -c /myconfig   ls  oss://${bucket_name}/static/mdf/${domain}/${version}/
  47. ###长传更新的文件目录
  48. ossutil64  -c /myconfig   cp  -r  ${source_dir}  oss://${bucket_name}/static/mdf/${domain}/${version}/   --exclude "version.json" -u
  49. ###上传version.json文件
  50. ossutil64  -c /myconfig   cp  -r  ${source_dir}/version.json  oss://${bucket_name}/static/mdf/${domain}/version/${versionjsonname}   -u
  51. ####设置version.json set-meta
  52. ossutil64  -c /myconfig  set-meta  oss://${bucket_name}/static/mdf/${domain}/version/${versionjsonname}   Cache-Control:no-store   --update
  53. ###查看更新后的oss资源
  54. ossutil64  -c /myconfig   ls  oss://${bucket_name}/static/mdf/${domain}/${version}/
  56. echo -e "\033[31m ======================================== \033[0m"
  57. echo -e "\033[31m =======更新${domain}前端资源到OSS完毕！！！ \033[0m"
  58. echo -e "\033[31m ======================================== \033[0m"
  59. }
  60. #####
  61. download
  62. config_file
  63. update_version_json
  64. update_file_to_oss

注意：上边的这个脚本文件修改问了需要发给宏斌那边，在此之前注意几个事儿：
1.保存格式要是utf-8的
2.执行过程中可能会报错“shell脚本执行错误 $’\r’:command not found”，可以参考https://www.cnblogs.com/manhelp/p/11277584.html 这篇文章

六：不同环境使用的方式

对于非正式环境，上传脚本命令的执行直接放在dockerfile里边就好，然后勾选掉流水线后边的部署环节，点击属性里边的编辑，将实例的个数调整为0，即不启动实例。然后刷新工作台，打开对应的功能节点，看下extend的请求，如果请求的是design.yonyoucloud.com，那说明配置就成功了
image.png