iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
1
Microsoft Azure

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

Day 07- 佛要金裝,人要衣裝,我要前端:狼人殺 - 實戰 - 前端設定(Azure DevOps版)

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20200922/20130168ysqlZKyQo9.png

由於Azure尚未有如Firebase, Amplify這樣全靜態託管的Static Web App服務,目前只有預覽版本的Static Web Apps,我們這篇原本規劃設計的Web App Service未有全託管的方式,較不符合我們的本系列宗旨,這邊先修正以儲存空間配合CDN的方式做持續整合持續部署,而明天用預覽版的Static Web Apps來部署。

前端準備

Azure DevOps and Azure Repos

不講廢話,直接開工,我們本系列就是要利用Azure建立一個雲端專案,因此首先利用Azure的DevOps功能裡的Repos功能建立一個程式碼儲存庫。

https://ithelp.ithome.com.tw/upload/images/20200922/20130168dF9eW3Nkzn.png

Azure本身有完整的DevOps架構可以讓開發專案有很好的管控。

https://ithelp.ithome.com.tw/upload/images/20200922/20130168mwLoHeaj5B.png

建立Repos並利用編輯器Clone到本地的資料夾的做法上,這個流程令筆者意外的覺得比AWS設定Codecommit的時候親切易用很多。

https://ithelp.ithome.com.tw/upload/images/20200922/20130168nJNZ4GhUE1.png

馬上建立一個新的Angular專案,並推送到Azure Repos
而推送之前我們首先必須要針對CI的環境寫npm的Script,我們需要在package.json檔案內增加幾個指令:

  "scripts": {
    ...
    "test-in-ci": "ng test --no-watch --browsers=ChromeHeadless --code-coverage",
    "build-prod": "ng build --prod",
    ...
  },

test-in-ci:我們用來跑測試,當然不重視測試的話可以不放(但強烈建議從現在開始養成測試好習慣)
build-prod:建構上線版本的產品。

Azure DevOps Pipeline

設定

https://ithelp.ithome.com.tw/upload/images/20200922/20130168AlVW08RqJE.png

推送成功之後我們便要來建立Pipeline流程,達到專案更新之後便會持續部署、持續整合的流程。

https://ithelp.ithome.com.tw/upload/images/20200922/20130168wDgSptRCpg.png

Azure DevOps的好處就是可以很好的把專案需要的相關功能整合到同一個地方,只要點選Create Pipeline之後便可以開始做建構專案的設定。

https://ithelp.ithome.com.tw/upload/images/20200922/201301684v8ZU51Co5.png

而Pipeline設定裡面我們可以知道,Azure本身支援各項版控的儲存庫。
選好我們原先支援的Azure Repos。

https://ithelp.ithome.com.tw/upload/images/20200922/20130168wffCweggA1.png

就可以看到方才建立的狼人殺前端儲存庫。

https://ithelp.ithome.com.tw/upload/images/20200922/20130168W5dNP4nzUT.png

並可以看到預設建構的流程,Azure本身就有一些時下常見的App建構的腳本,也可選擇自訂並放在儲存庫內的腳本。
而我們選Angular。

設定建構流程

https://ithelp.ithome.com.tw/upload/images/20200922/20130168F6vyYBjLUR.png

選好預構建的流程腳本後,我們需要增加一些CI/CD的設定。

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

首先可以從右邊的小助手幫你找到一些範本YAML,我們前面都適用命令列來做一些建構指令

1. 預先建構需要的套件

- task: CmdLine@2
  inputs:
    script: 'npm ci'
  displayName: 'Install Dependencies'

我們放入npm ci來安裝建構產品所需要的套件的指令。

2. 測試指令

- task: CmdLine@2
  inputs:
    script: 'npm run test-in-ci'
  displayName: 'Run Tests'

跑測試,當然不重視測試的話可以不放(但強烈建議從現在開始養成測試好習慣)

3. 建構上線版本的專案

- task: CmdLine@2
  inputs:
    script: 'npm run build-prod'
  displayName: 'Build the TWMH'

跑我們預先做好的build-prod的指令

3. 建構上線版本的專案

- task: CmdLine@2
  inputs:
    script: 'npm run build-prod'
  displayName: 'Build the TWMH'

跑我們預先做好的build-prod的指令

4. 複製資料夾

- task: CopyFiles@2
  displayName: 'Copy Files'
  inputs:
    SourceFolder: '$(Build.SourcesDirectory)/dist'
    TargetFolder: '$(Build.ArtifactStagingDirectory)'
    CleanTargetFolder: true

將建構好的資料夾放到部署前資料夾,並將部署前資料夾清空再放入。

5. 封裝資料夾

- task: ArchiveFiles@2
  displayName: 'Archive Files'
  inputs:
    rootFolderOrFile: '$(Build.ArtifactStagingDirectory)'
    includeRootFolder: false
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
    replaceExistingArchive: true

將剛剛的資料夾封裝,記得不要勾選includeRootFolder,筆者被這個雷兩天。

6. 釋出版本

- task: PublishBuildArtifacts@1
  displayName: 'Publish Artifact: staticwebsite'
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)'
    ArtifactName: 'TWMH'
    publishLocation: 'Container'

釋出剛剛的封裝,準備給下一階段部署。

完整範例檔案

# Node.js with Angular
# Build a Node.js project that uses Angular.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
- master

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- task: CmdLine@2
  inputs:
    script: 'npm ci'
  displayName: 'Install Dependencies'

- task: CmdLine@2
  inputs:
    script: 'npm run test-in-ci'
  displayName: 'Run Tests'

- task: CmdLine@2
  inputs:
    script: 'npm run build-prod'
  displayName: 'Build the TWMH'

- task: CopyFiles@2
  displayName: 'Copy Files'
  inputs:
    SourceFolder: '$(Build.SourcesDirectory)/dist'
    TargetFolder: '$(Build.ArtifactStagingDirectory)'
    CleanTargetFolder: true

- task: ArchiveFiles@2
  displayName: 'Archive Files'
  inputs:
    rootFolderOrFile: '$(Build.ArtifactStagingDirectory)'
    includeRootFolder: false
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
    replaceExistingArchive: true

- task: PublishBuildArtifacts@1
  displayName: 'Publish Artifact: staticwebsite'
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)'
    ArtifactName: 'TWMH'
    publishLocation: 'Container'

跑建構

https://ithelp.ithome.com.tw/upload/images/20200923/20130168515JSOX7ss.png

接下來我們測試跑流程,還可以看建構的狀態,掌握是否有問題馬上做修正。

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

可以看到建構的時候會根據當初設定的Display name的Script去跑,可以很方便的去看每一個步驟的Log。
接下來建構沒問題的話,我們可以開始做持續整合部署的流程。

Azure DevOps Release

我們要已經做好CI的部分,現在要開始做CD的部分。

定義Artifact

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

點選左邊的Artifact來定義觸發的事件。

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

選擇剛剛的Pipeline當作來源

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

並點選Artifact右上角的閃電圖案來打開持續部署。

定義部署的Stage

https://ithelp.ithome.com.tw/upload/images/20200923/201301684yZGwZLVCY.png
https://ithelp.ithome.com.tw/upload/images/20200923/20130168ARv3AwtWLZ.png

選擇新的Stage並命名成Deploy方便我們辨識,在詢問範本的部分我們從Empty job開始,因為目前還沒有供Azure Static Web Apps使用的範本,我們先部署到Storage來做使用。
點選Task的Tab,

我們需要完成兩件事情來部署靜態網頁文件:

  1. 解壓縮封存的文件
  2. 使用Azure CLI部署到Blob Storage (不會開啟靜態網站設定的話可以看這篇

解壓縮封存文件

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

我們先將pipeline建構完的zip給解壓縮到資料夾內,準備複製到Azure Blob Storage

複製文件

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

目前我們設定Azure File Copy,而筆者測試V4版本會有問題,因此我們採用V3版本。

https://ithelp.ithome.com.tw/upload/images/20200923/20130168MRzDWXSYfy.png
我們手動Run Deploy,成功之後可以來測試完整更新版本。

PUSH

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

Master偵測到更新之後就會開始跑流程。

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

跑完CI就會進入CD流程。

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

接下來就大功告成!

本日小節

這次利用了Azure DevOps的方式部署到Azure Storage Blob,而在設定前端頁面,實際上就已經算是帶領著大家進行如何讓專案更有規模化的部署。而Azure的相關整理上雖然整合了非常多易用的功能,目前Azure必須使用Storage Blob的傳統方式部署,明天會帶領大家用預覽版的Azure Static Web Apps來部署網站。

意外總是在你想不到的時候出現,不然怎麼叫意外。


上一篇
Day 06- 尋覓上天梯:狼人殺 - 實戰前準備 - 專案規劃
下一篇
Day 08- 佛要金裝,人要衣裝,我要前端:狼人殺 - 實戰 - 前端設定(Azure Static Web Apps版)
系列文
Azure Serverless 平步青雲,漫步雲端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言