Hướng Dẫn Deploy Website Tĩnh Lên Firebase

Hướng Dẫn Deploy Website Tĩnh Lên Firebase

Giới Thiệu Chung

Firebase là một nền tảng phát triển ứng dụng di động và web. Họ cung cấp rất nhiều công cụ và dịch vụ để phát triển ứng dụng chất lượng, rút ngắn thời gian phát triển và phát triển cơ sở người dùng mà không cần quan tâm đến hạ tầng phần cứng.

Firebase hiện đang hỗ trợ các dịch vụ:

  • Authentication
  • Database
  • Storage
  • Hosting
  • Functions
  • Test Lab

Mục Đích Bài Viết Là Gì?

Hôm nay mình sẽ hướng dẫn các bạn deploy một project lên firebase hosting. Thì firebase nó chỉ cho phép chúng ta deploy một website tĩnh mà thôi có nghĩa là mình chỉ upload được các file HTML, CSS và Javascript.

Firebase nó cho phép chúng ta deploy thoải mái không giới hạn số lần deploy mà còn lại free. Ở đây mình không so sánh firebase với 000webhost hay github. Bởi vì mỗi thằng có ưu và nhược điểm riêng.

Firebase nó giúp cho các bạn có thể share project mà mình làm được cho nhiều người khác biết đến một cách nhanh chóng và hiệu quả.

Ví dụ: Bạn cắt xong một psd mà muốn show sản phẩm mình làm được cho nhiều người học hỏi cũng như trãi nghiệm thì các bạn phải deploy lên hosting nếu như các bạn deploy lên 000webhost nó vẫn được nhưng rất là phí bởi vì 000webhost nó là webhosting cho phép các bạn deploy những web động(php) và mỗi tài khoản chỉ được deploy free 2 lần mà thôi. Bây giờ bạn cut rất nhiều trang psd thì chỉ có cách là deploy lên firebase vừa free vừa nhanh, gọn. Còn GitHub mình chưa thử nên không dám phán ạ.

Deploy Thôi Nào

Đăng Ký Tài Khoản Firebase

Firebase là một công ty mà google đã mua lại nên khi vào firebase có thể tài khoản google chúng ta đã tự động đăng nhập vào.

Tạo Một Project Trong Firebase

Sau khi các bạn đăng ký tài khoản xong thì sẽ thấy một cái button là Get started bạn click vào đó rồi sau đó các bạn click phần Add Project để tạo project nha.
2-6
Bạn cần đặt tên project cho nó nha.
1111
Nếu các bạn không muốn tích hợp Analytics thì các bạn bỏ tắt dấu ở dưới đi nha.
2-7
Sau khi các bạn đã tạo xong thì click vào nút Create Project nha để nó tạo project cho mình.

Deploy Project Lên Firebase Hosting

Sau khi tạo project xong các bạn thì các bạn sẽ thấy thấy trong trang
Recent projects sẽ xuất hiện project mà mình đã tạo.
2-8
Các bạn click vào project mà mình đã tạo. Các bạn để ý bên tay trái website chúng ta sẽ thấy chữ hosting bạn click vào đó và tiếp tục click vào nút Get started thì nó sẽ hướng dẫn bạn deploy một cách tỉ mỉ.
2-9
Các bạn làm theo các bước sau nhé:
Bước 1: Install Firebase CLI
Các bạn cài firebase bằng câu lệnh
npm install -g firebase-tools
Để mà cài npm các bạn cài cho mình NodeJS nha cài tại đây
Sau khi bạn cài npm xong xem thử kết quả nó như thế nào nhé:
2-10
Bước 2: Initialize your project
Các bạn chạy câu lệnh để login firebase:
firebase login
2-11
Và câu lệnh này để khởi tạo dự án của bạn:
firebase init
Sau khi bạn chạy câu lệnh này thì nó sẽ yêu cầu bạn cấu hình project. Firebase sẽ yêu cầu bạn chọn dịch vụ nào và tên project nào để deploy,..
33
Các bạn sau khi chạy các câu lệnh ở trên xong. Sau đó các bạn di chuyển các file html,css,js,img,libs,.. vào bên trong thư mục public nha, bởi vì nó chỉ chạy những gì trong folder public mà thôi. Các bạn nhớ xóa 2 file mặc định trong folder public nha.
33-1
Bước 3: Deploy to Firebase Hosting
Nếu các bạn đã setup xong bây giờ chúng ta sẽ publish project lên Internet thôi nào.
Nếu các bạn muốn test xem thử project mình setup có gặp lỗi gì không thì sử dụng câu lệnh:
firebase serve
Để deploy project lên firebase các bạn gõ câu lệnh:
firebase deploy
33-2
Các Bạn Click Tại Đây. Để xem project mà mình đã deploy lên firebase nha.


Lời Kết

Vậy Là Xong bài Hướng Dẫn Deploy Website Tĩnh Lên Firebase rồi nhé. Mình mong muốn sau khi thực hiện xong bài này các bạn có thể trau dồi thêm kiến thức cũng như hiểu biết thêm nhiều điều mới mẻ và có thể tự mình deploy dự án nào đó.

Nếu mọi người cảm thấy bài viết này hay thì có thể ủng hộ mình để mình có động lực để ra những bài topic hay và chất lượng hơn ủng hộ mình tại đây nha.

Chúc Các Bạn Thành Công!!