如何用百度云部署single-spa的子模块

suedar
395 阅读1分钟

引述

从上一篇文章，我们知道，我们可以通过import-map引入我们需要的子项目的路径。

<script type="systemjs-importmap">
    {
        "imports": {
            "projectA": "https://xxx.cdn.bcebos.com/xxxxxxx.js",
        }
    }
</script>
<script src="https://cdn.jsdelivr.net/npm/systemjs/dist/system.js"></script>

也就是说，在主项目中只需要引入json文件，有子项目有更新变化的时候，只要json文件的内容就可以了。

<script type="systemjs-importmap" src="https://xxxxx.cdn.bcebos.com/importmap.json"></script>

我们采用百度云的bucket对子项目打包后的文件和json文件进行存储。

需购买百度云bos服务，按存储的文件大小收费，不贵，几个月就几块钱。 (因为我已经不是新账号了，这里没法给大家例子，大家自行购买即可)

怎么写脚本文件

在子项目的脚本文件中，我们需要实现五个步骤。

  1. 将项目打包（需打包为一个js文件）
  2. 上传该js文件到对应的bucket
  3. 下载json文件
  4. 在本地更新json文件的子项目路径
  5. 上传json文件到远程bucket

第一步 npm run build。 需要将文件上传到对应的sha1路径，因此需要对文件内容进行sha1计算。

CALC_FILE_SHA1=$(sha1sum $OUTPUT_PATH) # 在mac为shasum linux为sha1num

echo "file_sha1"
echo ${CALC_FILE_SHA1} # 这里会生成文件的sha1 文件名，因此后面需要字符串分割的操作

IFS=' '
read -a SHAARR <<<"CALC_FILE_SHA1" # 这里取出sha1计算后的值

第二步 需要参考百度云的文档, 先下载对应的工具到本地，终端指向对应的绝对路径，-c即为生成密钥。

输入对应的ak、sk等信息。ak、sk信息可以在右上角的安全认证获取。

$ bcecmd -c  [<conf-path>]

$ Your Access Key ID [None]: Enter Your AK

$ Your Security Token []: Enter Your STS token

$ Your Secret Access Key ID [None]: Enter Your SK

$ Default Region Name [bj]: Enter Your region

$ Default Domain [bj.bcebos.com]: Enter Your host

输入AK、SK后一直回车即可。

随后即像文件操作一样。


# 上传到对应bucket
$BCECMD_URL --conf-path $CONF_URL bos cp $OUTPUT_PATH bos:/[bucket_name]/$PROJECT_NAME/$FILE_SHA1.js

echo '上传至[bucket_name]/'$PROJECT_NAME'/'$FILE_SHA1'.js'

# 下载json文件
$BCECMD_URL --conf-path $CONF_URL bos cp bos:/[bucket_name]/importmap.json $current_dir/importmap.json

echo '下载json文件'

然后通过node改变json文件。

# build.sh
node changeUrl.js

// changeUrl.js 
try {
    const file = fs.readFileSync(jsonUrl, 'utf8');
    const result = file.replace(/(?<=(\"[PROJECT_KEY]": \")).*?(?=\")/, `https://xxxxx-fe.cdn.bcebos.com/${bucketName}/${sha1}.js`);
    fs.writeFileSync(jsonUrl, result, 'utf8');
} catch (error) {
    console.log(error);
}

然后再对修改完的json文件进行上传即可。

$BCECMD_URL --conf-path $CONF_URL bos cp $current_dir/importmap.json bos:/[bucket_name]/importmap.json

自此我们就完成了子项目的自动化更新。

以上就是本篇文章的所有内容，喜欢可以给我一个小小的赞，有什么意见欢迎在评论区交流，谢谢，祝你生活愉快～

avatar
文章
阅读
粉丝