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

Tại sao lại chọn GitLab ?

Câu trả lời đơn giản là GitLab cung cấp một sản phẩm Community Edition (CE) miễn phí hỗ trợ các repositories riêng. Một câu trả lời đầy đủ hơn được đề xuất bởi khẩu hiệu của họ.

Nền tảng cho các nhà phát triển hiện đại:

GitLab thống nhất các vấn đề, review code, CI và CD thành một giao diện người dùng duy nhất

— GitLab team

Ví dụ: thay vì dùng GitHub + Travis CI cho một giải pháp tích hợp liên tục, GitLab cung cấp tất cả các chức năng cần thiết.

Thông thường với các sản phẩm cung cấp một loạt các chức năng như vậy là bạn đánh đổi chất lượng để có được một giao diện duy nhất. Tôi đã rất ngạc nhiên khi biết rằng đây Gitlab không như vậy; ít nhất là cho tính năng tích hợp liên tục của nó.

Setup Project

Hãy để chúng ta tóm tắt dự án chi tiết trong Travis CI:

• Dự án được khởi tạo bằng công cụ Firebase CLI.
• Sử dụng create-react-app;; một thư mục chứa ứng dụng React, client, được tạo tại thư mục gốc của dự án.
• Dự án được cấu hình sao cho thư mục ./client/build, được sử dụng cho tính năng Firebase Hosting; phục vụ ứng dụng React.
• Dự án được cấu hình với hai bí danh Firebase; staging và production được hỗ trợ bởi hai kiểu project Firebase.

Sau đó chúng ta thiết lập nó trên GitLab với ba nhánh:

• master: đây là source; nơi tất cả các nhánh tính năng app React.
• staging: Merge trong master để deploy vào staging environment.
• production: Merge trong staging để deploy vào production environment.

Test và Deploy thủ công

Khi chúng ta sẵn sàng test và Deploy vào môi trường staging hoặc production, chúng ta (từ nhánh đã kiểm tra tương ứng):

Bước 1: Build ứng dụng Client; từ thư mục client.

yarn build

Bước 2: Test Client; từ thư mục client.

yarn test

Bước 3 :Deploy từ project

firebase deploy --project staging

Lưu ý: Sử dụng rõ ràng và riêng biệt staging hoặc production.

Cấu hình GitLab CI tối thiểu

Trong trường hợp của chúng ta, mục tiêu là tạo ra các pipelines GitLab mỗi khi merge thành staging hoặc production.

Trong thư mục dự án, chúng ta tạo một tập tin như sau:

.gitlab-ci.yml

image: node:6.11.3my_job
  script:
    - echo "my_job"

Lưu ý: Tệp cấu hình này cần nằm trong commit của nhánh cụ thể (staging hoặc production).

Cấu hình image được yêu cầu chỉ định image Docker sẽ sử dụng. Trong trường hợp này, chúng ta sử dụng bản vá mới nhất của NodeJS 6.11.X. Phiên bản này là sự lựa chọn tốt nhất cho Firebase và create-react-app.

Cấu hình có một danh sách các cấu hình công việc, ví dụ: my_job, khiến GitLab tạo ra một công việc trong quá trình thực hiện pipeline. Đối với mỗi công việc, GitLab thực hiện như sau:

1. .Chạy một container Docker (dựa trên hình ảnh được chỉ định).
2. Clone repository và kiểm tra nhánh đã kích hoạt pipeline.
3. Từ thư mục gốc của repo, thực thi một hoặc nhiều scripts.

Ví dụ: đây là nhật ký dựa trên cấu hình tối thiểu

Running with gitlab-ci-multi-runner 9.5.0 (413da38)
  on docker-auto-scale (4e4528ca)
Using Docker executor with image node:6.11.3 ...
Using docker image sha256:758ceadfe38bbb3b4028e6982c57a2a19cb48e1d0dd85ea24425b3d7fa73575d for predefined container...
Pulling docker image node:6.11.3 ...
Using docker image node:6.11.3 ID=sha256:8d51167c40895d2e1b4875c5c50754d5a030111d6c7d5928b8617312b20b7a3a for build container...
Running on runner-4e4528ca-project-4088932-concurrent-0 via runner-4e4528ca-machine-1504791660-5131c3a9-digital-ocean-2gb...
Cloning repository...
Cloning into '/builds/john.tucker/firebase-gitlab'...
Checking out 8ca53150 as staging...
Skipping Git submodules setup
$ echo "my_job"
my_job
Job succeeded

Về mặt kỹ thuật, một pipeline kích hoạt việc thực hiện một chuỗi các giai đoạn (chạy tuyến tính); mỗi công việc bao gồm một chuỗi các công việc (chạy song song).

Trừ khi được cấu hình một pipeline bao gồm ba giai đoạn: xây dựng, kiểm tra và triển khai. bao gồm ba giai đoạn: build, test, và deploy. Tương tự như vậy, trừ khi được cấu hình khác, các công việc thuộc về giai đoạn test

Nhánh và tùy chỉnh Stages

Trong trường hợp, chúng ta chỉ muốn kích hoạt việc tạo ra các pipelines từ các nhánh staging và production.

Chúng ta cũng muốn thêm một giai đoạn cài đặt bổ sung (cài đặt các phần liên quan cho cả functions và client). Cấu hình như sau

.gitlab-ci.yml

image: node:6.11.3stages:
  - install
  - build
  - test
  - deployinstall_functions:
  stage: install
  only:
    - staging
    - production
  script:
    - echo "install_functions"install_client:
  stage: install
  only:
    - staging
    - production
  script:
    - echo "install_client"build_client:
  stage: build
  only:
    - staging
    - production
  script:
    - echo "build_client"test_client:
  stage: test
  only:
    - staging
    - production
  script:
    - echo "test_client"deploy_all_staging:
  stage: deploy
  only:
    - staging
  script:
    - echo "deploy_all"deploy_all_production:
  stage: deploy
  only:
    - production
  script:
    - echo "deploy_all"

Với việc thực hiện pipeline mẫu (đang thực hiện) trông giống như sau:

Kết luận

Qua bài viết chúng ta đã hiểu cách cách cấu hình cho pipeline. Các khái niệm về staging và production. Sử dụng nhánh. Hãy tận dụng để có thể tạo ra CI/CD với build, test, deploy app một cách tuyệt vời nhất.

Tham khảo thêm tại đây : Deploy App NodeJS với GitLab CI/CD