1 of 20

DevOps: �Continuous �Deployment / Delivery

輔大資管

吳濟聰老師

2 of 20

DevOps

  • DevOps
    • 技術面
      • 敏捷開發的工作從強調Integrate Often (Continuous Integration)，後來更進一步強調Continuous Delivery(或Continuous Deployment)，再進一步希望把開發與維運進行整合 (DevOps)

3 of 20

DevOps

  • DevOps
    • 管理面
      • DevOps 重視的是開發到維運的整合，包括
        • 從開發到維運(Dev to Ops)(如:持續性交付的管理流程)
        • 維運回饋給開發(Ops to Dev)
        • 如何促成各方的合作(如:Dev & Ops)才是主要的重點。

4 of 20

Continuous Integration

  • Continuous Integration
    • 最基本的就是利用git去整合程式
    • 確保整合時不會將有問題的程式整合進去，通常要先通過測試才能整合
      • 手動測試
      • 自動測試

5 of 20

Continuous Deployment

  • Continuous Deployment
    • 當我們把程式部署到雲端，很多雲端平台都可以進行自動部署
    • 可以將存放在github的程式 (如:react或vue專案)部署到github pages
    • 也可以將存放在github的程式 (如:react或vue專案)部署到vercel

​

6 of 20

Continuous Deployment

  • Continuous Deployment
    • 將存放在github的程式 (如:react或vue專案)部署到vercel
      • 註冊
        • https://vercel.com/signup
      • 註冊過的話，直接登入
        • https://vercel.com/login
        • 選擇Continue with GitHub

​

​

​

7 of 20

Continuous Deployment

  • Continuous Deployment
    • 將存放在github的程式 (如:react或vue專案)部署到vercel
      • 第一次，要新增一個GitHub帳號

​

8 of 20

Continuous Deployment

  • Continuous Deployment
    • 將存放在github的程式 (如:react或vue專案)部署到vercel
      • 選擇帳號

9 of 20

Continuous Deployment

  • Continuous Deployment
    • 將存放在github的程式 (如:react或vue專案)部署到vercel
      • 選擇要安裝的repository

10 of 20

Continuous Deployment

  • Continuous Deployment
    • 將存放在github的程式 (如:react或vue專案)部署到vercel
      • 安裝後，匯入repository

11 of 20

Continuous Deployment

  • Continuous Deployment
    • 將存放在github的程式 (如:react或vue專案)部署到vercel
      • 因為老師是選擇organization，所以，要新增一個團隊

12 of 20

Continuous Deployment

  • Continuous Deployment
    • 將存放在github的程式 (如:react或vue專案)部署到vercel
      • 在這裡可以設定佈署的環境變數

13 of 20

Continuous Deployment

  • Continuous Deployment
    • 將存放在github的程式 (如:react或vue專案)部署到vercel
      • Environment Variables就是放.env.local裡的變數
      • 點選「Deploy」，就完成部署了

14 of 20

Continuous Deployment

  • Continuous Deployment
    • 將存放在github的程式 (如:react或vue專案)部署到vercel
      • 只要push進main (或任何分支)，就會自動佈署了~

15 of 20

Continuous Deployment

  • Continuous Deployment
    • 將存放在github的程式 (如:react或vue專案)部署到vercel
      • 管理專案，選擇專案

16 of 20

Continuous Deployment

  • Continuous Deployment
    • 將存放在github的程式 (如:react或vue專案)部署到vercel
      • 管理專案，選擇專案

17 of 20

Continuous Deployment

  • Continuous Deployment
    • 將存放在github的程式 (如:react或vue專案)部署到vercel
      • 選擇Deployments，可以看部署狀態

18 of 20

Continuous Deployment

  • Continuous Deployment
    • 將存放在github的程式 (如:react或vue專案)部署到vercel
      • 選擇Deployments，可以看任何一次的部署

19 of 20

Continuous Deployment

  • Continuous Deployment
    • 將存放在github的程式 (如:react或vue專案)部署到vercel
      • 選擇Settings，可以管理設定

20 of 20

Continuous Deployment

  • Continuous Deployment
    • 將存放在github的程式 (如:react或vue專案)部署到vercel
      • 選擇Environment Variables，可以管理環境變數
        • 可設定多組變數