如何无需克隆GitLab仓库，通过Azure DevOps部署React静态站点至Azure静态Web应用

经典编辑器没有现成的适配模板，你可以手动搭建流水线，步骤如下：

• 第一步：创建空的经典流水线
  进入Azure DevOps项目，新建流水线时选择「经典」，跳过模板选择，直接创建空流水线。

• 第二步：关联GitLab仓库
  在流水线的「获取源代码」区域，下拉选择「GitLab」，点击「新建连接」完成GitLab授权，然后选择你要部署的GitLab项目和目标分支。

• 第三步：添加构建任务

  1. 添加「Node.js工具安装器」任务：指定Node版本（比如18.x，和本地开发版本匹配），确保构建环境有正确的Node环境。
  2. 添加「命令行」任务：在脚本框里输入构建命令：

     npm install
     npm run build
     

     这两步会完成依赖安装和React项目的静态构建，产物默认在build文件夹里。

• 第四步：添加部署任务
  搜索并添加「Azure Static Web Apps」任务：

  • 选择你的Azure订阅，完成授权后，选择已创建好的Azure静态Web应用实例；
  • 「应用位置」填.（React项目的根目录）；
  • 「输出位置」填build（对应React构建后的产物文件夹）；
  • 没有后端API的话，API位置留空。

• 第五步：保存并运行流水线
  配置完所有任务后，保存流水线并手动触发运行，等待任务执行完成即可完成部署。

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