(AWS)-Cách Host một static web bằng S3

AWS Sep 06, 2021

Xin chào các bạn.

Thông thường nếu muốn host một trang web nào đó bạn sẽ cần chuẩn bị Server để host trang web đó, ngoài ra còn cần cài cắm, config một số thứ khá phức tạp.

Nếu bạn chỉ cần static web (Ví dụ như homepage để giới thiệu về một hoạt động từ thiện, một cuộc thi chạy Marathon hay thậm chí là một trang chủ để giới thiệu về công ty...) mà lại cần phải chuẩn bị server, và làm khá nhiều các thứ khác nữa để web đó chạy được thì cũng khá phiền phức, mất thời gian.

Những trường hợp như này bạn có thể nghĩ đến một giải pháp khác đó là dùng S3 -Dịch vụ lưu trữ data của AWS để làm việc này.

S3 không chỉ dùng để lưu data với giá cả phải chăng, khả năng scale không giới hạn...mà còn có thể config nhanh gọn để "Biến hình" thành một static web nữa.

Bài này chúng mình sẽ cùng đi từng step để thực hiện host một static web trên S3 nhé.

Bước 1:

Đăng nhập vào AWS Console --> Chọn S3--> Sau đó tạo một Bucket có tên giống với trang static web mà bạn muốn tạo.

Giả sử mình muốn tạo một page về Tiếng Nhật, tên web mà mình mong muốn là: tiengnhatmiichisoft.com chẳng hạn, thì lúc này mình sẽ tạo một bucket tên là "tiengnhatmiichisoft.com".

Bạn nên tạo tên của Bucket giống với tên web mà bạn mong muốn

Ở đây mình đã tạo xong một bucket với tên là tiengnhatmiichisoft.com

Bước 2:

Chuẩn bị 2 file như sau:

・File 1: Static page của bạn (Ở ví dụ này mình đặt tên file là index.html)

・File 2: File sẽ hiển thị khi web bị error (Ví dụ như khi không tìm thấy page mà user  mong muốn - 404 not found..)

--> Vậy tóm lại ở bước này chúng ta cần chuẩn bị 2 file: Một file hiển thị khi web truy cập bình thường, file còn lại sẽ hiển thị khi web bị lỗi gì đó (Handle khi bị lỗi)

File số 1 mà mình dùng (Hiển thị lúc bình thường)

File số 2 mình dùng khi web bị lỗi

Bước 3:

Upload 2 file vừa rồi lên bucket, và public 2 file đó

Bước 4:

Thực hiện enable chức năng host static web của Bucket

Các bạn đến màn list bucket --> Chọn bucket muốn dùng để host static  web--> Chọn tab "Properties" --> Tìm đến mục "Static website hosting" sau đó enable chức năng này lên.

Khi thực hiện enable chức năng host của Bucket bạn sẽ cần điền tên 2 file mà các bạn đã chuẩn bị ở step 2 vào.

Sau đó click "Save change"

Sau khi đã enable và config thành công, tại mục properties của bucket các bạn sẽ thấy URL của bucket vừa rồi.

URL này sẽ có cấu trúc như sau:

<bucket-name>.s3-website-<AWS-region>.amazonaws.com.

Nếu bạn muốn có một Domain tên thân thiện và dễ nhớ hơn thì có thể mua Domain và config Domain đó trỏ tới URL này ( Sử dụng DNS CNAME, hoặc Amazon Route 53 alias)

Bây giờ khi sử dụng luôn URL này, copy và paste vào trình duyệt bạn sẽ nhìn thấy file index.html mà mình đã chuẩn bị ở step 2.

Giờ mình sẽ thử  tìm đến 1 page không tồn tại trong bucket của mình bằng cách thêm "/tên page không tồn tại" vào phía sau URL lúc trước (Mình cố tình tạo ra lỗi 404-page not found)

Bổ sung: Nếu file HTML của các bạn dùng file external css thì bạn có thể upload cả file css đó lên bucket--> Public --> Dùng link của file để gắn vào HTML. Lúc này file HTML của bạn vẫn có thể được external css file nhé.

Vậy là chúng ta đã cùng đi từng step để host một static web trên S3.

Hi vọng bài viết này sẽ giúp các bạn biết thêm một ứng dụng rất hay của S3, hẹn gặp lại các bạn vào các bài viết khác 😘.

Tags

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.