Tự động hóa quy trình làm việc là một bước thiết yếu giúp bạn duy trì chất lượng mã trong các ứng dụng của mình, đặc biệt khi làm việc trên cả mã frontend và backend trong một kho lưu trữ duy nhất.
Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách thiết lập quy trình làm việc tự động trên GitHub cho backend Python (sử dụng Flask hoặc Django) và frontend React.
Các quy trình làm việc này giúp kiểm tra và xác thực các thay đổi mã tự động, đảm bảo rằng bất kỳ sự cố nào cũng được phát hiện sớm.
Chúng ta sẽ giả sử:
- 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, nền tảng chúng ta sẽ sử dụng để tự động hóa, và bạn đang sử dụng môi trường ubuntu-latest được cung cấp bởi GitHub.
Bước 1: Tạo quy trình làm việc GitHub Actions
Trong bước này, chúng ta sẽ xác định hai quy trình làm việc GitHub Actions, một cho frontend và một cho backend. Các quy trình làm việc này sẽ tự động chạy các bài kiểm tra bất cứ khi nào có thay đổi được đẩy lên nhánh main.
Vậy GitHub Action Workflow là gì?
Một GitHub Action workflow là một tập hợp các hướng dẫn cho GitHub biết cách tự động thực hiện các tác vụ dựa trên các sự kiện nhất định. Ở đây, quy trình làm việc của chúng ta sẽ chạy các bài kiểm tra và triển khai ứng dụng chỉ khi các bài kiểm tra vượt qua. Các quy trình làm việc được kích hoạt bởi các sự kiện, chẳng hạn như một push lên một nhánh, và bao gồm các job xác định các tác vụ mà chúng ta muốn tự động hóa.
Quy trình CI/CD Frontend
Hãy bắt đầu bằng cách tạo một tệp mới trong kho lưu trữ của bạn tại .github/workflows/frontend.yml. Tệp này sẽ thiết lập một quy trình tự động để xử lý việc kiểm tra và triển khai frontend. Sau đó, xác định quy trình làm việc với nội dung sau:
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: ./frontend
Dưới đây là phân tích chức năng của từng phần:
- on: push: Điều này kích hoạt quy trình làm việc bất cứ khi nào có thay đổi được đẩy lên nhánh main.
- Checkout code: Bước này sử dụng GitHub Action để kiểm tra mã kho lưu trữ.
- Cache Node.js modules: Lưu trữ node_modules để tăng tốc độ thực thi quy trình làm việc trong các lần chạy tiếp theo.
- Set up Node.js: Thiết lập môi trường Node.js để cài đặt và kiểm tra dependency.
- Install dependencies and run tests: Cài đặt các gói bằng Yarn và sau đó chạy các bài kiểm tra đã viết sẵn để xác minh rằng frontend hoạt động như mong đợi.
Quy trình CI/CD Backend
Bây giờ, hãy tạo một tệp riêng cho quy trình làm việc backend tại .github/workflows/backend.yml. Tệp này sẽ tự động hóa việc kiểm tra và triển khai cho backend Python.
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..."
Dưới đây là những gì quy trình làm việc này thực hiện:
- Kiểm tra mã và lưu trữ các gói Python để thực thi nhanh hơn trong các lần chạy lặp lại.
- Thiết lập Python và tạo môi trường ảo để cách ly các dependency.
- Cài đặt dependency trong môi trường ảo từ requirements.txt.
- Định cấu hình các biến môi trường một cách an toàn với GitHub Secrets. Trong ví dụ này, chúng ta đang sử dụng URL cơ sở dữ liệu được lưu trữ trong một GitHub secret để truy cập an toàn.
- Chạy các bài kiểm tra backend với pytest, kiểm tra xem các route và chức năng backend hoạt động chính xác.
Bước 2: Định cấu hình Secrets
Vì lý do bảo mật, hãy thiết lập GitHub Secrets để lưu trữ thông tin nhạy cảm, chẳng hạn như chuỗi kết nối cơ sở dữ liệu.
Đầu tiên, hãy truy cập kho lưu trữ GitHub của bạn và chọn Settings.
Tiếp theo, trong thanh bên, chọn "Secrets and variables", sau đó nhấp vào "Actions".
Cuối cùng, hãy 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.
Việc sử dụng GitHub Secrets giúp giữ an toàn cho dữ liệu nhạy cảm và ngăn không cho nó xuất hiện trong mã cơ sở của bạn.
Bước 3: Commit và Push các thay đổi
Khi các tệp quy trình làm việc của bạn đã sẵn sàng, hãy commit và push các thay đổi lên nhánh main. Mỗi khi bạn push các thay đổi lên main, GitHub Actions sẽ tự động kích hoạt các quy trình làm việc này, đảm bảo mã của bạn được kiểm tra kỹ lưỡng.
Bước 4: Theo dõi quá trình chạy Workflow
Sau khi push các thay đổi của bạn, hãy điều hướng đến tab Actions trong kho lưu trữ GitHub của bạn để theo dõi quá trình chạy workflow. Dưới đây là những gì bạn sẽ tìm thấy:
- Workflow runs: Trang này liệt kê mỗi lần workflow được kích hoạt. Bạn có thể thấy liệu workflow đã thành công, thất bại hay đang tiến hành.
- Logs: Nhấp vào một workflow run cụ thể để xem nhật ký chi tiết. Nhật ký được chia theo các bước, vì vậy bạn có thể thấy chính xác vị trí xảy ra sự cố nếu có sự cố xảy ra.
Xác định sự cố trong nhật ký
Nhật ký của mỗi bước cung cấp thông tin chi tiết về bất kỳ sự cố nào:
- Nếu dependency không cài đặt được, bạn sẽ thấy thông báo lỗi chỉ rõ gói nào gây ra sự cố.
- Nếu các bài kiểm tra không thành công, nhật ký sẽ liệt kê các bài kiểm tra cụ thể và lý do thất bại, giúp bạn gỡ lỗi nhanh chóng.
- Đối với các workflow sử dụng secret, các lỗi liên quan đến secret bị thiếu sẽ xuất hiện trong các bước thiết lập môi trường, cho phép bạn khắc phục bất kỳ sự cố cấu hình nào.
Bằng cách hiểu cách diễn giải các nhật ký này, bạn có thể chủ động giải quyết các sự cố và đảm bảo việc triển khai suôn sẻ, đáng tin cậy.
Kết luận
Bằng cách làm theo các bước này, bạn đã thiết lập quy trình làm việc tự động trên GitHub cho cả frontend và backend của ứng dụng. Thiết lập này đảm bảo các bài kiểm tra của bạn chạy tự động với mỗi lần push lên nhánh main, giúp duy trì chất lượng mã và độ tin cậy cao. Với quy trình làm việc tự động, bạn có thể tập trung hơn vào việc xây dựng các tính năng và ít hơn vào việc kiểm tra mã thủ công, biết rằng quy trình làm việc của bạn sẽ cảnh báo bạn về bất kỳ sự cố nào sớm.