Triển Khai Front-end

  1. Thêm đoạn code sau tại phần Prarameters của tệp template.yaml trong sam project:
  WebStoreBucketName:
    Type: String
    Default: fcjdmswebstore

Thay đổi giá trị Default để thay đổi tên cho bucket

AddAmplify

  1. Thêm đoạn code sau bên dưới mô tả S3 bucket ở phần 1.1. Đoạn code này mô tả bucket cho phép truy cập public và enable hosting website:
  FcjDMSWebStore:
    Type: AWS::S3::Bucket
    Properties:
      BucketName: !Ref WebStoreBucketName
      PublicAccessBlockConfiguration:
        BlockPublicAcls: "false"
        BlockPublicPolicy: "false"
      WebsiteConfiguration:
        IndexDocument: 'index.html'

  FcjDMSWebStorePolicy:
    Type: AWS::S3::BucketPolicy
    Properties:
      Bucket: !Ref FcjDMSWebStore
      PolicyDocument:
        Version: 2012-10-17
        Statement:
          - Action:
              - "s3:GetObject"
            Effect: Allow
            Principal: "*"
            Resource: !Join
              - ""
              - - "arn:aws:s3:::"
                - !Ref FcjDMSWebStore
                - /*

AddAmplify

  1. Chạy câu lệnh sau để build và deploy lại sam project:
sam build
sam deploy

AddAmplify

  1. Quay lại với thư mục gốc của Front-end project, chạy câu lệnh sau:
yarn build
aws s3 cp build s3://BUCKET_NAME --recursive

Thay thế BUCKET_NAME bằng tên bucket bạn vừa tạo để host website, ví dụ: aws s3 cp build s3://fcjdmswebstore --recursive

  1. Mở bảng điều khiển của Amazon S3
  • Chọn bucket vừa tạo

AddAmplify

  1. Chọn tab Properties và kéo xuống cuối cùng. Ấn vào URL của website

AddAmplify

  1. Ấn Sign up

AddAmplify

  1. Nhập tên người dùng, email và mật khẩu. Sau đó ấn Sign up

AddAmplify

  1. Mở email để lấy verify code và nhập vào trang web. Sau đó ấn Submit

AddAmplify

  1. Quay lại với bảng điều khiển của Cognito User Pool, ấn sang tab User bạn sẽ thấy tài khoản mình vừa đăng ký.

AddAmplify

  1. Đăng nhập vào website bằng tài khoản vừa đăng ký.

AddAmplify

  1. Đăng nhập thành công

AddAmplify

  1. Chọn My Profile ở menu phía bên trái, tiếp theo ấn Update profile.

AddAmplify

  1. Nhập mật khẩu cũ và mới, sau đó ấn Upadate

AddAmplify

  1. Ấn OK

AddAmplify

  1. Ấn Sign out ở menu phía bên trái

AddAmplify

  1. Ấn Sign in

AddAmplify

  1. Đăng nhập lại với tài khoản mà bạn vừa cập nhật.

AddAmplify

  1. Bạn đã đăng nhập thành công với thông tin tài khoản mới.

AddAmplify

Bạn đã hoàn thành việc host một website tĩnh trên S3, xác thực người dùng với Cognito, lưu trữ tài liệu trên S3. Tiếp theo chúng tã sẽ thiết lập REST API cho ứng dụng.