在 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 和 npm。 執行 命令
node --version
以確認已安裝 Node.js。 - 安裝 Visual Studio Code。
- Visual Studio Code 的 Azure App 服務 延伸模組。
- 具有有效訂用帳戶的 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。
使用 Express Generator 建立 Node.js 應用程式,此產生器預設會隨 Node.js 和 NPM 一起安裝。
npx express-generator myExpressApp --view ejs
變更為應用程式的目錄,並安裝 NPM 套件。
cd myExpressApp && npm install
使用偵錯資訊啟動開發伺服器。
DEBUG=myexpressapp:* npm start
在瀏覽器中,巡覽至
http://localhost:3000
。 您應該會看到類似這樣的畫面︰
部署至 Azure
繼續之前,請確定您已安裝並設定所有必要條件。
注意
若要讓 Node.js 應用程式在 Azure 中執行,它必須接聽環境變數所提供的 PORT
埠。 在產生的 Express 應用程式中,此環境變數已在啟動腳本 bin/www 中使用(搜尋 process.env.PORT
)。
登入 Azure
在終端機中,確定您位於 myExpressApp 目錄中,然後使用下列命令啟動 Visual Studio Code:
code .
在 Visual Studio Code 的 [活動列] 中 ,選取 Azure 標誌。
在 App Service 總管中,選取 [登入 Azure...],然後遵循指示。
在 Visual Studio Code 中,您應該會在 [狀態欄] 和 Azure APP SERVICE 總管中的訂用帳戶中看到您的 Azure 電子郵件位址。
設定 App Service 應用程式並部署程式代碼
- 選取 myExpressApp 資料夾。
以滑鼠右鍵按兩下 [應用程式服務],然後選取 [ 建立新的Web 應用程式]。 預設會使用Linux容器。
輸入 Web 應用程式的全域唯一名稱,然後按 Enter 鍵。 名稱在所有 Azure 中都必須是唯一的,且只使用英數位元 ('A-Z'、'a-z' 和 '0-9') 和連字元 ('-')。
在 [選取運行時間堆棧] 中,選取您想要的 Node.js 版本。 建議使用 LTS 版本。
在 [選取定價層] 中,選取 [免費][F1], 並等候在 Azure 中建立資源。
在快顯 [一律將工作區 “myExpressApp” 部署至 <app-name>“中,選取 [ 是]。 如此一來,只要您位於相同的工作區,Visual Studio Code 每次都會部署到相同的 App Service 應用程式。
雖然 Visual Studio Code 會建立 Azure 資源並部署程式代碼,但它會顯示 進度通知。
部署完成後,請在通知快顯中選取 [ 瀏覽網站 ]。 瀏覽器應該會顯示 Express 預設頁面。
在終端機中,請確定您位於 myExpressApp 目錄中,並使用 az webapp up 命令,在本機資料夾 (myExpressApp) 中部署程式代碼:
az webapp up --sku F1 --name <app-name>
az
如果無法辨識命令,請確定您已安裝 Azure CLI,如設定初始環境中所述。<app_name>
取代為所有 Azure 中唯一名稱(有效字元為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 部署的相關訊息。 接著會提供訊息:「您可以在 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
命令會執行下列動作:
建立預設 資源群組。
建立預設 的 App Service 方案。
Zip 會從目前的工作目錄部署 所有檔案, 並啟用組建自動化。
在 .azure/config 檔案中本機快取參數,以便在稍後使用
az webapp up
或其他az webapp
命令從項目資料夾部署時,不需要再次指定參數。 預設會自動使用快取的值。
登入 Azure 入口網站
登入 Azure 入口網站。
建立 Azure 資源
若要開始建立 Node.js 應用程式,請瀏覽至 https://portal.azure.com/#create/Microsoft.WebSite。
在 [基本] 索引標籤的 [項目詳細數據] 底下,確定已選取正確的訂用帳戶,然後選取 [建立新的資源群組]。 輸入 myResourceGroup 作為名稱。
在 [實例詳細數據] 底下,輸入 Web 應用程式的全域唯一名稱,然後選取 [ 程序代碼]。 選取 [節點 18 LTS運行時間堆棧]、[操作系統] 和 [要從中提供服務的區域]。
在 [App Service 方案] 底下,選取 [建立新的 App Service 方案]。 輸入 myAppServicePlan 以取得名稱。 若要變更為免費層,請選取 [變更大小],選取 [開發/測試 ] 索引卷標,選取 F1,然後選取頁面底部的 [ 套用 ] 按鈕。
選取頁面底部的 [檢閱 + 建立] 按鈕。
驗證執行之後,選取頁面底部的 [ 建立] 按鈕。
當部署完成時,選取 [前往資源]。
取得 FTPS 認證
Azure App 服務支援FTP/S 部署的兩種認證類型。 這些認證與您的 Azure 訂用帳戶認證不同。 在本節中,您會取得 要搭配 FileZilla 使用的應用程式範圍認證 。
從 [App Service 應用程式] 頁面,選取 左側功能表中的 [部署中心 ],然後選取 [ FTPS 認證 ] 索引標籤。
開啟 FileZilla 並建立新的網站。
從 [FTPS 認證] 索引標籤的 [應用程式範圍] 底下,將 FTPS 端點、FTPS 使用者名稱和密碼複製到 FileZilla。
在 FileZilla 中選取 [連線]。
使用 FTPS 部署檔案
將所有檔案和目錄檔案 複製到 Azure 中的 /site/wwwroot 目錄 。
瀏覽至應用程式的 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 方案。
部署完成後,請重新整理網頁
http://<app-name>.azurewebsites.net
。 您應該會看到Welcome to Express
訊息已變更為Welcome to Azure!
。
儲存變更,然後使用 FTP 用戶端重新部署應用程式。
部署完成後,請重新整理網頁
http://<app-name>.azurewebsites.net
。 您應該會看到Welcome to Express
訊息已變更為Welcome to Azure!
。
資料流記錄
您可以直接在 Visual Studio Code 輸出視窗中,從 Azure 應用程式串流記錄輸出 (呼叫 console.log()
) 。
在 App Service 總管中,以滑鼠右鍵按兩下應用程式節點,然後選取 [啟動串流記錄]。
如果系統要求您重新啟動應用程式,請選取 [ 是]。 重新啟動應用程式之後,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 檔案中快取的資源組名。
您也可以使用 az webapp up 命令來包含 --logs
參數,以在部署時自動開啟記錄數據流。
重新整理瀏覽器中的應用程式以產生主控台記錄,其中包含描述應用程式 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 ---
清除資源
在上述步驟中,您已建立資源群組中的 Azure 資源。 本快速入門中的建立步驟會將所有資源放在此資源群組中。 若要清除,您只需要移除資源群組。
在Visual Studio的 Azure 擴充功能中,展開 [ 資源群組 ] 總管。
展開訂用帳戶,以滑鼠右鍵按下您稍早建立的資源群組,然後選取 [ 刪除]。
出現提示時,輸入您要刪除的資源群組名稱,以確認您的刪除。 確認之後,就會刪除資源群組,並在完成時看到 通知 。
在上述步驟中,您已建立資源群組中的 Azure 資源。 資源群組的名稱,例如“appsvc_rg_Linux_CentralUS”,視您的位置而定。
如果您未來不需要這些資源,請執行下列命令來刪除資源群組:
az group delete --no-wait
此命令會使用 .azure/config 檔案中快取的資源組名。
自 --no-wait
變數可讓命令在作業完成之前傳回。
不再需要時,您可以刪除資源群組、App Service 和所有相關資源。
從您的 App Service 概觀頁面中,選取您在 [建立 Azure 資源] 步驟中建立的資源群組。
從 [ 資源群組] 頁面中,選取 [ 刪除資源群組]。 確認資源群組的名稱以完成刪除資源。
下一步
恭喜,您已成功完成本快速入門!
查看其他 Azure 擴充功能。
或安裝 適用於 Azure 擴充功能的 Node Pack 來取得它們。