如何在Tutor OpenEdX中定制安装frontend-app-authn微前端(MFE)

针对你在Tutor中定制frontend-app-authn的两个疑问，以下是实操性的步骤和最佳实践：

一、定制后的MFE构建步骤 #

你已经完成了代码定制，接下来按以下步骤构建可部署的静态文件：

• 进入克隆的frontend-app-authn目录：

  cd frontend-app-authn
  

• 安装项目依赖（建议使用npm，匹配OpenEdX官方环境）：

  npm install
  

• 设置构建必需的环境变量（需与你的Tutor实例配置匹配，可直接在命令行临时设置，或写入项目根目录的.env文件持久化）：

  # 替换为你的Tutor LMS访问地址
  export REACT_APP_LMS_BASE_URL=http://localhost:8000
  # 替换为你的Tutor Studio访问地址
  export REACT_APP_STUDIO_BASE_URL=http://localhost:8001
  # Tutor默认authn MFE的访问端口为1999，按需调整
  export REACT_APP_MFE_HOST=http://localhost:1999
  

• 执行构建命令，生成静态部署文件：

  npm run build
  

  构建完成后，项目根目录下会生成build文件夹，里面就是可部署的静态资源。

二、将定制后的MFE挂载到Tutor实例 #

分两种场景提供方案，按需选择：

场景1：本地开发调试（实时更新） #

如果需要频繁修改代码并即时查看效果，直接挂载本地构建目录到Tutor容器：

1. 在Tutor的本地配置目录（默认是~/.local/share/tutor/env/local/）下创建docker-compose.override.yml文件（如果已存在则编辑），添加以下内容：

   services:
     mfe:
       volumes:
         # 替换为你本地frontend-app-authn项目中build目录的绝对路径
         - /home/your-user/frontend-app-authn/build:/openedx/app/authn/build
   

2. 重启Tutor的MFE服务：

   tutor local restart mfe
   

   之后每次修改代码并重新执行npm run build，刷新页面就能看到更新。

场景2：生产/正式环境部署 #

通过Docker镜像方式部署，更稳定且符合Tutor的容器化架构：

1. 在frontend-app-authn项目根目录创建Dockerfile，参考以下内容（基于官方镜像简化）：

   # 构建阶段
   FROM node:18-alpine as builder
   WORKDIR /app
   COPY package*.json ./
   RUN npm install
   COPY . .
   # 这里可以直接写入环境变量，或者构建时通过--build-arg传入
   ENV REACT_APP_LMS_BASE_URL=http://your-lms-domain.com
   ENV REACT_APP_STUDIO_BASE_URL=http://your-studio-domain.com
   ENV REACT_APP_MFE_HOST=http://your-authn-mfe-domain.com
   RUN npm run build
   
   # 部署阶段
   FROM nginx:alpine
   COPY --from=builder /app/build /usr/share/nginx/html
   # 可选：添加自定义nginx配置，处理路由
   COPY nginx.conf /etc/nginx/conf.d/default.conf
   

2. 构建本地Docker镜像：

   docker build -t your-registry/authn-mfe:custom-v1 .
   

3. （可选）将镜像推送到你的私有镜像仓库，方便多环境部署。
4. 修改Tutor的配置文件config.yml，替换官方authn MFE镜像地址：

   MFE_AUTHN_DOCKER_IMAGE: "your-registry/authn-mfe:custom-v1"
   

5. 更新并重启Tutor服务：

   tutor local upgrade
   

额外最佳实践提示 #

• 定制代码时，尽量避免修改核心源码文件，优先使用组件覆盖、样式重载的方式，这样后续升级OpenEdX版本时，定制内容的迁移成本更低。
• 构建前务必确认环境变量与Tutor实例的域名、端口完全匹配，否则会出现跨域、API调用失败等问题。
• 本地开发时，也可以直接启动MFE开发服务器（npm start），然后修改Tutor的config.yml中MFE_AUTHN_URL为开发服务器地址（如http://localhost:3000），无需每次构建就能实时预览修改。

内容的提问来源于stack exchange，提问作者Moupriya Das