部署：微前端初步完成

前言

前一段时间, 写了强盛集团管理系统(基于 BPMN 引擎的工作流系统), 打算使用 qiankun 改造下项目架构, 迈向微前端, 今天开始第七章部署: 微前端初步完成。

最终效果

展示强盛集团管理系统(基于 BPMN 引擎的工作流系统)【独立部署】部分页面

基座在线网址访问

生成头像和用户名

上一章接入：强盛集团管理系统介绍了基座向微应用分发数据进行通信, 而目前基座没有头像和用户名, 那么就通过工作流(微应用)向基座通信来补全这部分的知识

在微应用main.js, 接收MicroAppStateActions实例

js 复制代码

// 微应用main.js
export async function mount(props) {
  ...
  // 将基座传入的MicroAppStateActions挂载到Vue实例原型上
  Vue.prototype.$qiankunActions = props;
  render(props);
}

微应用将用户名和头像添加到全局状态

js 复制代码

// 微应用 layout/index.vue
mounted() {
    if (window.__POWERED_BY_QIANKUN__) {
      let userInfo = this.$qiankunActions.globalState.userInfo;
      this.$qiankunActions.setGlobalState({
        userInfo: { ...userInfo, avatar: this.avatar, username: this.username }
      });
    }
}

基座通过监听全局状态, 会触发onGlobalStateChange事件

js 复制代码

// qiankun/globalState.js

qiankunActions.onGlobalStateChange((state, oldVal) => {
  for (const key in state) {
    if (Object.prototype.hasOwnProperty.call(state, key)) {
      const item = state[key];
      initialState[key] = item;
      if (key === "userInfo") {
        // 将userInfo缓存到vuex和local Storage里, 不贴代码了
        store.commit("user/setUserInfo", item);
        continue;
      }
    }
  }
});

基座Layoutheader.vue, 引用 vuex 的用户名和头像即可

批量命令

当每次启动、打包都需要基座、各微应用一个一个去执行，属实比较麻烦

安装 npm-run-all

yaml 复制代码

yarn add npm run all

编写脚本

json 复制代码

{
  "scripts": {
    "serve:base": "vue-cli-service --mode development serve",
    "serve:system": "cd ../ && cd system && start cmd /k yarn serve",
    "serve": "npm-run-all --parallel serve:*",
    "build:base": "vue-cli-service --mode production build",
    "build:system": "cd ../ && cd system && yarn build",
    "build": "npm-run-all build:*"
  }
}

--parallel: 并行运行多个命令
start cmd /k yarn serve: 会打开一个新窗口后执行yarn serve指令，原窗口不会关闭。
&&: 可以把多条 npm script 按先后顺序串起来使用

测试: 执行yarm serve

发现会新开一个 cmd 窗口, 而后运行的端口 1100 先成功了, 也正是命令并行执行。

打包

配置打包文件, 改造vue.config.js

js 复制代码

const { defineConfig } = require("@vue/cli-service");
const packageName = require("./package.json").name;
module.exports = defineConfig({
  publicPath: "/",
  outputDir: `../micro-web/${packageName}`,
  configureWebpack: {
    output: {
      libraryTarget: "umd",
      library: "m-system",
    },
  },
});

在前面几章有所提及, 配置打包后的公共路径和包路径

libraryTarget 为 qiankun 需要的包文件格式

在基座中执行yarn serve

css 复制代码

micro-web
├─css
├─fonts
├─js
├─oa
│  ├─css
│  ├─fonts
│  ├─img
│  └─js
└─system
    ├─css
    └─js

分配域名

以腾讯云部署为例

在 DNS 解析中添加一条主机记录, 例如micro

此时就会多一个二级域名, 例如micro.xiaoxi.work, 申请一个免费的 SSL 证书

下载证书, 添加到后续的 Nginx 配置中

部署

qiankun 部署有两种:

一种是基座和微应用在同一服务器同一端口
一种是主应用和微应用部署在不同的服务器

本次介绍的是第一种, 基座与微应用部署在一起

使用虚拟主机部署太多麻烦, 我还是选择云服务器+宝塔部署讲讲

在宝塔上添加站点, 输入域名micro.xiaoxi.work

添加SSL证书和强制HTTPS

添加伪静态, 为了解决一刷新就404情况

js 复制代码

if (!-e $request_filename) {
    rewrite ^/(.*) /index.html last;
    break;
}

此时就可以通过域名进行访问了

总结

至此，强盛集团管理系统已经可以在外网正常访问。微前端项目初步完成。

目前仍存在一些 bug，例如微应用间跳转不成功等，仍需要较长时间去解决，对此 bug 有兴趣也可以看看github

有问题可以私聊我哈。