Giới thiệu
Tự động hóa quy trình làm việc là một phần quan trọng giúp nâng cao chất lượng mã nguồn trong các ứng dụng, đặc biệt khi bạn làm việc trên cả mã frontend và backend trong cùng một kho lưu trữ. Trong bài viết này, chúng ta sẽ hướng dẫn bạn cách thiết lập quy trình tự động hóa trong GitHub cho các ứng dụng sử dụng Python (trên nền tảng Flask hoặc Django) và React.
Tại sao cần tự động hóa quy trình làm việc?
Tự động hóa không chỉ giúp kiểm tra và xác thực các thay đổi mã ngay lập tức mà còn đảm bảo phát hiện sớm các sự cố, từ đó tiết kiệm thời gian và công sức cho nhóm phát triển. Đặc biệt, thông qua việc sử dụng GitHub Actions, bạn có thể tự động hóa mọi thứ từ kiểm tra đến triển khai ứng dụng.
Giả định ban đầu
Chúng ta sẽ giả định rằng:
- Bạn đã viết các bài kiểm tra đơn vị cho các thành phần React và các route backend của mình.
- Dự án của bạn được thiết lập dưới dạng monorepo, với các thư mục riêng biệt cho frontend và backend.
- Bạn đã quen thuộc với GitHub Actions, sử dụng môi trường
ubuntu-latestmà GitHub cung cấp.
Bước 1: Tạo Quy Trình Làm Việc GitHub Actions
Trong bước này, chúng ta sẽ thiết lập hai quy trình làm việc GitHub Actions: một cho frontend và một cho backend. Các quy trình này sẽ tự động chạy khi có thay đổi được đẩy lên nhánh chính (main).
GitHub Action Workflow là gì?
GitHub Action Workflow là một tập hợp các hướng dẫn giúp GitHub thực hiện các tác vụ tự động dựa trên những sự kiện nhất định. Trong ví dụ này, workflow của chúng ta sẽ thực hiện kiểm tra và triển khai ứng dụng chỉ khi các bài kiểm tra vượt qua.
Quy Trình CI/CD Cho Frontend
Đầu tiên, tạo tệp mới tại .github/workflows/frontend.yml và thêm nội dung sau:
yaml
name: Frontend CI/CD Pipeline
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v3
- name: Cache Node.js modules
uses: actions/cache@v3
with:
path: ./frontend/node_modules
key: ${{ runner.os }}-node-${{ hashFiles('./frontend/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
- name: Set up Node.js
uses: actions/setup-node@v3
with:
node-version: '20'
- name: Install frontend dependencies
run: yarn install
working-directory: ./frontend
- name: Run frontend tests
run: yarn test
working-directory: ./frontendGiải thích từng phần:
- on: push: Kích hoạt workflow khi có thay đổi đẩy lên nhánh chính.
- Checkout code: Sử dụng GitHub Action để kiểm tra mã từ kho lưu trữ.
- Cache Node.js modules: Lưu trữ các modules để tăng tốc quy trình làm việc trong các lần chạy sau.
- Set up Node.js: Thiết lập môi trường Node.js cho việc cài đặt và kiểm tra dependencies.
- Install dependencies and run tests: Cài đặt gói bằng Yarn và chạy các bài kiểm tra để đảm bảo rằng frontend hoạt động đúng.
Quy Trình CI/CD Cho Backend
Tiếp theo, tạo tệp mới cho quy trình backend tại .github/workflows/backend.yml. Nội dung của tệp này sẽ là:
yaml
name: Backend CI/CD Pipeline
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v3
- name: Cache Python packages
uses: actions/cache@v3
with:
path: ~/.cache/pip
key: ${{ runner.os }}-pip-${{ hashFiles('./backend/requirements.txt') }}
restore-keys: |
${{ runner.os }}-pip-
- name: Set up Python
uses: actions/setup-python@v4
with:
python-version: '3.8'
- name: Create Virtual Environment
run: python3 -m venv venv
working-directory: ./backend
- name: Install backend dependencies
run: |
source venv/bin/activate
pip install -r requirements.txt
working-directory: ./backend
- name: Configure DATABASE_URL securely
env:
DATABASE_URL: ${{ secrets.DATABASE_URL }}
run: |
if [ -z "$DATABASE_URL" ]; then
echo "DATABASE_URL is missing" >&2
exit 1
fi
- name: Run tests with pytest
run: |
source venv/bin/activate
pytest tests/ --doctest-modules -q --disable-warnings
working-directory: ./backend
- name: Deploy to Production
if: ${{ success() }}
run: |
echo "Deploying to production..."
- name: Notify on Failure
if: ${{ failure() }}
run: |
echo "Build failed! Sending notification..."Giải thích quy trình này:
- Kiểm tra mã và lưu trữ các gói Python để tăng tốc lần chạy sau.
- Thiết lập Python và tạo môi trường ảo cho các dependencies.
- Cài đặt dependency từ
requirements.txt. - Định cấu hình các biến môi trường thông qua GitHub Secrets.
- Chạy các bài kiểm tra với pytest để xác minh hoạt động của backend.
Bước 2: Định cấu hình Secrets
Tạo GitHub Secrets để bảo mật thông tin nhạy cảm như chuỗi kết nối cơ sở dữ liệu:
- Truy cập vào kho lưu trữ GitHub và chọn Settings.
- Trong thanh bên, chọn Secrets and variables, sau đó nhấp vào Actions.
- Thêm một repository secret mới:
- Name:
DATABASE_URL - Value: Chuỗi kết nối cơ sở dữ liệu thực tế của bạn.
- Name:
Bước 3: Commit và Push Thay Đổi
Khi các tệp workflow đã sẵn sàng, thực hiện commit và push lên nhánh main. GitHub Actions sẽ tự động kích hoạt các workflow một cách nhanh chóng.
Bước 4: Theo Dõi Quá Trình Chạy Workflow
Sau khi push thay đổi, vào tab Actions trong kho lưu trữ GitHub để theo dõi quá trình chạy workflow. Bạn sẽ thấy danh sách từng lần workflow được kích hoạt cùng trạng thái thành công, thất bại hoặc đang tiến hành.
Phân tích Nhật Ký Chạy Workflow
Nhật ký mỗi bước cung cấp thông tin về bất kỳ lỗi nào xảy ra:
- Nếu dependency không cài đặt được, bạn sẽ thấy thông báo chi tiết.
- Nếu có bài kiểm tra thất bại, nhật ký sẽ ghi rõ lý do.
- Những lỗi liên quan đến secret thiếu cũng sẽ được ghi lại để bạn chú ý.
Kết Luận
Bằng cách thực hiện theo các bước trên, bạn đã hoàn thành việc thiết lập quy trình tự động hóa trên GitHub cho cả frontend và backend của ứng dụng. Việc tự động chạy các bài kiểm tra với mỗi lần push lên nhánh chính giúp duy trì chất lượng mã và độ tin cậy cao cho dự án của bạn. Sự tự động hóa này cho phép bạn tập trung phát triển tính năng mới, trong khi quy trình kiểm tra giúp phát hiện sớm các vấn đề.
source: viblo
