練習 - 將Node.js應用程式部署至 Azure

已完成

您之前為此專案派生的 GitHub 存放庫,其中包含基本 Node.js 專案的原始程式碼。 在此部分中,您會在 Azure Pipelines 中建立專案,以建置該專案,並將其部署至稍早建立的應用程式。

在這個部分中,您要:

  • 建立由認可 main 分支觸發的 CI/CD 管線。
  • 檢閱管線工作。
  • 儲存管線以觸發 CI/CD 工作流程。

設定 Azure DevOps 專案

建立 Azure DevOps 專案。

  1. dev.azure.com 登入您的帳戶。

  2. 選取 [+ 新增專案]。 [建立新專案] 對話方塊隨即開啟。

  3. 使用下列選項建立新的專案。

    欄位 描述
    專案名稱 輸入 nodejs-hello-world之類的名稱。
    可見性 選擇是否要將專案設為公用或私人。
    先進>版本控制 選取 [Git]

建立管線

您將藉由修改入門範本,在 Azure Pipelines 中建立 YAML CI/CD 管線。 此程序會產生名為 azure-pipelines.yml 的管線組態檔,該檔案位於您 Git 存放庫的根目錄中。

  1. 移至您的 nodejs-hello-world 專案。

  2. 前往 [管線],然後選取 [新增管線]。

  3. 先選取 GitHub 作為原始程式碼的位置,以完成精靈的步驟。

  4. 系統可能會將您重新導向至 GitHub 以進行登入。 若是如此,請輸入您的 GitHub 認證。

  5. 當您看到存放庫清單時,請選取您的存放庫。

  6. 系統可能會將您重新導向至 GitHub 以安裝 Azure Pipelines 應用程式。 如果發生此情況,請選取 [核准] & [安裝]。

  7. 在 [選取] 索引標籤上,選取 nodejs-docs-hello-world 存放庫。

  8. 在 [設定] 索引標籤上,選取 [Node.js Express Web 應用程式轉為 Linux on Azure]。

    出現提示時:

    1. 選取您稍早從中建立資源的 Azure 訂閱。
    2. 選取 [繼續]。
    3. 選取您稍早建立的應用程式名稱,例如 helloworld-nodejs-16353
    4. 選取 [驗證及設定]。
  9. 在 [檢閱] 索引標籤上,檢閱管線設定的入門程式碼。 請先不要選取 [儲存並執行]。

檢閱管線工作

管線起始程式碼提供您建置、測試、封裝 Node.js 應用程式,並將其部署至 Azure 所需的一切。 在執行之前,讓我們逐步解說用來建置和部署應用程式的不同階段與工作。

CI 觸發程序

管線已設定為在每次 main 分支認可變更時執行。 您可以視需要進行調整,例如,您可以根據執行項目的分支、路徑或標記來決定要包含 (或排除)。

trigger:
- main

管道變數

為了協助進行管線維護,預設範本會針對常用的參數使用變數,例如要用來連接 Azure 的服務連接字串名稱。 服務連接可讓您透過 Azure Pipelines 安全地存取 Azure 訂閱。

即使管線程式庫是從管線外部管理,您也可以從該管線程式庫匯入變數。 以下為範例。 您看到的值會是您 Azure 訂閱專屬的值。

variables:

  # Azure Resource Manager connection created during pipeline creation
  azureSubscription: '00001111-0000-1111-2222-000011112222'
  
  # Web app name
  webAppName: 'nodejs-cicd-16353'
  
  # Environment name
  environmentName: 'nodejs-cicd-16353'

  # Agent VM image name
  vmImageName: 'ubuntu-latest'

建立階段

stage 是管線的一部分,可由不同的機制觸發,也可以獨立執行。 例如,您可能會有一個階段用來建置應用程式、另一個階段用來將其部署至生產階段前環境,以及最後一個階段用來將該應用程式部署至生產環境。

此管線分為兩個階段:BuildDeployBuild 階段會設定並執行組建工作,包括將組建成品 (.zip 檔案) 發行至成品儲存體。

stages:
- stage: Build
  displayName: Build stage
  jobs:  
  - job: Build
    displayName: Build
    pool:
      vmImage: $(vmImageName)

Node.js 工具安裝程式工作

NodeTool@0 工作會設定 Node.js 專案的組建環境。 基於此管線的目的,您只需要使用 versionSpec 參數來指定要安裝的 Node.js 工具版本。 您可以在 Node.js Tool 安裝程式工作文件中深入了解這項工作。

確認 versionSpec 設定為 16.x。 如果不是,請更新值。

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '16.x'
  displayName: 'Install Node.js'

執行組建

組建本身是使用內嵌指令碼中的 npm 命令來執行。 此專案不包含任何測試,但如果您新增測試,則會與 npm run test 命令一併執行。

- script: |
    npm install
    npm run build --if-present
    npm run test --if-present
  displayName: 'npm install, build and test'

發行組建

組建完成之後,ArchiveFiles@2 工作會將組建輸出封裝為 .zip 檔案。 然後,系統會使用 drop 別名將產生的 .zip 檔案發行至成品儲存體,以供後續檢閱和使用。

- task: ArchiveFiles@2
  displayName: 'Archive files'
  inputs:
    rootFolderOrFile: '$(System.DefaultWorkingDirectory)'
    includeRootFolder: false
    archiveType: zip
    archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
    replaceExistingArchive: true

- upload: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
  artifact: drop

您不需要自行為組建成品提供儲存體。 Azure Pipelines 會根據已設定的保留原則來保存組建結果。 若要深入了解,請參閱建置和發行保留原則

部署組建

管線的第二個階段會將應用程式部署到 Azure。 成功完成 Build 階段之後,才會進行這個階段。 這個階段會使用管線的 Azure 服務連接,將應用程式部署至設定的目標。 此專案會將應用程式部署至 Azure App Service。

確認 runtimeStack 設定為 NODE|16-lts。 如果不是,請更新值。

- stage: Deploy
  displayName: Deploy stage
  dependsOn: Build
  condition: succeeded()
  jobs:
  - deployment: Deploy
    displayName: Deploy
    environment: $(environmentName)
    pool: 
      vmImage: $(vmImageName)
    strategy:
      runOnce:
        deploy:
          steps:            
          - task: AzureWebApp@1
            displayName: 'Azure Web App Deploy: nodejs-cicd-16353'
            inputs:
              azureSubscription: $(azureSubscription)
              appType: webAppLinux
              appName: $(webAppName)
              runtimeStack: 'NODE|16-lts'
              package: $(Pipeline.Workspace)/drop/$(Build.BuildId).zip
              startUpCommand: 'npm run start'

Azure Web 應用程式工作

AzureWebApp@1 工作會將 Web 應用程式部署至 Azure App Service。 這是一項非常有彈性的工作,可支援各種平台的應用程式,並包含此 Node.js 應用程式所需一切項目:

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

您可以在 Azure Web 應用程式工作文件中深入了解這項工作的彈性。

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

  1. 選取頁面右上角的 [儲存並執行]。 再次選取 [儲存並執行],以認可 Git 變更並觸發要執行的管線。

  2. 在 Azure Pipelines 中,移至該組建。 您可以在組建執行時追蹤組建。

  3. 建置成功之後,請選取部署工作,並選取 URL 以檢視所部署的網站。

    Azure Pipelines 網站 URL 位置的螢幕擷取畫面。

  4. 您會看到網站正在 App Service 上執行。

    在網頁瀏覽器中執行的 Node.js 應用程式螢幕擷取畫面。

您現在可以擴充完整的 CI/CD 管線。 您可以重複此處執行的步驟,將自己的其中一個 Node.js 專案部署至 Azure。

查看您的工作

  1. 藉由傳送 GET 要求來測試銀行 API。 您可以流覽 URL https://your-app-service-site.azurewebsites.net/api/accounts/test ,在瀏覽器中執行此動作。 此查詢會傳回測試使用者的帳戶資訊和交易。

    在網頁瀏覽器中執行的Node.js應用程式螢幕擷取畫面,並傳回查詢。