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

在本篇就來接續 "透過 VS Code 建立 Web App (Node.js) 並佈署到 Azure App Service (上)" 的相關介紹,完成發佈 Web 應用(Node.js) 到 Azure 的 Web App Service 吧!


GoGoGo~~~

 

好的,接下來使用先前在 VS Code 中安裝的 Azure App Service,並且瀏覽到在 Azure 建立好的 Web App Service 後,來調整其中的 "Application Settings"。

首先,先新增一個新的 Setting。




接著在 "Command Palette" (命令選擇區) 當中輸入 "WEBSITE_NODE_DEFAULT_VERSION"。


 

接著繼續輸入,應用程式所使用的版本編號,此時查詢使用的最新穩定版為 14.15.0。



新增完成後畫面如下:




再次新增一個 Setting。




再次出現 Command Palette (命令選擇區)的輸入,此次輸入 "SCM_DO_BUILD_DURING_DEPLOYMENT"。




接著再輸入需設定的 Value 值 "1"。



完成後的結果如下:

 

接著到 VS Code 左邊點選 Git 的操作,然後點選 "Initialize Repository" 建立初始的 Repository (存放庫) 資訊,以便後續可透過 Git 發佈應用到 Azure Web Service 當中。



在 Commit(認可) 的 Message(訊息) 的輸入框鍵入文字。



若不知道要鍵入什麼 Message(訊息) 文字到 Commit(認可),通常第一次 Commit(認可) 大多都會輸入 "Initial commit" 的文字 Message(訊息)。


 

接著就點選 "Commit"(認可)。



完成後就會看到 Changes(變更) 為 0。



再次回到 VS Code 的 Azure App Service 當中,點選 Deployments。



變更其發佈設定檔,點選 "Configure Deployment Source..."。


 

再次出現的 Command Palette(命令選擇區) 輸入框。


 

點選 "LocalGit"。



接著會看到 VS Code 在其右下角會出現設定訊息。



完成後,原本的 Deployments 旁邊也會出現 Git 的字樣。




同時 Command Palette(命令選擇區)的輸入框會再出現,請你選擇要發佈的 Web 應用 資料夾。



在此,當然是選擇先前建立的 Web 應用資料夾。



接著 VS Code 的右下角會出現詢問是否要建立此資料夾為 workspace 跟 Azure 上的 Web App Service 的發佈關係,請選擇 "Yes"(亦可選擇 "Skip for now",但之後再次要發佈 Web 應用時就會再跳出來問)。



如果 VSCode 有跳出來詢問因為 Git 的紀錄不同是否要 "Force Push"(強迫推送),就點選囉😗



等到 VS Code 的右下角再次跳出詢問是否瀏覽網站,恭喜,已經發佈成功。


可點選 "Browse Website"。



此時 VS Code 會再詢問一次是否開啟,點選 "Open"。



就會看到此在 Azure 上建立的 Web App Service 所提供的對外瀏覽網域 "xxxxxxxx.azurewebsites.net",能夠成功的瀏覽到 express-generator 所建立出來的預設網頁頁面。


以上大功告成!

 

希望對於一些 VS Code 在整合 Azure 使用 Web App Service 的操作,比較不是這麼熟悉的捧友,再加上要搭配 Node.js (非.NET 應用)的處理時,能夠有些助益😃

 

下面補上在上篇中所提到的 express-generator 套件移除的畫面結果:


 


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" 軟體製作。