Vite微前端在GitHub Actions Docker构建中无限挂起问题排查

问题根源 #

你的Vite构建在Docker/GitHub Actions中挂起，核心原因是**@originjs/vite-plugin-federation在构建阶段尝试访问配置的本地远程服务地址（http://localhost:5001/assets/remoteEntry.js）**：

• Docker容器内部的localhost指向容器自身，而非宿主机器，因此无法访问宿主的5001端口服务；
• 该插件在构建时若无法连接远程地址，不会主动超时退出，会无限等待请求响应，最终导致构建进程卡住直至超时。

本地直接构建正常，大概率是因为你本地开发时admin远程服务处于运行状态，插件能正常拉取远程资源，不会阻塞。

修复方案 #

方案1：动态配置联邦远程依赖（推荐） #

根据构建模式（开发/生产）动态设置remotes，生产构建时跳过本地远程地址配置，或替换为生产环境的实际远程服务地址。修改vite.config.js如下：

import { defineConfig } from "vite";
import path from "path";
import react from "@vitejs/plugin-react";
import federation from "@originjs/vite-plugin-federation";
import tailwindcss from "@tailwindcss/vite";

// 改为接受mode参数的函数形式，动态生成配置
export default defineConfig(({ mode }) => {
  const isProduction = mode === "production";

  return {
    plugins: [
      react(),
      tailwindcss(),
      federation({
        name: "host",
        filename: "remoteEntry.js",
        exposes: {
          "./store": "./src/redux/store.ts",
          "./icons": "./src/constants/icons.ts",
          "./images": "./src/constants/images.ts",
          "./Card": "./src/components/card",
          "./Routes": "./src/routes/index.tsx",
          "./TextField": "./src/components/textfield",
          "./Dropdown": "./src/components/dropdown",
          "./CustomTable": "./src/components/table",
          "./Button": "./src/components/button",
          "./Modal": "./src/components/modal",
          "./Tab": "./src/components/tab",
          "./useModal": "./src/hooks/useModal",
        },
        // 生产构建时不配置本地远程，开发环境保留本地地址
        remotes: isProduction 
          ? {} 
          : { admin: "http://localhost:5001/assets/remoteEntry.js" },
        shared: {
          react: { version: "^19.0.0" },
          "react-dom": { version: "^19.0.0" },
          "react-router-dom": { version: "^7.1.5" },
          "@reduxjs/toolkit": { version: "^2.5.1" },
          "react-redux": { version: "^9.2.0" },
          "@tanstack/react-table": { version: "^8.20.6" },
        },
      }),
      {
        name: "vite-plugin-notify-host-on-rebuild",
        apply(config, { command }) {
          return Boolean(command === "build" && config.build?.watch);
        },
        async buildEnd(error) {
          if (!error) {
            try {
              await fetch("http://localhost:5000/__fullReload");
            } catch (e) {
              // noop
            }
          }
        },
      },
    ],
    build: {
      modulePreload: false,
      target: "esnext",
      minify: false,
      cssCodeSplit: false,
    },
    server: {
      watch: {
        usePolling: true,
      },
    },
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "./src"),
      },
    },
  };
});

方案2：Docker构建时临时移除本地远程配置 #

如果无法修改vite配置，可以在Dockerfile中添加步骤，临时替换remotes配置为空对象：

FROM node:20-alpine AS builder
WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .
# 替换vite.config.js中的remotes配置为空
RUN sed -i 's/remotes: { admin: "http:\/\/localhost:5001\/assets\/remoteEntry.js" },/remotes: {},/' vite.config.js
RUN npm run build

方案3：确保构建命令以生产模式运行 #

在package.json中明确指定构建模式为生产环境，避免Vite以开发模式构建：

"scripts": {
  "build": "vite build --mode production"
}

同时在Dockerfile中添加环境变量：

ENV NODE_ENV=production

内容的提问来源于stack exchange，提问作者jesse ugboh