记录-使用MicroApp并部署

前言

最近自己不算很忙，看到京东的微前端框架感觉挺有意思，就想自己写写试试，前端菜鸡，诸位大神勿喷。

官网地址：micro-app

基座应用

采用的vite+vue3来作为基座。按照官网例子走就是了，没有什么特别需要注意的地方。

参考：main-vite

子应用

采用的也是vite+vue3... 然而

其实也没什么麻烦的，官网也提供了解决方案，子应用修改一下vite.config.js、容器id，基座关闭沙箱并使用内联script模式并处理下子应用的静态资源就ok了。

问我为什么都要用vite

ps：注意子应用的自定义插件，当时忘记写了，联系了官方的大佬，大佬很热心，最后我才发现是自己忘记写了。

运行

基座与子应用都是使用history路由，以上操作完毕就可以运行起来了，如果有报错的话，耐心参考文档与官网示例。

部署

整个小服务器，最低配的了，尝试了一下在服务器打包，卡死了wc。

眼看这么搞是不行的了，我只能把目光盯向了github。

众所周知github有个东东叫github-pages，那么打包的事就麻烦您了。

你来打包，我拿来用，岂不美哉。

开搞开搞，配置不是很麻烦，掘金也有很多教程，随便搞搞就成了。

打完了包接下来就是怎么搞到服务器上，整点简单的吧，就装个jenkins把。

jenkins安装教程也太多了，我借鉴的文章找不到了，可能那位大佬删除了文章。

安装完毕就新建一个任务

填写一下项目相关信息

分支可以改成*/gh-pages

在整个触发器

构建环境随便勾选一下就可以了

以上基本设置完毕，还需要配置一下webhook。

参考： webhook

接下来还需配置一下nginx。

我的配置：

nginx目录：

nginx            # 根目录
├── conf         # 配置文件
├── html         # 基座应用
├── micro-vue    # 子应用
└── ...

基座:

server {
    listen 80;
    server_name localhost;

    location / {
        root html;
        index index.html index.htm;
        add_header Access-Control-Allow-Origin *;
        if ( $request_uri ~* ^.+.(js|css|jpg|png|gif|tif|dpg|jpeg|eot|svg|ttf|woff|json|mp4|rmvb|rm|wmv|avi|3gp)$ ){
        add_header Cache-Control max-age=7776000;
        add_header Access-Control-Allow-Origin *;
        }
    }
    
    location /base/ {
        root html;
        index index.html index.htm;
        add_header Access-Control-Allow-Origin *;
        if ( $request_uri ~* ^.+.(js|css|jpg|png|gif|tif|dpg|jpeg|eot|svg|ttf|woff|json|mp4|rmvb|rm|wmv|avi|3gp)$ ){
        add_header Cache-Control max-age=7776000;
        add_header Access-Control-Allow-Origin *;
        }
        try_files $uri $uri/ /index.html;
    }
}

子项目

server {
    listen 8081;
    
    location / {
    root micro-vue;
    add_header Access-Control-Allow-Origin *;
    if ( $request_uri ~* ^.+.(js|css|jpg|png|gif|tif|dpg|jpeg|eot|svg|ttf|woff|json|mp5|rmvb|rm|wmv|avi|3gp)$ ){\
    add_header Cache-Control max-age=7776000;
    add_header Access-Control-Allow-Origin *;
    }
    index index.html index.htm;
    }
    
    location /base/chat/ {
    root micro-vue;
    add_header Access-Control-Allow-Origin *;
    if ( $request_uri ~* ^.+.(js|css|jpg|png|gif|tif|dpg|jpeg|eot|svg|ttf|woff|json|mp4|rmvb|rm|wmv|avi|3gp)$ ){
    add_header Cache-Control max-age=7776000;
    add_header Access-Control-Allow-Origin *;
    }
    try_files $uri $uri/ /index.html;
    }
}

以上配置仅供参考，请按个人实际情况而定，整个流程结束。

• 提交github代码
• 执行workflow，github进行打包
• 打包完毕触发webhook
• jenkins开始拉取打包后代码
• 拉取完毕执行构建后操作，将代码部署至nginx
• 即可访问部署后代码

结语

坑不多，配置起来挺简单，值得一试。