Part 2: Create AWS S3 Static Website

Create AWS S3 Static Website

So far we have seen the introduction on what services we require to build an AWS Serverless Web Application. Now lets create a serverless AWS S3 static website first.

We don’t want to write all of the HTML and CSS now, since it is AWS Serverless tutorial. So I am going to download a free website template from here.

So now we should upload this to S3 bucket. If you don’t have an AWS account, follow this tutorial to create one.

Login to AWS account. Then navigate to S3 section. Create a bucket using the following steps.

Creating a Bucket and Setting up Static Website

Important: For pointing your DNS to S3 bucket, your DNS and S3 bucket should have same name. Therefore, if your DNS name www.example.com, then your bucket name should be www.example.com as well.

  1. Click on “Create bucket” button.
  2. Enter bucket name, region and click create. Bucket name is a unique name, you cannot create a bucket with a name that someone have already created.

    create-s3-bucket-png
    Create S3 Bucket
  3. After the new bucket is created, click on the bucket name. You will see 4 tabs which are Overview, Properties, Permissions and Management. Click on Properties tab.
  4. Now you will see different options in the tab, click on Static website hosting.
  5. Select Use this bucket to host a website option in the radio buttons group. You can see the S3 endpoint on the top of this option. This URL can be used to access the website.
  6. For now, name the index document as index.html and error document as error.html. Click Save. 

    turn-on-hosting-png
    Turn on static web hosting

Setting up Permissions

  1. Now if you try to access the website, it will give you 403 Forbidden error. Reason for the error is bucket does not have public access. Lets give it public access.

    forbidden-png
    Forbidden Error
  2. Go back to S3 home page. Click on the bucket name. In the 4 tabs click Permissions tab.
  3. Add the following text in your Bucket policy editor and click Save. Don’t forget to change your bucket name in the configuration. That is, if your bucket name is abc then replace arn:aws:s3:::luckyblogger with arn:aws:s3:::abc .
    {
       "Version": "2012-10-17",
       "Statement": [{
          "Sid": "AllowPublicRead",
          "Effect": "Allow",
          "Principal": {
             "AWS": "*"
          },
          "Action": "s3:GetObject",
          "Resource": "arn:aws:s3:::luckyblogger/*"
       }]
    }
  4. If you access the website using the S3 endpoint, it is not working yet and returning 404 Not Found. This is because, we don’t have index.html and error.html in our bucket.

    no-files-ong
    No files error

Uploading Content

  1. Lets upload the downloaded website template.
  2. Go back to S3 home page. Click on the the bucket name. In the overview page, there is an option to upload files and create folders. Use those options to upload all your website files.

    upload-files-png
    Uploaded files in S3
  3. If we check the website now, it is working.

    AWS S3 Static Website
    Website
  4. We have to add an error.html file, since it is not available in the downloaded template. Therefore you have to create one and upload it. Now try to access a webpage that is not available, it will show your error.html page instead.

    error-page-png
    Error page for non-existent URL

Setting up DNS

  1. So your AWS S3 static website is ready. You can use DNS name to point to this S3 endpoint but as said earlier, you should use the DNS name as your bucket name to achieve this.
  2. Following are the records that you have to add. CNAME record on www and a redirect record from @ (naked) domain to www domain.

    cname-record
    URL Records for DNS Management

Finally we have created an AWS Static Website. Do leave your feedback. 🙂

Previous: Introduction

Next: Send Email using Lambda function 

 

Please follow and like us:
error

Leave a Reply

Your email address will not be published. Required fields are marked *