如何在多个仓库中使用 GitHub Actions 并部署到 GitHub Pages？

Question

有没有方法可以设置Github Actions来运行多个 npm run build ？ 我想使用多个存储库，并将它们设置为主站点上的不同网页。

假设我有3个存储库：Main、Angular App和React App。

Main存储库将拥有我的着陆站点。 Angular App和React App将是两个不同的站点。

从 foobar.github.io (主要存储库)进入foobar.github.io/angular以导航到我的Angular App。 foobar.github.io/react 将是一个react应用程序。

每个应用程序都将位于3个不同的存储库中。 我是否有办法将Angular App推送到GitHub Actions，然后自动执行ng build --prod --base-href ='angular' ，并更新该页面或甚至运行所有存储库的构建并部署？

要在本地执行此操作，我必须在每个存储库上运行构建命令，然后将每个 prod 文件夹拖入我的存储库中，然后将其上传，这样做效率很低。

- Jay Patel

Answer 1

最简单的方法是为每个存储库添加工作流，以更新 Pages 中相应的区域。例如，在"Main" 存储库中，它可能如下所示:

on: push

jobs:
  main:
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Build
        run: TODO

      - name: Publish
        run: TODO 

而在其他存储库中，您会有类似的东西。例如，在Angular存储库中：

on: push

jobs:      
  angular:
    steps:
      - name: Checkout App
        uses: actions/checkout@v2

      - name: Build Angular
        run: |
          npm ci
          npm run build
          ng build --prod --base-href='angular'

      - name: Publish
        run: TODO

如果您只想在更新“Main”时进行发布，那么您可以在“Main”存储库中设置一个工作流程，以构建并发布这三个内容，例如：

---

on: push

jobs:
  main:
    steps:
      - name: Checkout repo
        uses: actions/checkout@v2
        with:
          repository: my-org/main
          path: main

      - name: Build
        run: TODO
        working-directory: ./main

      - name: Publish
        run: TODO
        working-directory: ./main

  react:
    steps:
      - name: Checkout repo
        uses: actions/checkout@v2
        with:
          repository: my-org/react
          path: react

      - name: Build React
        run: TODO
        working-directory: ./react

      - name: Publish
        run: TODO
        working-directory: ./react

  angular:
    steps:
      - name: Checkout App
        uses: actions/checkout@v2
        with:
          repository: my-org/angular
          path: angular

      - name: Build Angular
        run: |
          npm ci
          npm run build
          ng build --prod --base-href='angular', 
        working-directory: ./angular

      - name: Publish
        run: TODO
        working-directory: ./angular

- Patrick Quirk

---

不认为这适用于将API和UI分别存储在不同仓库的项目。我该怎么做？ - Ragav Y

Answer 2

您可以使用 GitHub 所称的“可重用工作流程”。您可以在他们 2022 年 2 月的博客文章中了解更多信息。现在已经普遍可用。

首先，在一个“主”仓库中设置工作流程，然后在多个仓库的工作流文件中引用它：

jobs:
  build:
  uses:
    my-organisation/my-awesome-main-repo/.github/workflows/myworkflow.yml@main

基本上就是这样！

- MS Berends