网站优化之js和css文件与后端服务分离

199 ·
1 ·
2021-06-10 10:23
最新一次编辑的原因:

Upupor服务在昨天进行了一次升级

升级内容是将网站的css和js从服务中剥离出来,Upupor后端服务只做页面返回和接口交互2个任务

可以看到upupor.com主域名未加载其他css或js文件

那么这次升级是如何做的呢?

主体思路:

   将打包生成的js和css文件上传至其他存储服务器(例如本站使用的oss),在生产环境中调用存储服务器的js和css文件

 

具体实现:

1.准备上传脚本,这里的上传脚本使用python实现

"""
1. 安装依赖包
    pip install oss2
""" 
import oss2
import os
import hashlib

# 阿里云账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维,请登录RAM控制台创建RAM用户。
auth = oss2.Auth('<Your AccessKeyID>', '<Your AccessKeySecret>')

# yourEndpoint填写Bucket所在地域对应的Endpoint。以华东1(杭州)为例,Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。
endpoint = 'https://oss-cn-hangzhou.aliyuncs.com'

# 填写Bucket名称。
bucket = oss2.Bucket(auth, endpoint, '<your bucket name>')


# 需要上传的目标文件夹
targetDic = "D:\static\\"
targetPath = os.walk(targetDic)


# 上传到oss的指定目录
ossTargetDic = "upupor_static/"


# 因为每次打包js和css有版本,版本使用的是md5实现,所以这里需要获取md5
def getMd5(localFile):
    f = open(localFile,'rb')
    md5_obj = hashlib.md5()
    md5_obj.update(f.read())
    hash_code = md5_obj.hexdigest()
    f.close()
    md5 = str(hash_code).lower()
    return md5


# 遍历文件夹下面的所有文件
for path,dir_list,file_list in targetPath:  
    for file_name in file_list:  
        # 本地文件目录
        localFile = os.path.join(path, file_name)
        # 拼接oss文件地址,这里只上传js和css,所以做了一些特殊处理 
        ossObjectName = ossTargetDic +    localFile.replace(targetDic,'').replace('\\','/').replace('.js','-'+getMd5(localFile)+".js").replace('.css','-'+getMd5(localFile)+".css")
        exist = bucket.object_exists(ossObjectName)
        if exist == False:
            # 上传文件
            bucket.put_object_from_file(ossObjectName, localFile)

2. 服务发布,根据环境调用指定地址的js和css文件

添加ossStatic,oss上的静态资源目录

在代码层面添加 ${ossStatic} 变量,根据环境来切换地址,例如,如果是开发环境,就调用本地的文件,${ossStatic} 变量就是空。如果在生产环境,${ossStatic} 变量就是生产的地址

 

3.发布自动化

将上传文件的步骤添加到脚本中

 

最终效果:


本作品系原创,采用《署名-非商业性使用-禁止演绎4.0 国际》许可协议.转载请说明出处
本文链接:https://www.upupor.com/u/21061009470352829440 复制
评论1
网站管理员
网站管理员
2021-06-21 15:57 · 回复

脚本优化,上传至oss判断文件是否存在,不存在时再上传

 

推荐阅读