Create S3 Bucket for hosting

Our new partner website, called Unicorn Manager, is also a static application hosted on Amazon S3.

  • You can define who can access the content in your S3 buckets using a bucket policy.

Bucket policies are JSON documents that specify what principals are allowed to execute various actions against the objects in your bucket.Bucket policies are JSON documents that specify what principals are allowed to execute various actions against the objects in your bucket.

By default objects in an S3 bucket are available via URLs with the structure http://.amazonaws.com//. In order to serve assets from the root URL (e.g. /index.html), you’ll need to enable website hosting on the bucket. This will make your objects available at the AWS Region-specific website endpoint of the bucket: .s3-website-.amazonaws.com

Because our application interacts with Cognito via the OAuth 2.0 implicit flow, which requires a redirect, we need our website to use HTTPS.

  • To have an HTTPS endpoint for an S3 static website, we can use a CloudFront distribution.

Step 1: Go to AWS S3 console

Step 2: Choose Create Bucket

Step 3: Provide a globally unique name for your bucket such as unicornmanager-firstname-lastname.

Step 4: Select the Region you’ve chosen to use for this workshop from the dropdown

Step 5: Choose Create in the lower left of the dialog without selecting a bucket to copy settings from security

Step 6: Open the bucket you just created. Go to Public Access setting, untick Block all public access and choose Save security

Step 7: Choose the Permissions tab, then click the Bucket Policy button

Step 8: Enter the following policy document into the bucket policy editor

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

security

Step 9: Choose Save to apply the new policy. You will see a warning indicating This bucket has public access. This is expected

Step 10: Next, choose the Properties tab

Step 11: Choose the Static website hosting card

Step 12: Select Use this bucket to host a website and enter index.html for the Index document. Leave the other fields blank.

Step 13: Note the Endpoint URL at the top of the dialog before choosing Save

security

Step 14: Click Save to save your changes

Step 15: Next, go to AWS CloudFront console

Step 16: In the CloudFront Distributions page, click Create Distribution

Step 17: For the delivery method, under Web section, click Get Started

security

Step 18: In the Origin Domain Name field, paste the URL for the S3 static website we just created and / as the origin path.

Do not select the bucket from dropdown list, paste the full website url including the http:// prefix. The origin type should be custom, not s3.

Step 19: In the Viewer Protocol Policy make sure that Redirect HTTP to HTTPS is selected security

Step 20: Under Distribution Settings for Price Class, select Use Only US, Canada and Europe

Step 21: Click Create Distribution at the bottom of the page

Step 22: Creating a global distribution can take some time. Let CloudFront do its work in the background and move on the next step. We will come back to get the distribution endpoint at a later step