Article overview

Giả sử chúng ta phát triển một sản phẩm Website với ReactJS và sử dụng Static Website Hosting của AWS S3. Mỗi lần deploy đều cần thực hiện build source và upload manual.
Mục tiêu là triển khai CD để thay thế cho các công việc manual không cần thiết và giảm thiểu các sai sót ngoài ý muốn.

Tổng quan về các công nghệ sử dụng:

• ReactJS Website
• Gitlab-CI
• AWS S3, AWS CLI
• Môi trường MacOS

Table of contents

Chúng ta cần một số bước sau:

• Liên kết và khởi tạo Runner với Gitlab repository
• [Cài đặt và cấu hình môi trường tại thiết bị chạy service runner](## Cài đặt và cấu hình môi trường tại thiết bị chạy service runner)
• [Cấu hình các job CI/CD với .gitlab-ci.xml và Gitlab-CI](## Cấu hình các job CI/CD với gitlab-ci.xml và Gitlab-CI)

Cài đặt và cấu hình môi trường tại thiết bị chạy service runner

Giả định ở thiết bị MacOS chạy service runner đã build được Website ReactJS, chúng ta sẽ skip qua phần cài đặt cho ReactJS. Đầu tiên, chúng ta cần cài đặt AWS CLI.
Sau khi cài đặt xong, ta thực hiện config với thông tin của AWS User có quyền deploy lên AWS S3 với câu lệnh sau:

$ aws configure
AWS Access Key ID [None]: AKIAIOSFODNN7EXAMPLE
AWS Secret Access Key [None]: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
Default region name [None]: us-west-2
Default output format [None]: json

Cấu hình các job CI/CD với gitlab-ci.xml và Gitlab-CI

Đầu tiên, thay vì upload bằng tay các file trong thư mục build/ chúng ta sẽ sử dụng command aws s3 sync như sau:
aws s3 sync build/ s3://ww95 với ww95 là tên của Bucket đang Host Website.
Sau đó, chúng ta sẽ cài đặt command package.json như sau:

  "scripts": {
    "build": "react-scripts build", // Build source code để deploy
    "deploy": "aws s3 sync build/ s3://ww95" // Thực hiện deploy lên S3
  },

Tiếp đó, ta sẽ cấu hình .gitlab-ci.yml để hệ thống tự động deploy khi có thay đổi trên nhánh master.

stages:
  - Deployment
deploy:
  stage: Deployment
  before_script: []
  only:
      - master
  allow_failure: true
  script:
    - yarn install
    - yarn build
    - yarn deploy

Tuy nhiên, khi chạy thực tế trên Gitlab-CI ta sẽ gặp lỗi sau:

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically. 
Failed to compile.

Để giải quyết vấn đề này ta phải setting lại process.env.CI = false bằng hai cách sau:

• Thay đổi cấu hình .gitlab-ci.yml từ yarn build -> CI=false yarn build.
• Cài đặt biến môi trường trong Gitlab-CI như ảnh sau
  

Sau đó merge code vào master, và hưởng thành quả. Từ giờ các bạn không cần phải deploy bằng tay nữa rồi, chúc các bạn may mắn.

Authors

MinhNN44