在 Azure 中部署 Node.js Web 應用程式

在這份快速入門中，您將學習如何建立並部署第一個 Node.js（Express）網頁應用程式到 Azure App 服務。 App Service 支援 Linux 和 Windows 上的各種 Node.js 版本。

這個快速入門中的 Azure CLI 步驟使用付費的 Premium v3 層級。 Visual Studio Code 和 Azure 入口網站的步驟展示了如何使用免費方案。

這段影片示範如何在 Azure 中部署 Node.js Web 應用程式。

下列章節也會說明影片中的步驟。

設定初始環境

• 具有有效訂用帳戶的 Azure 帳戶。 如果您沒有帳戶，可以免費建立帳戶。
• 安裝 Node.js LTS。 執行命令 node --version，確認已安裝 Node.js。
• 安裝 Visual Studio Code。
• 安裝適用於 Visual Studio Code 的 Azure App 服務 延伸模組。

• 具有有效訂用帳戶的 Azure 帳戶。 如果您沒有帳戶，可以免費建立帳戶。
• 安裝 Node.js LTS。 執行命令 node --version，確認已安裝 Node.js。
• 安裝 Azure CLI，你可以用它在 shell 裡執行指令，建立和設定 Azure 資源。

• 具有有效訂用帳戶的 Azure 帳戶。 如果您沒有帳戶，可以免費建立帳戶。
• 安裝 Node.js LTS。 執行命令 node --version，確認已安裝 Node.js。
• 有 FTP 用戶端，例如 FileZilla，可以把檔案傳到 App Service。

建立您的 Node.js 應用程式

在此步驟中，您會建立基礎 Node.js 應用程式，並確保其在您的電腦上執行。

秘訣

如果你已經完成 Node.js 教學，可以直接跳到 「部署到 Azure」。

1. 使用預設安裝的 Node.js 和 NPM 的 Express 應用程式產生器來建立 Node.js 應用程式。

   npx express-generator myExpressApp --view ejs
   

   如果這是你第一次安裝發電機，NPX 會要求你同意安裝。

2. 切換至應用程式的目錄，並安裝 npm 套件。

   cd myExpressApp && npm install
   

3. 將相依性更新為最安全的版本。

   npm audit fix --force
   

4. 使用偵錯資訊啟動開發伺服器。

   DEBUG=myexpressapp:* npm start
   

5. 在瀏覽器中，瀏覽至 http://localhost:3000。 您應該會看到如下的結果：

   

我遇到問題

部署至 Azure

在繼續之前，請確定您已安裝並設定所有必要條件。

附註

若要讓 Node.js 應用程式在 Azure 中執行，應用程式必須接聽 PORT 環境變數所提供的連接埠。 在您產生的 Express 應用程式中，此環境變數已用於啟動指令碼 bin/www。 (搜尋 process.env.PORT。)

登入 Azure

1. 在終端機中，確保您位於 myExpressApp 目錄，然後使用下列命令啟動 Visual Studio Code：

   code .
   

2. 在 Visual Studio Code 的活動列上，選取 Azure 標誌。

3. 請確定您已使用 Azure 帳戶登入。

我遇到問題

設定 App Service 應用程式和部署程式碼

部署至 Linux

1. 以滑鼠右鍵按一下 App Service，並選取 [建立新的 Web 應用程式]。 預設會使用 Linux 容器。

2. 輸入 Web 應用程式的全域唯一名稱，然後選取 Enter。 名稱必須在整個 Azure 中唯一，且僅使用字母數字（A-Z、 a-z和 0-9）及連字號（-）。

3. 在 [選取執行階段堆疊] 中，選取您想要的 Node.js 版本。 推薦使用 Node 24 LTS。

4. 在 [選取定價層] 中，選取 [免費 (F1)]，並等候資源在 Azure 中建立。

5. 在快顯 [一律將工作區 "myExpressApp" 部署至 <app-name>]中，選取 [是]。 這麼做可確保只要您位於相同的工作區，Visual Studio Code 就能每次都部署至相同的 App Service 應用程式。

   Visual Studio Code 建立 Azure 資源並部署程式碼時，會顯示進度通知。

6. 部署完成後，請在通知彈窗中選擇瀏覽 網站 。 瀏覽器應該會顯示 Express 預設頁面。

部署至 Windows

1. 在資源中，在你想使用的訂閱中，右鍵點擊應用程式服務，然後選擇建立新網頁應用程式...（進階）。

2. 選取您要從中放送應用程式的位置。 例如，西歐。

3. 選取 [ 安全唯一 預設主機名稱]。

4. 選取 [建立新的資源群組]，然後輸入資源群組的名稱，例如AppServiceQS-rg。

5. 輸入 Web 應用程式的全域唯一名稱，然後選取 [Enter]。 名稱必須在整個 Azure 中唯一，且僅使用字母數字（A-Z、 a-z和 0-9）及連字號（-）。

6. 選取您想要的 Node.js 版本。 推薦使用 Node 24 LTS。

7. 針對作業系統選取 [Windows]。

8. 選取 [建立新的 App Service 方案]，然後輸入方案的名稱 (例如 AppServiceQS-plan)，然後針對定價層選取 [F1 免費]。

9. 在 [選取應用程式的 Application Insights 資源] 中，選取 [暫時跳過] 請等待在 Azure 中創建資源。

10. 在快顯 [一律將工作區 "myExpressApp" 部署至 <app-name>]中，選取 [是]。 這麼做可確保只要您位於相同的工作區，Visual Studio Code 就能每次都部署至相同的 App Service 應用程式。

    Visual Studio Code 建立 Azure 資源並部署程式碼時，會顯示進度通知。

    附註

    部署完成後，你的 Azure 應用程式還沒執行，因為專案根節點沒有 web.config 檔案。 請遵循剩餘步驟自動產生根目錄。 如需詳細資訊，請參閱設定 Node.js 應用程式中的您沒有檢視此目錄或頁面的權限。

11. 在 Visual Studio Code 的 [資源] 中，展開新應用程式的節點，以滑鼠右鍵按一下 [應用程式設定]，然後選取 [新增設定]：

    

12. 輸入設定金鑰的 SCM_DO_BUILD_DURING_DEPLOYMENT。

13. 輸入 true 以設定值。

    這個應用程式設定在部署時啟用建置自動化，自動偵測啟動腳本並產生 web.config 檔案。

14. 在 [App Service] 總管中，再次選取 [部署至 Web 應用程式] 圖示，然後再次選取 [部署] 以確認。

15. 等候部署完成，然後在通知快顯中選取 [瀏覽網站]。 瀏覽器應該會顯示 Express 預設頁面。

我遇到問題

在終端機裡，確保你在 myExpressApp 目錄裡。 將 <app-name> 替換為全域唯一名稱，然後建立資源群組、App Service 計畫和應用程式。 請設定SCM_DO_BUILD_DURING_DEPLOYMENT，讓 App Service 在您部署來源封存檔時，能安裝相依性並建置應用程式。

部署至 Linux

az group create --name myResourceGroup --location eastus
az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku P0v3 --is-linux
az webapp create --name <app-name> --resource-group myResourceGroup --plan myAppServicePlan --runtime "NODE:24-lts"
az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings SCM_DO_BUILD_DURING_DEPLOYMENT=true

部署至 Windows

az group create --name myResourceGroup --location eastus
az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku P0v3
az webapp create --name <app-name> --resource-group myResourceGroup --plan myAppServicePlan --runtime "NODE:24LTS"
az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings SCM_DO_BUILD_DURING_DEPLOYMENT=true

• 如果無法辨識 az 命令，請確定您已安裝 Azure CLI，如設定初始環境所說明。
• 請將 <app-name> 替換成一個在整個 Azure 中唯一的名稱（有效字元為 a-z、0-9 和 -）。
• 這個 --sku P0v3 引數選擇了付費的 Premium v3 價格層級。 請將 eastus 替換為偏好的區域；並以 az account list-locations 列出可用區域。
• --is-linux 選取 Linux 方案。 如果是 Windows 方案，請省略，如 Windows 標籤頁所示。

請將 myExpressApp 中的檔案建立成 ZIP 壓縮檔，而不是外層目錄。 在 Linux 或 macOS 上，從 zip -r ../app.zip . -x '*/node_modules/*' '*/.git/*' '*/.env*' 執行 。 在 Windows 上，請從 myExpressApp，在 PowerShell 中執行 Compress-Archive -Path (Get-ChildItem -Force -Name | Where-Object { $_ -notin @('node_modules', '.git') -and $_ -notlike '.env*' }) -DestinationPath ..\app.zip 。 接著部署壓縮檔：

az webapp deploy --resource-group myResourceGroup --name <app-name> --src-path ../app.zip --type zip

前往 https://<app-name>.azurewebsites.net 查看應用程式。

建立 Azure 資源

1. 登入 Azure 入口網站。

2. 若要開始建立 Node.js 應用程式，請瀏覽至 https://portal.azure.com/#create/Microsoft.WebSite。

3. 在 [基本] 索引標籤的 [專案詳細資料] 下，確保已選取正確的訂用帳戶，然後選取 [新建] 以建立資源群組。 輸入 myResourceGroup 作為名稱。

   

4. 在 [執行個體詳細資料] 下，輸入 Web 應用程式的全域唯一名稱，然後選取 [程式碼]。 在執行時堆疊中選擇 Node 24 LTS、作業系統，以及你想從哪個區域提供你的應用程式。

   

5. 在 [定價方案] 底下，選取 [ 新建] 以建立 App Service 方案。 輸入 myAppServicePlan 作為名稱。 若要變更為免費方案，請在 [定價方案] 清單中選取 [免費 F1]。

   

6. 選取頁面底部的 [檢閱 + 建立] 按鈕。

   

7. 驗證執行之後，請選取頁面底部的 [建立] 按鈕。

8. 部署完成後，選取 [前往資源]。

   

取得 FTPS 認證

Azure App 服務 針對 FTP/S 部署支援兩種認證類型。 這些認證與您的 Azure 訂用帳戶認證不同。 在這個區段，你會取得可用於 FTP 用戶端的應用程式範圍憑證。

1. 從 App Service 應用程式頁面，在側邊欄選單的部署選單中選擇部署中心，然後選擇 FTPS 憑證標籤。

   

2. 打開你的 FTP 用戶端，並進入 你的 myExpressApp 資料夾。

3. 從 FTPS 憑證 標籤頁，將 FTPS 端點、 使用者名稱和 密碼 複製到 FTP 用戶端。

   

4. 在你的 FTP 用戶端選擇 Connect 。

使用 FTPS 部署檔案

1. 將所有檔案和目錄檔案複製到 Azure 中的 /site/wwwroot directory 目錄。

   

2. 瀏覽至您的應用程式 URL，以確認應用程式運作正常。

重新部署更新

您可以在 Visual Studio Code 中進行編輯、儲存檔案，然後重新部署至 Azure 應用程式，以將變更部署此應用程式。 例如：

1. 從範例專案中開啟 views/index.ejs 並變更

   <p>Welcome to <%= title %></p>
   

   to

   <p>Welcome to Azure</p>
   

2. 在 [App Service] 總管中，再次選取 [部署至 Web 應用程式] 圖示，然後再次選取 [部署] 以確認。

3. 等候部署完成，然後在通知快顯中選取 [瀏覽網站]。 你應該會看到 Welcome to Express 訊息被改成 Welcome to Azure了。

2. 儲存你的變更，依照 Deploy to Azure 所述，從應用程式檔案重新建立 ../app.zip，然後重新部署：

   az webapp deploy --resource-group myResourceGroup --name <app-name> --src-path ../app.zip --type zip
   

   請替換 <app-name> 成你創建網頁應用程式時使用的名稱。

3. 部署完成後，請重新整理網頁。 你應該會看到 Welcome to Express 訊息被改成 Welcome to Azure了。

2. 儲存您的變更，然後使用 FTP 用戶端重新部署應用程式。

3. 部署完成後，請重新整理網頁。 你應該會看到 Welcome to Express 訊息被改成 Welcome to Azure了。

串流記錄

您可以直接在 Visual Studio Code 輸出視窗中，從 Azure 應用程式中串流記錄輸出 (console.log() 的呼叫)。

1. 在 Visual Studio Code 的 [資源] 中，以滑鼠右鍵按一下應用程式節點，然後選取 [開始串流記錄]。

   

2. 如果系統要求您重新啟動應用程式，請選擇 [是]。 重新啟動應用程式之後，Visual Studio Code 的輸出視窗會隨即開啟，並且連線至記錄串流。

3. 幾秒鐘之後，輸出視窗中會顯示您已連線至記錄串流服務的訊息。 您可以在瀏覽器中重新整理頁面，以產生更多的輸出活動。

   Connecting to log stream...
   2020-03-04T19:29:44  Welcome, you are now connected to log-streaming service. The default timeout is 2 hours.
   Change the timeout with the App Setting SCM_LOGSTREAM_TIMEOUT (in seconds).
   

我遇到問題

您可以存取從應用程式及其執行所在的容器產生的主控台記錄。 記錄包含呼叫 console.log() 所產生的任何輸出。

若要串流記錄，請執行 az webapp log tail 命令：

• 先啟用日誌：在 Linux 上執行az webapp log config --resource-group myResourceGroup --name <app-name> --docker-container-logging filesystem;在 Windows 上執行 az webapp log config --resource-group myResourceGroup --name <app-name> --application-logging filesystem。

az webapp log tail --resource-group myResourceGroup --name <app-name>

請替換 <app-name> 成你創建網頁應用程式時使用的名稱。

在瀏覽器中重新整理應用程式以產生主控台記錄，其中應包含描述應用程式 HTTP 要求的訊息。 如果沒有立即看到輸出，請在 30 秒後再試一次。

您可以隨時在終端機中選取 Ctrl+C，以停止記錄串流。

您可以存取從應用程式及其執行所在的容器產生的主控台記錄。 您可以直接在 Azure 入口網站中，從 Node.js 應用程式串流記錄輸出 (console.log() 的呼叫)。

1. 在你應用程式的同一個 App Service 頁面，使用側邊欄選單捲動到 監控 區塊並選擇 日誌串流。

   

2. 幾秒鐘之後，輸出視窗中會顯示您已連線至記錄串流服務的訊息。 您可以在瀏覽器中重新整理頁面，以產生更多的輸出活動。

   Connecting...
   2021-10-26T21:04:14  Welcome, you are now connected to log-streaming service.
   Starting Log Tail -n 10 of existing logs ----
   /appsvctmp/volatile/logs/runtime/81b1b83b27ea1c3d598a1cdec28c71c4074ce66c735d0be57f15a8d07cb3178e.log
   2021-10-26T21:04:08.614384810Z: [INFO]
   2021-10-26T21:04:08.614393710Z: [INFO]  # Enter the source directory to make sure the script runs where the user expects
   2021-10-26T21:04:08.614399010Z: [INFO]  cd "/home/site/wwwroot"
   2021-10-26T21:04:08.614403210Z: [INFO]
   2021-10-26T21:04:08.614407110Z: [INFO]  export NODE_PATH=/usr/local/lib/node_modules:$NODE_PATH
   2021-10-26T21:04:08.614411210Z: [INFO]  if [ -z "$PORT" ]; then
   2021-10-26T21:04:08.614415310Z: [INFO]          export PORT=8080
   2021-10-26T21:04:08.614419610Z: [INFO]  fi
   2021-10-26T21:04:08.614423411Z: [INFO]
   2021-10-26T21:04:08.614427211Z: [INFO]  node /opt/startup/default-static-site.js
   Ending Log Tail of existing logs ---
   

清除資源

在前述步驟中，您在資源群組中建立了 Azure 資源。 本快速入門中的步驟會將所有資源放在此資源群組中。 若要清除，您只需要移除資源群組。

1. 在 Visual Studio Code 的 Azure 擴充功能中，在 [群組方式] 清單中，選取 [依資源群組分類]。

2. 在 [資源] 清單中，展開訂用帳戶，以滑鼠右鍵按一下您稍早建立的資源群組，然後選取 [刪除資源群組]。

   

3. 出現提示時，輸入您要刪除的資源群組名稱來確認刪除。 確認後，資源群組會被刪除，完成後你會看到 通知 。

我遇到問題

在前面的 CLI 步驟中，你在 myResourceGroup 建立了 Azure 資源。

如果您在未來不需使用這些資源，請執行下列命令來刪除資源群組：

az group delete --name myResourceGroup --no-wait

--no-wait 引數可讓命令在作業完成之前傳回。

若不再需要，您可以刪除資源群組、App Service 及所有相關資源。

1. 從您的 App Service [概觀] 頁面，選取您在建立 Azure 資源步驟中建立的 [資源群組]。

   

2. 在資源群組頁面中，選取 [刪除資源群組]。 確認要完成資源刪除作業的資源群組名稱。

   

相關內容

恭喜，您已成功完成本快速入門！

將 Node.js + MongoDB Web 應用程式部署到 Azure

設定 Node.js 應用程式

  使用自訂網域和受管理憑證來保護你的應用程式

查看其他 Azure 擴充功能。

• Azure Cosmos DB
• Azure Functions
• Docker 擴充套件
• Azure CLI 工具
• Azure Resource Manager \(英文\)

或藉由安裝適用於 Azure 的 Node Pack 擴充功能來取得這所有項目。