# micro-front-template

**Repository Path**: akaedu2012/micro-front-template

## Basic Information

- **Project Name**: micro-front-template
- **Description**: 微前端qiankun框架，从创建到部署整个流程
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-01-04
- **Last Updated**: 2025-01-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 微前端架构模板


## 介绍

> 微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。同时，它们也可以在共享组件的同时进行并行开发——这些组件可以通过 NPM 或者 Git Tag、Git Submodule 来管理。

本项目是基于 `qiankun` 搭建的微前端架构 `Demo`，你也可以当成 `qiankun-quick-start` 来使用。

本项目使用 `Vue` 作为主应用基座，嵌入了 `Vue` 和 `React` 两个子应用，架构图和效果图如下：

![架构图](http://shadows-mall.oss-cn-shenzhen.aliyuncs.com/images/blogs/qiankun_practice/8.png)

![效果图](http://shadows-mall.oss-cn-shenzhen.aliyuncs.com/images/blogs/qiankun_practice/7.png)

## qinakun 官方文档
[https://qiankun.umijs.org/zh/guide/](https://qiankun.umijs.org/zh/guide/)

## 如何运行

> 本项目使用的端口为 `9999、10100、10200、10300`，运行前请确保这几个端口的空闲。

本仓库基于 `qiankun` 实现微前端架构，运行命令如下：

```bash
yarn install
yarn examples:install
yarn examples:start
```

## 关于跨域

由于 `qiankun` 内部使用的是 `Fetch HTML` 的方式加载子应用，所以会遇到跨域问题。我们需要先解决跨域问题，使我们的主应用可以正常加载子应用相关资源。

在开发环境下，本项目配置了跨域解决方案，所以在直接运行项目并不会遇到跨域问题。

## 本地docker部署
项目中deploy文件夹下有docker部署文件，使用docker部署需要先安装docker，然后执行以下命令：
```bash
docker-compose up -d
```
#### deploy文件夹下文件说明
  
1. deployed 文件夹下的micro-app-main、micro-app-react、micro-app-vue、micro-app-static 文件夹里面的build文件夹是由微应用项目打包后的文件夹dist拖进去的，里面包含子应用的静态资源。其中的Dockerfile和nginx.conf文件是部署微应用的配置文件。

2. deploy文件夹下的docker-compose.yml文件是docker部署的配置文件，里面配置了主应用、子应用的端口、静态资源路径等。
3. deploy文件夹下的nginx.conf和nginx.prod.conf供给生产nginx服务器打包参考

## 项目参考
本项目是在原项目基础上做了部分的修改(包括但不限于应用的跑通，相关bug的解决，发布方式等)，

原项目地址：[https://github.com/a1029563229/blogs](https://github.com/a1029563229/blogs)
项目参考 [qiankun 实战系列教程](https://github.com/a1029563229/blogs)：

  - `master`：稳定分支，可以直接作为 `qiankun-quick-start` 使用；
  - `feature-communication`：官方通信方案；
  - `feature-communication-shared`：`Shared` 通信方案；

大家也可以根据自己的需求查看原项目讲解。