透過 VS Code 建立 Web App (Node.js) 並佈署到 Azure App Service (上)

對於一個相對長期大多是使用 Visual Studio 開發 .NET 相關(而且是 Mobile App - Xamarin) 應用的開發者來說,突然要在 Visual Studio Code 操作起全指令的方式,來做相關的開發操作還真有點不太熟悉呢😅

但也因為如此,更需要詳細的紀錄下來,讓自己好能回顧與記憶囉!

 

GoGoGo~~~


首先,還是不囉嗦先到 Azure Portal 建立一個 Web App Service:


接著就是操作 Web App Service 的建立(雖然也可以透過 VS Code 當中直接建立就是):


在此跟過往習慣不同的是選用了 Node 做為應用的執行階段環境,OS 系統選用 Linux,伺服器區域請選擇離自己應用最近的資料中心(圖中會選擇 East US 是另有他用...)


接著因為第一次建立 Web App Service 在此 資源群組 當中,所以要另外建立一個 App Service Plan 給 Web App Service 來使用。


因為只是測試開發,所以此 Web App Service 的 SKU 跟大小就調整至 F1 等級。





再次確認沒問題後就點選 "建立"。


理論上沒什麼問題,驗證通過後就會開始進行部屬。



等待一段時間後(相對其他 PaaS 服務, 建立 Web App Service 服務的等待是很短的,大約都可在一分鐘內完成),即便建立完畢。


 

接著就開啟今日的主角 Visual Studio Code 並到 Extensions(延伸模組) 來安裝 "Azure App Service" 這個延伸模組,以協助佈署 Web App 到 Azure 上。

 

安裝完成後,在 VS Code 的左側列會出現 Azure App Service 的按鈕。

 

點選後,即會詢問相關 Azure 的訂閱帳戶授權驗證所需的帳號登入,完成後就會看到在該訂閱帳戶當中所建立的 App Service,下圖中就顯示著前面步驟所建立的 Web App Service。



接著就在 VS Code 中,選定電腦的中一個空資料夾來作為接下來要放置 Web 應用的地方。


並且打開 Terminal 來要求 npm 安裝 express-generator 的指令: "npm install -g express-generator"。

其中 -g 參數是指全域(影響範圍為整體電腦操作 npm 指令)安裝,若無 -g 則會安裝在區域(影響範圍則為該資料夾操作的 npm 指令)

日後要刪除 express-generator 也很簡單,只要在 Terminal 中下達 "npm uninstall -g express-generator" 即可移除。



安裝完成後即會顯示如下畫面:



接著在透過剛剛安裝的 express-generator 來建立一個簡單的 Node.js 的應用 Web 範本,在此下達 "express --no-view --git" 的指令。

其 --no-view 用意是建立只有一個靜態網頁的網站範本,--git 則是使用 git 作為版控設定,後續會需要使用 git 來發佈 Web 應用到 Azure 上,所以在此加入此參數。

如果指令遇到類似如下圖回應:


請另外用管理者權限啟動 PowerShell 後下達 "Set-ExecutionPolicy -ExecutionPolicy RemoteSigned" 指令,其設定的安全性需求請詳閱 微軟 PowerShell 文件


完成後,再次回到 VSCode 當中,即可正確執行其相關指令。



不出一會功夫,一個使用 Node.js 運作的基本的 Web 應用範本已經建立完成。



而 express-generator 也會很貼心的提醒後續要使用的步驟與指令,於是就再繼續下達 "npm install" 的指令,要求安裝相關的依存元件。



安裝完成後,會顯示其結果如下:

 

至此完成透過 express-generator 產生出一個使用 Node.js 運作的 Web 應用空範本。

 

如果想在本機端執行此 Web 應用的話,可以根據上述 express-generator 的提示,再下達設定 "SET Debug=myweb:*" 與執行 "npm start" 的指令,就可以使用本機電腦的瀏覽器看見此網站的執行(預設是打開瀏覽器瀏覽 localhost:3000)。


若對於 expression-generator 有興趣的捧友可參考下列連結:
Express application generator (expressjs.com)

 

有需要繼續閱讀下去的捧友,請點選下列連結閱讀:
透過 VS Code 建立 Web App (Node.js) 並佈署到 Azure App Service (下)


 


I'm a Microsoft MVP - Developer Technologies (From 2015 ~).
 

MVP_Logo



I focus on the following topics: Xamarin Technology, Azure, Mobile DevOps, and Microsoft EM+S.

If you want to know more about them, welcome to my website:
https://jamestsai.tw 


本部落格文章之圖片相關後製處理皆透過 Techsmith 公司 所贊助其授權使用之 "Snagit" 與 "Snagit Editor" 軟體製作。