在Azure DevOps中为你的SPFx项目实现一个CI/CD管道

在本教程中,我将演示如何在Azure DevOps中简化SharePoint框架项目的构建和部署过程.

时间阅读: 大约15分钟
用于: 做SPFx (SharePoint框架)的SharePoint开发人员,在Azure DevOps工作的人们
主要结论: 在本教程中,我将演示如何在Azure DevOps中简化SharePoint框架项目的构建和部署过程.

在本教程中,我们使用的是Office 365 SharePoint Online. 我的SharePoint框架项目是使用 Visual Studio代码 和我们的管道将创建在 Azure DevOps. 我们还假设您有一个SPFx代码的存储库. 在这个例子中,我创建了一个简单的SPFx项目.

**点击任何图像看到一个更大的视图**

步骤1 -构建 持续集成(CI)管道
在Azure DevOps中,点击左侧导航区域的“pipeline”:

点击屏幕右上方的“新建管道”按钮:

在新建管道窗口中,选择“Other git”:

为源, 选择" Azure Repos Git ", 确保您的团队项目被选中, 选择存储SPFx代码的存储库, 然后选择分支. 点击“继续”按钮:

点击“空作业”:

让我们更改这个管道的名称. 点击顶部的管道名称,并将其更改为更有意义的内容:

更改名称后,你应该会看到类似这样的内容:

点击加号,在搜索框中输入“node”. 在“节点.js工具安装程序”,然后点击“添加”按钮:

单击刚刚添加的Node任务并将版本更改为10.x:

再次点击加号添加另一个任务. 这一次,我们将在搜索框中输入“npm”. 悬停在“npm”上,点击“Add”按钮:

点击加号添加另一个任务. 在搜索框里输入" gulp ". 悬停在Gulp上,点击Add按钮:

单击刚刚添加的Gulp任务,并填写以下内容:
显示名称: 大口包 ——船
吞咽文件路径: gulpfile.js
杯任务(s):
参数: ——船

添加另一个gulp任务
显示名称: 杯包装方案
吞咽文件路径: gulpfile.js
杯任务(s): 包装方案
参数: ——船

添加另一个任务,但这一次,搜索“复制文件”:

显示名称: 复制文件到:$(构建.artifactstagingdirectory) /下降
内容: **\*.sppkg
目标文件夹: $(构建.artifactstagingdirectory) /下降

添加最后一个任务. 搜索“发布构建构件”:

显示名称: 发布工件:下降
出版之路: $(构建.ArtifactStagingDirectory) /下降

通过单击“保存”保存管道 & “Queue”下拉菜单,选择“Save”:

保持默认路径,点击“保存”按钮:

步骤2 -为持续部署构建发布管道(CD)
点击左侧导航区“Releases”:

点击“新建”下拉菜单,选择“新建发布管道”:

让我们为模板选择一个“Empty job”:

点击“添加工件”:

在“源代码(构建管道)”下拉菜单中, 选择我们在上面第1步中创建的构建管道的名称:

在“源别名”字段中键入一个别名,你需要记住未来的步骤…写下它. 完成后点击“添加”:

点击“1 job, 0 task”:

现在,我们将像在第1步中那样添加任务.

点击加号添加一个任务. 搜索“node”并添加“node”.js工具安装程序”.
版本说明: 10.x

点击加号并添加“npm”任务.
显示名称: npm定制
命令: 自定义
命令和参数: 安装- g @pnp / office365-cli

在添加最后一个任务之前,我们需要安装 Office 365 CLI 然后用我们将在应用目录所在的地方使用的帐户进行交互式登录. 我们将首先在Visual Studio代码中安装Office 365 CLI. 在终端中输入以下命令安装Office 365命令行:
NPM I -g @pnp/office365-cli

通过输入以下命令启动Office 0365命令行:
office365
在$o365提示符处输入 登录 你会看到以下信息:

出于安全考虑,我把代码弄模糊了. 去 给定的url 然后输入显示的代码. 使用与您的租户关联的帐户登录,您将在其中部署包. 输入quit或exit结束Office 0365 CLI会话. 都准备好了!

通过点击加号并搜索“命令行”添加“命令行”任务.
显示名称: 连接到SharePoint应用程序目录
脚本: o365登录http:// $(租户).sharepoint.——authType 密码——user的名字 $(用户名)——密码 $(密码)

添加另一个“命令行”任务.
显示名称: 将解决方案包添加到应用程序目录
脚本: o365 spo app add -p $(系统.Default工作ingDirectory) / ReactDemo-CI / / sharepoint /解决方案/ react-demo下降.sppkg——overwrite——appCatalogUrl http://$(租户).sharepoint.com/美元(catalogsite)——sitecollection范围

在上面的脚本中,ReactDemo-CI是我们写下的别名. 脚本中我的代码的解决方案包是react-demo.sppkg. 您需要确保在SPFx项目中拥有正确的包名. 要定位名称,可以执行 吞咽构建, 大口包——船和一个 杯包装方案——船 在Visual Studio代码中. 你会在你的sharepoint/solution文件夹中找到这个包. 如果你的应用目录是一个网站收集的应用目录,那么你必须包括 ——sitecollection范围. 如果它是一个租户应用程序目录,那么您可以删除它 ——sitecollection范围.

通过点击加号并搜索“命令行”添加“命令行”任务.
显示名称: 部署应用程序
脚本: O365 spo应用程序部署——名称react-demo.sppkg——appCatalogUrl http:// $(租户).sharepoint.com/美元(catalogsite)——sitecollection范围

在上面的脚本中,确保使用了包的名称. 在我的例子中使用的,react-demo.sppkg. 如果你的应用目录是一个网站收集的应用目录,那么你必须包括 ——sitecollection范围. 如果它是一个租户应用程序目录,那么您可以删除它 ——sitecollection范围.

点击“变量”选项卡:

点击“添加”按钮:

添加以下变量:
名称: catalogsite
值: 网站/ johndemo / appcatalog
名称: 密码
值: 不管你的密码是什么. 点击锁来锁定/隐藏你的密码
名称: 租户
值: 不管你的房客姓什么
名称: 用户名
值: 你的登入电邮地址

点击“Pipeline”选项卡,然后点击“持续部署触发”按钮:

点击触发开关使其为“Enabled”:

点击“保存”按钮:

在将代码推入存储库时触发管道, 点击左侧导航区域的“Pipeline”,选择我们创建的CI Pipeline:

点击右上角的“编辑”按钮:

点击“触发器”选项卡:

选择“启用持续集成”复选框,然后单击“保存” & 并选择“保存”:

步骤3 -测试
点击左侧导航区域的“pipeline”.

点击“全部”选项卡:

选择我们在第1步中创建的CI管道:

点击“Run pipeline”按钮:

点击“运行”按钮:

点击“Agent job 1”查看CI Pipeline的进度:

一旦任务成功完成,您还可以检查CD管道的进度. 点击“发布:

单击当前版本. 在我的例子中是“Release-5”,然后点击“In progress”:

成功运行后,你应该看到你的应用现在已经部署在应用目录中:

尝试使用Visual Studio代码进行测试,通过简单地将代码推送到存储库,看看它们是如何到位的. 简单的推一下就可以了!

sharepoint快乐!