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

在本快速入門中,您將瞭解如何建立第一個 Node.js (Express) Web 應用程式並將其部署至 Azure App 服務。 App Service 支援 Linux 和 Windows 上各種版本的 Node.js。

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

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

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

設定初始環境

  • 具有有效訂用帳戶的 Azure 帳戶。 免費建立帳戶
  • 安裝 Node.js LTS 和 npm。 執行 命令 node --version 以確認已安裝 Node.js。
  • 安裝 Azure CLI,您可以在任何殼層中執行命令來建立及設定 Azure 資源。
  • 具有有效訂用帳戶的 Azure 帳戶。 免費建立帳戶
  • 安裝 Node.js LTS 和 npm。 執行 命令 node --version 以確認已安裝 Node.js。
  • 擁有 FTP 用戶端 (例如 FileZilla),以連線到您的應用程式。

建立 Node.js 應用程式

在此步驟中,您會建立基本的 Node.js 應用程式,並確定它在您的電腦上執行。

提示

如果您已完成 Node.js 教學課程,您可以直接跳到 部署至 Azure

  1. 使用 Express Generator 建立 Node.js 應用程式,此產生器預設會隨 Node.js 和 NPM 一起安裝。

    npx express-generator myExpressApp --view ejs
    
  2. 變更為應用程式的目錄,並安裝 NPM 套件。

    cd myExpressApp && npm install
    
  3. 使用偵錯資訊啟動開發伺服器。

    DEBUG=myexpressapp:* npm start
    
  4. 在瀏覽器中,巡覽至 http://localhost:3000。 您應該會看到類似這樣的畫面︰

    Running Express Application

部署至 Azure

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

注意

若要讓 Node.js 應用程式在 Azure 中執行,它必須接聽環境變數所提供的 PORT 埠。 在產生的 Express 應用程式中,此環境變數已在啟動腳本 bin/www 中使用(搜尋 process.env.PORT)。

登入 Azure

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

    code .
    
  2. 在 Visual Studio Code 的 [活動列] 中 ,選取 Azure 標誌。

  3. 在 App Service 總管中,選取 [登入 Azure...],然後遵循指示。

    在 Visual Studio Code 中,您應該會在 [狀態欄] 和 Azure APP SERVICE 總管中的訂用帳戶中看到您的 Azure 電子郵件位址。

    sign in to Azure

設定 App Service 應用程式並部署程式代碼

  1. 選取 myExpressApp 資料夾。
  1. 以滑鼠右鍵按兩下 [應用程式服務],然後選取 [ 建立新的Web 應用程式]。 預設會使用Linux容器。

  2. 輸入 Web 應用程式的全域唯一名稱,然後按 Enter 鍵。 名稱在所有 Azure 中都必須是唯一的,且只使用英數位元 ('A-Z'、'a-z' 和 '0-9') 和連字元 ('-')。

  3. 在 [選取運行時間堆棧] 中,選取您想要的 Node.js 版本。 建議使用 LTS 版本。

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

  5. 在快顯 [一律將工作區 “myExpressApp” 部署至 <app-name>“中,選取 [ ]。 如此一來,只要您位於相同的工作區,Visual Studio Code 每次都會部署到相同的 App Service 應用程式。

    雖然 Visual Studio Code 會建立 Azure 資源並部署程式代碼,但它會顯示 進度通知

  6. 部署完成後,請在通知快顯中選取 [ 瀏覽網站 ]。 瀏覽器應該會顯示 Express 預設頁面。

在終端機中,請確定您位於 myExpressApp 目錄中,並使用 az webapp up 命令,在本機資料夾 (myExpressApp中部署程式代碼:

az webapp up --sku F1 --name <app-name>
  • az如果無法辨識命令,請確定您已安裝 Azure CLI,如設定初始環境中所述
  • <app_name>取代為所有 Azure 中唯一名稱(有效字元為a-z0-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 部署的相關訊息。 接著會提供訊息:「您可以在 azure 上的應用程式 URL http://< app-name.azurewebsites.net> 啟動應用程式。

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 http://<app-name>.azurewebsites.net
{
  "URL": "http://<app-name>.azurewebsites.net",
  "appserviceplan": "<app-service-plan-name>",
  "location": "centralus",
  "name": "<app-name>",
  "os": "<os-type>",
  "resourcegroup": "<group-name>",
  "runtime_version": "node|10.14",
  "runtime_version_detected": "0.0",
  "sku": "FREE",
  "src_path": "//home//cephas//myExpressApp"
}

注意

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

登入 Azure 入口網站

登入 Azure 入口網站

建立 Azure 資源

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

  2. 在 [基本] 索引標籤的 [項目詳細數據] 底下,確定已選取正確的訂用帳戶,然後選取 [建立新的資源群組]。 輸入 myResourceGroup 作為名稱。

    Screenshot of the Project details section showing where you select the Azure subscription and the resource group for the web app

  3. [實例詳細數據] 底下,輸入 Web 應用程式的全域唯一名稱,然後選取 [ 程序代碼]。 選取 [節點 18 LTS運行時間堆棧]、[操作系統] 和 [要從中提供服務的區域]。

    Screenshot of the Instance details section where you provide a name for the virtual machine and select its region, image and size

  4. 在 [App Service 方案] 底下,選取 [建立新的 App Service 方案]。 輸入 myAppServicePlan 以取得名稱。 若要變更為免費層,請選取 [變更大小],選取 [開發/測試 ] 索引卷標,選取 F1,然後選取頁面底部的 [ 套用 ] 按鈕。

    Screenshot of the Administrator account section where you provide the administrator username and password

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

    Screenshot showing the Review and create button at the bottom of the page

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

  7. 當部署完成時,選取 [前往資源]

    Screenshot showing the next step of going to the resource

取得 FTPS 認證

Azure App 服務支援FTP/S 部署的兩種認證類型。 這些認證與您的 Azure 訂用帳戶認證不同。 在本節中,您會取得 要搭配 FileZilla 使用的應用程式範圍認證

  1. 從 [App Service 應用程式] 頁面,選取 左側功能表中的 [部署中心 ],然後選取 [ FTPS 認證 ] 索引標籤。

    FTPS deployment credentials

  2. 開啟 FileZilla 並建立新的網站。

  3. 從 [FTPS 認證] 索引標籤的 [應用程式範圍] 底下,將 FTPS 端點FTPS 使用者名稱和密碼複製到 FileZilla。

    FTPS connection details

  4. 在 FileZilla 中選取 [連線]。

使用 FTPS 部署檔案

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

    FileZilla deploy files

  2. 瀏覽至應用程式的 URL,以確認應用程式是否正常執行。

重新部署更新

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

  1. 從範例項目中開啟 views/index.ejs 並變更

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

    打給

    <p>Welcome to Azure</p>
    
  1. 在 App Service 總管中,再次選取 [部署至 Web 應用程式] 圖示,再按兩下 [部署]。

  2. 等候部署完成,然後在通知快顯中選取 [ 瀏覽網站 ]。 您應該會看到 Welcome to Express 訊息已變更為 Welcome to Azure!

  1. 儲存您的變更,然後使用 az webapp up 命令重新部署應用程式,而 Linux 沒有自變數。 針對 Windows 新增 --os-type Windows

    az webapp up
    

    此命令會使用 .azure/config 檔案中本機快取的值,例如應用程式名稱、資源群組和 App Service 方案。

  2. 部署完成後,請重新整理網頁 http://<app-name>.azurewebsites.net。 您應該會看到 Welcome to Express 訊息已變更為 Welcome to Azure!

  1. 儲存變更,然後使用 FTP 用戶端重新部署應用程式。

  2. 部署完成後,請重新整理網頁 http://<app-name>.azurewebsites.net。 您應該會看到 Welcome to Express 訊息已變更為 Welcome to Azure!

資料流記錄

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

  1. 在 App Service 總管中,以滑鼠右鍵按兩下應用程式節點,然後選取 [啟動串流記錄]。

    Start Streaming Logs

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

az webapp log tail

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

您也可以使用 az webapp up 命令來包含 --logs 參數,以在部署時自動開啟記錄數據流。

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

若要隨時停止記錄串流,請在終端機中按 Ctrl+C。

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

  1. 在應用程式的相同 App Service 頁面中,使用左側功能表卷動至 [監視] 區段,然後選取 [記錄數據流]。

    Screenshot of Log stream in Azure 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的 Azure 擴充功能中,展開 [ 資源群組 ] 總管。

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

    Screenshot of the Visual Studio Code navigation to delete a resource that contains App Service resources.

  3. 出現提示時,輸入您要刪除的資源群組名稱,以確認您的刪除。 確認之後,就會刪除資源群組,並在完成時看到 通知

在上述步驟中,您已建立資源群組中的 Azure 資源。 資源群組的名稱,例如“appsvc_rg_Linux_CentralUS”,視您的位置而定。

如果您未來不需要這些資源,請執行下列命令來刪除資源群組:

az group delete --no-wait

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

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

不再需要時,您可以刪除資源群組、App Service 和所有相關資源。

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

    Resource group in App Service overview page

  2. 從 [ 資源群組] 頁面中,選取 [ 刪除資源群組]。 確認資源群組的名稱以完成刪除資源。

    Delete resource group

下一步

恭喜,您已成功完成本快速入門!

查看其他 Azure 擴充功能。

或安裝 適用於 Azure 擴充功能的 Node Pack 來取得它們。