Tự học GitLab CI với Firebase và React – phần 2

Cache

Khi bạn chạy Yarn, Yarn duy trì bộ đệm của tất cả các gói đã tải xuống với app React. Bộ đệm này tăng tốc đáng kể các cài đặt trong tương lai của các gói đó.

Chúng ta có thể sử dụng tính năng bộ nhớ đệm GitLab, để giữ bộ đệm Yarn này giữa các công việc; về cơ bản gắn bộ đệm trước khi tập lệnh chạy. Trong trường hợp này, tạo bộ đệm global (khả dụng cho tất cả các công việc) của tất cả các tệp được tạo trong thư mục .cache_yarn trong thư mục gốc của dự án Firebase.

image: node:6.11.3cache:
  key: cache_yarn
  paths:
  - .cache_yarnstages:
...

Key cache là một định danh tùy ý nhưng duy nhất cho bộ đệm.

Install Stage

Hai ứng dụng JavaScript trong dự án của chúng ta (functions và client) sau này cần cài đặt các dependencies của chúng.

• functions: Mặc dù app NodeJS này không có kiểm tra cũng như không build, nhưng deployment sau này yêu cầu deploy các dependencies.
• client: App React này đều có các bài tests và build đòi hỏi dependencies.

Với suy nghĩ này, chúng ta cập nhật các công việc cài đặt chạy song song.

...
install_functions:
  stage: install
  script:
    - cd ./functions && yarn install --cache-folder ../.cache_yarn
  only:
    - staging
    - production
  artifacts:
    paths:
    - functions/node_modulesinstall_client:
  stage: install
  script:
    - cd ./client && yarn install --cache-folder ../.cache_yarn
  only:
    - staging
    - production
  artifacts:
    paths:
    - client/node_modules
...

Một số quan sát:

• Chúng ta đặt Yarn để sử dụng thư mục để lưu trong bộ nhớ cache với GitLab làm bộ đệm.
• Artifacts là các thư mục mà chúng ta có thể có các công việc sau này sử dụng trước khi các tập lệnh của chúng được chạy, ví dụ:  ./functions/node_modules được yêu cầu như một phần của bước triển khai app React.

Build và Test Stages

Như chúng ta đã quan sát trước đây, quá trình build và test phụ thuộc vào các dependencies được cài đặt trên client.

Ngoài ra, bước triển khai sau này phụ thuộc vào đầu ra của quá trình build client; ./client/build.

...
build_client:
  stage: build
  script:
    - cd ./client && yarn build
  only:
    - staging
    - production
  dependencies:
    - install_client
  artifacts:
    paths:
    - client/buildtest_client:
  stage: test
  script:
    - cd ./client && yarn test
  only:
    - staging
    - production
  dependencies:
    - install_client
...

Deploy Stage

Không giống như các giai đoạn trước, giai đoạn deploy đòi hỏi các công việc khác nhau cho staging và production; chúng ta có một ví dụ Firebase như sau.

Ngoài ra, vì chúng ta không muốn lưu trữ các key deploy Firebase trong kho lưu trữ, chúng ta sử dụng tính năng secret variables(biến bí mật) GitLab.

Cuối cùng, chúng ta sử dụng tính năng environment(môi trường) GitLab để lưu log hoạt động deploy cho từng môi trường staging và production.

deploy_all_staging:
  stage: deploy
  script:
    - yarn global add firebase-tools --cache-folder ../.cache_yarn
    - firebase deploy --token $FIREBASE_DEPLOY_KEY_STAGING --project staging
  only:
    - staging
  environment:
    name: staging
  dependencies:
    - install_functions
    - build_clientdeploy_all_production:
  stage: deploy
  script:
    - yarn global add firebase-tools --cache-folder ../.cache_yarn
    - firebase deploy --token $FIREBASE_DEPLOY_KEY_PRODUCTION --project production
  only:
    - production
  environment:
    name: production
  dependencies:
    - install_functions
    - build_client

Dưới đây là một ví dụ về những gì môi trường xác định cung cấp cho bạn.

Quan trọng ở đây là nút Re-deploy (được gắn nhãn Rollback nếu có nhiều hơn một triển khai) sẽ chạy lại công việc triển khai với các artifacts có sẵn tại thời điểm đó.

Kết luận

Qua bài viết chúng ta đã hiểu được cách sử dụng Gitlab CD/CI với Firebase và React. Mong bạn đã hiểu rõ được và áp dụng vào project thực tế.

Tham khảo thêm DevOps : Deploy App NodeJS với GitLab CI/CD

HocWeb VN

Bài viết này được sưu tầm và tổng hợp từ nhiều nguồn trên Internet.

Nếu có gì không hiểu thì inbox messenger bên dưới mình hỗ trợ thêm nhé.