Host trang web trên cloud miễn phí bằng cách dùng Firebase

  Sep 9, 2017      2m
   

Firebase hosting cho phép bạn host trang web tĩnh trên cloud hoàn toàn miễn phí. Ngoài ra ta còn có thể scale up khi trang web có nhiều lượt truy cập.

Host trang web trên cloud miễn phí bằng cách dùng Firebase

Xây dựng 1 trang web cần những gì?

Kiến trúc

Kiến trúc của 1 website bao gồm những thành phần sau:

  • Tên miền: khi người dùng gõ địa chỉ trang web trên trình duyệt (ví dụ: minhng.info) thì trình duyệt sẽ kết nối đến hệ thống DNS để tìm địa chỉ IP mà nội dung trang web đang được chưa trên máy đó.
  • Máy chủ (host): là nơi lưu trữ nội dung web như các trang html hoặc xử lý các truy vấn.

Một trang web gồm có 2 thành phần:

  • Backend: nếu là trang web động thì backend sẽ thực hiện xử lý thêm trước khi trả nội dung về cho trình duyệt như: truy vấn database, xử lý dữ liệu, … Người dùng không thấy được Backend hoạt động như thế nào.
  • Frontend: hiện thực giao diện trang web hiển thị cho người dùng. Có những trang web bố cục hoặc màu sắc tệ, thì ta nói trang web đó có vấn đề ở frontend.

Frontend vs Backend, đẹp là được

Hình trên thể hiện rất rõ quan điểm về hiện thực frontend và backend. Dù backend có nặng nề, hoành tráng đến mức nào thì người dùng vẫn chỉ thấy phần frontend. Và frontend phải đảm bảo tiêu chí: đẹp là được :).

Kiến thức công nghệ

Web developer nên biết:

  • Frontend: HTML, Javascript (jQuery, Angular, ReactJS, …), CSS (Bootstrap)
  • Backend: PHP, Java, ASP .NET, Python, Ruby on Rails, …

Phía backend chỉ cần nắm rõ 1 trong các ngôn ngữ phía trên để hiện thực, về frontend thì cần nắm rõ bộ ba: HTML, Javascript, CSS cùng với các thư viện / framework phổ biến (trong dấu ngoặc) để hiện thực được hiệu quả nhất.

minhng.info được hiện thực bằng cách sử dụng framework Jekyll], mỗi post được viết theo cú pháp Markdown (kramdown).

Dịch vụ Firebase hosting: miễn phí

Firebase là gì?

  • Firebase là 1 trong những dịch vụ cloud của Google.
  • Firebase hiện đang hỗ trợ các dịch vụ:
    • Authentication
    • Database
    • Storage
    • Hosting
    • Functions
    • Test Lab

Ở thời điểm hiện tại (tháng 9, 2017), khi vào Firebase console sẽ có giao diện menu như hình dưới: Firebase menu 2017

Hiện tại minhng.info đang sử dụng plan Spark, miễn phí 100% ($0 / tháng). Vì trang web của bạn được host trên cloud của Firebase, bạn hoàn toàn có thể scale up khi lượt truy cập trang mỗi tháng ngày càng nhiều (vượt quá plan miễn phí) bằng cách nâng cấp plan lên cấp cao hơn (upgrade -> có phí).

Firebase hosting hỗ trợ những gì?

Firebase hosting (1 trong nhiều dịch vụ Firebase cung cấp) hỗ trợ:

  • Host web tĩnh: các trang html.
  • Content Delivery Network (CDN): hệ thống mạng phân tán, tùy theo vị trí địa lý của người dùng mà server gần nhất sẽ trả về nội dung –> tối ưu hóa tốc độ tải trang web, người dùng không phải chờ lâu. Bên phải là kiến trúc của CDN so với kiến trúc server đơn nhất (ảnh dưới).

Bên trái: 1 server, bên phải: CDN

  • Kết nối tới tên miền (sau khi kết nối, trang web của bạn sẽ có SSL - https): hoàn toàn miễn phí, không phải trả thêm phí khi kết nối tên miền.
  • Bạn chỉ cần vào trang Firebase, đăng nhập bằng tài khoản Gmail, tạo project và bắt đầu sử dụng. Cực kỳ dễ và đơn giản.
  • Để biết các bước cần làm để up trang web tĩnh (các file html) lên Firebase thì bạn chỉ cần vào menu Firebase hosting và chọn tab Dashboard. Nhấp nút Get Started, các hướng dẫn cài đặt và up web sẽ hiện ra đầy đủ.

Cấu hình trang web: tên miền và host

Tên miền mua ở đâu? Giá bao nhiêu?

  • Bạn có thể mua tên miền (quốc tế) ở bất cứ dịch vụ nào: namecheap, godaddy, 1and1, Google Domains, … (cần có thẻ VISA / Master Card để thanh toán online nhé!) –> Giá tên miền: $1 - $30 / năm. Những tên miền giá $1 thường là ưu đãi chỉ cho năm đầu tiên.
  • Tên miền có đuôi Việt Nam thời điểm viết bài đang khá đắt so với các tên miền khác: $100 - $200 / năm

Cấu hình tên miền trỏ sang Firebase

Sau khi mua tên miền ưng ý (ví dụ: minhng.info), bạn dùng trình duyệt truy cập vào sẽ không thấy nội dung gì cả (hoặc là 1 trang giới thiệu của nơi bạn mua tên miền) vì nội dung hiện đang rỗng.

Bạn cần phải cấu hình kết nối giữa Firebase và tên miền để: khi truy cập tên miền –> nội dung host trên Firebase được trả về.

  • Bạn nhấp nút Connect Domain trong tab Dashboard, chỉ cần làm theo hướng dẫn.
  • Lúc verify tên miền thì bạn cần phải đăng nhập vào trang quản lý tên miền của nhà cung cấp tên miền và thêm 1 record vào DNS.
  • Đặc biệt, với nhà cung cấp tên miền Namecheap thì thay domain web (ví dụ: minhng.info) bằng @
  • Đợi vài tiếng sau, khi bạn gõ tên miền của bạn trên trình duyệt, nội dung host trên Firebase được trả về với kết nối HTTPS tức là bạn đã thành công :). Nếu gặp khó khăn hãy comment dưới bài viết nhé!

Tận hưởng trang web

Sau khi public trang web ra thế giới, ta có nhu cầu quản trị nó và nâng tầm nó ở mức cao hơn như: phân tích / thống kê người dùng và SEO web.

Phân tích / thống kê người dùng

  • Nên tích hợp các công cụ phân tích trang web như Google Analytics để theo dõi các lượt truy cập trang (chỉ cần nhúng javascript, khá đơn giản để làm).
  • Rút ngắn link bạn có thể dùng: bit.ly, goo.gl, … (có hỗ trợ thống kê các lượt click của người dùng)

SEO web

  • Sẽ có 1 bài riêng nói chi tiết về kỹ thuật này.
  • Để Google biết trang web bạn tồn tại, bạn cần phải vào Google Webmaster để "đăng ký" trang web của bạn cho Google biết. Đồng thời Google Search Console cung rất nhiều công cụ quản trị liên quan đến việc xuất hiện trang web của bạn trên kết quả tìm kiếm của người dùng trên Google.
  • Tương tự, bạn cũng có thể gửi URL trang web của bạn đến Bing: https://www.bing.com/toolbox/submit-site-url
  • Hoặc bất cứ công cụ nào khác. Bạn search google theo dạng: Tên search engine + index (ví dụ: google index, bing index, …)