如何利用 CDN 进一步的前后端分离 CI 脚本

在团队中,开发流程相关的调整一定要相应的自动化工具配合。如果没有足够低的使用成本,这种调整将会是无意义的,因为根本就不会有人去使用。上一篇,我们提到 如何利用 CDN 进一步的前后端分离 , 这一篇主要讲,如何将这个流程结合到 CI 中。后端的配置,之前的 博客 中已经提及很多。后端 CI 主要是做代码检查,推送代码到 SVN 仓库,CI 部分本篇不会涉及。

1. 版本约定

前端版本由 package.json 文件决定。package.json 文件结构如下:

相关推荐

站点声明:本站部分内容转载自网络,作品版权归原作者及来源网站所有,任何内容转载、商业用途等均须联系原作者并注明来源。

相关侵权、举报、投诉及建议等,请发邮件至E-mail:service@mryunwei.com

回到顶部
1
2
3
4
5
6
7
8
{
  "name": "my-project-webpack",
  "version": "1.1.3",
  "description": "",
  "main": "index.js",
  "dependencies": {
  }
}
# 本地版本
./static/dev/
1. 测试环境版本
./static/test/
1. 正式环境版本
./static/dist/
https://cdn.domain.com/1.1.3/static/dev/js/app.js
var package = require("./package.json");

var version = package.version;

baseConfig.devtool = '(none)'
baseConfig.output = {
    path: path.resolve(__dirname, './static/test/'),
    publicPath: 'https://cdn.domain.com/'+version+'/static/test/',
    filename: 'js/[name].js',
    chunkFilename: '[name].js'
};
APP_CDN_URL = 'https://cdn.domain.com/'
if RUN_MODE == 'DEVELOP':
    BUNDLE_NAME = '/static/dev/'
elif RUN_MODE == 'TEST':
    BUNDLE_NAME = '/static/test/'
elif RUN_MODE == 'PRODUCT':
    BUNDLE_NAME = '/static/dist/'
def index(request,question_id):
    V = Config().get_content('V') or '1.1.3'
    REMOTE_BUNDLE_URL = '%s%s%s'%(settings.APP_STATIC_URL, V, settings.BUNDLE_NAME)
    return render(request, 'index.html', {'BUNDLE_URL': REMOTE_BUNDLE_URL,})
...
<script type="text/javascript" src="https://www.chenshaowen.com/blog/{{BUNDLE_URL}}js/vendors.js"></script>
<script type="text/javascript" src="https://www.chenshaowen.com/blog/{{BUNDLE_URL}}js/app.js"></script>
...
before_script:
  - source /data/runner/web/bin/activate
  - which node && node --version
  - which npm && npm --version
  - LANG="zh_CN.utf8"
  - export LC_ALL=zh_CN.UTF-8

stages:
  - build

build-webpack:
  stage: build
  cache:
    untracked: true
    paths:
      - ./node_modules
  script:
    - echo "start build test"
    - rm -rf ./static/*
    - npm install
    - if [[ $(git log -1 --pretty=%B) = *"["*"skipbuild"*"]"* && $CI_COMMIT_REF_NAME = 'master' ]]; then echo "skip build"; else npm run build; fi;
    - source get_version.sh
    - echo $PACKAGE_VERSION
    - touch ./static/$PACKAGE_VERSION
    - if [[ $(git log -1 --pretty=%B) = *"["*"deploy"*"]"* && $CI_COMMIT_REF_NAME = 'master' ]]; then python upload.py $DEPLOY_CMD ./static $PACKAGE_VERSION; else echo "not deploy"; fi;
  artifacts:
        name: "static"
        paths:
            - ./static
  only:
    - master
PACKAGE_VERSION=$(cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[",]//g' | tr -d '[[:space:]]')
export PACKAGE_VERSION
AKIXXXXXXXN   93nxxxxxxxxXHZE9  ap-shanghai app-120000000
#!/usr/bin/python
1. -*- coding: utf-8 -*-
############################################
1. 使用 cos-python-sdk-v5 上传文件夹到腾讯云
1.  安装方式
1.  pip install cos-python-sdk-v5
1.  使用方式
1.  python upload.py AKIXXXXXXXN   93nxxxxxxxxXHZE9  ap-shanghai app-120000000  ./static 1.0.0
############################################
import os
import sys

from qcloud_cos import CosConfig, CosS3Client

def main(argv):
    1. 校验参数
    if  len(argv) == 7 :
        secret_id  = sys.argv[1] # 用户的 secretId
        secret_key = sys.argv[2] # 用户的 secretKey
        region     = sys.argv[3] # 用户的 Region( 'ap-beijing-1')
        bucket     = sys.argv[4] # 用户的 Bucket
        filePath = sys.argv[5] # 上传文件夹路径
        version = sys.argv[6] # 上传文件 Version,可以理解为 Prefix
    else:
        print 'argv error'
        return
    1. 0,获取本地目录文件列表
    1. 获取文件列表
    file_list = []
    print 'upload dir: %s' % filePath
    for root, dirs, files in os.walk("./static", topdown=False):
        file_list.extend([os.path.join(root, name).replace('\', '/') for name in files])
    print 'ready to upload num of files %s,list: %s' % (len(file_list), file_list)
    #1,用户配置
    token = None # 使用临时密钥需要传入 Token,默认为空,可不填
    scheme = 'http' # 指定使用 http/https 协议来访问 COS,默认为 https,可不填
    config = CosConfig(Region=region, SecretId=secret_id, SecretKey=secret_key, Token=token, Scheme=scheme, Timeout=300)
    1. 2. 获取客户端对象
    client = CosS3Client(config)
    print 'Get client Success'
    1. 3. 开始上传
    result = []
    for file in file_list:
        response = client.put_object_from_local_file(
            Bucket=bucket,
            LocalFilePath=file,
            Key='/%s%s' % (version, file[1:]),
        )
        result.append((file, response['ETag']))
    print 'upload result: %s, Total: %s, Success:%s' % (result, len(file_list), len(result))

if __name__ == '__main__':
    main(sys.argv)
<script type="text/javascript" src="https://cdn.domain.com/1.1.3/static/test/js/vendors.js"></script>
<script type="text/javascript" src="https://cdn.domain.com/1.1.3/static/test/js/app.js"></script>