如何从GitHub部署依赖多仓库的React应用到Azure？

你需要通过自定义部署流程拉取另外两个依赖仓库，必须修改YAML部署文件，以下是两种可行方案：

方案一：自定义YAML脚本拉取所有仓库 #

这种方式灵活性高，每次部署都会拉取各仓库的最新代码：

1. 配置访问凭据
   在Azure部署中心（或Azure Pipelines）中添加一个GitHub个人访问令牌（PAT），权限需包含repo范围，将其设为秘密变量（比如命名为githubPersonalAccessToken），避免明文暴露。

2. 编写部署YAML文件
   在acme/myreactapp仓库根目录创建azure-pipelines.yml，内容示例如下：

trigger:
- main # 替换为你的主分支名称

pool:
  vmImage: 'ubuntu-latest'

steps:
- script: |
    # 创建本地对应的目录结构
    mkdir -p gitreact/webapp gitreact/ui gitreact/help-renderer
    # 拉取主应用仓库
    cd gitreact/webapp
    git clone https://$(githubPersonalAccessToken)@github.com/acme/myreactapp.git .
    # 拉取UI辅助仓库
    cd ../ui
    git clone https://$(githubPersonalAccessToken)@github.com/acme/uihelper.git .
    # 拉取客户端辅助仓库
    cd ../help-renderer
    git clone https://$(githubPersonalAccessToken)@github.com/acme/clienthelper.git .
  displayName: '克隆所有依赖仓库'
  env:
    githubPersonalAccessToken: $(githubPersonalAccessToken)

- script: |
    cd gitreact/webapp
    npm install
    npm run build
  displayName: '安装依赖并构建React应用'

- task: AzureWebApp@1
  inputs:
    azureSubscription: '<你的Azure订阅名称>'
    appName: '<你的App Service应用名称>'
    package: '$(System.DefaultWorkingDirectory)/gitreact/webapp/build' # React构建产物目录
  displayName: '部署到Azure App Service'

3. 配置Azure部署中心
   在Azure部署中心选择"自定义"部署方式，指定使用上述YAML文件作为部署流程。

方案二：使用Git子模块 #

如果依赖仓库的版本相对稳定，可以将它们设为主仓库的子模块，简化部署流程：

1. 本地配置子模块
   在本地myreactapp仓库目录下执行以下命令，将两个依赖仓库添加为子模块：

# 创建对应目录并添加子模块
mkdir -p gitreact/ui gitreact/help-renderer
git submodule add https://github.com/acme/uihelper.git gitreact/ui
git submodule add https://github.com/acme/clienthelper.git gitreact/help-renderer
# 提交子模块配置到主仓库
git add .gitmodules gitreact/ui gitreact/help-renderer
git commit -m "Add uihelper and clienthelper as submodules"
git push

2. Azure部署配置
   在Azure部署中心的设置中，找到"拉取子模块"选项并开启；如果没有该选项，可在部署YAML中添加以下步骤拉取子模块：

- script: |
    git submodule update --init --recursive
  displayName: '拉取子模块代码'

两种方案都能满足你的需求，子模块方式更简洁，自定义YAML方式更适合依赖仓库频繁更新的场景。

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