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

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

本快速入門會在免費層中設定 App Service 應用程式，您的 Azure 訂用帳戶不會產生任何費用。

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

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

設定初始環境

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

具有有效訂用帳戶的 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」。

使用預設安裝的 Node.js 和 NPM 的 Express 應用程式產生器來建立 Node.js 應用程式。
```
npx express-generator myExpressApp --view ejs
```
如果這是你第一次安裝發電機，NPX 會要求你同意安裝。
切換至應用程式的目錄，並安裝 npm 套件。
```
cd myExpressApp && npm install
```
將相依性更新為最安全的版本。
```
npm audit fix --force
```
使用偵錯資訊啟動開發伺服器。
```
DEBUG=myexpressapp:* npm start
```
在瀏覽器中，瀏覽至 http://localhost:3000。您應該會看到如下的結果：

我遇到問題

部署至 Azure

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

附註

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

在終端機中，確保您位於 myExpressApp 目錄，然後使用下列命令啟動 Visual Studio Code：
```
code .
```
在 Visual Studio Code 的活動列上，選取 Azure 標誌。
請確定您已使用 Azure 帳戶登入。

我遇到問題

以滑鼠右鍵按一下 App Service，並選取 [建立新的 Web 應用程式]。預設會使用 Linux 容器。
輸入 Web 應用程式的全域唯一名稱，然後選取 Enter。名稱必須在整個 Azure 中唯一，且僅使用字母數字（A-Z、 a-z和 0-9）及連字號（-）。
在 [選取執行階段堆疊] 中，選取您想要的 Node.js 版本。推薦使用 Node 24 LTS。
在 [選取定價層] 中，選取 [免費 (F1)]，並等候資源在 Azure 中建立。
在快顯 [一律將工作區 "myExpressApp" 部署至 <app-name>]中，選取 [是]。這麼做可確保只要您位於相同的工作區，Visual Studio Code 就能每次都部署至相同的 App Service 應用程式。

Visual Studio Code 建立 Azure 資源並部署程式碼時，會顯示進度通知。
部署完成後，請在通知彈窗中選擇瀏覽網站。瀏覽器應該會顯示 Express 預設頁面。

在資源中，在你想使用的訂閱中，右鍵點擊應用程式服務，然後選擇建立新網頁應用程式...（進階）。
選取您要從中放送應用程式的位置。例如，西歐。
選取 [ 安全唯一預設主機名稱]。
選取 [建立新的資源群組]，然後輸入資源群組的名稱，例如AppServiceQS-rg。
輸入 Web 應用程式的全域唯一名稱，然後選取 [Enter]。名稱必須在整個 Azure 中唯一，且僅使用字母數字（A-Z、 a-z和 0-9）及連字號（-）。
選取您想要的 Node.js 版本。推薦使用 Node 24 LTS。
針對作業系統選取 [Windows]。
選取 [建立新的 App Service 方案]，然後輸入方案的名稱 (例如 AppServiceQS-plan)，然後針對定價層選取 [F1 免費]。
在 [選取應用程式的 Application Insights 資源] 中，選取 [暫時跳過] 請等待在 Azure 中創建資源。
在快顯 [一律將工作區 "myExpressApp" 部署至 <app-name>]中，選取 [是]。這麼做可確保只要您位於相同的工作區，Visual Studio Code 就能每次都部署至相同的 App Service 應用程式。

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

附註

部署完成後，你的 Azure 應用程式還沒執行，因為專案根節點沒有 web.config 檔案。請遵循剩餘步驟自動產生根目錄。如需詳細資訊，請參閱設定 Node.js 應用程式中的您沒有檢視此目錄或頁面的權限。
在 Visual Studio Code 的 [資源] 中，展開新應用程式的節點，以滑鼠右鍵按一下 [應用程式設定]，然後選取 [新增設定]：
輸入設定金鑰的 SCM_DO_BUILD_DURING_DEPLOYMENT。
輸入 true 以設定值。

這個應用程式設定在部署時啟用建置自動化，自動偵測啟動腳本並產生 web.config 檔案。
在 [App Service] 總管中，再次選取 [部署至 Web 應用程式] 圖示，然後再次選取 [部署] 以確認。
等候部署完成，然後在通知快顯中選取 [瀏覽網站]。瀏覽器應該會顯示 Express 預設頁面。

我遇到問題

在終端機中，確定您位於 myExpressApp 目錄中，並使用 az webapp up 命令將程式碼部署在本機資料夾中 (myExpressApp)：

部署至 Linux
部署至 Windows

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

az webapp up --sku F1 --name <app-name> --os-type Windows

如果無法辨識 az 命令，請確定您已安裝 Azure CLI，如設定初始環境所說明。
以 Azure 中的唯一名稱取代 <app_name>。（ 有效字元為 a-z、 0-9和 -。良好的模式是使用公司名稱和應用程式識別碼的組合。
--sku F1 引數會在免費定價層上建立 Web 應用程式，不會產生費用。
您可以選擇性地加入引數 --location <location-name>，其中 <location_name> 是可用的 Azure 區域。您可以執行 az account list-locations 命令，擷取 Azure 帳戶的允許區域清單。
此命令預設會建立適用於 Node.js 的 Linux 應用程式。若要改為建立 Windows 應用程式，請使用 --os-type 引數。
如果您看到錯誤：「無法自動偵測應用程式的執行階段堆疊」，請確定您是在 myExpressApp 目錄中執行命令 (請參閱使用 az webapp up 針對自動偵測問題進行疑難排解。)

此命令可能需要幾分鐘才能完成。此命令執行時會提供相關訊息，包括建立資源群組、App Service 方案和應用程式資源、設定記錄，以及執行 Zip 部署。然後，它會傳回訊息，其中包含應用程式的URL，也就是 Azure 上的應用程式 URL。

The webapp '<app-name>' doesn't exist
Creating Resource group '<group-name>' ...
Resource group creation complete
Creating AppServicePlan '<app-service-plan-name>' ...
Creating webapp '<app-name>' ...
Configuring default logging for the app, if not already enabled
Creating zip with contents of dir /home/cephas/myExpressApp ...
Getting scm site credentials for zip deployment
Starting zip deployment. This operation can take a while to complete ...
Deployment endpoint responded with status code 202
You can launch the app at <URL>
{
  "URL": "<URL>",
  "appserviceplan": "<app-service-plan-name>",
  "location": "centralus",
  "name": "<app-name>",
  "os": "<os-type>",
  "resourcegroup": "<group-name>",
  "runtime_version": "node|24",
  "runtime_version_detected": "0.0",
  "sku": "FREE",
  "src_path": "/home/cephas/myExpressApp"
}

附註

az webapp up 命令會執行下列動作：

建立預設資源群組。
建立預設 App Service 方案。
使用所指定的名稱建立應用程式。
Zip 部署目前工作目錄的所有檔案，啟用建置自動化。
在 .azure/config 檔案中本機快取參數，這樣您就不需要在稍後使用 az webapp up 或其他來自專案資料夾的 az webapp 命令進行部署時再次加以指定。預設會自動使用快取的值。

建立 Azure 資源

登入 Azure 入口網站。
若要開始建立 Node.js 應用程式，請瀏覽至 https://portal.azure.com/#create/Microsoft.WebSite。
在 [基本] 索引標籤的 [專案詳細資料] 下，確保已選取正確的訂用帳戶，然後選取 [新建] 以建立資源群組。輸入 myResourceGroup 作為名稱。
在 [執行個體詳細資料] 下，輸入 Web 應用程式的全域唯一名稱，然後選取 [程式碼]。在執行時堆疊中選擇 Node 24 LTS、作業系統，以及你想從哪個區域提供你的應用程式。
在 [定價方案] 底下，選取 [ 新建] 以建立 App Service 方案。輸入 myAppServicePlan 作為名稱。若要變更為免費方案，請在 [定價方案] 清單中選取 [免費 F1]。
選取頁面底部的 [檢閱 + 建立] 按鈕。
驗證執行之後，請選取頁面底部的 [建立] 按鈕。
部署完成後，選取 [前往資源]。

取得 FTPS 認證

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

從 App Service 應用程式頁面，在側邊欄選單的部署選單中選擇部署中心，然後選擇 FTPS 憑證標籤。
打開你的 FTP 用戶端，並進入 你的 myExpressApp 資料夾。
從 FTPS 憑證 標籤頁，將 FTPS 端點、 使用者名稱和密碼複製到 FTP 用戶端。
在你的 FTP 用戶端選擇 Connect 。

使用 FTPS 部署檔案

將所有檔案和目錄檔案複製到 Azure 中的 /site/wwwroot directory 目錄。
瀏覽至您的應用程式 URL，以確認應用程式運作正常。

重新部署更新

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

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

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

<p>Welcome to Azure</p>

在 [App Service] 總管中，再次選取 [部署至 Web 應用程式] 圖示，然後再次選取 [部署] 以確認。
等候部署完成，然後在通知快顯中選取 [瀏覽網站]。你應該會看到 Welcome to Express 訊息被改成 Welcome to Azure了。

儲存您的變更，然後再次使用 az webapp up 命令 (不使用 Linux 的引數) 重新部署應用程式。為 Windows 新增 --os-type Windows：
```
az webapp up
```
此命令會使用在 .azure/config 檔案中本機快取的值，例如應用程式名稱、資源群組和 App Service 方案。
部署完成後，請重新整理網頁。你應該會看到 Welcome to Express 訊息被改成 Welcome to Azure了。

儲存您的變更，然後使用 FTP 用戶端重新部署應用程式。
部署完成後，請重新整理網頁。你應該會看到 Welcome to Express 訊息被改成 Welcome to Azure了。

串流記錄

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

在 Visual Studio Code 的 [資源] 中，以滑鼠右鍵按一下應用程式節點，然後選取 [開始串流記錄]。
如果系統要求您重新啟動應用程式，請選擇 [是]。重新啟動應用程式之後，Visual Studio Code 的輸出視窗會隨即開啟，並且連線至記錄串流。

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

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 命令：

az webapp log tail

此命令會使用 .azure/config 檔案中快取的資源群組名稱。

您也可以加入 --logs 參數，搭配 az webapp up 命令，在部署時自動開啟記錄資料流。

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

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

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

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

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

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 ---