如何基于Vaadin为Spring Boot微服务UI构建统一入口？

针对你12个基于Spring Boot+Kotlin、带独立Vaadin UI的微服务，想要统一入口又保留微服务UI架构的需求，以下是几个比iframe更优的方案：

1. Vaadin原生Web Component打包+Shell应用 #

利用Vaadin Flow支持将视图打包为Web Component的特性，把每个微服务的UI模块封装成独立的Web Component，然后在一个统一的Vaadin Shell应用中集成这些组件：

• 步骤：
  • 对每个微服务的Vaadin视图，通过@WebComponent注解将其打包为可复用的Web Component，构建后产出对应的JS和资源文件。
  • 搭建一个Vaadin Shell应用，包含全局导航栏、侧边栏等通用布局，通过动态加载各微服务的Web Component资源，在Shell的路由中映射到对应的功能模块。
  • 用Spring Cloud Gateway做反向代理，将Shell应用对微服务资源的请求转发到对应的微服务实例。
• 优势：完全基于Vaadin生态，无需引入额外框架，UI风格统一度高，支持无刷新切换模块。
• 注意：需确保各微服务的Web Component样式通过Shadow DOM隔离，避免CSS冲突；通过Spring Session实现跨微服务的会话共享，避免重复登录。

2. Spring Cloud Gateway + 共享布局的Vaadin Shell #

这种方案改造量最小，适合现有微服务架构：

• 步骤：
  • 为每个微服务的Vaadin应用配置独立的Servlet上下文路径（比如/user、/order）。
  • 搭建一个Vaadin Shell应用，作为统一入口，包含全局导航组件，导航链接直接指向各微服务的上下文路径。
  • 配置Spring Cloud Gateway，将所有以微服务上下文路径开头的请求转发到对应的微服务实例；Shell应用自身处理根路径和通用页面。
  • 可选：让所有微服务的Vaadin视图继承Shell应用中定义的通用布局类（需将布局类打包为公共依赖），实现全局布局的一致性。
• 优势：几乎不需要修改现有微服务的UI代码，快速落地；Gateway统一处理路由和负载均衡。
• 不足：切换微服务模块时会触发页面刷新，体验略逊于单页应用。

3. 微前端框架整合（如Single SPA） #

将每个Vaadin微服务UI作为独立的微前端应用，用Single SPA这类微前端框架进行统一管理：

• 步骤：
  • 将每个Vaadin应用打包为符合Single SPA规范的模块（Vaadin支持将应用打包为UMD格式，适配Single SPA）。
  • 搭建Single SPA的Shell应用，负责全局路由、导航和微前端模块的加载卸载。
  • 在Shell中注册各Vaadin微前端模块，配置路由规则，实现无刷新切换。
• 优势：体验接近原生单页应用，支持更灵活的微服务UI独立开发部署；可整合非Vaadin技术栈的模块（如果后续有需求）。
• 注意：需要引入微前端框架的学习成本，需处理跨模块的状态通信（可通过自定义事件或状态管理库实现）。

内容的提问来源于stack exchange，提问作者Thomas Uhrig