2,906 lượt đọc

Triển khai trang web trên Firebase và sử dụng miễn phí: Hướng dẫn

từ tác giả Vladislav Guzey4m2023/06/06

dài quá đọc không nổi

Firebase là một nền tảng phát triển ứng dụng di động và web. Nó cung cấp các tính năng như cơ sở dữ liệu thời gian thực, xác thực, lưu trữ, lưu trữ đám mây, v.v. Hôm nay, chúng tôi sẽ sử dụng tính năng 'Hosting' của nó để lưu trữ dự án Next.JS của chúng tôi. Điều đầu tiên bạn phải làm là đăng ký một tài khoản trên Firebase.

featured image - Triển khai trang web trên Firebase và sử dụng miễn phí: Hướng dẫn

Cách đây không lâu, tôi đã viết một bài có tiêu đề " Cách cải thiện Điểm Hiệu suất Trang web từ 35 lên 100 . " Trong bài đăng đó, tôi đã hứa sẽ chỉ cho bạn cách triển khai dự án của bạn trên Firebase và sử dụng nó miễn phí. Tôi đang giữ lời hứa của mình!

Firebase là gì?

Chắc một số bạn chưa quen với Firebase nên để mình giải thích sơ qua cho các bạn hiểu Firebase là gì nhé.

căn cứ hỏa lực là một nền tảng phát triển ứng dụng web và di động cung cấp một bộ công cụ và dịch vụ để giúp các nhà phát triển xây dựng và mở rộng quy mô ứng dụng của họ dễ dàng hơn.

Nó cung cấp các tính năng như cơ sở dữ liệu thời gian thực, xác thực, lưu trữ, lưu trữ đám mây, v.v. Firebase cũng cung cấp các chức năng và cơ sở hạ tầng phụ trợ, cho phép các nhà phát triển tập trung vào việc xây dựng ứng dụng của họ mà không phải lo lắng về việc quản lý máy chủ hoặc thiết lập cơ sở hạ tầng phức tạp.

Nhìn chung, Firebase đơn giản hóa quy trình phát triển và cho phép nhà phát triển tạo ứng dụng chất lượng cao một cách nhanh chóng.

Hôm nay, chúng tôi sẽ sử dụng tính năng 'Hosting' của nó để lưu trữ dự án Next.JS của chúng tôi. Trong ví dụ này, tôi sẽ chỉ cho bạn cách lưu trữ phiên bản tĩnh của dự án. Điều đầu tiên bạn phải làm là đăng ký một tài khoản.

Cách đăng ký tài khoản Firebase

Để đăng ký tài khoản trên Firebase, hãy mở https://firebase.google.com/ , và bấm vào "Bắt đầu."

Sau đó, bạn cần tạo tài khoản Google hoặc sử dụng tài khoản hiện có. Sau khi hoàn thành bước đầu tiên, bạn sẽ đến bảng điều khiển Firebase. Bước tiếp theo là tạo một dự án.

Cách tạo dự án trên Firebase

Để tạo một dự án, bạn phải thực hiện 3 bước đơn giản:

Nhấp vào "Thêm dự án" và đặt tên cho nó trong cửa sổ mới.

Bật hoặc tắt chức năng Google Analytics cho dự án và nhấp vào "Tạo dự án"

Sau một vài phút, dự án của bạn sẽ được tạo.

Cách sử dụng Firebase miễn phí

Khi bạn đã tạo một dự án, bạn sẽ có thể nhìn thấy dự án đó trong trang tổng quan của mình. Theo mặc định, bạn sẽ sử dụng Spark Plan . Nếu không, bạn cần thay đổi nó thành Spark Plan .

Gói Spark là gói miễn phí không có bất kỳ chi phí hàng tháng nào . Nó có một số hạn chế, nhưng như vậy là quá đủ để bắt đầu dự án của bạn, đặc biệt nếu bạn định sử dụng nó làm nền tảng lưu trữ cho trang web tĩnh của mình.

Để xem mô tả đầy đủ về kế hoạch, vui lòng truy cập trang này liên kết .

Đã đến lúc thiết lập dịch vụ lưu trữ Firebase.

Cách thiết lập dịch vụ lưu trữ Firebase

Thiết lập lưu trữ Firebase cũng khá đơn giản. Đăng nhập vào tài khoản của bạn và chọn dự án của bạn. Sau đó, trong menu bên trái, nhấp vào "Xây dựng" và chọn "Lưu trữ" từ danh sách thả xuống.

Trong cửa sổ mới, bạn sẽ thấy màn hình chào mừng. Nhấp vào "Bắt đầu."

Để lưu trữ dự án của bạn, trước tiên bạn cần thiết lập Firebase CLI.

Mở cửa sổ đầu cuối của bạn và nhập lệnh sau:

 npm install -g firebase-tools

Sau khi thiết lập xong, hãy nhập nội dung sau vào thiết bị đầu cuối của bạn:

 firebase login

Nó sẽ đưa bạn đến màn hình đăng nhập để cấp quyền truy cập.

Bước tiếp theo là điều hướng đến thư mục dự án của bạn bên trong cửa sổ đầu cuối, nơi bạn đã lưu trữ trang web tĩnh của mình.

Chạy lệnh sau:

 firebase init

Nếu bạn đã làm đúng mọi thứ, bạn sẽ thấy thông tin sau trong cửa sổ đầu cuối của mình.

Trong danh sách các tùy chọn, hãy 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 Hành động GitHub". Sử dụng các phím mũi tên trên bàn phím để điều hướng, nhấn dấu cách để chọn, sau đó nhấn enter.

Tiếp theo, chọn một tài khoản từ danh sách và nhấn enter.

Vì chúng tôi đã có dự án, hãy chọn "Sử dụng dự án hiện có" từ danh sách và chọn dự án bạn đã tạo ở bước trước.

Theo mặc định, thư mục chung được đặt thành "công khai". Nếu bạn muốn chỉ định một thư mục khác, bạn có thể làm như vậy trong bước tiếp theo. Ví dụ: dự án Next.js của tôi tạo phiên bản tĩnh của trang web trong thư mục 'out', vì vậy tôi chỉ định nó ở bước này.