Triển khai ứng dụng React cho Firebase với GitHub Actions
Việc triển khai các ứng dụng web lên Dịch vụ lưu trữ Firebase có thể gặp rắc rối. Tuy nhiên, bằng cách sử dụng các tác vụ GitHub, bạn có thể đơn giản hóa và hợp lý hóa quy trình triển khai, đồng thời giúp việc quản lý quy trình triển khai trở nên vô cùng dễ dàng trong toàn bộ vòng đời của một dự án phần mềm.
Chỉ với một vài bước đơn giản, bạn có thể thiết lập quy trình triển khai để tự động hóa quy trình. Điều này bao gồm theo dõi các thay đổi mới đối với các nhánh và ghi nhật ký bất kỳ lỗi nào. Đọc tiếp để tìm hiểu cách triển khai ứng dụng React trên dịch vụ lưu trữ của Firebase.
Mục Lục
Đường ống CI/CD là gì?
Quy trình CI/CD (Tích hợp liên tục/Phân phối liên tục) là một tập hợp các quy trình tự động được triển khai để có thể liên tục xây dựng, thử nghiệm và triển khai các ứng dụng.
Nói một cách đơn giản, một quy trình CI/CD được thiết lập để tự động hóa các quy trình liên quan đến vòng đời phát triển phần mềm. Điều này sẽ bao gồm quá trình phát triển, thử nghiệm, phát hành thực tế (beta, alpha và phát hành cuối cùng), sửa lỗi và thậm chí cả cập nhật tính năng. Về cơ bản, quy trình này cho phép vận chuyển phần mềm chất lượng một cách dễ dàng và nhanh chóng.
Một quy trình CI/CD thường bao gồm một vài giai đoạn, điều này bao gồm:
- Giai đoạn mã nguồn: Giai đoạn này bao gồm việc phát triển và bảo trì thực tế mã của ứng dụng bằng công cụ kiểm soát phiên bản như Git.
- Giai đoạn xây dựng: Bước này tập hợp mã nguồn với tất cả các thành phần phụ thuộc của nó thành một định dạng có thể thực thi được.
- Giai đoạn thử nghiệm: Giai đoạn này kết hợp các thử nghiệm tự động để xác nhận chất lượng của phần mềm. Mục tiêu cuối cùng là phát hiện và sửa bất kỳ lỗi nào. Bạn có thể thực hiện các loại thử nghiệm khác nhau trong giai đoạn này và khi mã đã vượt qua các thử nghiệm, nó đã sẵn sàng để triển khai.
- Triển khai: Giai đoạn này tự động hóa quá trình triển khai trong môi trường sản xuất.
Quy trình bán hàng phải giám sát từng giai đoạn để đảm bảo rằng không có lỗi và cải thiện toàn bộ quy trình cho các bản phát hành trong tương lai
Hành động GitHub là gì?
GitHub Actions là một tính năng do GitHub cung cấp để tự động hóa các quy trình quy trình triển khai của phần mềm trong quy trình CI/CD. Nó cho phép xác định và tự động hóa quy trình triển khai trực tiếp từ kho lưu trữ GitHub của dự án của bạn.
GitHub Actions có một số lợi ích:
- Dễ sử dụng: GitHub Actions cung cấp giao diện thân thiện với người dùng và cú pháp đơn giản để thiết lập quy trình triển khai. Bạn có thể dễ dàng và nhanh chóng xác định quy trình làm việc của dự án bằng trình chỉnh sửa tích hợp trên GitHub.
- Tích hợp gốc: GitHub Actions là một phần của GitHub, giúp dễ dàng thiết lập, quản lý và cộng tác trên các quy trình công việc cùng với mã dự án của bạn.
- Linh hoạt và có thể tùy chỉnh: GitHub Actions cung cấp một nền tảng linh hoạt và có thể tùy chỉnh để đảm bảo rằng bạn có thể xây dựng quy trình công việc phù hợp với nhu cầu cụ thể của mình. Ngoài ra, nó hỗ trợ nhiều ngôn ngữ lập trình. Có nghĩa là, bạn có thể sử dụng nó với bất kỳ công nghệ nào bạn thích.
Thiết lập Dự án Firebase và Ứng dụng khách React
Để bắt đầu, hãy truy cập Firebase và đăng nhập bằng tài khoản Google của bạn. Trên trang tổng quan về bảng điều khiển, nhấp vào Tạo dự án để thiết lập một dự án mới và cung cấp tên của dự án.
Tiếp theo, tạo một ứng dụng React và cài đặt các công cụ dòng lệnh Firebase:
npm install -g firebase-tools
Đăng nhập vào Firebase từ thiết bị đầu cuối của bạn bằng thông tin đăng nhập tài khoản Firebase của bạn.
firebase login:ci
Điều này sẽ kích hoạt luồng xác thực Firebase sẽ nhắc bạn nhập chi tiết đăng nhập nếu bạn chưa đăng nhập. Sau khi Firebase xác thực bạn, nó sẽ in mã thông báo. Sao chép mã thông báo này; bạn sẽ sử dụng nó để chạy các lệnh Firebase trong thiết lập GitHub Actions của mình.
Cuối cùng, tạo một phiên bản sẵn sàng sản xuất cho ứng dụng của bạn:
npm run build
Lệnh này tạo các tệp và nội dung cần thiết, bên trong thư mục ‘bản dựng’ mới trong thư mục gốc, cần thiết để triển khai ứng dụng.
Khởi tạo Firebase trong ứng dụng React của bạn
Chạy lệnh này để khởi tạo Firebase trong thư mục dự án của bạn:
firebase init
Tiếp theo, xác nhận rằng bạn muốn khởi chạy Firebase trong dự án của mình và tiếp tục và chọn Lưu trữ: Định cấu hình tệp cho Lưu trữ Firebase và (tùy chọn) thiết lập triển khai GitHub Action từ danh sách các tùy chọn.
Chỉ định rằng bạn muốn sử dụng một dự án hiện có và chọn tên dự án mà bạn đã tạo ban đầu trên bảng điều khiển dành cho nhà phát triển của Firebase.
Tiếp theo, chỉ định thư mục ‘build’ là công cộng thư mục, chọn KHÔNG để viết lại tất cả các URL thành tùy chọn /index.html, hãy chọn KHÔNG đến tùy chọn thiết lập bản dựng và triển khai tự động từ GitHub, và cuối cùng, Chọn Đúng để ghi đè tùy chọn tệp build/index.html.
Sau khi thực hiện các thay đổi ở trên, CLI sẽ tạo tệp firebase.json trong thư mục gốc. Tệp này chứa tất cả cấu hình lưu trữ mà quy trình Tác vụ GitHub sẽ yêu cầu.
Cuối cùng, trước khi thiết lập quy trình làm việc của GitHub Actions, hãy tạo một kho lưu trữ trên GitHub và đẩy các tệp dự án vào đó.
Thiết lập hành động GitHub
Trong kho lưu trữ dự án của bạn trên GitHub, chọn Cài đặt > Bí mật và biến > hành động. Trong trang bí mật của kho lưu trữ, hãy nhập FIREBASE_TOKEN làm tên của bí mật và dán mã thông báo Firebase mà bạn đã sao chép trong bí mật lĩnh vực.
Thiết lập quy trình triển khai công việc
Nhấp vào tab Hành động trong kho lưu trữ dự án của bạn và chọn Định cấu hình Nodejs quy trình làm việc trong Hội nhập liên tục phần.
Tiếp theo, đổi tên tệp thành firebase.ymlxóa mã soạn sẵn trên trình chỉnh sửa và thêm mã bên dưới:
# This workflow will carry out a clean installation of node dependencies,
# cache/restore them, build the source code and run tests across different
# versions of node
# For more information see:
# https://docs.github.com/en/actions/automating-builds-and-tests
# /building-and-testing-nodejsname: Firebase CI
on:
push:
branches: [ main ]
pull_request:
branches: [ main]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [14.x]
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- run: npm install -g npm
- name: npm install, build and test
run: |
npm install
npm run build
- name: Archive Build
uses: actions/upload-artifact@v2
with:
name: build
path: build
deploy:
name: Deploy
needs: build
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Download Build
uses: actions/download-artifact@v2
with:
name: build
path: build
- name: Deploy to Firebase
uses: w9jds/firebase-action@master
with:
args: deploy --only hosting
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
Dưới đây là một số thuộc tính chính được giải thích:
- TRÊN: Các sự kiện kích hoạt các hành động trong quy trình làm việc này.
- công việc: Chỉ định các công việc mà một Hành động cụ thể sẽ chạy. Trong trường hợp này, có hai công việc: xây dựng và triển khai.
- chạy trên: máy mà hành động này phải chạy.
- bước: Định nghĩa một trình tự các bước để Action thực hiện cho một công việc cụ thể.
- Với: Chỉ định bất kỳ đối số nào mà Hành động yêu cầu để chạy.
- Tên: Tên của một bước cụ thể cho một công việc.
Cuối cùng, cam kết các thay đổi được thực hiện trong tệp này. GitHub sẽ tự động trigger workflow này, xây dựng và triển khai ứng dụng React trên dịch vụ Hosting của Firebase. Bạn có thể kiểm tra URL trực tiếp của ứng dụng trên nhật ký triển khai.
Triển khai ứng dụng bằng GitHub Actions
GitHub Actions cung cấp phương pháp triển khai hợp lý. Nó đảm bảo bạn có thể triển khai các ứng dụng một cách nhất quán và đáng tin cậy, bất kể bạn xây dựng chúng trên công nghệ nào.
Hơn nữa, bạn có thể dễ dàng tùy chỉnh quy trình triển khai bằng cách sử dụng các công cụ triển khai tích hợp sẵn để đáp ứng nhu cầu đường dẫn CI/CD cụ thể của bạn.