【十博网投】在Azure DevOps中为SPFx项目实现CI/CD管道

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

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

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

**点击任何图片查看大图**

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

点击屏幕右上方的“New pipeline”按钮:

在New pipeline窗口中,选择“Other git”:

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

点击“Empty job”:

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

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

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

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

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

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

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

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

添加另一个任务,但是这次,搜索“copy files”:

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

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

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

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

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

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

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

让我们为我们的模板选择一个“空工作”:

点击“添加工件”:

在“源(构建管道)”下拉菜单中, 选择我们在第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命令行会话. 都准备好了!

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

添加另一个“命令行”任务.
显示名称: 将解决方案包添加到应用程序目录
脚本: o365 spo应用程序添加-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 app deploy——name react-demo.sppkg——appCatalogUrl http:// $(租户).sharepoint.com/美元(catalogsite)——sitecollection范围

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

点击“Variables”标签:

点击“添加”按钮:

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

点击“Pipeline”标签,然后点击“Continuous deployment trigger”按钮:

点击触发开关使其“开启”:

点击“保存”按钮:

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

点击右上角的“Edit”按钮:

点击“触发器”选项卡:

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

第三步-测试
点击左侧导航区域的“管道”.

点击“全部”选项卡:

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

点击“运行管道”按钮:

点击“Run”按钮:

要查看CI管道的进度,请单击“Agent job 1”:

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

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

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

试着从Visual Studio代码中进行测试,通过简单地将代码推送到存储库中,看看它是如何就位的. 一个简单的推就可以完成所有的工作!

sharepoint快乐!