Tập tành CI-CD với dự án REACT

Overview

Trong blog CI-CD CHO DỰ ÁN CỦA BẠN mình đã giới thiệu về CI-CD và apply Gitlab CI vào dự án của bạn. Trong blog này mình sẽ giới thiệu với các bạn apply Gitlab CI vào dự án React của các bạn. Trong đó process Gitlab CI của chúng ta sẽ gồm có:

1. Thực hiện test với cypress
2. Deploy dự án lên Firebase hosting

Getting Started

Vì blog này mình chỉ tập trung vào triển khai CI-CD với dự án React nên mình sẽ bỏ qua phần code xây dựng TODO app với React. Vì vậy các bạn có thể sử dụng sẵn bộ source do mình chuẩn bị.

$ git clone https://gitlab.com/nvgm/todo-app-cicd.git && cd todo-app-cicd;

Cypress?

Cypress là một mã nguồn mở giúp bạn có thể viết test dễ dàng, dễ dàng tích hợp với CI cũng như record lại mỗi lần test của bạn. Xem thêm về Cypress ở https://www.cypress.io/

Firebase Hosting

Firebase cung cấp dịch vụ lưu trữ và triển khai một cách nhanh chóng cho dịch vụ web app của bạn. Xem thêm về firebase hosting ở https://firebase.google.com/docs/hosting

Solutions

Trong bài viết này mình sẽ không tập trung vào việc thực hiện test với cypress và deploy react app lên firebase mà chỉ tập trung vào việc setup CI-CD cho dự án. Về chi tiết test với cypress hay deploy react app lên firebase thì hẹn các bạn trong những bài blog tiếp theo.

Thông thường khi apply CI-CD vào dự án thì chúng ta thường có 3 stages là test, build và deploy. Stage test để khi dev push code lên repo thì CI sẽ chạy CI job test tự động để đảm bảo chất lượng code. Stage build là stage build để chuẩn bị deploy lên production. Stage deploy sẽ chứa các job deploy(job deploy lên staging, job deploy lên production…) job deploy sẽ để ở chế độ manual để ta có thể control deploy vào thời điểm nào thay vì tự động chạy mỗi khi source code thay đổi.

Khi có sự thay đổi source code thì đầu tiên job test sẽ được chạy. Nếu job test success thì ta có thể trigger để dạy job deploy và kết quả là TODO app của chúng ta sẽ được deploy lên production.

Đầu tiên để apply Gitlab CI vào dự án, ta sẽ tạo file .gitlab-ci.yml tại root project.

stages:
  - test
  - deploy

job_e2e_test:
  image: cypress/base:10
  stage: test
  cache:
    paths:
      - node_modules
  script:
    - yarn
    - yarn ci:e2e

job_deploy:
  image: node:12.16.3-alpine
  stage: deploy
  cache:
    paths:
      - node_modules
  script:
    - npm install -g firebase-tools
    - yarn build
    - firebase deploy --token "$FIREBASE_TOKEN"
  only:
    - master
  when: manual

Chúng ta định nghĩa 2 stages cho 2 job của chúng ta là test và deploy. Nếu pass job_e2e_test thì chúng ta sẽ có thể deploy TODO app lên firebase. Ngoài ra trong các job để tối ưu time chạy job ta chỉ định cache với path là node_modules. Với job_deploy ta chỉ định “when: manual” để control thời điểm ta deploy cũng như chỉ định “only: master” để đảm bảo code đã được review rồi merge vào master mới có thể chạy job_deploy. job_deploy có sử dụng FIREBASE_TOKEN nên ta sẽ set up environment CI-CD để đảm bảo vấn đề về bảo mật. Về phần script để triển khai cypress với CI-CD bạn có thể tham khảo chi tiết ở https://docs.cypress.io/guides/guides/continuous-integration.html#Setting-up-CI. Còn về chi tiết các bước triển khai dự án của bạn lên firebase mình sẽ chia sẻ ở trong các blog tiếp theo. Các bạn có thể xem thêm ở https://firebase.google.com/docs/hosting/quickstart.

Summary

Trong blog này mình đã giới thiệu với các bạn về việc triển khai CI-CD với dự án React. Tuy nhiên trong thực tế tuỳ trường hợp mà chúng ta sẽ có những số lượng job cho phù hợp. Ví dụ như stage test chúng ta có thể có job test cho coding convention, unit test, automation test… stage deploy sẽ phụ thuộc vào môi trường production của chúng ta là deploy lên firebase, aws, k8s… để điều chỉnh script cho phù hợp với bài toán.