基于qiankun微前端的部署⽅案
微前端项⽬在本地开发完成后，接下来就需要考虑如何部署上线。主应⽤和微应⽤都应该是独⽴开发和部署的，属于不同的仓库。
⼀、部署在同⼀服务器
如果服务器数量有限，或不能跨域等原因需要把主应⽤和微应⽤部署在⼀起。
通常的做法是主应⽤部署在⼀级⽬录，微应⽤部署在⼆/三级⽬录。
1.1 微应⽤改造
由于微应⽤部署在⾮根⽬录，微应⽤打包之前需要配置webpack构建时的publicPath为⽬录名称，以便于主应⽤注册微应⽤后能正常访问。    output: {
filename: isBuild ? '[name].[contenthash].js' : '[name].js',//编译时要加hash防⽌缓存
path: path.join(__dirname, 'dist'),//产物输出⽬录
publicPath: "/mkc/",
chunkFilename: isBuild ? '[name].[contenthash].chunk.js' : '[name].chunk.js',
library: `${pkgJson}-[name]`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${pkgJson}`,
globalObject: 'window'
},
1.2 主应⽤改造
nginx部署前端项目主应⽤在注册微应⽤时，需要注意：
activeRule不能和微应⽤的真实访问路径⼀样；
微应⽤的真实访问路径就是entry，entry可以是相对路径；
微应⽤entry路径最后⾯的 / 不可省略；
/
**
* 微应⽤为hash，注册微应⽤
* @param {*} hash
* @returns
*/
const getActiveRule = (hash) => (location) => location.hash.startsWith(hash);
const defApps = [
{
name: 'imarket',
entry: `/life/`,
container: '#subapp-container',
activeRule: getActiveRule('#/imarket'),
},
{
name: 'MKCenter',
entry: `/mkc/`,
container: '#subapp-container',
activeRule: getActiveRule('#/MKCenter'),
},
]
⼆、部署在不同服务器
第⼆种⽅案主微应⽤部署在不同的服务器，使⽤Nginx代理进⾏访问。⼀般这么做是因为不允许主应⽤跨域访问微应⽤。
具体思路是将主应⽤服务器上⼀个特殊路径的请求全部转发到微应⽤的服务器上，即通过代理实现“微应⽤部署在主应⽤服务器上”的效果。例如，主应⽤在 A 服务器，微应⽤在 B 服务器，使⽤路径/app1来区分微应⽤，即 A 服务器上所有/app1开头的请求都转发到 B 服务器上。此时主应⽤的Nginx代理配置为：
/app1/ {
proxy_pass www.b/app1/;
proxy_set_header Host $host:$server_port;
}
主应⽤注册微应⽤时，entry可以为相对路径，activeRule不可以和entry⼀样（否则主应⽤页⾯刷新就变成微应⽤）：
registerMicroApps([
{
name: 'app1',
entry: '/app1/', // localhost:8080/app1/
container: '#container',
activeRule: '/child-app1',
},
],
三、⽅案选择
具体选择那种部署⽅案，依据项⽬组实际情况⽽定，这⾥我选取了第⼀种部署⽅案即：主、微应⽤部署在同⼀服务器上。进⾏部署时，下⾯四个要素需要注意：
真实路径：服务器上，微应⽤的真实访问路径；
publicPath：微应⽤打包时，webpack构建时output出⼝配置；
activeRule：注册微应⽤时，微应⽤响应路由的规则；
entry：微应⽤⼊⼝路径；
部署到线上后的⽬录结构如下：
系列相关⽂章：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。