iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 23
0
Software Development

三十天利用Angular與.net Core開發實戰一波系列 第 23

Day 23 Angular專案部屬至Azure

今天來說一下我們前端的Angular專案如何部屬到Azure上

部屬有很多種方法

本篇參考各式文章後,整理兩種相對簡單好用的實作

Web App建立

  • 首先建一個Web App
  • App Service記得選F1免費的歐
  • 一個Web App會有一個資源群組App Service
  • 填寫好專案名稱30Days就可以建立囉

Azure App Service

  • 接著開啟VS CODE之前的AngularTri專案,下載這個Azure App Service這個套件

  • 點選左邊的Azure icon並登入你的Azure帳號

  • 登入後會出現類似iis各站台的管理畫面

將我們的AngularTri專案bulid成一包dist
dist裡面的html、CSS、js檔案給瀏覽器看

  • 在AngularTri專案下
ng build --prod

  • 點選剛剛建立30Days右鍵Deploy to Web App
  • 選擇dist裡面的這包AngularTri資料夾
  • 確認deploy後會自動開啟部屬的網址

    大功告成啦!!!

KUDU

看到這篇鐵人賽文章將網站架設到 Azure

可以直接把網址改成 https://[你的應用程式的名稱].scm.azurewebsites.net/

然後選擇Debug Console->CMD/PowerShell,接著進入site->wwwroot

接著把dist裡面的檔案拖曳至畫面上

這樣就完成部屬啦

真的是蠻神奇的耶~

參考資料

https://www.webcodegeeks.com/javascript/angular-js/deploy-angular-app-visual-studio-azure/
https://ithelp.ithome.com.tw/articles/10201687


上一篇
Day 22 MongoDB in Azure - Azure Cosmos DB
下一篇
Day 24 AngularTri專案-CORS
系列文
三十天利用Angular與.net Core開發實戰一波32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言