iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 8
2
Microsoft Azure

Azure Serverless 平步青雲,漫步雲端系列 第 8

Day 08- 佛要金裝,人要衣裝,我要前端:狼人殺 - 實戰 - 前端設定(Azure Static Web Apps版)

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20200923/20130168vajKW3zQKs.png

前言

由於上一篇Azure DevOps因為預設的建構設定筆者雷了兩天,今天下午才找到問題修正昨天的文章,接下來筆者帶大家用最新的服務來使用Azure Static Web Apps,而此服務還算是預覽版,所以尚未支援Azure DevOps。想知道怎麼用最新趨勢的Azure Static Web Apps?看這篇就對了!

程式碼代管

同步Repo

https://ithelp.ithome.com.tw/upload/images/20200923/20130168DyctVDYhPH.png

由於Azure Static Web Apps尚未支援Azure DevOps 而筆者又很懶得去弄同步,所以我們可以利用Pipeline加上同步的方式來同步兩個儲存庫,首先把DevOps連結到GitHub。

客戶的需求都是沒辦法滿足的。

https://ithelp.ithome.com.tw/upload/images/20200923/20130168Zj9yU8oH6p.png

steps:
- bash: |
    git push --prune https://(這邊是你的PAT)@github.com/(這邊是你的Git帳號)/(這邊是你的REPO名稱) \
        +refs/remotes/origin/*:refs/heads/* +refs/tags/*:refs/tags/*
  displayName: 'Copy to Github'
  condition: eq(variables['Build.SourceBranch'], 'refs/heads/master')

我們進到Pipeline裡面點選編輯,並在安裝Tool之前就做同步的動作,插入上面的程式碼(注意要在Steps後面),創建PAT的方式請看這邊

https://ithelp.ithome.com.tw/upload/images/20200923/20130168z4fMED7Ypg.png

接下來Run起來的話我們原本在Github的專案就會被同步過去了!
於是我們在尚未支援Azure Repos之前至少有一個方式可以同步過去。

懶人有又懶又快的做法,但口袋要有一點點深。

連接Azure Static Web Apps

https://ithelp.ithome.com.tw/upload/images/20200923/20130168O7jFC93POk.png

接下來我們可以開始建立Static Web Apps服務,我們可以看見可以連結到GitHub並選擇分支,範本有常見的靜態網頁的建構方式,可以選擇Angular。

https://ithelp.ithome.com.tw/upload/images/20200923/20130168i1u9wvN6kr.png

建立好之後就會發現Static Web Apps資源內有已經幫忙設定好的URL,目前因為GitHub Actions尚未完成,所以會顯示沒有內容。

https://ithelp.ithome.com.tw/upload/images/20200923/20130168yezljCQH7T.png

我們轉到GitHub內可以看到Azure Static Web Apps已經幫我們排好Actions在跑了,

https://ithelp.ithome.com.tw/upload/images/20200923/20130168rMdZNac0x6.png

還可以點進去看跑的結果。
這時候已經完成了,我們回去看剛剛Azure Static Web Apps幫我們釋出的URL

https://ithelp.ithome.com.tw/upload/images/20200923/20130168VsFCE53HLo.png

這樣就完成了,是不是比傳統傳送到Blob Storage省事許多!

你只是看起來很努力,但沒有效率。

本日小結

這兩天都在修修改改這兩種不一樣的部署文件,在DevOps預設的建構設定如果在壓縮檔案的時候沒有取消設定的話,預設會包含到壓縮的資料夾,而因為這樣筆者雷到兩天,今天把這兩天文章修修改改之後,做好了順利進行的版本給大家使用,並因為Azure Static Web Apps尚未支援Azure Repos的關係,筆者利用Azure DevOps將這個專案給Push到GitHub內並跑流程,如果想要以一個團隊協作在Azure DevOps內正確使用的話,應該是要在GitHub Actions內埋一個觸發器,並將這個觸發器放到Azure Pipeline的Release內作統一控管。

明天帶大家進入前端Angular開發的篇章!

使用前詳閱說明書,沒有看的東西都是自己腦補出來害死自己用的。


上一篇
Day 07- 佛要金裝,人要衣裝,我要前端:狼人殺 - 實戰 - 前端設定(Azure DevOps版)
下一篇
Day 09- 丹脣外朗,皓齒內鮮:狼人殺 - 實戰 - 前端開發 (一)
系列文
Azure Serverless 平步青雲,漫步雲端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言