Dự án trên AWS

Xây dựng ứng dụng web hiện đại

Triển khai một ứng dụng web, kết nối với cơ sở dữ liệu và phân tích hành vi của người dùng

Mô-đun 1: Dựng Trang web tĩnh

Trong mô-đun này, bạn sẽ lưu trữ trang web tĩnh trên Amazon S3 và thiết lập IDE trên đám mây, AWS Cloud9.  

Tổng quan

Trong mô-đun này, chúng ta sẽ lưu nội dung tĩnh (html, js, css, nội dung đa phương tiện, v.v.) của trang web Mythical Mysfit trên Amazon S3 (Simple Storage Service). S3 là dịch vụ lưu trữ đối tượng ít tốn kém, độ bền cao, độ sẵn sàng cao có thể phục vụ các đối tượng được lưu trữ trực tiếp qua HTTP. Điều này khiến cho nó vô cùng hữu dụng khi trực tiếp phục vụ nội dung web tĩnh với các trình duyệt web cho các trang trên Internet.

Trước khi chúng ta bắt đầu phân loại mysfits trong S3, hãy cùng thiết lập AWS Cloud9 cho bạn. Cloud9 là môi trường phát triển tích hợp (IDE) trên nền tảng đám mây cho phép bạn viết, chạy và gỡ lỗi mã chỉ bằng một trình duyệt.  

Sơ đồ kiến trúc

tạo trang web tĩnh

 Thời gian hoàn thành

20 phút

Hướng dẫn thực hiện

  • A: Đăng nhập vào Bảng điều khiển AWS

    Để bắt đầu, hãy đăng nhập vào Bộ điều khiển AWS bằng tài khoản AWS bạn sẽ sử dụng trong cuộc hội thảo này.

    B: Chọn khu vực

    Ứng dụng web này có thể được triển khai ở khu vực AWS bất kỳ hỗ trợ mọi dịch vụ được sử dụng trong ứng dụng này. Tham khảo bảng khu vực để xem những khu vực có các dịch vụ được hỗ trợ. Khu vực được đề xuất bao gồm:

    • Miền Đông Hoa Kỳ 1 (Bắc Virginia)
    • Miền Đông Hoa Kỳ 2 (Ohio)
    • Miền Tây Hoa Kỳ 2 (Oregon)
    • Tây Âu 1 (Ai-Len)

    Chọn khu vực trong danh sách thả xuống ở góc trên bên phải của Bảng điều khiển quản lý AWS.

  • A: Tạo môi trường AWS Cloud9 mới

    Trên trang chủ Bảng điều khiển AWS, nhập Cloud9 vào thanh tìm kiếm dịch vụ và chọn nó:

    tạo bot lex

    (nhấp để thu phóng)

    Nhấp vào Tạo môi trường trên trang chủ Cloud9:

    tạo bot lex

    (nhấp để thu phóng)

    tạo bot lex

    Đặt tên môi trường của bạnMythicalMysfitsIDE bằng bất kỳ mô tả nào bạn thích, và nhấp vào Bước tiếp theo:

    tạo bot lex

    (nhấp để thu phóng)

    tạo bot lex

    Giữ Cài đặt môi trường theo mặc định của chúng và nhấp vào Bước tiếp theo:

    tạo bot lex

    (nhấp để thu phóng)

    tạo bot lex

    Chọn Create environment (Tạo môi trường).

    tạo bot lex

    (nhấp để thu phóng)

    tạo bot lex

    Khi tạo IDE cho bạn được hoàn thành, bạn sẽ thấy một màn hình chào mừng được hiển thị và trông như sau:

    tạo bot lex

    (nhấp để thu phóng)

    tạo bot lex
    B: Tạo bản sao Kho lưu trữ hội thảo Mythical Mysfits

    Trong bảng điều khiển dưới cùng, bạn sẽ thấy dòng lệnh trong thiết bị đầu cuối ở trang thái mở và sẵn sàng sử dụng. Chạy lệnh git sau đây trong thiết bị đầu cuối để tạo bản sao mã cần thiết để hoàn thành hướng dẫn này:

    git clone -b python https://github.com/aws-samples/aws-modern-application-workshop.git

    Sau khi tạo bản sao kho lưu trữ, bạn sẽ thấy khám phá dự án của bạn giờ đây bao gồm cả các tệp được tạo bản sao:

    các tệp đã được tạo bản sao

    (nhấp để thu phóng)

    các tệp đã được tạo bản sao

    Trong thiết bị đầu cuối, thay đổi thư mục thành kho thư mục được tạo bản sao mới:

    cd aws-modern-application-workshop
  • A: Tạo Bộ chứa S3 và cấu hình nó để lưu trang web

    Sau đó, chúng ta sẽ tạo thành phần cơ sở hạ tầng cần thiết để lưu trang web tĩnh trong Amazon S3 qua AWS CLI.

    Đầu tiên, bạn sẽ tạo một bộ chứa S3đổi tên bên dưới (mythical-mysfits-bucket-name) theo tên bộ chứa riêng của chính bạn. Lưu ý: hãy xem các yêu cầu về tên bộ chứa. Sao chép tên bạn chọn và lưu lại để sử dụng tiếp sau, vì bạn sẽ dùng nó một vài nơi khác trong cuộc hội thảo này:

    aws s3 mb s3://REPLACE_ME_BUCKET_NAME

    Giờ chúng ta đã vừa tạo một bộ chứa, chúng ta cần thiết lập một vài tùy chọn cấu hình cho phép bộ chứa được sử dụng đểlưu trang web tĩnh. Cấu hình này cho phép đối tượng trong bộ chứa được yêu cầu sử dụng tên DNS đã được đăng ký công khai cho bộ chứa, cũng như trang trực tiếp yêu cầu lộ trình cơ sở của tên DNS đến trang chủ của trang web được chọn (đa số là index.html):

    aws s3 website s3://REPLACE_ME_BUCKET_NAME --index-document index.html
    B: Cập nhật Chính sách bộ chứa S3

    Tất cả bộ chứa được tạo trong Amazon S3 đều mặc định hoàn toàn bảo mật. Để được sử dụng như trang web công khai, chúng tôi cần tạo Chính sách bộ chứa S3 trong đó chỉ rõ bất kỳ ai cũng có đối tượng được lưu trữ trong bộ chứa này có thể được truy cập công khai bởi bất kỳ ai. Chính sách bộ chứa được trình bày trong tài liệu JSON xác định Các hành động S3 (Cuộc gọi S3 API) được phép (hoặc không bị cấm) để các bên ủy nhiệm khác nhau có thể thực hiện (trong trường hợp của chúng ta là công khai, hoặc bất kỳ ai).

    Tài liệu JSON về chính sách bộ chứa cần thiết có tại: ~/environment/aws-modern-application-workshop/module-1/aws-cli/website-bucket-policy.json. Tệp này gồm một chuỗi cần được thay thế bằng tên bộ chứa bạn vừa chọn (được thể hiện bằng REPLACE_ME_BUCKET_NAME).

    Lưu ý: Thông qua cuộc hội thảo này bạn sẽ tương tự mở các tệp có nội dung cần được thay thế (và tất cả sẽ được định sẵn là REPLACE_ME_, để dễ tìm khi sử dụng CTRL-F trên Windows hoặc ⌘-F trên Mac.) 

    Để mở tệp trong Cloud9, hãy sử dụng Trình khám phá tệp trên bảng điều khiển bên trái và nhấp đúp vào website-bucket-policy.json:

    mở tệp trong Cloud9

    (nhấp để thu phóng)

    mở tệp trong Cloud9

    Hành động này sẽ mở bucket-policy.json trong bảng điều khiển Trình biên tập tệp. Thay thế chuỗi được hiển thị bằng tên bộ chứa đã chọn của bạn dùng trong các lệnh trước:

    đổi tên bộ chứa

    (nhấp để thu phóng)

    đổi tên bộ chứa

    Thực thi lệnh CLI sau để thêm chính sách bộ chứa công khai cho trang web của bạn:

    aws s3api put-bucket-policy --bucket REPLACE_ME_BUCKET_NAME --policy file://~/environment/aws-modern-application-workshop/module-1/aws-cli/website-bucket-policy.json
    C: Xuất bản nội dung trang web đến S3

    Giờ thì bộ chứa trang web mới của chúng ta được cấu hình thích hợp, hãy thêm cài đặt lặp lại đầu tiên trang chủ Mythical Mysfits cho bộ chứa. Sử dụng lệnh S3 CLI sau nhằm mô phỏng lệnh linux cho việc sao chép tệp (cp) để sao chép trang index.html được cung cấp cục bộ từ IDE của bạn đến bộ chứa S3 mới (đổi tên bộ chứa phù hợp).

     aws s3 cp ~/environment/aws-modern-application-workshop/module-1/web/index.html s3://REPLACE_ME_BUCKET_NAME/index.html 

    Bây giờ, mở trình duyệt ưu thích của bạn và nhập một trong các URI bên dưới vào thanh địa chỉ. Một trong các URI bên dưới có chứa a '.' trước tên khu vực, và một '-' nữa. Bạn sử dụng mô tả nào phụ thuộc vào khu vực bạn đang sử dụng.

    Chuỗi thay thế REPLACE_ME_YOUR_REGION phải khớp với bất kỳ khu vực nào bạn đã tạo bộ chứa S3 bên trong (eg: us-east-1):

    Với Miền Đông Hoa Kỳ 1 (Bắc Virginia), Miền Đông Hoa Kỳ 2 (Oregon), Tây Âu 1 (Ai-Len) sử dụng:

    http://REPLACE_ME_BUCKET_NAME.s3-website-REPLACE_ME_YOUR_REGION.amazonaws.com

    Với Miền Tây Hoa Kỳ 2 (Ohio), sử dụng:

    http://REPLACE_ME_BUCKET_NAME.s3-website.REPLACE_ME_YOUR_REGION.amazonaws.com
    mysfits-welcome

    Xin chức mừng, bạn đã tạo trang web tĩnh cơ bản Mythical Mysfits!

    Mô-đun 1 kết thúc tại đây.

Tiếp theo, lưu trữ ứng dụng của bạn trên máy chủ web .