Deploy Ứng Dụng Frontend ReactJS Lên Firebase Hosting Nhanh Chóng và Miễn Phí

28.08.2026 — Firebase, ReactJS, Vite, DevOps, CICD, Hosting — 3 min read

Firebase Hosting là dịch vụ lưu trữ web tĩnh chuẩn production được hỗ trợ bởi CDN toàn cầu của Google, tích hợp sẵn SSL miễn phí, hỗ trợ tùy chỉnh Custom Domain và xử lý Single Page Application (SPA) cực kỳ mượt mà.

Bài viết này sẽ hướng dẫn bạn cách đưa ứng dụng ReactJS (Vite/Webpack) lên Firebase Hosting chỉ trong 5 phút.

1. Chuẩn Bị Công Cụ

Cài đặt công cụ dòng lệnh Firebase CLI trên máy tính:

npm install -g firebase-tools

Đăng nhập tài khoản Google của bạn:

firebase login

2. Khởi Tạo Cấu Hình Firebase Hosting Trong Dự Án

Di chuyển vào thư mục gốc của dự án và chạy:

firebase init hosting

CLI sẽ hướng dẫn bạn qua các câu hỏi:

Please select an option: Chọn Use an existing project (Chọn project đã tạo trên Firebase Console).
What do you want to use as your public directory?:
- Nếu bạn dùng Vite: Nhập dist (hoặc frontend/dist nếu cấu trúc monorepo).
- Nếu bạn dùng Create React App: Nhập build.
Configure as a single-page app (rewrite all urls to /index.html)?:
- Chọn Yes (y) (Rất quan trọng để React Router không bị lỗi 404 khi người dùng F5 reload trang!).
Set up automatic builds and deploys with GitHub?:
- Chọn Yes nếu muốn tích hợp CI/CD, hoặc No nếu muốn deploy thủ công.
File dist/index.html already exists. Overwrite?: Chọn No (n).

3. Tinh Chỉnh File `firebase.json`

File firebase.json ở thư mục gốc kiểm soát hành vi routing và caching:

{
  "hosting": {
    "public": "frontend/dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "headers": [
      {
        "source": "**/*.@(js|css|svg|png|jpg|webp)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=31536000, immutable"
          }
        ]
      }
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Giải thích:

rewrites: Mọi đường dẫn URL đều trỏ về index.html để React Router xử lý Client-side Routing.

headers: Bật HTTP Caching cho các file tĩnh giúp trang tải tức thì trong các lần truy cập tiếp theo.

4. Build Ứng Dụng & Deploy

4.1. Đóng gói mã nguồn (Production Build)

# Trong thư mục frontend
npm run build

4.2. Triển khai lên Firebase

firebase deploy --only hosting

Sau khi hoàn tất, terminal sẽ hiển thị URL dạng:

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/your-project/overview
Hosting URL: https://your-project.web.app

5. Tự Động Hóa Deploy Với GitHub Actions (CI/CD)

Tạo file workflow .github/workflows/firebase-deploy.yml:

name: Deploy Frontend to Firebase Hosting

on:
  push:
    branches:
      - main

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
          cache-dependency-path: frontend/package-lock.json

      - name: Install Dependencies & Build
        run: |
          cd frontend
          npm ci
          npm run build
        env:
          VITE_API_BASE_URL: ${{ secrets.VITE_API_BASE_URL }}
          VITE_FIREBASE_API_KEY: ${{ secrets.VITE_FIREBASE_API_KEY }}

      - name: Deploy to Firebase Hosting
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_KEY }}'
          channelId: live
          projectId: your-project-id

6. Tổng Kết

Với Firebase Hosting, bạn có được:

CDN toàn cầu với tốc độ tải trang cực nhanh.
Chứng chỉ SSL tự động gia hạn hoàn toàn miễn phí.
Khả năng rollback về các phiên bản trước chỉ bằng 1 cú click.
Cấu hình SPA Rewrite chuẩn xác không lo lỗi 404 trang con.