求助：基于Azure DevOps Pipeline部署React/SPFx应用至SharePoint

一、前置准备 #

• 确认你的SPFx项目已托管在Azure Git仓库，且本地可正常完成构建、打包、手动部署流程
• 获取目标SharePoint站点的应用目录URL（示例：https://yourtenant.sharepoint.com/sites/yoursite/AppCatalog）
• 准备拥有SharePoint应用目录管理权限的账号，后续用于Azure DevOps管道认证

二、CI阶段：构建SPFx项目 #

在Azure DevOps Pipeline中依次添加以下任务，完成代码拉取与打包：

1. 代码拉取：默认的Checkout任务已自动配置，无需额外操作
2. Node.js环境配置：添加Node.js tool installer任务，选择与你的SPFx版本匹配的Node.js版本（比如SPFx 1.17+对应Node 16.x）
3. 安装依赖：添加Command line任务，执行命令：

   npm install
   

4. 生产环境打包：添加Command line任务，执行SPFx打包命令：

   gulp bundle --ship
   gulp package-solution --ship
   

   执行完成后，会在项目的sharepoint/solution目录下生成.sppkg格式的部署包

三、CD阶段：部署至SharePoint应用目录 #

方式1：PowerShell脚本部署（推荐，无需额外扩展） #

添加PowerShell任务，通过SharePoint Online管理Shell完成部署：

1. 安装SharePoint Online模块（若自托管代理未预装）：

   Install-Module -Name Microsoft.Online.SharePoint.PowerShell -Force -AllowClobber
   

2. 连接到SharePoint Online管理站点：

   $username = "$(SPO_Username)"
   $password = ConvertTo-SecureString "$(SPO_Password)" -AsPlainText -Force
   $credential = New-Object System.Management.Automation.PSCredential ($username, $password)
   Connect-SPOService -Url "https://yourtenant-admin.sharepoint.com" -Credential $credential
   

   提示：SPO_Username和SPO_Password需在Azure DevOps的管道变量或变量组中设置为保密变量，避免明文泄露
3. 上传并安装应用包：

   # 上传包到应用目录
   Add-SPOApp -Path "$(System.DefaultWorkingDirectory)/sharepoint/solution/your-solution-name.sppkg" -Site "$(SPO_AppCatalogUrl)" -Overwrite
   # 在目标站点安装应用
   Install-SPOApp -Identity "your-solution-name" -Site "$(Target_SiteUrl)"
   

   替换your-solution-name为你的SPFx解决方案名称，SPO_AppCatalogUrl（应用目录URL）和Target_SiteUrl（要部署的目标站点URL）需提前设置为管道变量

方式2：使用Azure DevOps扩展（简化操作） #

若不想编写脚本，可在Azure DevOps Marketplace搜索安装SharePoint Online Deployment扩展，之后直接使用扩展提供的Deploy SharePoint Package任务，填入应用目录URL、认证信息、包文件路径等参数即可完成部署

四、设置自动触发规则 #

让管道在代码推送时自动执行：

1. 进入管道编辑页面，切换到触发器选项卡
2. 启用持续集成，勾选需要触发自动部署的分支（如main、develop）
3. 可选：设置路径过滤，仅当SPFx项目相关文件（如.tsx、.json、.scss）变更时触发管道，避免不必要的运行

五、关键注意事项 #

• 若使用自托管代理，需确保代理服务器能正常访问SharePoint Online服务
• 所有敏感信息（账号、密码、站点URL）均需设置为保密变量，禁止明文写入管道配置
• 首次部署后，需手动在SharePoint应用目录中信任该SPFx应用；后续自动部署覆盖包时无需重复操作

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