玉林市网站开发公司,旅游网站排名排行榜,深圳网站搭建专业公司,php网站开发实例教程我们先看qiankun怎么上线部署#xff1a; 我这边用的是yaml 文件在 rancher上部署的#xff1a; base是基座#xff0c;这里每个应用都是一个服务#xff0c;这个还是跟之前一样并没有区别#xff0c;那如何在一个域名上挂载多个服务呢#xff1f; 最开始我们主要是在in…我们先看qiankun怎么上线部署 我这边用的是yaml 文件在 rancher上部署的 base是基座这里每个应用都是一个服务这个还是跟之前一样并没有区别那如何在一个域名上挂载多个服务呢 最开始我们主要是在ingress上配置 这样的好处是每一个域名对应的服务是单独配置的可以做到定制化配置域名没有配置的服务肯定是访问不到的。但这么做有一个问题就是当域名很多了会有一个很长的ingress需要维护很不方便。
后期我们做了优化将配置放到了基座服务对应的 nginx 中
worker_processes 1;
user root;
events {worker_connections 10240;
}http {include mime.types;default_type application/octet-stream;rewrite_log on;sendfile on;#tcp_nopush on;keepalive_timeout 65;gzip on;#include /etc/nginx/conf.d/*.conf;client_max_body_size 100M;client_header_buffer_size 128k;large_client_header_buffers 4 128k;server {listen 80;server_name *.aibee.cn;root /usr/share/nginx/html;#定义服务器的默认网站根目录位置#root /usr/share/nginx/html;# 这里是base对应的请求后端接口location /union/portal {proxy_pass http://union-portal-backend:8080;}# 这里是子应用入口 /configcenter是 registerMicroApps 注册app的 entry值location /configcenter {proxy_pass http://micro-configcenter:80;}#默认请求location / {try_files $uri $uri/ /index.html;#定义首页索引文件的名称index index.php index.html index.htm;sub_filter 数智全息驾驶舱 测试;}location ~ .*\.(?:htm|html)$ {add_header Cache-Control no-cache;}#禁止访问 .htxxx 文件location ~ /.ht {deny all;}}
}这样的好处是只需要在基座的 nginx中配置一次ingress配置 还是按照一个域名指向一个服务基座对应的服务简洁了很多。然后在前端代码中限制访问的app因为nginx中配置了所有对应的子应用。
qiankun 协作开发
qiankun独立开发微前端开发两种方式 1、本地启动基座服务和子应用 2、本地只启用子应用服务 很显然第二种更加适用在多团队协作中我们不大可能所有人都有基座的权限一般都是本地启动自己的服务开发、上线 我们现在的做法是 基座作为入口即登陆逻辑在基座登陆信息通过props下发到各个子应用。 我们先看下本地开发时基座 - 我们的base代码的vue.config.js 配置
// vue.config.js 配置
module.exports {devServer: {https: false,hotOnly: false,disableHostCheck: true,headers: {// 允许子应用跨域Access-Control-Allow-Origin: *},proxy: {^/union/portal: {target: https://micro-test.ai.cn/,ws: false,changeOrigin: true,secure: false},^/configcenter: {target: http://localhost:3002,changeOrigin: true,secure: false}}},productionSourceMap: false
}; 之前我们已经将微前端部署在了线上基座即base直接 target 到线上域名这样可以通过线上服务的nginx请求对应的后端地址 /mallbi 和 /configcenter 这个数值即注册微服务的entey数值通过它进入子应用 再看下对应子应用configcenter的vue.config.js 配置
/* eslint-disable */
const { name } require(./package);
/* eslint-enable */
module.exports {publicPath: /configcenter,lintOnSave: false,devServer: {https: false,hotOnly: false,disableHostCheck: true,port: 3002,proxy: {^/configcenter/union/api: {target: https://micro-test.ai.cn/,changeOrigin: true,secure: false,pathRewrite: {^/configcenter/union/api: /configcenter/union/api}},// ^/: {// target: https://micro-test.ai.cn/// }}},configureWebpack: {output: {library: ${name}-[name],libraryTarget: umd, // 把微应用打包成 umd 库格式jsonpFunction: webpackJsonp_${name}}},productionSourceMap: false
};publicPath 设置为注册微服务的entey数值 port 端口要和 基座配置的端口保持一致 proxy 第一组数据是匹配路径请求到已经部署在了线上微前端通过线上服务的nginx请求到对应的后端地址 通过上面两个 vue.config.js 配置我们就可以实现第一种开发方案通过本地启动基座服务和子应用开发项目。 而当我们打开子应用的 proxy的第二组就可以实现第二种更便捷的方式开发项目原理是 当我们单独启动子应用时一开始服务 会走proxy的第二组拉取 域名对应的静态资源没有token就会拉取到基座的静态资源然后登陆调转到子应用entey数值configcenter就会通过本地的publicPath: ‘/configcenter’打到本地服务。
