建置和部署 Node.js 應用程式

本文說明如何使用 Azure Pipelines 來建立管線，以使用持續整合 （CI） 和持續部署 （CD） 建置 Node.js 應用程式並將其部署至 Azure App Service。 CI/CD 會在應用程式程式碼存放庫提交時自動建置和部署應用程式，以減少停機時間和錯誤風險。

必要條件

產品	需求
Azure DevOps	- Azure DevOps 專案。 - 能夠在由 Microsoft 託管的代理上運行管線。 您可以購買平行作業，也可以申請免費方案。 - YAML 和 Azure Pipelines 的基本知識。 如需詳細資訊，請參閱 建立您的第一個管線。 - 許可權：      - 若要建立管線：您必須位於 參與者 群組中，且群組必須將 [建立組建管線 ] 許可權設定為 [允許]。 Project Administrators 群組的成員可以管理管線。     - 若要建立服務連線：您必須具有 管理員 或 建立者 角色以進行 服務連線。
GitHub的	- GitHub 帳戶。 - 一個用於授權 Azure Pipelines 的 GitHub 服務連線。
天藍色	Azure 訂用帳戶。

注意事项

使用 GitHub 的程序可能需要驗證、授權或登入 GitHub 組織或特定儲存庫。 請按照指示完成所需的程序。 如需詳細資訊，請參閱 存取 GitHub 存放庫。

分叉範例應用程式

1. 在 GitHub 中，移至 Node.js Hello World 存放庫，然後在頂端功能表中選取 [分支 ]。

   

2. 選取您的 GitHub 組織作為分支 擁有者 （如果尚未選取），然後選取 建立 分支。

   

瀏覽器會移至URL https://github.com/<owner>/nodejs-docs-hello-world的新分支。

建立和部署 App Service Web 應用程式

在 Azure 入口網站中使用 Cloud Shell 建立 Azure App Service Web 應用程式。 若要使用 Cloud Shell，請登入 Azure 入口網站 ，然後選取頂端工具列上的 [Cloud Shell] 按鈕。

Cloud Shell 會出現在瀏覽器底部。 請確定已在下拉式功能表中選取 Bash 作為環境。

小提示

若要貼到 Cloud Shell 中，請使用 Ctrl+Shift+V 或按一下滑鼠右鍵，然後從內容功能表中選取 [貼上 ]。

建立和部署 Web 應用程式

1. 在 Cloud Shell 中，使用下列命令將分支存放庫複製到 Azure，並取代 <your-forked-repository-url> 為分支存放庫的 URL。

   git clone <your-forked-repository-url>
   

2. 將目錄變更為複製的儲存庫資料夾。

   cd nodejs-docs-hello-world
   

3. 執行 az webapp up 命令來佈建 App Service Web 應用程式，並執行第一次部署。 引數會在 --sku F1 免費定價層上建立 Web 應用程式，這不會產生任何費用。

   在沒有參數的情況下az webapp up執行會自動name指派隨機產生的 Web 應用程式名稱，該名稱在 Azure 中是唯一的。 您也可以使用參數 --name <web-app-name> 來指派 Azure 中唯一的任何名稱，例如具有應用程式識別碼的個人或公司名稱，例如 --name <your-name>-nodeapp。

   az webapp up --sku F1 --name <app-name>
   

此 az webapp up 命令會將應用程式辨識為 Node.js 應用程式，並採取下列動作：

1. 建立預設 資源群組。
2. 建立預設的 App Service 方案。
3. 使用指派的名稱和 URL 建立 <your-web-app-name>.azurewebsites.net。
4. ZIP 會從 目前工作目錄部署所有檔案，並啟用建置自動化。
5. 將參數在本機快取在 .azure/config 檔案中，因此當您使用 或其他az webapp up命令從az webapp專案資料夾部署時，不需要再次指定它們。

您可以使用命令參數，以您自己的值置換預設動作。 如需詳細資訊，請參閱 az webapp up。

此指令會在執行時產生狀態訊息。 網站成功啟動後，您可以選擇 的 You can launch the app at https://<your-web-app-name>.azurewebsites.net 鏈接轉到 Hello World 網絡應用程序。

此 az webapp up 命令會為範例 Web 應用程式產生下列 JSON 輸出：

{
  "URL": "<your-web-app-url>",
  "appserviceplan": "<your-app-service-plan-name>",
  "location": "<your-azure-region>",
  "name": "<your-web-app-name>",
  "os": "Linux",
  "resourcegroup": "<your-resource-group-name>",
  "runtime_version": "node|20-LTS",
  "runtime_version_detected": "10.0",
  "sku": "FREE",
  "src_path": "<repository-source-path>"
}

從範本建立管線

1. 在您的 Azure DevOps 專案中，從左側導覽功能表中選取 [管線] ，然後選取 [ 新增管線 ] 或 [ 建立管線 ] （如果此管線是專案中的第一個管線）。

2. 在 [ 在哪裡] 程式代碼 畫面上，選取 [GitHub]。

3. 在 選取存放庫 畫面上，選取您的分支 nodejs-docs-hello-world 存放庫。

4. Azure Pipelines 會將程式代碼辨識為 Node.js 應用程式，並在 [設定管線] 頁面上建議數個管線範本。 選取 Node.js Express Web 應用程式至 Linux 上的 Azure。

5. 在下一個畫面上，選取您的 Azure 訂用帳戶，然後選取 [繼續]。 此動作會建立與您的 Azure 資源的服務連線。

6. 在下一個畫面上，選取您的 Azure Web 應用程式，然後選取 [驗證並設定]。 Azure Pipelines 會建立 azure-pipelines.yml 檔案，並將其顯示在 YAML 管線編輯器中。

7. 在 [ 檢閱管線 YAML ] 畫面上，檢閱管線的程式碼。

   管線會採取下列動作：

   • 設定在每次提交到主要分支時執行的觸發程序。
   • 建立並使用服務連線、Web 應用程式、機器映像和環境的變數。
   • 在建置代理程式上安裝 Node.js，並使用 npm 來執行和測試應用程式建置。
   • 將建置的應用程式封裝至 ZIP 檔，並將 ZIP 上傳至指定位置。
   • 將 ZIP 套件部署至 App Service 應用程式，並啟動應用程式。

保存並運行流水線

1. 檢閱程式碼之後，請選取 [儲存並執行] 和 [儲存並再次執行] 以儲存並執行管線。 azure-pipelines.yml檔案會儲存至分支存放庫，而程式碼會部署至 Azure App Service。

   注意事项

   管線第一次執行時，會要求授權以存取其建立的環境。 選取 [ 允許 ] ，以授與管線存取環境的許可權。

2. 在[執行概覽]頁面上，選取要監控其管線運行並追蹤其建置過程的作業。

3. 當執行成功時，請選取 [Azure Web 應用程式部署 ] 工作，然後選取 [App Service 應用程式 URL ] 以檢視已部署的網站。

   

4. 請確認您在已部署網站的 URL 看到於 App Service 上執行的網站。

   

執行 CI 建置和部署

trigger: main 關鍵字會設定您的管線，以便每當有變更認可到您分叉的程式碼庫中的 main 分支時執行。 若要執行 CI 組建：

1. 前往分支的 GitHub 儲存庫，並在 README.md 檔案中進行小的變更。
2. 請按 認可變更，然後再次按 認可變更。
3. 在 Azure Pipelines 中，確認您的 nodejs-docs-hello-world 管線會再次執行，並具有 個別 CI 的描述。

清除資源

如果您不再需要為本文建立的資源，可以刪除它們。

• 若要移除 Azure App Service 資源，請在 Cloud Shell 中依序執行下列命令。 您必須先刪除 Web 應用程式，才能刪除其應用程式服務方案，而且您必須先刪除應用程式服務方案，才能刪除其資源群組。

  az webapp delete --name <web-app-name> --resource-group <resource-group-name>
  az appservice plan delete --name <app-service-plan-name> --resource-group <resource-group-name>
  az group delete --name <resource-group-name>
  

• 若要移除 Azure Pipelines 中的管線，請選取管線，選取管線頁面右上角的 [ 更多動作 ] 圖示，然後選取 [ 刪除]。 若要移除 Azure DevOps 專案，請參閱 刪除專案。

• 若要刪除分支的 nodejs-docs-hello-world GitHub 存放庫，請移至存放庫，然後選取頂端功能表列中的 [ 設定 ]。 捲動至頁面底部，然後選取 [刪除此存放庫]。

相關內容

• 自訂JavaScript
• 透過 Azure Pipelines 部署至 App Service