Tôi đã thiết kế trang web học C++ phục vụ hàng chục nghìn truy cập mỗi tháng với $0.0002 thế nào
White

Khoa Nguyen viết ngày 12/09/2016

Nếu bạn là thành viên của Dạy Nhau Học (DNH) thì các bạn có thể đã biết đến khóa học của anh Đạt admin (@ltd)

Khóa học này (có phí) gồm các video được đăng trên Udemy kèm với đó là trang web đăng tải các bài học miễn phí.

DNH C++ screenshot

Trong bài viết này mình sẽ giới thiệu các công nghệ đã sử dụng để tạo ra một trang web tương tự mà không tốn chi phí hosting cũng như là thời gian để quản lí và nâng cấp.

Web tĩnh (static website)

Web tĩnh có nghĩa là máy sẽ gửi trực tiếp các file HTML về cho người dùng mà không cần phải phải qua xử lí với PHP, Node.js, Ruby hay bất kì ngôn ngữ nào.

Ưu điểm của static website:

An toàn

Chẳng có bất kì logic để hacker lợi dụng ở đây. Nếu hacker có vào được áy chủ của bạn thì thứ mà hắn ta thấy chỉ là các file HTML. Bạn không cần là một acker cũng có thể tải tất cả các file này về với một dòng lệnh

$ wget \
     --recursive \
     --no-clobber \
     --page-requisites \
     --convert-links \
     --restrict-file-names=windows \
     --domains website.org \
     --no-parent \
         www.website.org/tutorials/html/

(Nguồn: Linux Journal)

Nhanh

Máy chủ chỉ việc gửi các file HTML có sẵn về nên truy cập web tĩnh sẽ siêu nhanh. Có thể đạt tốc độ mili giây mà không cần phải tối ưu hóa gì

Rẻ

Vì web tĩnh là một xu hướng hiện nay nên có nhiều dịch vụ chuyên về hosting cho web tĩnh. Một số dịch vụ còn miễn phí. Ví dụ:

  • Github Pages - Miễn phí hoàn toàn. Mình dùng Github Pages để host website Học C++
  • Gitlab Pages - Miễn phí hoàn toàn - Amazon S3 + Amazon Cloudfront - Trả phí, tính theo dung lượng và băng thông
  • Netlify - Miễn phí kèm các gói nâng cấp từ 9 USD đến 49 USD/ tháng
  • Surge.sh - Miễn phí kèm gói nâng cấp 9 USD
  • Aerobatic - Miễn phí kèm với các gói nâng cấp từ 10 USD đến 200 USD/ tháng

Tham khảo thêm :

Công cụ tạo trang web tĩnh (Static site generator - SSG)

Vì sao lại cần một công cụ?

Vì viết HTML bằng tay rất dễ bị lỗi và bạn phải lập lại nhiều phần ở mỗi trang như header, footer, ...

Một vài công cụ nổi tiếng Jekyll, Hugo, Metalsmith

Staticgen.com là một danh sách tổng hợp tất cả
các SSG

Ở đây mình chọn Phenomic. Vì một số lí do sau đây:

  • Mình đóng góp một số lượng lớn code vào project này (115 commit tính đến thời điểm viết bài)
  • Nó dựa trên React.js và mình thì thích React.js
  • Trang web tạo ra sẽ giống một web app: chuyển trang dùng history.pushState thay vì phải load lại trang từ đầu, và Phenomic chỉ cần load data, không cần phải load toàn bộ trang web như các công cụ khác
  • Dễ tùy biến, nếu bạn quen làm việc với React.js, Webpack thì bạn sẽ chẳng phải học thêm gì. Bắt tay vào code thôi.

Tải nội dung

Tự động tạo và đăng tải website

  • Mình dùng Travis CI để tự động tạo và đăng tải website mỗi khi mình push bất kì chỉnh sửa nào lên Github.

Hướng dẫn cấu hình Travis CI từ Phenomic

  • Travis CI cũng đảm nhận việc đăng tải website hoàn thành lên Github

Tự động tạo trang web mỗi ngày

Vì Travis CI chỉ chạy mỗi khi mình push lên Github nên mình cần phải thiết lập cronjob tự động kích hoạt Travis CI build mỗi ngày 2 lần để cập nhật các nội dung mới của khóa học.

Suy nghĩ đầu tiên là dùng một host/ VPS nào đó để thực hiện việc này.

VPS rẻ nhất là cỡ $5/tháng, và chạy một VPS 24/7 để chỉ thực hiện một công việc mỗi ngày 2 lần là quá phí phạm. (Dù gì thì host toàn bộ trang web chẳng tốn bất kì chi phí nào mà).

Host free với cronjob cũng là một lưa chọn, nhưng:

  • Mình không chơi với PHP nữa :D
  • Đoạn script để kích hoạt Travis CI cần Github token của mình nên bỏ token đó lên shared host không an toàn tí nào.

Giải pháp của mình là dùng Amazon Lambda kèm với Amazon Cloudwatch để thay thế
cronjob. Mình chọn Serverless Framework để tự động
hóa việc upload, và thiết lập Amazon Lambda cho mình. (Vì Dashboard của AWS
rất củ chuối).

Các bạn có thể xem toàn bộ Lambda function kèm với cấu hình ở đây

Chi phí cho Amazon Lambda và Cloudwatch là siêu rẻ. Mình ước tính khoảng
$0.0002/tháng.

AWS Region: US East (N. Virgina) . This is the cheapest region

Details: Rebuild twice a day at 0 and 12:00 UTC

  • CloudWatch: 2*30 = 60 events/month

    • Price: $1.00 / milion requests
    • Estimated: $0.00006/ month
  • Lambda:

    • Using 128MB instance
    • Billed duration: 1300ms (this depends on network connection and Travis CI response time
    • Estimated: 2*30*13*0.000000208 = $0.00016224 / month
  • Total: ~$0.0002 / month (xD)

view raw index.md hosted with ❤ by GitHub

Kết luận

Web tĩnh là một xu hướng hiện nay, dùng đúng công cụ và dịch vụ, các bạn có thể
tạo ra một trang web hoàn toàn miễn phí sẵn sàng phục vụ cho hàng triệu lượt
truy cập mỗi tháng.


Bài viết này lấy từ blog của mình: https://khoanguyen.me

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Khoa Nguyen

14 bài viết.
63 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
30 3
(Ảnh) Giới thiệu Đi câu cá hay mấy anh Tây hay gọi Phishing có nghĩa là lừa đảo nhằm đánh cắp tài khoản, mật khẩu, thẻ tín dụng của người dùng. ...
Khoa Nguyen viết gần 2 năm trước
30 3
White
28 8
Động lực Sau khi đọc bài viết (Link) của bác @quocnguyen thì mình có giới thiệu cho em gái trang phim.clgt.vn . Nó coi được 5 phút thì bảo là cái ...
Khoa Nguyen viết hơn 1 năm trước
28 8
White
14 11
Chắc chắn là ai đã từng làm việc với npm thì đều biết một điều rằng npm nó siêu chậm. Vì vậy mình hay hạn chế chạy npm install đến mức tối thiểu và...
Khoa Nguyen viết hơn 2 năm trước
14 11
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
14 bài viết.
63 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!