如何在 Monorepo 中构建和部署 Angular 17 微前端应用程序

Question

我有一个 npm 工作区，其中包含三个 Angular 独立应用程序（版本 17），所有这些都是作为独立应用程序构建的，而不使用 Nx 框架（因为我们使用的是内部框架，所以我无法使用 Nx）。每个应用程序都有自己的特定库，以及使用模块联合在所有应用程序之间使用的共享库。目标是在 monorepo 结构中将这些应用程序作为微前端进行管理。

我想优化 GitLab 中的 CI/CD 管道，以便仅重建已修改的特定应用程序（或其关联的库），而不是重建工作区中的所有应用程序。对于部署，我使用 Rancher，我的下一个目标是配置它，以便每个 Angular 应用程序都可以独立部署在自己的 pod 上。

您能否建议在 Rancher 上单独部署每个应用程序并将此设置与单个 GitLab 管道和 dockerfile 集成的最佳方法？

Answer 1

我认为实现这一目标的最佳方法是，即使您只有一个管道，也可以为每个项目使用一个 dockerfile，您首先需要将项目分成不同的文件夹（project1、project2、..），然后在每个文件夹中您可以放置一个dockerfile:

stages:
- build
build_project1:
  stage: build
  image:
    name: gcr.io/kaniko-project/executor:debug
    entrypoint: [ "" ]
  script:
    - echo "building container for project1"
    - /kaniko/executor
      --context $CI_PROJECT_DIR/project1
      --dockerfile $CI_PROJECT_DIR/project1/Dockerfile
      --destination $DOCKER_HOST/project1
only:
  changes:
    - project1/**/*
build_project2:
  stage: build
  image:
    name: gcr.io/kaniko-project/executor:debug
    entrypoint: [ "" ]
  script:
    - echo "building container for project2"
    - /kaniko/executor
      --context $CI_PROJECT_DIR/project2
      --dockerfile $CI_PROJECT_DIR/project2/Dockerfile
      --destination $DOCKER_HOST/project2
  only:
    changes:
      - project2/**/*

...

仅当projectx/路径中的文件发生更改时才会触发build_projectx。 您可以对部署步骤执行相同的操作，您只需要添加一个阶段来仅部署正在更新的项目。

PS：我使用 kaniko 而不是 rancher，因为我对此更有经验。