使用 GitHub Actions 為具有 DevOps 入門版的 Node.js 應用程式設定 CI/CD

在本快速入門中，您會使用簡化的 DevOps 入門版體驗，使用 GitHub Actions 為 Node.js 應用程式設定持續整合 （CI） 和持續傳遞 （CD） 工作流程。 您可以使用 DevOps 入門版來設定開發、部署及監視應用程式所需的所有專案。

先決條件

登入 Azure 入口網站

DevOps 入門版會使用 GitHub 動作建立 CI/CD 工作流程。 DevOps 入門版也會在您選擇的 Azure 訂用帳戶中建立 Azure 資源。

  1. 登入 Azure 入口網站。

  2. 在搜尋方塊中，輸入 DevOps Starter，然後選取 。 點選 「 新增 」 以建立新的 。

    DevOps 入門版儀錶板

選取範例應用程式和 Azure 服務

  1. 按一下右側橫幅上的 使用 GitHub 設定 DevOps 入門。

    landing_page

  2. 請確認 CI/CD 提供者是 GitHub Actions。

    CICD_provider

  3. 選取 Node.js 範例應用程式。 Node.js 範例包含數個應用程式架構的選擇。

  4. 預設範例架構 Express.js。 保留預設設定，然後選取 [ 下一步]。

  5. Windows Web 應用程式是預設的部署目標。 您先前選擇的應用程式架構會指定這裡可用的 Azure 服務部署目標類型。 保留預設服務，然後選取 [ 下一步]。

設定 GitHub 帳戶和 Azure 訂用帳戶

  1. 使用 GitHub 進行驗證。

    1. 按兩下 [ 授權] 按鈕。

    2. 登入 GitHub。 如果您沒有 GitHub 帳戶，您也可以在這裡註冊。

  2. 選擇現有的 GitHub 組織。

    1. 選擇 GitHub 存放庫的名稱。

    2. 選取您的 Azure 訂用帳戶和位置，選擇應用程式的名稱，然後選取 [ 完成]。

      輸入_GH_詳細資料

    幾分鐘后，DevOps 入門版儀錶板會顯示在 Azure 入口網站中。 範例應用程式會在 Azure DevOps 組織的存放庫中設定、觸發 GitHub 工作流程，並將您的應用程式部署至 Azure。 此儀錶板可讓您查看程式代碼存放庫、GitHub 工作流程，以及 Azure 中的應用程式。

  3. 選取 [瀏覽 ] 以檢視執行中的應用程式。

    儀錶板包含 GitHub 工作流程和 Azure 資源的詳細數據。 若要檢視 GitHub 工作流程的詳細數據，例如最新的執行、認可和作業狀態，您必須 授權給 GitHub。

    Authorize_dashboard

DevOps Starter 自動配置了一個包含建置和部署作業的 GitHub Actions 工作流程。 您現在已準備好在 Node.js 應用程式中使用 CI/CD 流程與團隊合作，自動化地將您的最新工作部署到您的網站。

dashooard_view

提交程式代碼變更並執行 CI/CD

DevOps 入門版會在 GitHub 中建立存放庫。 若要檢視存放庫並變更應用程式的程式代碼，請執行下列動作：

  1. 在 DevOps Starter 儀錶板左側，選取您主要分支的連結。 此鏈接會開啟新建立 GitHub 存放庫的檢視。

  2. 若要檢視存放庫複製 URL，請選取瀏覽器右上方的 [ 複製 ]。 您可以在慣用的 IDE 中複製 Git 存放庫。 在接下來的幾個步驟中，您可以使用網頁瀏覽器，直接對主分支進行程式碼變更並提交。

  3. 在瀏覽器左側，移至 /Application/views/index.pug 檔案。

  4. 選取 [編輯]，然後變更部分文字。 例如，變更其中一個標記的一些文字。

  5. 選取 [ 認可]，然後儲存變更。

  6. 在您的瀏覽器中，前往 DevOps Starter 儀表板。
    您現在應該會看到 GitHub 工作流程建置作業進行中。 您所做的變更會透過 GitHub 工作流程自動建置和部署。

檢視 GitHub 工作流程

在上一個步驟中，DevOps 入門版會自動設定完整的 GitHub 工作流程。 視需要探索和自定義工作流程。 請執行下列步驟來熟悉工作流程。

  1. 在 DevOps 入門版儀錶板的左側，選取 [GitHub 工作流程]。 此連結會開啟新專案的瀏覽器索引標籤和 GitHub 工作流程。

    備註

    請勿重新命名工作流程檔案。 工作流程檔案的名稱應該是 devops-starter-workflow.yml，以便儀錶板反映變更。

  2. 工作流程 yaml 檔案包含建置和部署應用程式所需的所有 GitHub Actions。 按兩下 [編輯檔案 ] 選項以自訂您的工作流程檔案。

  3. 在存放庫的 [ 程式碼 ] 索引標籤下，點擊 [ 提交紀錄]。 此視圖顯示與特定部署相關聯的程式碼提交。

  4. 在存放庫的 [ 動作] 索引標籤下，您可以檢視存放庫所有工作流程執行的歷程記錄。

  5. 選取 最新的執行 ，以檢視工作流程中執行的所有作業。

  6. 點擊 任務 以檢視工作流程執行的詳細記錄。 記錄包含部署程序的相關實用資訊。 部署期間和之後都可以檢視它們。

  7. 按兩下 [ 提取要求 ] 索引標籤，以檢視存放庫上的所有提取要求

清理資源

當您不再需要 Azure App Service 時，您可以刪除 Azure App Service 和其他相關資源。 使用 DevOps 入門版儀錶板上的 [刪除 ] 功能。

後續步驟

當您設定 CI/CD 程式時，會自動建立 GitHub 工作流程。 您可以修改此工作流程，以符合小組的需求。 若要深入瞭解 GitHub Actions 和工作流程，請參閱：

自定義 GitHub 工作流程

  • Last updated on