在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中,点击左侧导航区中的“管道”:

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

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

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

点击“空工作”:

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

在更改名称后,你应该看到类似这样的东西:

点击加号,在搜索框中输入" node ". 在“节点.然后点击“添加”按钮:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

点击“添加工件”:

在“Source (build pipeline)”下拉菜单中, 选择我们在上面的步骤1中创建的构建管道的名称:

在“源别名”字段中键入您需要记住的别名,以便以后的步骤. 完成后,点击“添加”:

点击“1个作业,0个任务”:

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

单击加号添加任务. 搜索“节点”并添加“节点”.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.com/$(catalogsite)——authType 密码——user的名字 $(user的名字)——密码 $(密码)

添加另一个“命令行”任务.
显示名称: 将解决方案包添加到应用程序目录
脚本: o365 spo app add -p $(系统.Default工作ingDirectory) / ReactDemo-CI / / sharepoint /解决方案/ react-demo下降.sppkg——覆盖——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范围.

点击“变量”选项卡:

点击“添加”按钮:

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

点击“管道”选项卡,然后点击“连续部署触发器”按钮:

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

点击“保存”按钮:

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

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

点击“触发器”选项卡:

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

步骤3 -测试
在左侧导航区点击“管道”.

点击“全部”选项卡:

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

点击“运行管道”按钮:

点击“运行”按钮:

要查看CI管道的进度,请单击“代理作业1”:

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

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

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

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

sharepoint快乐!

友情链接: 1 2 3