Trong mô-đun này, bạn sẽ đặt cấu hình AWS Amplify để lưu trữ các tài nguyên tĩnh cho ứng dụng web của mình, thông qua tính năng triển khai liên tục được tích hợp sẵn. Amplify Console mang đến quy trình dựa trên git để triển khai liên tục và lưu trữ các ứng dụng web toàn diện. Trong các mô-đun tiếp theo, bạn sẽ thêm chức năng động vào những trang này bằng cách sử dụng JavaScript để gọi API RESTful từ xa được xây dựng bằng AWS Lambda và Amazon API Gateway.

Amplify_Wild_Rydes

Kiến trúc của mô-đun này rất đơn giản. Tất cả nội dung tĩnh của trang web, bao gồm tệp HTML, CSS, JavaScript, hình ảnh và các tệp khác sẽ do AWS Amplify Console quản lý. Sau đó, người dùng cuối sẽ truy cập trang của bạn bằng URL trang web công khai do AWS Amplify Console cung cấp. Trang web của bạn sẽ hoạt động mà không cần bạn phải chạy máy chủ web nào hoặc sử dụng các dịch vụ khác.

Đối với hầu hết các ứng dụng thực tế, bạn sẽ muốn sử dụng miền tùy chỉnh để lưu trữ trang web của mình. Nếu muốn sử dụng miền riêng, hãy làm theo hướng dẫn thiết lập miền tùy chỉnh trên Amplify.

Thời gian hoàn thành mô-đun: 15 phút

Dịch vụ cần dùng: AWS Amplify


Hãy làm theo hướng dẫn từng bước sau đây để lưu trữ trang web tĩnh. Nhấp vào số của từng bước để mở rộng phần.

  • Bước 1. Chọn Khu vực


    Bạn có thể triển khai ứng dụng web này ở bất kỳ khu vực AWS, miễn là khu vực đó hỗ trợ tất cả các dịch vụ mà ứng dụng này sử dụng, bao gồm AWS Amplify, AWS CodeCommit, Amazon Cognito, AWS Lambda, Amazon API Gateway và Amazon DynamoDB.

    Bạn có thể tham khảo bảng khu vực để xem những khu vực hỗ trợ các dịch vụ này. Bạn có thể chọn trong số các khu vực được hỗ trợ sau:

    • Miền Đông Hoa Kỳ (Bắc Virginia)
    • Miền Đông Hoa Kỳ (Ohio)
    • Miền Tây Hoa Kỳ (Oregon)
    • Châu Âu (Frankfurt)
    • Châu Âu (Ireland)
    • Châu Âu (London)
    • Châu Á Thái Bình Dương (Tokyo)
    • Châu Á Thái Bình Dương (Seoul)
    • Châu Á Thái Bình Dương (Sydney)
    • Châu Á Thái Bình Dương (Mumbai)

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

    region

    (Nhấp vào để phóng to)

    region
  • Bước 2: Tạo kho lưu trữ Git

    Bạn có 2 cách để quản lý mã nguồn cho mô-đun này: AWS CodeCommit (có trong Bậc miễn phí AWS) hoặc GitHub. Trong hướng dẫn này, chúng ta sẽ dùng CodeCommit để lưu trữ mã lệnh của ứng dụng. Tuy nhiên, bạn cũng có thể lưu trữ bằng cách tạo kho lưu trữ trên GitHub.

    a. Mở Bảng điều khiển AWS CodeCommit
    b. Chọn Tạo kho lưu trữ
    c. Đặt tên Kho lưu trữ* là "wildrydes-site"
    d. Chọn Tạo
    e. Lúc này, bạn đã tạo xong kho lưu trữ. Hãy thiết lập một người dùng IAM có thông tin đăng nhập Git trong bảng điều khiển IAM bằng cách làm theo hướng dẫn sau.
    f. Quay lại bảng điều khiển CodeCommit, từ menu thả xuống Nhân bản URL, hãy chọn Nhân bản HTTPS

    wildrydes_clone

    g. Từ cửa sổ dòng lệnh, hãy chạy bản sao git và URL HTTPS của kho lưu trữ:

    $ git clone https://git-codecommit.us-east1.amazonaws.com/v1/repos/wildrydes-site
    Đang nhân bản vào 'wildrydes-site'...
    Tên người dùng cho 'https://git-codecommit.us-east-1.amazonaws.com':XXXXXXXXXX
    Mật khẩu cho 'USERID': XXXXXXXXXXXX
    cảnh báo: Có vẻ bạn đã nhân bản một kho lưu trữ rỗng.

  • Bước 3: Điền kho lưu trữ Git

    Sau khi đã dùng AWS CodeCommit hoặc GitHub.com để tạo kho lưu trữ git và nhân bản kho lưu trữ này trên máy cục bộ, bạn sẽ phải sao chép nội dung trang web từ một vùng lưu trữ S3 có thể truy cập công khai hiện có và được liên kết với hội thảo này, sau đó thêm những nội dung đó vào kho lưu trữ của bạn.

    a. Thay đổi đường dẫn vào kho lưu trữ và sao chép các tệp tĩnh từ S3:
    cd wildrydes-site/
    aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursive

    b. Đưa tệp vào dịch vụ Git
    $ git add .
    $ git push

    Counting objects: 95, done.
    Compressing objects: 100% (94/94), done.
    Writing objects: 100% (95/95), 9.44 MiB | 14.87 MiB/s, done.
    Total 95 (delta 2), reused 0 (delta 0)
    To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
    * [new branch] master -> master

  • Bước 4: Kích hoạt việc lưu trữ web bằng AWS Amplify Console

    Tiếp theo, bạn sẽ dùng AWS Amplify Console để triển khai trang web mà bạn vừa đưa vào git. Amplify Console sẽ xử lý quá trình thiết lập nơi lưu trữ mã lệnh ứng dụng web tĩnh của bạn, đồng thời cung cấp một số chức năng hữu ích để đơn giản hóa vòng đời của ứng dụng đó, cũng như tạo điều kiện để bạn thực hiện những phương pháp hay nhất.


    a. Khởi chạy trang điều khiển Amplify Console

    b. Nhấp vào Bắt đầu bên dưới mục Triển khai bằng Amplify Console

    c. Chọn nhà cung cấp dịch vụ Kho lưu trữ mà hôm nay bạn đã sử dụng rồi chọn Tiếp

    d. Nếu dùng GitHub, bạn sẽ phải xác thực AWS Amplify cho tài khoản GitHub của mình

    e. Từ menu thả xuống, hãy chọn Kho lưu trữ và nhánh vừa tạo

    wildrydes_clone2

    e. Trên trang "Đặt cấu hình phần cài đặt bản dựng", hãy giữ nguyên như mặc định rồi chọn Tiếp.

    f. Trên trang "Đánh giá", hãy chọn Lưu và triển khai

    g. Bạn có thể phải chờ một vài phút để Amplify Console tạo các tài nguyên cần thiết và triển khai mã lệnh.

    wildrydes_clone3

    Sau khi hoàn tất, hãy nhấp vào hình ảnh trang web để khởi chạy trang Wild Rydes của bạn.

    wildrydes_clone4

    Nếu nhấp vào đường liên kết Chính, bạn sẽ thấy thông tin chi tiết về đợt triển khai và bản dựng liên quan đến nhánh của mình, cũng như ảnh chụp màn hình ứng dụng trên nhiều thiết bị:

    wildrydes_clone5
  • Bước 5: Chỉnh sửa trang web của bạn

    AWS Amplify Console sẽ dựng và triển khai lại ứng dụng khi phát hiện có sự thay đổi đối với kho lưu trữ đã kết nối. Hãy thử thay đổi trang chủ để thử nghiệm quá trình này.


    a. Mở trang `index.html` và chỉnh sửa dòng tiêu đề thành: <title>Wild Rydes - Tương lai ngành vận chuyển!</title>

    b. Lưu tệp rồi đưa lại vào kho lưu trữ git. Amplify Console sẽ bắt đầu dựng lại trang web ngay khi nhận thấy có sự thay đổi đối với kho lưu trữ. Rất nhanh thôi! Trở lại trang điều khiển Amplify Console để theo dõi quá trình.

    $ git add index.html 
    $ git commit -m "updated title"
    [master dfec2e5] updated title
     1 file changed, 1 insertion(+), 1 deletion(-)
    
    $ git push
    Counting objects: 3, done.
    Compressing objects: 100% (3/3), done.
    Writing objects: 100% (3/3), 315 bytes | 315.00 KiB/s, done.
    Total 3 (delta 2), reused 0 (delta 0)
    remote: processing 
    To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
       2e9f540..dfec2e5  master -> master

    c. Sau khi xong, hãy mở lại trang web Wild Rydes và để ý xem tiêu đề thay đổi như thế nào.

    wildrydes_clone6
  • Tóm tắt

    Trong mô-đun này, bạn đã tạo trang web tĩnh là nền móng cho doanh nghiệp Wild Rydes của chúng tôi. AWS Amplify Console giúp đơn giản hóa quá trình triển khai các trang web tĩnh theo mô hình phân phối và tích hợp liên tục. Dịch vụ này có các chức năng để "dựng" các ứng dụng phức tạp hơn dựa trên khung Javascript và có các tính năng như triển khai nhánh tính năng, dễ dàng thiết lập miền tùy chỉnh, triển khai tức thì và bảo vệ mật khẩu.