練習 - 將 Azure Functions 應用程式部署至 Azure

15 分鐘

專案隨附的管線，可在解決方案中建置專案，並將 Web 應用程式部署至 Azure App Service。現在即可擴充該管線，以同時部署新的 Azure Functions 專案。

在此部分中，您會執行下列工作：

檢閱建置階段。
新增部署函數應用程式的工作。
新增將已發佈的 App Service 設定為使用已發佈函數的工作。
儲存管線以觸發 CI/CD 工作流程。

檢閱建置階段

在這裡，可檢閱 azure-pipelines.yml 中定義的現有 CI/CD 管線。

從 Azure DevOps 瀏覽至 [管線]。
選取管線。

選取 [編輯]。從下拉式功能表中選取分支，確定其已設定為主分支。這會啟動定義現有 CI/CD 管線的 azure-pipelines.yml 檔案。

由於使用了通配符於專案路徑，此檔案中被著重的任務會自動還原、建置並發佈新的 Azure Functions 專案。

stages:
- stage: 'Build'
  displayName: 'Build the web application'
  jobs: 
  - job: 'Build'
    displayName: 'Build job'
    pool:
      vmImage: 'ubuntu-20.04'
      demands:
      - npm

    variables:
      wwwrootDir: 'Tailspin.SpaceGame.Web/wwwroot'
      dotnetSdkVersion: '6.0.x'

    steps:
    - task: UseDotNet@2
      displayName: 'Use .NET SDK $(dotnetSdkVersion)'
      inputs:
        version: '$(dotnetSdkVersion)'

    - task: Npm@1
      displayName: 'Run npm install'
      inputs:
        verbose: false

    - script: './node_modules/.bin/node-sass $(wwwrootDir) --output $(wwwrootDir)'
      displayName: 'Compile Sass assets'

    - task: gulp@1
      displayName: 'Run gulp tasks'

    - script: 'echo "$(Build.DefinitionName), $(Build.BuildId), $(Build.BuildNumber)" > buildinfo.txt'
      displayName: 'Write build info'
      workingDirectory: $(wwwrootDir)

    - task: DotNetCoreCLI@2
      displayName: 'Restore project dependencies'
      inputs:
        command: 'restore'
        projects: '**/*.csproj'

    - task: DotNetCoreCLI@2
      displayName: 'Build the project - $(buildConfiguration)'
      inputs:
        command: 'build'
        arguments: '--no-restore --configuration $(buildConfiguration)'
        projects: '**/*.csproj'

    - task: DotNetCoreCLI@2
      displayName: 'Publish the project - $(buildConfiguration)'
      inputs:
        command: 'publish'
        projects: '**/*.csproj'
        publishWebProjects: false
        arguments: '--no-build --configuration $(buildConfiguration) --output $(Build.ArtifactStagingDirectory)/$(buildConfiguration)'
        zipAfterPublish: true

    - publish: '$(Build.ArtifactStagingDirectory)'
      artifact: drop

Andy：這是我們之前的建置階段。從原始專案開始這就沒有變更過，因為工作已設定為根據萬用字元比對模式對所有專案執行。

Mara：是，這應該照原樣運作。我認為不需在此做任何變更。執行此建置工作後，將會發佈 Web 和排行榜專案的 zip 檔案成品，以供部署階段使用。

新增部署 Azure 函數的工作

Andy：我覺得我們也可以依原樣重複使用 App Service 部署工作。希望有類似的部分可以用來部署函數應用程式。

Mara：我有個好消息。稍加研究後，我發現有個在概念上類似於 App Service 部署工作，但實際上適用於 Azure Functions 部署的工作。現在讓我們來加以檢閱。

Azure 函數應用程式工作

AzureFunctionApp@1 工作的用途是部署函式應用程式。此工作在概念上類似於 AzureWebApp@1 工作，且包含此函數應用程式案例所需的一切：

azureSubscription 是指 Azure 服務連線管線變數名稱。
appType 會指出是否為 Linux (functionAppLinux) 或 Windows (functionApp) 部署應用程式。
appName 會指定您 Azure 帳戶中的 Azure Functions 應用程式執行個體的名稱。
package 會指定套件部署的路徑。
runtimeStack 會指出函數應在哪一個映像上執行，這是 Linux 部署的必要項目。
startUpCommand 會指定部署函數後要執行的啟動命令，這是 Linux 部署的必要項目。

您可以在 Azure Function App 工作的文件中深入了解此工作的彈性。

將下列醒目提示的程式碼新增至管線的結尾。

- stage: 'Deploy'
  displayName: 'Deploy the web application'
  dependsOn: Build
  jobs:
  - deployment: Deploy
    pool:
      vmImage: 'ubuntu-20.04'
    environment: spike
    variables:
    - group: Release
    strategy:
      runOnce:
        deploy:
          steps:
          - download: current
            artifact: drop
          - task: AzureWebApp@1
            displayName: 'Azure App Service Deploy: website'
            inputs:
              azureSubscription: 'Resource Manager - Tailspin - Space Game'
              appName: '$(WebAppName)'
              appType: webAppLinux
              package: '$(Pipeline.Workspace)/drop/$(buildConfiguration)/Tailspin.SpaceGame.Web.zip'

          - task: AzureFunctionApp@1
            displayName: 'Azure Function Deploy: leaderboard'
            inputs:
              azureSubscription: 'Resource Manager - Tailspin - Space Game'
              appType: functionAppLinux
              appName: '$(LeaderboardAppName)'
              package: '$(Pipeline.Workspace)/drop/$(buildConfiguration)/Tailspin.SpaceGame.LeaderboardFunction.zip'
              runtimeStack: DOCKER|microsoft/azure-functions-dotnet:4
              startUpCommand: 'func azure functionapp publish $(functionAppName) --no-bundler'

提示

在 YAML 檔案中，空白字元很重要。請確定您在此處新增的工作使用與先前的工作相同的縮排。

新增更新 App Service 應用程式設定的工作

Andy：接下來我們只需要設定 Web 應用程式，使其使用已發佈的排行榜 API，就可以了。我們通常會在入口網站中設定變數，但若能在此設定會更好。應該會有一個名為 LeaderboardFunctionUrl 的 AppSettings 參數。

Mara：我同意。為此在我們的管線中新增工作，可避免我們在變更其中一項服務時出現意外的疏忽。我們可將其放在結尾處。

將下列醒目提示的程式碼新增至管線的結尾。請務必符合其上方工作的縮排。如果您想要深入了解這項工作，您可以檢閱 Azure App Service 設定工作的文件。

- task: AzureFunctionApp@1
  displayName: 'Azure Function Deploy: leaderboard'
  inputs:
    azureSubscription: 'Resource Manager - Tailspin - Space Game'
    appType: functionAppLinux
    appName: '$(LeaderboardAppName)'
    package: '$(Pipeline.Workspace)/drop/$(buildConfiguration)/Tailspin.SpaceGame.LeaderboardFunction.zip'
    runtimeStack: DOCKER|microsoft/azure-functions-dotnet:4
    startUpCommand: 'func azure functionapp publish $(functionAppName) --no-bundler'

- task: AzureAppServiceSettings@1
  displayName: 'Update web app settings'
  inputs:
    azureSubscription: 'Resource Manager - Tailspin - Space Game'
    appName: $(WebAppName)
    resourceGroupName: $(ResourceGroupName)
    appSettings: |
      [
        {
          "name": "AppSettings__LeaderboardFunctionUrl",
          "value": "http://$(LeaderboardAppName).azurewebsites.net/api/LeaderboardFunction",
          "slotSetting": false
        }
      ]

儲存管線，以觸發組建和版本

選取頁面右上角的 [儲存]。確認 [儲存]，以觸發執行。
在 Azure Pipelines 中，移至該組建。在建置執行時加以追蹤。
組建成功之後，請選取網站的部署工作，並選取 URL 以檢視所部署的網站。

Azure Pipelines 的螢幕擷取畫面，顯示網站 URL 的位置。
您會取得網站在 App Service 上執行的頁面。向下捲動，確認排行榜中有實際的資料。此功能由函數應用程式提供。

Space Game 網站的螢幕擷取畫面。

注意

如果載入排行榜時發生錯誤，請仔細檢查在此課程模組中執行的步驟。如果您看到例外狀況訊息「嘗試以存取權限禁止的方式存取通訊端」，請確定已正確設定 App Service 的 AppSettings__LeaderboardFunctionUrl 設定。

您也可以直接測試函數應用程式。請直接使用以下格式瀏覽至您的 URL。回應是 JSON，在瀏覽器中應該只會呈現為文字。

http://<leaderboard function name>.azurewebsites.net/api/LeaderboardFunction?pageSize=10

例如

http://tailspin-space-game-leaderboard-4692.azurewebsites.net/api/LeaderboardFunction?pageSize=10

Andy：結果很不錯！大家應該都很欣賞我們在此展現的潛力吧。

意見反應

此頁面對您有幫助嗎？