พอดีว่าได้มีโปรเจ็ดที่ต้องใช้งาน Reactjs ก็เลยได้ทำระบบ CICD ให้กับ Reactjs มาดูกันว่าจะเขียนยังไง
อันนี้เป็นโค็ดตัวอย่างที่ผมได้รองทำไว้สามารถ clone มาลองใช้งานได้เลย
เรามาดูไฟล์ .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
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:
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