Vue项目使用Azure CICD 在本地服务器自动化部署，无需使用Azure订阅

注意：使用git仓库进行源代码管理，有一个自己的微软帐号，本次教程的服务器为windows server 2016，CICD的项目为托管在GitHub上的vue项目。教程日期2020/2/24，后续版本可能有更新，请以官方文档为准

1登录Azure

2创建一个项目

输入项目名称，选择项目的可见性。工作流可以选择为Basic。

3设置个人秘钥（用来与本地服务器建立通讯）

在个人设置里选择personal access tokens

输入秘钥名称，所属的组织，有效期。选择custom defined授权模式，仅勾选Agent Pools下的Read&manage

提示创建成功，生成的秘钥不会被azure保存，必须手动保存，后续也会需要。所以一定要保存好秘钥

4将本地服务器添加到azure的代理池中

点击Organization Settings，在左侧面板中选择agent pools，新建一个agent pool，取名为default。
如果已经存在则不需要操作。

进入default，点击agents，添加一台本地服务器，按照说明操作。也可手动下载文件，自行解压。注意，必须使用管理员权限的powershell进行操作。

在本地服务器操作完成后将在default中看到自己添加服务器。

5建立pipeline拉取仓库代码

选择首页的pipeline，create pipeline

本次项目在github，所以选择github

pipeline会根据代码自动识别，本次项目为vue，所以选择node.js with vue

编辑yaml文件。注意在pool节点下，name:‘default’为使用本地服务器进行任务；vmImage:‘ubuntu-16.04’为使用azure自带的服务器进行任务。两者可以根据情况选择。azure自带的服务器选择可以有多种，vmImage:‘macOS-10.14’, vmImage: ‘vs2017-win2016’。CopyFiles@2任务中的Contents可以指定要复制的文件以在后续分发布中使用。vue项目中只需要dist文件夹，则Contents:‘dist**’。若设置为Contents:’**’，则将复制整个项目。复制需要部署的文件夹即可。PublishBuildArtifact@1任务可以将复制好的文件上传到azure中，变为artifact工件，以供后续部署使用。

完成后save and run

此时azure pipeline已经具备了CI（持续集成）功能，当git push后azure将自动CI，保证代码的集成性。

6建立部署服务器

选择pipeline下的Deployment group，add a deployment group

输入部署组的名称

注意：此处不要执行这段脚本

点击Manage

需要勾选use a personal access token in the script for authentication，之后复制脚本在本地服务器执行
注意：脚本执行可能不顺利。则根据脚本手动进行执行命令，下载文件解压运行

成功后将在targets中看到自己的部署服务器。这里的部署服务器可以和前面的CI服务器不一样，前面的CI服务器可以使用azure自带的，多样化选择。

7配置本地服务器的环境

此处因为项目使用的是vue，所以需要配置NodeIIS。相关操作方法自行百度或查看以下链接NodeIIS

8建立部署部署任务

点击pipeline下的releases，new pipeline。

本次的vue项目设计部署在IIS上，所以选择IIS website Deployment

输入步骤名称

选择artifact工件，从build中选择

点击artifact上的闪电图标，开启continuous deployment trigger触发器

选择stage中的job task，对部署进行详细设置，指定网站名称、绑定的端口

选择之前设置好的Deployment group

设置网站的目录

选择package or folder，注意路径要指定正确，否则将无法访问，vue只需要dist下的内容，所以路径选择到dist。

自动部署需要点击deploy的图标。下拉选择为手动部署。

到此CICD就全部完成。当git push到master或特定分支时，就会触发Azure的CICD。

本文git项目地址