DevOps

DevOps

2022/07/30 (新增連結)
2023/08/22 (新增連結)
2023/10/30 (新增投影片)
2023/11/12 (更新投影片)

基本概念

DevOps.pptx

2021/11/26
2023/11/12 (更新)

CD-vercel.pptx

2023/10/30

持續性交付/部署 (Continuous Delivery, CD)

持續性整合 (Continuous Integration, CI)

工具

實作範例

Gitlab提供gitlab pages讓我們可以部署靜態網頁，所以，我們可以利用gitlab + gitlab pages部署react專案，來讓大家看一下一個非常陽春的CICD，部署後的網頁: https://benwu.gitlab.io/my-awesome-app/ (詳參: Build a React Website with full CI/CD in less than 2 minutes)

CICD設定檔

首先，我們需要一個react的專案，你需要在你的react專案裡新增一個設定檔.gitlab-ci.yml:

在設定檔的第一步是要設定一個docker，因為我們的react需要node，所以我們用的是docker hub上面的node image (https://hub.docker.com/_/node)

# Using the node image to build the React app

image: node

因為老師是利用Create-React-App (CRA)產生react專案，所以，需要一些設定:

# Announce the URL as per CRA docs

# https://create-react-app.dev/docs/advanced-configuration/

variables:

  PUBLIC_URL: /my-awesome-app

# Cache node modules - speeds up future builds

cache:

  paths:

  - node_modules

接下來定義stage (先設定一個stage: deploy)

# Name the stages involved in the pipeline

stages:

- deploy

接下來設定要放到pages的內容

# Job name for gitlab to recognise this results in assets for Gitlab Pages

# https://docs.gitlab.com/ee/user/project/pages/introduction.html#gitlab-pages-requirements

pages:

對應的stage (deploy)

  stage: deploy

放到pages之前要進行的動作，先利用npm安裝應有的packages，build，將舊檔案放到_public，將build好的檔案從build移到public

  script:

    - npm install # Install all dependencies

    - npm run build --prod # Build for prod

    - cp public/index.html public/404.html # Not necessary, but helps with https://medium.com/@pshrmn/demystifying-single-page-applications-3068d0555d46

    - mv public _public # CRA and gitlab pages both use the public folder. Only do this in a build pipeline.

    - mv build public # Move build files to public dir for Gitlab Pages

接下來設定路徑為public，並且設定只適用在master branch

  artifacts:

    paths:

    - public # The built files for Gitlab Pages to serve

  only:

    - master # Only run on master branch

完整內容

.gitlab-ci.yml

# Using the node image to build the React app

image: node


# Announce the URL as per CRA docs

# https://create-react-app.dev/docs/advanced-configuration/

variables:

  PUBLIC_URL: /my-awesome-app

# Cache node modules - speeds up future builds

cache:

  paths:

  - node_modules


# Name the stages involved in the pipeline

stages:

- deploy


# Job name for gitlab to recognise this results in assets for Gitlab Pages

# https://docs.gitlab.com/ee/user/project/pages/introduction.html#gitlab-pages-requirements

pages:

  stage: deploy

  script:

    - npm install # Install all dependencies

    - npm run build --prod # Build for production

    - cp public/index.html public/404.html # Not necessary, but helps with https://medium.com/@pshrmn/demystifying-single-page-applications-3068d0555d46

    - mv public _public # CRA and gitlab pages both use the public folder. Only do this in a build pipeline.

    - mv build public # Move build files to public dir for Gitlab Pages

  artifacts:

    paths:

    - public # The built files for Gitlab Pages to serve

  only:

    - master # Only run on master branch

{

  "name": "my-awesome-app",

  "version": "0.1.0",

  "private": true,

  "homepage": ".",

  "dependencies": {

    "react": "^16.8.6",

    "react-dom": "^16.8.6",

    "react-scripts": "2.1.8"

  },

  "scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build",

    "test": "react-scripts test",

    "eject": "react-scripts eject"

  },

  "eslintConfig": {

    "extends": "react-app"

  },

  "browserslist": [

    ">0.2%",

    "not dead",

    "not ie <= 11",

    "not op_mini all"

  ]

}


參考資料

DevOps

DevSecOps

CI

CICD

DevOps Tools

Feature Management

GitLab

CICD on Gitlab & AWS

TDD & CICD

Docker