ทำ CICD ให้กับ Reactjs บน Gitlab-ci

DevOps Aug 09, 2019

พอดีว่าได้มีโปรเจ็ดที่ต้องใช้งาน Reactjs ก็เลยได้ทำระบบ CICD ให้กับ Reactjs มาดูกันว่าจะเขียนยังไง

อันนี้เป็นโค็ดตัวอย่างที่ผมได้รองทำไว้สามารถ clone มาลองใช้งานได้เลย

https://gitlab.com/twin-opensource/reactjs-cicd

เรามาดูไฟล์ .gitlab-ci.yml กันก่อน

image: node:10-alpine

stages:
  - build
  - release

npm:
  stage: build
  script:
    - cd reactjs-cicd/
    - '[ -f package-lock.json ] && rm package-lock.json'
    - npm install --no-audit --silent
    - npm run build --prod
  cache:
    key: build-cache
    paths:
      - reactjs-cicd/node_modules
      - reactjs-cicd/build
  only:
    - master

docker-image:
  stage: release
  image: docker:latest
  services:
    - docker:dind
  cache:
    key: build-cache
    paths:
      - reactjs-cicd/build
    policy: pull
  script:
    - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
    - docker build -t $CI_REGISTRY_IMAGE:master .
    - docker push $CI_REGISTRY_IMAGE:master
  only:
    - master

ขั้นตอนโดยภาพรวม

  • ทำการติดตั้ง node_modules
  • ทำการ build เป็น static file
  • สร้าง docker image

ติดตั้ง node_modules

npm:
  stage: build
  script:
    - cd reactjs-cicd/
    - '[ -f package-lock.json ] && rm package-lock.json'
    - npm install --no-audit --silent
    - npm run build --prod
  cache:
    key: build-cache
    paths:
      - reactjs-cicd/node_modules
      - reactjs-cicd/build
  only:
    - master

ในขั้นตอนนี้เราจะใช้คำส่ัง npm install --no-audit --silent เพื่อทำการติดตั้ง node_modules/ และทำการ npm run build --prod เพื่อสร้างเป็น static file เก็บไว้ใน build/ จากนั้นทำการ cache เก็บไว้ชื่อ build-cache

สร้าง docker image

docker-image:
  stage: release
  image: docker:latest
  services:
    - docker:dind
  cache:
    key: build-cache
    paths:
      - reactjs-cicd/build
    policy: pull
  script:
    - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
    - docker build -t $CI_REGISTRY_IMAGE:master .
    - docker push $CI_REGISTRY_IMAGE:master
  only:
    - master

ขั้นตอนต่อมาคือการดาวโหลด build/ ที่ cache ไว้ใน job ก่อนหน้าลงมา แล้วทำการสร้าง docker image เก็บไว้ จากนั้นนำขึ้นไปฝากไว้ใน gitlab registry ของโปรเจ็ค โดยไฟล์ Dockerfile จะเป็นดังนี้

FROM nginx:1.13-alpine
RUN apk add --update tzdata && \
    cp /usr/share/zoneinfo/Asia/Bangkok /etc/localtime && \
    apk del tzdata
COPY ./default.conf /etc/nginx/conf.d/default.conf
COPY ./reactjs-cicd/build /usr/share/nginx/html
WORKDIR /usr/share/nginx/html

สุดท้ายเราก็เอา docker image ที่ได้ไปใช้งาน เช่น

$ docker run --rm -p 80:80 registry.gitlab.com/twin-opensource/reactjs-cicd:master

ลองเข้า http://localhost

หน้าเว็บที่ทำขึ้นมา

Arnon Kijlerdphon

IT manager & DevOps @Twin Synergy Co.,Ltd

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.