Skip to content

Instantly share code, notes, and snippets.

@debojyoti
Last active March 8, 2021 07:30
Show Gist options
  • Save debojyoti/3bd36ea593c35050125031f98383230b to your computer and use it in GitHub Desktop.
Save debojyoti/3bd36ea593c35050125031f98383230b to your computer and use it in GitHub Desktop.

AWS auto deployment setup

Using: S3 Bucket, Cloudfront, Code Commit and Pipeline

1. Prepare the S3 bucket for static file hosting

1.1 Create a bucket and uncheck "Block all public access" 1.2 Edit the bucket policy under "Permissions" tab Use the follow policy

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

1.3 Enable static website hosting under the "Properties" tab

Note: No Redirection rules required, we will set them in cloudfront

That's all for S3!

2. Setup cloudfront

2.1: Create a new Distribution on Cloudfront 2.2: In the "Origin Settings", just select the Origin Domain Name from a set of S3 buckets. Select the one you want to add cloudfront with. It will automatically fill Origin Id. You don't need to fillup any other fields in this section

https://res.cloudinary.com/dqzurhnfk/image/upload/v1615186920/gists-media/cf-origin-settings_grsjpk.png

2.3: In the "Default Cache Behavior Settings" section, update the following fields only Viewer Protocol Policy: Redirect HTTP to HTTPS Cache Policy: Managed-CachingDisabled https://res.cloudinary.com/dqzurhnfk/image/upload/v1615186920/gists-media/cf-cache-behaviour-settings_qfw90q.png

2.4: We don't need to update anything in Distribution settings. Click on the "Create Distribution" button at the bottom https://res.cloudinary.com/dqzurhnfk/image/upload/v1615186920/gists-media/cf-cache-behaviour-settings_qfw90q.png

2.5: We need to add custom error responses under Error Pages Tab https://res.cloudinary.com/dqzurhnfk/image/upload/v1615188396/gists-media/error-pages_hivznm.png

Create a 404 custom error response with the following values https://res.cloudinary.com/dqzurhnfk/image/upload/v1615188276/gists-media/404-error_h9u5bd.png

And create a 403 custom error response with the following values https://res.cloudinary.com/dqzurhnfk/image/upload/v1615188276/gists-media/403-error_amxa6o.png

We are done with cloud front setup. Copy domain name from "General" tab. It will be the address of the application

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment