iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 30
0
Microsoft Azure

Azure 帶你飛上天系列 第 30

[30] [蝦咪!連小學生都會] ➠這不是終點,而是另一個起點

  • 時間飛逝,好快就到了30天/images/emoticon/emoticon30.gif!!
  • 先做個技術內容的結尾,先將我們目標完成吧!
  • 首先是Vue.js的安裝與設定內容
  • 指令:vue create vue-azure-app-service
    https://ithelp.ithome.com.tw/upload/images/20200930/20114581ctQHgQgzao.png

https://ithelp.ithome.com.tw/upload/images/20200930/20114581a0jhbJh4e5.png

https://ithelp.ithome.com.tw/upload/images/20200930/201145819RcxEm4jMM.png

https://ithelp.ithome.com.tw/upload/images/20200930/20114581oBOE4iv061.png

https://ithelp.ithome.com.tw/upload/images/20200930/20114581NMHlgFUXzO.png

https://ithelp.ithome.com.tw/upload/images/20200930/20114581GinF4t4Wqj.png

  • 輕輕鬆鬆上傳至Azure

  • 收先必須要在本機端先安裝Azure APP,這個沒什麼,照著截圖點下去就對了/images/emoticon/emoticon08.gif

https://ithelp.ithome.com.tw/upload/images/20200930/20114581sJjBBOgZQP.png

https://ithelp.ithome.com.tw/upload/images/20200930/20114581UjJTAZz7Dp.png

  • 接著設定config,這個請找到public 路徑,也是照著截圖跟著做就對了!以下複製貼上,請服用。
  • 檔名:ecosystem.config.js
  • 內容
module.exports = {
  apps: [
    {
      script: "npx serve -s"
    }
  ]
};

https://ithelp.ithome.com.tw/upload/images/20200930/2011458186kTdgR43h.png

https://ithelp.ithome.com.tw/upload/images/20200930/20114581MEISH5PHlu.png

  • 可以嘗試改改Vue.js的內容
    https://ithelp.ithome.com.tw/upload/images/20200930/20114581nAV03TLas6.png

  • build完要上傳的內容

  • 以下為指令內容

  • npm install -g serve

  • serve -s dist

  • npm run build
    https://ithelp.ithome.com.tw/upload/images/20200930/20114581rizuGrE4pt.png

https://ithelp.ithome.com.tw/upload/images/20200930/20114581hPkvXMQtRJ.png

  • 在本機端測試沒問題之後就可以上傳囉/images/emoticon/emoticon08.gif
    https://ithelp.ithome.com.tw/upload/images/20200930/20114581wY3YxRowQS.png

  • 上傳完之後,怎麼驗證沒問題呢?如果有學會如何架設一個靜態的web service, 如果忘記也沒關係,請看我們一一開頭的教學,就會知道在browser上面key網址驗證囉!

後記: 寫完三十篇真的非常過癮,不知道為什麼自己在忙碌的上班時間之餘,還有辦法擠出時間來寫作,在過程中也趁此機會閱讀許多優秀的文章,其實筆者是擅長前端開發,明年我還會再來分享前端開發的部分,目標是撰寫更多更生動的內容分享,感謝主辦單位給予的平台/images/emoticon/emoticon08.gif


上一篇
[29] [蝦咪!連小學生都會] ➠ 讓Azure穿美美
系列文
Azure 帶你飛上天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言