qiankun-boot 指南
传送门:qiankun-boot
由于业务需要,最近开始研究起了前端微服务,经过比对,single-spa, wujie 等前端微服务框架后,发现社区普遍推荐使用 qiankun,受众广就意味着出了问题方便找人询问,但是万万没想到啊,就这还是踩了一箩筐的坑啊。
say more all tears
痛定思痛,决定写个工具,方便开新坑的时候能够快速 demo。名字借鉴了spring-boot,就叫 qiankun-boot
ps:由于线上只会提供一台服务器,所以采用了二级目录的形式部署子项目。目前仅支持 react 项目,支持最新 react
准备工作
1. 使用前先确认 bash 所在位置(> which bash ),如有必要修改头文件 #!/opt/homebrew/bin/bash -> #!/usr/bin/bash
2. 注意 bash 的版本需要在4以上 (> bash --version)
2. 确认是否安装 gsed(mac 用户) 或者替换 gsed -> sed (windows 用户)
3. 切换 node 到最新版本(nvm use stable)
配置工程
qiankun-boot/conf.sh
# 工程名称
target_dir=mic-frontend
# 空白仓库地址
git_url=https://e.coding.net/vite-man/we-project/$target_dir.git
# nexus npm hosted
nexus_registry=http://localhost:8081/repository/npm-hosted/
# 主应用端口(微应用端口依次累加)
port=3000
# 工程名称(主 微应用1 微应用2 ...)
projects=(main sea land)
# 默认打开的微服务
default_micro=${projects[1]}
# 当前微服务所在的路由路径名
pathname=system
创建工程
mkdir project-directory
cd project-directory
ln -s **/qiankun-boot/init.sh ./
chmod 770 ./init.sh
./init.sh
(ง •̀*•́)ง (ง •̀*•́)ง (ง •̀_•́)ง
到此一个新的工程模版已经被创建出来了!!!!
在开发环境下运行
cd $target_dir
yarn start
预览线上环境
cd $target_dir
yarn nginx:start
# 开发过程中有接口调用的,去 nginx.conf 中配置代理即可
# 停止预览
yarn nginx:stop
新增微应用
ln -s **/qiankun-boot/new-app.sh ./
chmod 770 ./new-app.sh
./new-app.sh
新增共享工程
ln -s **/qiankun-boot/new-pkg.sh ./
chmod 770 ./new-pkg.sh
./new-pkg.sh
ps: 共享工程是一个空仓库,可以满足快速开发共享配置,组建
安装依赖
cd mic-frontend
# 安装所有依赖
yarn
or
# 安装指定微服务依赖
yarn workspace xxx add dependence1 dependence2
开发联调
# 创建 link
cd packages/config
yarn link
# 建立链接
cd app/index
yarn link config
# 取消link
cd /app/index
yarn unlink config
发布
所有仓库
yarn publish
单独发布
npm config set registry http://localhost:8081/repository/npm-hosted/
npm login
yarn publish:independent
修复某一个仓库旧版本 bug
git checkout -b commit_uuid