手把手教你用视频演示微服务与微前端架构实战从环境搭建到前后端分离部署解决复杂项目拆分难题

嘿，朋友！看到“微服务”和“微前端”这两个词，你是不是脑海里瞬间浮现出满屏复杂的架构图、无数个 Docker 容器，还有那让人头秃的分布式事务？别慌，我也曾经是个对着控制台报错抓耳挠腮的新手。但今天，我不跟你讲那些枯燥的理论定义，咱们直接上手，像搭积木一样，把这事儿给拆明白。

想象一下，你正在经营一家超级连锁餐厅（这就是你的大型单体应用）。以前，厨师、服务员、收银员都挤在一个小房间里，一旦炒菜锅炸了，整个店都得停业。现在，我们要把这个大厨房拆成独立的“披萨档口”、“火锅专区”和“甜点实验室”（微服务），同时把点餐界面变成可以随意拼装的模块（微前端）。这样，哪怕甜点区着火了，火锅照样卖，客人还能通过手机随时换一种点餐风格。

咱们这就开始这场“数字装修”之旅。我会用大白话，配合真实的代码片段，带你一步步从零搭建这个系统。虽然我是AI，但我保证，这段经历会让你觉得像是在和一个老程序员老友喝咖啡聊天。

第一步：理清思路——为什么我们要这么折腾？

在动手之前，你得先问问自己：我的项目到底有多大？

如果只是一个简单的博客网站，或者内部用的管理系统，千万别碰微服务。那是杀鸡用牛刀，你会被运维累死。只有当你的团队超过 5-8 人，业务模块耦合严重，修改一个功能可能要重启整个服务器时，才需要考虑拆分。

微服务的核心就三个字：解耦。微前端的核心也差不多：独立部署。

后端微服务：每个服务只负责一件事（比如用户管理、订单处理），拥有自己的数据库。
前端微应用：每个子应用可以独立开发、独立测试、独立部署，最后由一个主应用（Shell App）把它们组装起来。

第二步：后端战场——Spring Cloud Alibaba 微服务搭建

咱们选用 Java 生态中最流行的 Spring Cloud Alibaba 作为后端基础，因为它对国内开发者友好，文档齐全，而且性能强劲。

1. 环境准备

首先，确保你电脑上安装了 JDK 17+ 和 Maven 3.8+。我们需要三个核心组件：

Nacos：注册中心 + 配置中心（相当于电话簿和公告栏）。
Gateway：网关（相当于餐厅前台，统一接待所有请求）。
Services：具体的业务服务（如 user-service, order-service）。

2. 创建父工程

打开你的 IDE（IntelliJ IDEA 是首选），新建一个 Maven 项目，命名为 microservice-parent。在 pom.xml 中统一管理版本：

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>3.2.0</version>
    <relativePath/>
</parent>

<properties>
    <java.version>17</java.version>
    <spring-cloud.version>2023.0.0</spring-cloud.version>
    <spring-cloud-alibaba.version>2022.0.0.0</spring-cloud-alibaba.version>
</properties>

<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-dependencies</artifactId>
            <version>${spring-cloud.version}</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
        <dependency>
            <groupId>com.alibaba.cloud</groupId>
            <artifactId>spring-cloud-alibaba-dependencies</artifactId>
            <version>${spring-cloud-alibaba.version}</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
    </dependencies>
</dependencyManagement>

3. 启动 Nacos

去 Nacos GitHub 下载最新稳定版。解压后，在命令行运行：

# Linux/Mac
sh startup.sh -m standalone

# Windows
startup.cmd -m standalone

浏览器访问 http://localhost:8848/nacos，默认账号密码都是 nacos。看到登录页面，你就成功了一半！

4. 搭建用户服务 (user-service)

新建一个 Module，命名为 user-service。依赖如下：

<dependencies>
    <!-- Web -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- Nacos Discovery -->
    <dependency>
        <groupId>com.alibaba.cloud</groupId>
        <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
    </dependency>
    <!-- MyBatis Plus (简化数据库操作) -->
    <dependency>
        <groupId>com.baomidou</groupId>
        <artifactId>mybatis-plus-boot-starter</artifactId>
        <version>3.5.5</version>
    </dependency>
    <dependency>
        <groupId>com.mysql</groupId>
        <artifactId>mysql-connector-j</artifactId>
        <scope>runtime</scope>
    </dependency>
</dependencies>

配置文件 application.yml：

server:
  port: 8081
spring:
  application:
    name: user-service
  datasource:
    url: jdbc:mysql://localhost:3306/user_db?useSSL=false&serverTimezone=UTC
    username: root
    password: 123456
  cloud:
    nacos:
      discovery:
        server-addr: localhost:8848

mybatis-plus:
  mapper-locations: classpath:mapper/*.xml

写一个简单的 Controller 来验证：

@RestController
@RequestMapping("/users")
public class UserController {
    
    @GetMapping("/{id}")
    public String getUser(@PathVariable Long id) {
        // 这里可以连接数据库查询，为了演示简单直接返回
        return "User ID: " + id + ", Name: DemoUser";
    }
}

启动它！去 Nacos 控制台看看，user-service 是不是已经注册进去了？如果是绿色的在线状态，恭喜，你的第一个微服务诞生了。

5. 搭建网关 (gateway-service)

网关是所有请求的入口。新建 Module gateway-service。

<dependencies>
    <dependency>
        <groupId>org.springframework.cloud</groupId>
        <artifactId>spring-cloud-starter-gateway</artifactId>
    </dependency>
    <dependency>
        <groupId>com.alibaba.cloud</groupId>
        <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
    </dependency>
</dependencies>

配置 application.yml，设置路由规则：

server:
  port: 9000
spring:
  application:
    name: gateway-service
  cloud:
    nacos:
      discovery:
        server-addr: localhost:8848
    gateway:
      routes:
        - id: user-route
          uri: lb://user-service  # lb:// 表示负载均衡调用微服务
          predicates:
            - Path=/api/users/**   # 路径匹配
          filters:
            - StripPrefix=1        # 去掉 /api 前缀

现在，当你访问 http://localhost:9000/api/users/1 时，网关会自动转发到 user-service 的 /users/1 接口。

第三步：前端战场——Micro-Frontend 微前端架构

后端搞定后，前端怎么拆？这里我们推荐使用 Wujie (无界) 或 Qiankun (乾坤)。考虑到 Wujie 基于 WebComponent 和 iframe 沙箱技术，隔离性更好，且支持 Vue3/React 混合，咱们以 Wujie 为例（当然，逻辑通用于 Qiankun）。

1. 主应用 (Main App)

使用 Vue 3 + Vite 创建主应用：

npm create vite@latest main-app -- --template vue
cd main-app
npm install wujie-vue3

在 main.js 中初始化 Wujie：

import { createApp } from 'vue'
import WujieVue from 'wujie-vue3'
import App from './App.vue'

const app = createApp(App)

// 安装插件
app.use(WujieVue, {
  lifeCycle: window.wujieLifeCycle, // 生命周期钩子
  sync: true // 是否同步状态
})

app.mount('#app')

在 App.vue 中渲染子应用：

<template>
  <div class="main-container">
    <header>这是主应用头部</header>
    
    <!-- 渲染子应用 -->
    <wujie-vue3
      width="100%"
      height="400px"
      :name="'sub-app-1'"
      :url="'http://localhost:8082'" 
      :sync="true"
      :props="{ token: 'my-token' }"
    />
  </div>
</template>

2. 子应用 (Sub App)

创建另一个 Vue 项目作为子应用：

npm create vite@latest sub-app-1 -- --template vue
cd sub-app-1
npm install wujie-vue3

关键在于 main.js 需要导出生命周期函数，以便主应用控制它的挂载和卸载：

import { createApp } from 'vue'
import { createWujie, hook, unmount } from 'wujie-vue3'
import App from './App.vue'

let instance = null

export const lifeCycle = {
  mount(props) {
    if (!instance) {
      const app = createApp(App)
      // 挂载 props，如 token
      instance = app.mount('#app')
    }
  },
  unmount() {
    if (instance) {
      instance.$el.innerHTML = ''
      instance.unmount()
      instance = null
    }
  },
  update(props) {
    // 处理主应用传来的数据更新
  }
}

// 单独运行时，不需要 wujie 包装
if (window.__POWERED_BY_WUJIE__) {
  window.__WUJIE_MOUNT = lifeCycle.mount
  window.__WUJIE_UNMOUNT = lifeCycle.unmount
} else {
  const app = createApp(App)
  app.mount('#app')
}

注意 vite.config.js 的配置，必须允许跨域并设置公共路径：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: '/', // 必须为根路径
  server: {
    cors: true, // 允许跨域
    origin: 'http://localhost:8082'
  }
})

第四步：前后端分离部署——Docker 化实战

代码写好了，怎么部署？手动拷贝文件太土了。咱们用 Docker Compose 一键拉起整个环境。

1. 编写 Dockerfile

后端 user-service:

FROM maven:3.8-openjdk-17 AS build
WORKDIR /app
COPY pom.xml .
RUN mvn dependency:go-offline
COPY src ./src
RUN mvn clean package -DskipTests

FROM openjdk:17-jre-slim
WORKDIR /app
COPY --from=build /app/target/user-service-0.0.1-SNAPSHOT.jar app.jar
EXPOSE 8081
ENTRYPOINT ["java", "-jar", "app.jar"]

前端主应用 (Nginx 方式):

FROM node:18-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

2. docker-compose.yml 编排

这是最爽的一步，一个命令启动所有服务：

version: '3.8'
services:
  nacos:
    image: nacos/nacos-server:v2.2.1
    container_name: nacos-standalone
    environment:
      - MODE=standalone
    ports:
      - "8848:8848"
      - "9848:9848"

  user-service:
    build: ./user-service
    container_name: user-service
    ports:
      - "8081:8081"
    depends_on:
      - nacos
    environment:
      - SPRING_PROFILES_ACTIVE=docker
      - SPRING_DATASOURCE_URL=jdbc:mysql://host.docker.internal:3306/user_db

  gateway-service:
    build: ./gateway-service
    container_name: gateway-service
    ports:
      - "9000:9000"
    depends_on:
      - nacos
      - user-service

  main-app:
    build: ./main-app
    container_name: main-app
    ports:
      - "80:80"
    depends_on:
      - gateway-service

  sub-app-1:
    build: ./sub-app-1
    container_name: sub-app-1
    ports:
      - "8082:8082"

运行 docker compose up -d，然后访问 http://localhost。你会发现，主应用加载了，子应用也无缝嵌入了，点击按钮请求后端，经过网关，到达微服务，数据返回，全程丝滑。

第五步：解决复杂难题——状态同步与通信

在实际项目中，微前端最难的不是加载，而是通信。比如，用户在主应用登录了，子应用要知道；用户在子应用修改了购物车，主应用要刷新右上角的数量。

1. 事件总线 (Event Bus)

Wujie 提供了全局事件总线，我们可以利用它：

在主应用中：

import bus from 'wujie'

// 发送消息
bus.$emit('global-event', { type: 'USER_LOGIN', user: userInfo })

在子应用中监听：

import bus from 'wujie'

bus.$on('global-event', (data) => {
  if (data.type === 'USER_LOGIN') {
    console.log('子应用收到登录信息', data.user)
    // 执行本地逻辑
  }
})

2. 共享状态 (Shared State)

对于更复杂的数据共享，建议在后端建立一个统一的配置服务或消息队列（如 Redis Pub/Sub），前端通过轮询或 WebSocket 获取最新状态。但对于大多数场景，Props 传递和事件总线足够用了。

第六步：调试与排错指南——新手避坑手册

即使按照教程走，你也可能会遇到坑。别急，这些都是成长的勋章。

CORS 跨域问题：
- 现象：控制台报 Access-Control-Allow-Origin 错误。
- 解决：确保网关配置了 CORS 过滤器，或者子应用的 Vite/Nginx 配置中开启了 cors: true。在后端，可以使用 @CrossOrigin 注解。
样式隔离：
- 现象：子应用的 CSS 影响了主应用，或者反之。
- 解决：Wujie 默认使用 Shadow DOM 或 iframe 沙箱，样式通常是隔离的。如果发现冲突，检查是否使用了全局样式（如 body 或 html 标签的全局重置），尽量在子应用中使用 scoped CSS 或 BEM 命名规范。
JS 沙箱冲突：
- 现象：多个子应用同时修改 window 对象导致混乱。
- 解决：确保每个子应用打包时，全局变量名加上前缀，或者使用模块化开发（ES Modules），避免直接操作 window。
Nacos 注册失败：
- 现象：服务启动后，Nacos 里看不到实例。
- 解决：检查 application.yml 中的 server-addr 是否正确，防火墙是否放行 8848 端口，以及日志中是否有连接超时错误。

结语：这不是终点，而是起点

看着这一堆代码和配置文件，你可能觉得头大。但请记住，架构的本质是为了服务于人，而不是束缚人。

微服务和微前端不是银弹。它们引入了复杂性：网络延迟、数据一致性、部署链路变长。但在面对大型项目、多团队协作时，这种复杂性是值得付出的代价。它让你能像乐高高手一样，灵活地组合、替换、升级每一个模块。

现在，你已经拥有了从环境搭建到部署的全套实战经验。不妨关掉这篇教程，打开你的 IDE，试着把那个臃肿的单体项目，拆分成两个小小的微服务。当你第一次成功看到子应用在主应用中运行，并通过网关接收到后端数据时，那种成就感，绝对值得你熬夜。

如果在过程中遇到任何具体的报错，别犹豫，把错误信息贴出来，我们一起分析。记住，每个专家都是从“Hello World”和一堆红色报错中走过来的。加油，未来的架构师！

正文

手把手教你用视频演示微服务与微前端架构实战从环境搭建到前后端分离部署解决复杂项目拆分难题

第一步：理清思路——为什么我们要这么折腾？

第二步：后端战场——Spring Cloud Alibaba 微服务搭建

1. 环境准备

2. 创建父工程

3. 启动 Nacos

4. 搭建用户服务 (user-service)

5. 搭建网关 (gateway-service)

第三步：前端战场——Micro-Frontend 微前端架构

1. 主应用 (Main App)

2. 子应用 (Sub App)

第四步：前后端分离部署——Docker 化实战

1. 编写 Dockerfile

2. docker-compose.yml 编排

第五步：解决复杂难题——状态同步与通信

1. 事件总线 (Event Bus)

2. 共享状态 (Shared State)

第六步：调试与排错指南——新手避坑手册

结语：这不是终点，而是起点

相关阅读

Vue微前端子项目高效开发指南：精选资源助你轻松搭建！

Vue微前端子项目开发：新手必看资源盘点与实战技巧

揭秘Vue微前端子项目开发难题，五大实战技巧助你轻松应对

揭秘Vue微前端子项目开发难题及实战技巧

Vue微前端子项目实战攻略：轻松实现模块化开发，提升项目协作效率

揭秘微前端应用实战：五大案例解析，轻松上手微服务架构

揭秘微前端技术如何助力不同行业高效协同开发

揭秘微前端技术，行业解决方案实战案例解析

揭秘微前端实践：五大成功案例解析与实施指南

实战解析：微前端架构案例与学习指南