如何基于Lerna单仓多包架构实现微前端多应用的生产部署？

Great question! Let’s walk through how to formalize your local build/asset-copy process for production, plus step-by-step deployment workflows for Netlify, Vercel, and GitHub Pages.

First: Formalize the Production Build & Asset Integration Workflow #

Your local process works, but production needs automation. Here’s how to turn it into a repeatable pipeline:

1. Add a Unified Build Script #

In your root package.json, add a script that orchestrates building all packages and copying feature app assets to the main app’s build directory. Use copyfiles (install via npm i -D copyfiles) for cross-platform compatibility:

{
  "scripts": {
    "build:prod": "lerna run build --scope shared-components --scope main-app --scope 'feature-*' && npm run copy-feature-assets",
    "copy-feature-assets": "copyfiles -u 3 'packages/feature-based-apps/*/build/**/*' main-app/build/features"
  }
}

• The lerna run build command builds packages in dependency order (shared-components first, then feature apps, then main-app) if your Lerna dependency graph is set up correctly.
• The copyfiles command strips 3 parent directories, so packages/feature-based-apps/feature-01-app/build/ maps to main-app/build/features/feature-01-app/.

2. Validate Dependencies & Versions #

• Use lerna version to keep all packages in sync with semver versions—this avoids dependency conflicts in production.
• Ensure shared-components is listed as a dependency in both main-app and each feature app’s package.json so Lerna handles linking correctly during builds.

3. Add Pre-Deployment Checks #

Add a script to verify all build artifacts exist and paths are correct:

{
  "scripts": {
    "predeploy": "npm run check-builds",
    "check-builds": "node scripts/check-builds.js"
  }
}

The check-builds.js script can validate the existence of main-app/build and each feature app’s subdirectory under main-app/build/features.

Platform-Specific Deployment Steps #

Netlify #

Netlify has solid monorepo support—here’s how to set it up:

1. Connect your GitHub/GitLab/Bitbucket repo to Netlify.
2. Go to Site Settings > Build & Deploy > Build Settings:
   • Build Command: npm run build:prod
   • Publish Directory: main-app/build
3. (Optional) Commit these settings via a netlify.toml file in your root:

   [build]
     command = "npm run build:prod"
     publish = "main-app/build"
   [context.production.environment]
     NODE_ENV = "production"
   

4. Deploy! Netlify will run your build script, copy assets, and serve the main app’s build directory.

Vercel #

Vercel’s monorepo support is seamless—follow these steps:

1. Import your repo into Vercel.
2. In the project’s Settings > Build & Development Settings:
   • Build Command: npm run build:prod
   • Output Directory: main-app/build
3. (Optional) Add a vercel.json file to your root:

   {
     "buildCommand": "npm run build:prod",
     "outputDirectory": "main-app/build",
     "env": {
       "NODE_ENV": "production"
     }
   }
   

4. Trigger a deploy—Vercel will handle dependency caching and execution automatically.

GitHub Pages #

Use GitHub Actions to automate deployment to GitHub Pages:

1. Create a workflow file at .github/workflows/deploy.yml:

   name: Deploy to GitHub Pages
   on:
     push:
       branches: [ main ] # Trigger deploy on main branch pushes
   jobs:
     deploy:
       runs-on: ubuntu-latest
       steps:
         - name: Checkout code
           uses: actions/checkout@v4
           with:
             fetch-depth: 0 # Required for Lerna versioning
         - name: Set up Node.js
           uses: actions/setup-node@v4
           with:
             node-version: 20
             cache: 'npm' # Cache node_modules to speed up builds
         - name: Install dependencies
           run: npm install
         - name: Build all packages and copy assets
           run: npm run build:prod
         - name: Deploy to GitHub Pages
           uses: peaceiris/actions-gh-pages@v4
           with:
             github_token: ${{ secrets.GITHUB_TOKEN }}
             publish_dir: ./main-app/build
   

2. Go to your repo’s Settings > Pages:
   • Set Source to "Deploy from a branch"
   • Choose the gh-pages branch and root directory
3. Push to main—GitHub Actions will run the workflow and deploy your app.

Key Production Considerations #

• Asset Paths: Configure each feature app’s build tool (Webpack/Vite/CRA) to use a relative public path like /features/feature-01-app/ so the main app can load assets correctly.
• Cache Busting: Ensure your build tools add content hashes to static filenames (most frameworks do this by default) to avoid stale cache issues.
• Rollbacks: All three platforms support rolling back to previous deployments—familiarize yourself with their rollback workflows for quick fixes.

内容的提问来源于stack exchange，提问作者Asif vora