We are not waiting for future, We create the future

Tags


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

9th August 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

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

IT manager & DevOps @Twin Synergy Co.,Ltd

View Comments