Deploy react project trên Firebase

Xin chào mọi người, chúng ta lại được gặp nhau nữa rồi ><, và trong topic lần này mình sẽ giới thiệu cách

làm thế nào để có thể deploy 1 project dễ dàng bằng firebase nhé.

Và chắc rồi chúng ta cùng tiến hành vào vấn đề chính luôn cho nóng nhé.

Các bước cần chuẩn bị:

  • Project có sẵn ( hoặc bắt đầu khởi tạo ) -> mình dùng project sẵn có cho nhanh nha.
  • Khởi tạo project trên firebase để tạo hosting deploy. (sẽ có hướng dẫn ở dưới)

1. Khởi tạo firebase Hosting

bắt đầu với việc khởi tạo 1 project trên firebase để dùng cho việc chạy Hosting:

Bắt đầu tạo một project mới ( mình dùng project đã có sẵn từ trước luôn )
Sau khi có project, tiến hành vào phần Hosting như hình

Và tới đây, chúng ta đã hoàn thành step đầu tiên, để sẵn sàng qua next step nhé.

2. Tiến hành Các bước Deploy project

Quay lại với project có sẵn của mình, để tiến hành cho việc deploy, mình khởi chạy 1 lệnh run build

để tạo môi trường cho việc build dự án lên server fisebase.

npm run build
sẽ build ra cho chúng ta 1 thư mục như hình trên

tiếp đến, cùng quay lại màn hình Hosting Firebase khi nãy chúng ta đang dừng tạm thời

Việc chúng ta cần làm là khởi chạy các lệnh cài đặt tiếp theo vào project của mình
  • Khởi chạy firebase cli : npm install -g firebase-tools
  • Khởi chạy lệnh tiếp theo: firebase login -> để tiến hành connect project vào firebase
=> Chọn cho phép để xác nhận login
  • Tiến hành init firebase bằng câu lệnh : firebase init

=> Đến bước này cần chú ý làm đúng để tránh config sai nhé, sau khi hoàn thành được,

trong project sẽ xuất hiện 2 fire do firebase tạo ra

firebase.json và .firebaserc

sau khi chạy lệnh firebase init => sẽ xuất hiện các câu hỏi để chúng ta config

  • Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
  • Use an existing project (enter)
  • Select project ( chọn project khi nãy create trên firebase)
  • What do you want to use as your assets, use your build’s output directory => ( build)
  • Configure as a single-page app (rewirte all urls to /index.html) => (yes)
  • Set up automatic builds and deploys with GitHub => (no)
  • File build/index.html already exists. Overwrite => (no)

=> Tiến hành được đến đây là chúng ta phần nào sắp hoàn thành xong rồi đó,

việc còn lại là tiến hành khỏi chạy câu lệnh cuối cùng để thưởng thức thành quả của mình thôi.

3. Cùng deploy thôi nào

  • Sau khi đã hoàn thành xong các bước config ở trên, tiến hành câu lệnh cuối nào
firebase deploy

Đợi 1 chút để hoàn thành nốt tiến trình sau cùng nhé. Sau khi hoàn thành chúng ta

sẽ nhận được nhận được đường link để truy cập vào project chúng ta đã deploy lên.

Nhận được Hosting URL, ( đây sẽ là link dẫn đến project deploy live on Firebsae nhé)
Tận hưởng thành quả chúng ta đã deploy thành công project thôi nào ><

Như vậy là đã xong topic lần này rồi, có 1 chút rườm rà nhưng cũng cảm ơn mọi người rất nhiều vì đã dành thời gian cho chủ đề này nhé .

 

@ Nam – Cựu học viên Ironhack Việt Nam

Để lại một câu trả lời