iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
DevOps

不僅是程式碼代管平台 - Github 能做些什麼?系列 第 16

GitHub Action 實作持續交付 - 部署至 Azure App Service

  • 分享至 

  • xImage
  •  

可以 ASP.NET Core 網站部署的環境相當多,包含 IIS, Nginx, App service(Azure), Elastic Beanstalk(AWS), App Engine(GCP)...等等,在本篇文章,我們將介紹如何將上一篇 GitHub Action 實作持續整合 - 以 ASP.NET Core 專案為例 後的成品,部署至 Azure App Service。

透過 GitHub Action 部署至 App Service 方法有兩種,我們將逐一介紹:
1. 使用部署中心進行部署
2. 手動設定工作流程


前置工作: 建立 Azure App Services

若你很熟悉這章節,或者想之後再參考,可以略過此前置工作

  1. 開啟 Azure Portal,點選建立資源 > Web 應用程式
    https://ithelp.ithome.com.tw/upload/images/20210915/20091494vPhVuTv811.png

  2. 輸入相關資訊,包含資源群組、名稱...等,比較重要的是作業系統我們選擇 Linux
    https://ithelp.ithome.com.tw/upload/images/20210915/20091494rdFVVS8Pbm.png

  3. GitHub 部署部分我們先不設定,後續介紹較另外作法
    https://ithelp.ithome.com.tw/upload/images/20210915/20091494DpH1QoYu27.png

  4. 監視部分
    https://ithelp.ithome.com.tw/upload/images/20210915/20091494NScHp0ftdN.png

  5. 標籤部分
    https://ithelp.ithome.com.tw/upload/images/20210915/20091494hMXjwHYr0Z.png

6.檢視沒問題後,點選建立
https://ithelp.ithome.com.tw/upload/images/20210916/20091494DV84n2Oo4u.png


方法1: 使用部署中心進行部署

這個方式會需要授權 GitHub 權限,直接幫你建立 workflow

  1. 在 Web 應用程式左邊欄位找到 部署中心,來源選擇 GitHub > 授權

https://ithelp.ithome.com.tw/upload/images/20210915/20091494nVhOaxqYJD.png

  1. 登入 GitHub

https://ithelp.ithome.com.tw/upload/images/20210915/20091494mbQpQfHM7l.png

  1. 授權使用

https://ithelp.ithome.com.tw/upload/images/20210915/20091494fvCpdsjMEo.png

  1. 回到 部署中心 畫面,選擇組織、存放庫與分支,點選儲存

工程流程可以選擇既有的 workflow,或者新建一個新的 workflow

https://ithelp.ithome.com.tw/upload/images/20210915/20091494gkzIjJr7PF.png

  1. 在所選的分支中,你可以看到部署中心已經幫你建立好 YAML 檔案,當 main 分支有變動時,即會部署程式 (但這次會失敗)

https://ithelp.ithome.com.tw/upload/images/20210915/20091494YRGiV95eZu.png

  1. 因為我們專案的架構如下圖,有兩個專案,一個是單元測試,一個是網站專案,如果直接在 .sln 層執行下 dotnet publish 指令,會將兩個專案的內容都發布出來,會導致部署失敗

https://ithelp.ithome.com.tw/upload/images/20210916/20091494EqOTnuKQFI.png

  1. 所以我們要指定網站專案,找到
- name: dotnet publish
  run: dotnet publish -c Release -o ${{env.DOTNET_ROOT}}/myapp
      

改成

ActionDemo 是我的專案名,請實際狀況調整你的專案名稱

- name: dotnet publish
  run: dotnet publish ActionDemo\ActionDemo.csproj -c Release -o ${{env.DOTNET_ROOT}}/myapp
  1. 儲存後會自動觸發部署,等待部署完成,開啟網頁即可

https://ithelp.ithome.com.tw/upload/images/20210915/20091494ctDignksZe.png

https://ithelp.ithome.com.tw/upload/images/20210916/20091494P7VPwbruho.png


方法2: 手動設定工作流程

  1. 在 Web 應用程式左邊欄位找到 部署中心,點選上方管理發行設定檔

https://ithelp.ithome.com.tw/upload/images/20210915/20091494bHnneS5j5S.png

  1. 下載發行檔案

https://ithelp.ithome.com.tw/upload/images/20210915/20091494yytaMLMqih.png

  1. 回到 GitHub Repo,點選 Setting > Secret

https://ithelp.ithome.com.tw/upload/images/20210915/200914943Ck9jMVynY.png

  1. Name 可自行輸入,我們這邊使用 AZUREAPPSERVICE_PUBLISHPROFILE;Value 則將發行檔案以記事本開啟後,接內容複製貼上。

https://ithelp.ithome.com.tw/upload/images/20210915/20091494NVy6zLLIuX.png

  1. 更改上一篇文章所產生的 Template,修改內容如下:
name: .NET

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build_and_deploy:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Setup .NET
      uses: actions/setup-dotnet@v1
      with:
        dotnet-version: 3.1.x
    - name: Restore dependencies
      run: dotnet restore
    - name: Build
      run: dotnet build --no-restore
    - name: Test
      run: dotnet test --no-build --verbosity normal

    - name: dotnet build and publish
      run: dotnet publish ActionDemo/ActionDemo.csproj -c Release -o './myapp' 
      
    - name: 'Run Azure webapp deploy action using publish profile credentials'
      uses: azure/webapps-deploy@v2
      with: 
        app-name: 'GitHubDemo' # Replace with your app name
        publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE  }} # Define secret variable in repository settings as per action documentation
        package: './myapp'      
    

因為我們專案的架構如下圖,有兩個專案,一個是單元測試,一個是網站專案,如果直接在 .sln 層執行下 dotnet publish 指令,會將兩個專案的內容都發布出來,會導致部署失敗
https://ithelp.ithome.com.tw/upload/images/20210916/20091494EqOTnuKQFI.png
所以我們特別在 dotnet publish 指定網站專案路徑

  1. 執行完成,確認網站可以正常運作

https://ithelp.ithome.com.tw/upload/images/20210916/20091494E3wC87Ft9u.png


閱讀完這篇文章,你會了解

  1. ASP.NET Core CLI 使用
  2. Azure App Service 建立
  3. GitHub Action Secret 使用
  4. Workflow 撰寫

接下來,我們會介紹如何部署至 IIS,但在這個之前,我們會先介紹 self-hosted runners。若喜歡我的文章,歡迎點 like, 分享與訂閱。


參考資料

https://docs.microsoft.com/zh-tw/azure/app-service/deploy-github-actions?tabs=applevel


上一篇
GitHub Action 實作持續整合 - 以 ASP.NET Core 專案為例
下一篇
GitHub Self-hosted runners - 自訂代理程式環境的最佳選項
系列文
不僅是程式碼代管平台 - Github 能做些什麼?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言