Triển khai ứng dụng web sử dụng Firebase Hosting

Firebase Hosting là dịch vụ lưu trữ an toàn, nhanh chóng và đáng tin cậy do Google cung cấp cho các nhà phát triển triển khai ứng dụng web. Nhằm mục đích cung cấp dịch vụ lưu trữ hiệu suất cao cho nội dung tĩnh như tệp HTML, CSS và JavaScript, Firebase Hosting cũng hỗ trợ tạo nội dung động bằng các chức năng serverless. Với mạng phân phối nội dung toàn cầu (CDN), Firebase Hosting đảm bảo độ trễ tối thiểu cho người dùng cuối ứng dụng của bạn.

Điều kiện tiên quyết

• Tài khoản Firebase và dự án Firebase
• Ứng dụng web cần được triển khai
• NODE JS, NPM, Firebase CLI

Thiết lập dịch vụ Firebase

• Đăng nhập vào tài khoản Firebase của bạn, mở bảng điều khiển Firebase, chọn tạo dự án để bật Dịch vụ lưu trữ Firebase, sau đó làm theo hướng dẫn được cung cấp để bật dịch vụ lưu trữ Firebase cho dự án của bạn.
• Cài đặt Firebase CLI
  npm i -g firebase-tools
• Đăng nhập vào Firebase CLI bằng tài khoản của bạn
  firebase login

Cấu hình ứng dụng web

– Thiết lập HTML, CSS và JavaScript với một trang web cơ bản

Đối với một ứng dụng web đơn giản, bạn thường không cần quá trình xây dựng. Tuy nhiên, điều quan trọng là phải sắp xếp các tệp của bạn theo cấu trúc thư mục phù hợp. Tạo một thư mục chung trong thư mục dự án của bạn và đặt các tệp HTML, CSS và JavaScript của bạn vào đó.

– Ứng dụng web react

Đối với ứng dụng React, bạn có thể sử dụng npm run build hoặc yarn build

Lệnh này sẽ tạo thư mục build, dist hoặc public với các nội dung tĩnh sẵn sàng cho sản xuất

– Cấu hình firebase.json

Bạn cần định cấu hình tệp firebase.json trong dự án của mình. Tệp được tạo khi bạn khởi chạy Firebase Hosting trong thư mục của dự án và tệp này chỉ định cài đặt triển khai cho Firebase Hosting. Điều quan trọng nhất là chỉ định một thư mục chung chứa nội dung tĩnh của ứng dụng web của bạn. Trong tệp firebase.json, đặt trường công khai thành thư mục chứa nội dung tĩnh của bạn

{
  "hosting": [
    {
      "target": "admin",
      "public": "build/web",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  ]
}

– Triển khai ứng dụng

1. Trong terminal điều hướng đến thư mục dự án chứa tệp firebase.json
2. Chạy lệnh triển khai firebase deploy –only hosting
3. Sau khi quá trình triển khai hoàn tất, Firebase CLI sẽ cung cấp cho bạn URL nơi ứng dụng web được triển khai và có thể truy cập được.

Nguồn: https://firebase.google.com/docs/hosting/quickstart