# Azure Pipeline Vue CI/CD 教學

* ## **要使用 Azure Pipeline CI/CD 首先要有**
1. Resource Group
2. App Service Plan
3. App Service
4. 自己的 web app
5. Azure DevOps Organization

※ 需要先創建 App Service Plan 才能創建 App Service

* ## **push 自己的程式碼上 Repo**


* ## **接著點選 Pipeline，創建一個 pipeline。選擇 Azure Repos Git -> 根據自己的需求選擇 Pipeline 種類，我這邊是使用 Node.js with Vue**

* ## **設定 YMAL 檔案，新增發布的資料夾路徑**

- task: PublishBuildArtifacts@1
  inputs: 
    pathtoPublish: 'dist'

* ## **點選 Save and Run*2，可以看到正在 runing 的小 logo在 Success 之後，算是完成了CI的部分了**


* ## **接著是 CD 的部分，點選 Pipeline 下的 Release。點選 <br />Create release -> Azure App Service deployment -><br />取一個 stage name。<br />左邊的部分先新增一個 Artifact，再新增 Job**


---

***Artifacts* : 點選 Build(就是剛剛建好的 Pipeline)，其餘的選項都可以在輸入框旁的箭頭展開選取，最後的 Source alias 別名，可以取自己想要的，待會會使用上，代表是在pipeline中的資料夾名稱，點選 Add。**
**新增好之後，在 Artifact 右上角有個小閃電的圖案，點進去選擇 "enable" Continuous deployment trigger**

---

***1 job, 1 task*: 選進去畫面如下，點選自己的 Azure 訂閱與 App Service 後，點選上方 save。**
**最後點選左方的 Deploy Azure App Service，跳出右方畫面，選取 Package Folder，點選如下下圖顯示，然後 OK**
**選取右上方的 create release，然後就會有第一支 release-1 執行完成，進入 release-1，選擇 Deploy，完成!!**

* ## 去到 App Service 點選發布網址，就可以看到自己的頁面啦!!