3. Deploy static website in AWS S3 Bucket

Deploy your static code into AWS S3

To deploy your website into AWS S3, first clone this repository into your local machine by following this steps

Make sure you've git installed, to check this open any command line and type git version , it should return git version 2.xx.x , if not then follow these steps on this link to install git.

• Create a new folder in your computer at preferred location. Or Let's create serverless folder on Desktop
• Open serverless folder, Go to address bar and type cmd(for windows operating system) to open Command Promt
• For other operating system, open your choice of CLI (terminal) and go to serverless folder
• Enter following command in terminal to clone git repo
  

git clone https://github.com/vik2595/serverless.git

Setup AWS S3 Bucket

• Login into your AWS Management Console.
• Go to Services , and open S3 under storage section.
• Click on Create Bucket enter www.serverlessdemo.com as bucketname

Bucket name should be universally unique, So if you'll get Bucket with the same name already exists error, then simply try a different name, also we're going to deploy a website so make sure that it should be in domain name format (start with www. and end with .com .io .net etc.)

• Click on drop down menu under Region and select Canada (Central) ca-central-1
• Keep rest of the setting as default and Scroll down to the end and click on Create Bucket
  

Now you'll able to see www.serverlessdemo.com bucket under S3 Buckets

• Drag and drop all folders and files from serverless folder to www.serverlessdemo.com S3 bucket except .git
• Click on Upload at the end of the page
• Go to your bucket again , then swith to Properties Tab
• Scroll down to end of the page and check Static Website Hosting. It is Disabled by default. click on Edit beside Static Website Hosting

Confirm Following Configuration in Edit static website hosting page

Static website hosting Enable
Hosting type as Host a static website
Index document as index.html
Error document as index.html
Click on Save Changes

To give public access to this website

• Go to your bucket again , then swith to Permission Tab
• Click on Edit under Block public access (bucket settings)
• Uncheck Block all public access and click on Save Changes
• Read the alert and type confirm and click on confirm to apply the changes

We do not want anyone to change our source code or to delete any files, So we will just give Read Permission to the public by assigning custom bucket policy

• Enter the following policy into Bucket Policy by cliking Edit beside the Bucket Policy

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "<Bucket ARN>/*"
        }
    ]
}

Replace <Bucket ARN> with your bucket ARN. You'll find Bucket ARN just above the Policy.

• Click on Save Changes to apply these changes
• Go to your bucket properties, Scroll down to the Static Website Hosting, and click on Bucket website endpoint

Cheers! Now you've successfully deployed your static website in S3 bucket.