開發人員說明：使用 Azure 和 Github Actions 為 Node js 專案設定 CI/CD 管道

有人在 Twitter 上發文說，當工程師做某件事時，他們應該寫下他們是如何實現它的。它可以節省其他工程師尋找解決方案的時間。這就是我們在這裡的原因。

在本文中，我們將使用 Azure 作為雲端供應商和 GitHub 操作為 Node js 專案配置 CI/CD 管道。

首先

1. 在 Microsoft Azure 上建立應用程式服務。

• 登入 Microsoft Azure 門戶，如果沒有帳戶，請建立帳戶。 （截至撰寫本文時，他們為新帳戶提供最高 200 美元的積分。

• 接下來，搜尋 azure 應用程式。
  

• 選擇「建立」>網路應用程式。然後在表格中填寫詳細資料。選擇運行時堆疊作為 Node xx LTS。繼續創建直至。

在此過程結束時，您應該擁有一個具有 Microsoft 預設頁面的 Web 應用程式。

下一個，

2. 產生用於 Github 作業的 Azure 憑證。

這裡記錄了幾種方法，但我們使用服務主體選項，因為它非常簡單。

開啟Azure cli，（如下圖）

並執行以下命令：

az ad sp create-for-rbac --name "myApp" --角色貢獻者--scopes /subscriptions//resourceGroups//providers/Microsoft.Web/sites / ; --json-auth

將 , 和 替換為 azure 應用服務儀表板中的正確詳細資訊。 “myApp”是服務主體的名稱。

該指令將產生以下輸出。

{
"clientId": "",
"clientSecret": "",
"subscriptionId": "",
"tenantId": "",
(...)
}

這個稍後會用到。

終於到了Github

3.新增secret，建立Github Action和觸發器。

• 在儲存庫中導航到設定>;秘密和變數>行動。

• 點選新增新的儲存庫金鑰。將 json 輸出貼到機密欄位中，並將 AZURE_CREDENTIALS 貼到名稱欄位中。

• 導覽至「操作」選項卡，將 github 操作流程新增至專案。搜尋「將 Node.js 部署到 Azure Web App」並點擊「配置」繼續。

  • 建立了一個工作流程檔案 azure-webapps-node.yml，可以在提交變更之前對其進行編輯。

編輯文件如下圖所示：

`於：
推：
分支：[“開發”]
工作流程_調度：

環境：
AZURE_WEBAPP_NAME: # 將其設定為您的應用程式名稱
AZURE_WEBAPP_PACKAGE_PATH：「。」 # 將其設定為您的 Web 應用程式專案的路徑，預設為儲存庫根
NODE_VERSION: '' # 將其設定為要使用的節點版本

權限：
內容：閱讀

工作：
建置與部署：
運行：ubuntu-latest
步驟：
- 名稱：「查看 Github 操作」
使用：actions/checkout@v4

- uses: azure/login@v1
  with:
    creds: ${{ secrets.AZURE_CREDENTIALS }}

- name: Setup Node ${{ env.NODE_VERSION }}
  uses: actions/setup-node@v4
  with:
    node-version: ${{ env.NODE_VERSION }}
    cache: 'npm'

- name: npm install, build, and test
  run: |
    npm install

- uses: azure/webapps-deploy@v3
  with:
    app-name: ${{ env.AZURE_WEBAPP_NAME }}
    package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}

# Azure logout 
- name: logout
  run: |
    az logout`

工作流程檔案在推送到開發分支時觸發，並使用您先前儲存在機密中的憑證登入 azure 門戶，然後繼續建置和部署。

請記得要相應地替換編輯網路應用程式名稱、節點版本。

最終觸發第一次運行的工作流程。 Azure 入口網站上的預設網頁應該會消失，並且您已為 CI/CD 管道配置了 Web 應用程序，該管道在推送到開發分支時觸發。

希望這可以幫助其他工程師。

以上是開發人員說明：使用 Azure 和 Github Actions 為 Node js 專案設定 CI/CD 管道的詳細內容。更多資訊請關注PHP中文網其他相關文章！