{tocify} $title={Table of Content}
Giới thiệu
- CI/CD (Continuous Integration/Continuous Delivery) - Tích hợp liện tục / Phân phối liên tục.
- CI/CD Pipeline cho phép chúng ta tự động hóa phần lớn quy trình build và deploy code, giúp quá trình này nhanh hơn và an toàn hơn.
- Phần CI bao gồm việc tự động hóa xây dựng, đóng gói và thử nghiệm các ứng dụng của chúng ta. Đối với hầu hết các phần, điều này được tự động hóa bởi Angular. Và, khi chúng ta đã viết các bài kiểm tra đơn vị của mình, chúng cũng dễ dàng được tích hợp vào quy trình.
- Phần CD là phần phân phối tự động cho ứng dụng của chúng ta. Trong trường hợp ở đây là việc deploy lên Firebase.
- Trong bài này, chúng ta sẽ tự động hóa CI/CD Pipeline bằng GitHub Action. Có nghĩa là mỗi khi chúng ta thực thi lệnh git push origin master GitHub sẽ tự động khởi động quá trình build, đóng gói, test và deploy. Chúng ta sẽ bao gồm:
> Deployment Setup
- Writing Our Deployment (YAML)
- Secret Keys (With GitHub)Chuẩn bị
- Đầu tiên bạn cần có một ứng dụng Angular đã được deploy lên Firebase Hosting theo cách thủ công bằng firebase deploy - nếu bạn chưa thực hiện việc này, hãy làm theo hướng dẫn này.
- Đã cài đặt firebase-tools (npm i -g firebase-tools)
Thực hiện
Tạo và lưu Firebase Token
- Install npm i -g firebase-tools
- Chạy lệnh firebase login:ci - Lệnh này trả về 1 token để sử dụng cho CI server
Waiting for authentication...
✔ Success! Use this token to login on a CI server:
1/A29..............y
Example: firebase deploy --token "\$FIREBASE_TOKEN"
Tạo thư mục GitHub Actions
Cách 1: Tạo workflow bằng command line dưới local và push lên GitHub
- Thư mục GitHub Actions là nơi lưu trữ các file YAML cho các quy trình CI/CD.
YAML là ngôn ngữ tuần tự hóa dữ liệu (Data Serialization Language), biểu diễn dữ liệu dưới dạng text giúp con người dễ đọc hiểu, tương tự như JSON và XML. Nó sử dụng định dạng thụt đầu dòng (giống python) để xác định cấu trúc. File YAML lưu với phần mở rộng .yml hoặc .yaml, các file này được sử dụng để làm file cấu hình cho nhiều ứng dụng như Docker, PHP,...
- Tạo thư mục .github trong thư mục gốc của project:
cd project-name
mkdir .github
cd .github
mkdir workflows
touch workflows/main.yml
// Các lệnh trên sẽ tạo ra: .github/workflows/main.ymlThư mục .github/workflows khi được đẩy lên GitHub sẽ được GitHub đọc và sử dụng làm thư mục GitHub Action.
Cách 2: Tạo workflow trên GitHub
Tại repo github của bạn, chọn tab Actions và nhấp vào link Set up a workflow yourself để tạo workflow đầu tiên.
name: CI - Build and Deploy to Firebase
on:
push:
branches:
- master
- release/*
jobs:
firebase-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@master
- uses: actions/setup-node@master
with:
node-version: '10.x'
- run: npm install
- run: npm run build --prod
- uses: w9jds/firebase-action@master
with:
args: deploy --only hosting
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}Click vào Start commit để ở phía bên phải để commit new workflow của bạn. Vậy là xong phần thực hiện rồi đó.
Phân tích file main.yml
name
name: CI - Build and Deploy to FirebaseDùng để đặt tên cho các phần khác nhau trong code của chúng ta (Optional)
Customize workflow trigger
on:
push:
branches:
- master
- release/*Phần này là định nghĩa xem khi nào workflow sẽ hoạt động, ở đây nó sẽ chỉ trigger vào workflow khi có hành động push vào branch master hoặc release/. Bạn có thể thay đổi tùy theo yêu cầu của dự án nhé.
Customize job name
jobs:
firebase-deploy:Tên của job sẽ chạy, hiện tại là firebase-deploy. Bạn có thể thay đổi tùy ý sao cho dễ hiểu.
runs-on: ubuntu-latestChúng ta thực thi mọi thứ trên máy Ubuntu mới nhất ubuntu-latest.
Customize steps
steps:Phần này sẽ khai bao của bước sẽ được thực hiện tuần tự khi workflow được kích hoạt.
Với mỗi step chúng ta có thể thêm khai báo name để chú thích rõ mục đích của step đó:
- name: Checkout
uses: actions/checkout@master
- name: Initialize Node
uses: actions/setup-node@master
- name: Install Dependencies
run: npm install- uses: actions/checkout@masterLệnh này tương đương với: git checkout master. Để chỉ ra rằng, workflow sẽ được thực thi trên nhánh master.
- uses: actions/setup-node@master
with:
node-version: '10.x'Cài đặt Node.js với version 10.x để chúng ta có thể sử dụng npm trong các bước sau.
- run: npm installChạy lệnh npm install để cài đặt các packages và dependencies trong file package.json.
- run: npm run build --prodChúng ta chạy lệnh này để biên dịch ứng dụng, npm run build sẽ được dịch thành ng build.
Giống như chúng ta đã làm với ng build - chúng ta thêm --prod vào npm run build để build cho môi trường production.
Trước khi chạy lệnh build, chúng ta có thêm thêm bước Testing như sau:
- name: Install Dependencies
run: npm install
- name: Testing
run: npm test
- name: Build
run: npm run build --prodDeploy to Firebase
- uses: w9jds/firebase-action@master
with:
args: deploy --only hosting
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}Chúng ta triển khai ứng dụng bằng cách sử dụng w9jds/firebase-action@master với 2 tham số deploy --only hosting (chỉ deploy cho Firebase Hosting) và FIREBASE_TOKEN (mã bảo mật Firebase của chúng ta) dùng để xác thực tài khoản Firebase - token này được lưu trữ trong repo của chúng ta.
- ${{ secrets.FIREBASE_TOKEN }} cho phép chúng ta truy cập giá trị của FIREBASE_TOKEN từ Secrets của GitHub mà không cần lưu trực tiếp vào các file trong repo của chúng ta.
Test
Sau khi đã thiết lập thành công, bạn hãy thực hiện push một vài code thay đổi lên nhánh master hoặc release/* và kiểm tra. Bạn sẽ thấy code mới được deploy tự động lên Firebase Hosting. Bạn cũng có thể kiểm tra các lần CI chạy, các step trên github nữa.
