logologo
指南
实践
配置
插件
案例
博客
生态
Module Federation Examples
Practical Module Federation
Zephyr Cloud
Nx
简体中文
English
指南
实践
配置
插件
案例
博客
Module Federation Examples
Practical Module Federation
Zephyr Cloud
Nx
简体中文
English
logologo

开始

介绍
设置环境
快速上手
功能导航
名词解释
npm 包

基础

运行时

Runtime 接入
Runtime API
Runtime Hooks
Rsbuild Plugin
Rspack 插件
Webpack Plugin
Rspress Plugin
Vite Plugin
Metro
类型提示
命令行工具
样式隔离

数据管理

数据获取
数据缓存
Prefetch

框架

Modern.js
Next.js

部署

使用 Zephyr Cloud 部署

调试

开启调试模式
Chrome Devtool
全局变量

Troubleshooting

概览

运行时

RUNTIME-001
RUNTIME-002
RUNTIME-003
RUNTIME-004
RUNTIME-005
RUNTIME-006
RUNTIME-007
RUNTIME-008
RUNTIME-009

构建

BUILD-001
BUILD-002

类型

概览
TYPE-001
其他
Edit this page on GitHub
Previous PageNext.js
Next Page开启调试模式

#使用 Zephyr Cloud 部署

Zephyr Cloud 是一个零配置部署平台,直接集成到您的构建流程中,为模块联邦应用程序提供全球边缘分发。

#如何部署

  1. 为您的打包工具安装 Zephyr 插件(支持 Webpack、Rspack、Vite 等):
npm
yarn
pnpm
bun
npm add zephyr-webpack-plugin
  1. 将插件添加到您的 webpack 配置中:
webpack.config.js
import { withZephyr } from 'zephyr-webpack-plugin';
const {
  ModuleFederationPlugin,
} = require('@module-federation/enhanced/webpack');
const mfConfig = require('./module-federation.config');

module.exports = withZephyr()({
  devServer: {
    port: 2000,
  },
  output: {
    publicPath: 'http://localhost:2000/',
  },
  plugins: [new ModuleFederationPlugin(mfConfig)],
});
  1. 像往常一样构建您的项目:
npm run build

在构建过程中,您的模块联邦应用程序将自动部署到 Zephyr 的全球边缘网络,您将收到一个部署 URL。Zephyr Cloud 处理资源优化、依赖解析,并为您的微前端应用程序提供自动回滚功能。