Blog Học Code Online đã được sinh ra như thế nào (phần 2)

Chúng ta sẽ tiếp tục với phần 2 của Serie này nha. Trong phần này mình sẽ nói qua về cách hosting tĩnh 1 trang web trên Amazon S3 với ví dụ là trang web trong phần 1 mà mình đã tạo từ gatsby nha.

Tạo tài khoản AWS

Vâng, muốn sử dụng cách dịch vụ cloud của AWS thì bạn cần có tài khoản của AWS là đương nhiên rùi. Với một Credit Card thì việc tạo tài khoản thì mình nghĩ ko có gì khó khăn cả. Ngoài ra AWS còn hỗ trợ năm đầu freetier cho các bạn mới sử dụng cũng như đang tìm tòi học hỏi về cách dịch vụ cloud của AWS. Trong freetier ở năm đầu có 1 số lượng khá lớn dịch vụ dc free để các bạn tha hồ tọc mạch nha :D. Các dịch vụ free và dc free bao nhiêu các bạn tham khảo ở trang này nhé: AWS freetier

Tạo Bucket trong Amazon S3

Có rất nhiều cách để sử dụng các dịch vụ cloud của AWS. Bạn có thể login trực tiếp vào AWS Console để sử dụng, ngoài ra AWS còn cung cấp CLI (chạy trên python) giúp các bạn có thể tạo và chạy các dich vụ trưc tiếp trên command line mà ko cần login vào web AWS Console. Còn 1 cách khác nữa là bạn có thể sử dụng 1 số tool/framework bên ngoài như Terraform, CloudFormation, Serverless, SAML ... để tạo và chạy các dịch vụ trên AWS cloud.

Đối vs những bạn mới thì mình khuyên là vẫn nên sử dụng và làm quen vs cách dịch vụ qua web AWS Console trước. Vì khi nhìn thấy trực tiếp những j mình đã tạo, làm và đã chạy, cũng như các options mình có thể configuration thì việc làm quen vs học sẽ nhanh hơn là xài tool/framework/cli (ý kiên cá nhân).

Amazon Simple Storage Service (Amazon S3) là một dịch vụ lưu trữ của AWS. Khách hàng thuộc mọi quy mô và lĩnh vực đều có thể sử dụng dịch vụ này để lưu trữ và bảo vệ bất kỳ lượng dữ liệu nào cho nhiều trường hợp sử dụng khác nhau, chẳng hạn như trang web, ứng dụng di động, sao lưu và khôi phục, lưu trữ, ứng dụng doanh nghiệp, thiết bị IoT và phân tích dữ liệu hớn. Amazon S3 cung cấp các tính năng quản lý dễ sử dụng, nhờ đó, bạn có thể tổ chức dữ liệu và cấu hình các kiểm soát truy cập được tinh chỉnh để đáp ứng yêu cầu cụ thể của doanh nghiệp, tổ chức và yêu cầu về tuân thủ. Để tìm hiểu rõ thêm về Amazon S3, bạn có thể tham khảo thêm tại đây

Để sử dụng Amazon S3 bạn hãy gõ S3 lên phần search ở AWS Console để tìm kiếm dịch vu S3 nhé.

Trong Amazon S3 mỗi 1 folder gốc được goi là 1 bucket. Tên của mỗi bucket đều là unique, tức là tên không được trùng vs bắt kì bucket nào khác trên Amazon S3. Amazon S3 là dịch vụ cloud dc triển khai toàn cầu, tức là ko có phân biệt Region nào trong Amazon S3 cả. Do đó bạn ở bất kì Region nào cũng có thể truy cập được vào Bucket đó. Điều này khác với 1 số dịch vụ khác ví dụ như Amazon EC2 (Amazon EC2 được triển khai theo Region, tức là nếu bạn tạo 1 máy ảo EC2 ở Region Singapore thì bạn khổng thể thấy dc cái máy ảo đó ở Region Frankfurt). Về Region và Avaiable Zone của AWS thì mình sẽ dành 1 bài riêng để nói về 2 cái đó nha :D.

Trong bức ảnh trên cac bạn có thể thấy trong Amazon S3 của mình hiện tại đang có 2 Buckets, đó là: codepipeline-eu-central-1-401939369078 và hoccodeonlineblog. Cái bucket đầu tiên là do codepipeline tự tạo cho pipeline CD blog của mình. Bucket thứ 2 là Bucket để host tĩnh cái blog này.

Để tạo 1 bucket mới, các bạn bấm vào Create bucket rùi điền tên bucket vào. Nên nhớ tên bucket phải unique.

Để tiện cho việc quản lí, bạn có thể chọn Region mà bạn mong muốn, nên nhớ là cái bucket chỉ hiện lại ra ở trong Region mà bạn đã chọn, mặc dù cái bucket nó là dịch vụ chạy trên toàn cầu. Sau đó bạn bấm Next

Trong phần Configure options gồm 1 số tính năng mình có thể chọn thêm cho bucket của mình ví dụ như:

• Versioning: giữ tất cả các phiên bản của một object trong cùng một bucket
• Server access logging: cho phép hệ thống khác được log vào trong bucket
• Tags: gán tags cho bucket, cái này sẽ tiện cho việc quản lí và thống kê hoá đơn sau này
• Object level logging: sử dụng AWS CloudTrail cho việc logging, việc này có thể tốn thêm chút tiền của bạn
• Default encryption: mã hoá các object trong bucket của bạn

vân vân và vân vân ...

Những option được nêu ở trên sẽ được giải thích và demo ở 1 bài riêng nhé. Để cho demo này ngắn gọn thì mình cũng có thể ko cần xài những options đó. Tuy nhiên các bạn cũng có thể thử để xem những option đó hoạt động thế nào :D.

Xong xuôi mình lại bấm vào Next

Phần Set permissions khá phức tạp, để giai thích rõ ngọn ngành từng option một thì chắc phải làm video cho các bạn quá :)). Tòm tắt lại là phần này mình có thể cấu hình cho các object trong bucket là người ngoài có thể truy cập được hay không. Thường thì khi tạo 1 bucket mới thì tất cả option đều được đánh dấu. Điều đó có nghĩa là mọi object trong bucket đều block truy cập từ bên ngoài.

Để có thể static hosting 1 website thì việc block mọi truy cập từ bên ngoài là điều không nên, vì mọi ng sẽ không thể thấy website của bạn nữa =)). Các bạn có thể chọn các option như hình trên và mình bấm Next nha.

Bước thứ 4 các bạn có thể duyệt lại những cấu hình mà các bạn đã chọn cho bucket của các bạn. Nếu Ok thì các bạn bấm Create bucket là mình hoàn thành xong thao tác tạo bucket trên S3 rùi nhé :D (như hình dưới).

Cấu hình bucket đã tạo để static hosting trên Amazon S3

Để có thể static hosting mình vẫn cần phải cấu hình thêm 1 chút nữa thì mới chạy được :). Sau khi tạo bucket thành công các bạn vào Tab Properties, chọn phần Static website hosting và điền index.html trong Index document như trong hình dưới nhé. Xong xuôi các bạn có thể bấm vào Save.

Các bạn cũng có thể trực tiếp nhìn thấy Endpoint của Website của các bạn, ví dụ như của mình là demo-hocbloconline.com.s3-website.eu-central-1.amazon.com. Đây sẽ là URL Website của các bạn và mọi người có thể truy cập vào trang web của các bạn qua url đó. Để sử dụng custom domain/url, tức là domain của các bạn, các bạn có thể tạo 1 A-Record ở nơi mà các bạn mua domain để chuyển hướng đến url này.

Tuy nhiên để hoàn thành static hosting mình vẫn còn 1 bước nữa là cấu hình Bucket Policy, để mọi ng có thể truy cập dc, download dc những object trong bucket về máy. Việc này cần thiết cho việc load ảnh hay file js của website của các bạn.

Trong Tab Permission các bạn chọn Tab Bucket Policy và điền đoạn JSON sau rồi bấm Save nhé. Các bạn nên lưu ý là phần Resource các bạn điền tên bucket của các bạn nhé.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AddPerm",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::demo-bloghoccodeonline/*"
    }
  ]
}

Và bây giờ bucket của các bạn đã thực sự Public rùi đó. Nếu các bạn quay về bảng S3, các bạn có thể nhận biết là bucket của các bạn đã public như sau

Tiếp theo mình sẽ upload trang Gatsby mình đã tạo lên S3 để chạy thử nhé.

Upload trang web lên S3

Quay lại với trang web mà mình đã tạo bằng Gatsby từ phần trước. Trước khi Upload lên S3 mình cần phải build trang web đó đã thì mới chạy được. Với lệnh

npm run build

Gatsby sẽ build ra 1 folder tên là public. Các bạn chỉ việc upload tất cả những gì trong folder public lên cái bucket mà các bạn đã tạo là xong rùi nhé. Các bạn nên nhớ là file index.html phải nằm ở bên ngoài nhé, ví dụ như hình sau:

Sau đó các bạn có thể truy cập vào Endpoint của các bạn, nếu trang web của các bạn hiện ra thì thành công rùi nhé :D. Có câu hỏi gì các bạn có thể gửi mail đến hello.hoccodeonline@gmail.com

Phần sau mình sẽ hướng dẫn các bạn tạo 1 CI/CD Pipeline để việc update website của các bạn nhanh và tiện hơn nhé.

Cám ơn các bạn!

Thân!