Azure DevOps 部署到 VM (2) - Build

上一篇我們講到Git Repo的網站部署到VM上，那接下來說明一下如何Build之後再部署。

CI/CD#

這裡就講到DevOps中CI/CD的概念，CI指的是Continuous integration(持續整合)，CD則是Continuous Deployment(持續部署)，上篇文我們已經完成CD部分，我們這次再加入CI，CI通常會包含Build與Test，將打包好的程式碼進行測試，若測試完沒問題才部署出去。

程式碼#

同上篇文，我們先準備好NGINX VM的環境，並已經加入Environments，並編輯azure-pipelines.yml，貼上以上程式碼

1
trigger:
2
- main
3

4
pool:
5
  vmImage: ubuntu-latest
6

7
stages:
8
- stage: Build
9
  jobs:
10
  - job: build_npm
11
    steps:
12
    - task: NodeTool@0
13
      inputs:
14
        versionSpec: '10.x'
15
      displayName: 'Install Node.js'
16
    - script: echo "test" > test.html
17
    - publish: $(System.DefaultWorkingDirectory)
18
      artifact: afterbuild
19

20
- stage: Deploy
21
  dependsOn: Build
22
  condition: succeeded()
23
  jobs:
24
  - deployment: VMDeploy
25
    displayName: Deploy to VM
26
    environment:
27
      name: Production
28
      resourceType: virtualMachine
29
    strategy:
30
      runOnce:
31
        deploy:
32
          steps:
33
          - download: current
34
            artifact: afterbuild
35
          - script: rsync -avh --cvs-exclude $(Pipeline.Workspace)/afterbuild/ /var/www/html

說明一下stage、job、step、task概念，這幾個是個階層關係如下：

1
Pipeline
2
- Stage1
3
  - Job1
4
    - Step1
5
    - Step2
6
      - Task
7
      - Script
8
  - Job2
9
    - Step1
10
    - Step2
11
- Stage2

通常我們會將不同種大項目的工作分到不同stage，如Build、Test、Deploy。job則為stage下的子分類，例如Test中就可以分類為unit test、程式碼掃描等。step則為job下要執行的指令，可以包含task或script，其中task為微軟打包好的範本，可以使用參數來執行。

在Azure DevOps後台也可以看到不同Stage的狀態。依我們上面的YML，我們這邊有兩個Stage分別為Build、Deploy，裡面各有一個job。

Build程式碼說明#

1
- stage: Build
2
  jobs:
3
  - job: build_npm
4
    steps:
5
    - task: NodeTool@0                            # Step1
6
      inputs:
7
        versionSpec: '10.x'
8
      displayName: 'Install Node.js'
9
    - script: echo "test" > test.html             # Step2
10
    - publish: $(System.DefaultWorkingDirectory)  # Step3
11
      artifact: afterbuild

這段Code分為三個step我們逐步說明。

Step1: 我們先模擬一個打包前端的過程，通常是用npm等工具，我的範例就先用task來安裝node套件。
Step2: 這行可以放打包的指令，如npm run dev，由於這專案沒有放node的內容，我先手動產生一個test.html來當作打包好的檔案。
Step3: 由於我們目前是使用微軟提供的Pipelines Server進行打包，下一個Stage是在我們自己的Server執行，就會看不到我們打包好的檔案，因此要將打包的路徑放到artifact暫存，到下一個Stage下載回來，我們將這個artifact命名為afterbuild。更多artifact請參考微軟文件。

Deploy程式碼說明#

1
- stage: Deploy
2
  dependsOn: Build
3
  condition: succeeded()
4
  jobs:
5
  - deployment: VMDeploy
6
    displayName: Deploy to VM
7
    environment:
8
      name: Production
9
      resourceType: virtualMachine
10
    strategy:
11
      runOnce:
12
        deploy:
13
          steps:
14
          - download: current
15
            artifact: afterbuild
16
          - script: rsync -avh --cvs-exclude $(Pipeline.Workspace)/afterbuild/ /var/www/html

接下來說明部署的部分，部署裡面只有一個job，跟上篇文不同的地方在於，dependsOn用於指定先等Build stage執行完。condition succeeded則代表build stage要成功執行完成才會觸發這個stage。

而其中包含兩個Step，第一步是下載回剛剛上傳的artifact，要注意這邊名稱要一樣，第二步則是使用rsync將下載回來的artifact複製到目標路徑。

artifact的路徑會在 $(Pipeline.Workspace)下建立一個同名的資料夾。其他系統參數如上面用到的$ (System.DefaultWorkingDirectory)，可以看看微軟文件。

部署完成之後就到http:///test.html就可以查看到部署出去的檔案。

結語#

透過Azure DevOps可以輕鬆的在雲端進行打包再部署，下一篇我們會說到如何將機敏參數放到伺服器上，如資料庫密碼等。