How to Deploy Web Apps in S3?

Amazon S3 is an Object storage service owned by AWS which offers high availability, security, scalability, and performance. Customers across all industries and sizes can use Amazon S3 to back up and restore, archive, create enterprise applications, connect IoT devices, and create big data analytics from any amount of data.

Using Amazon S3, you can optimize, organize, and configure access to your data to meet your business, organizational, and compliance needs.

Advantages of S3

There are plenty of advantages with S3, a few of them are:

1. Highly Scalable: AWS S3 provides unlimited storage space and is highly scalable, allowing you to easily increase or decrease your storage capacity as needed.
2. Durability and Availability : AWS S3 stores data in multiple locations and provides a high level of redundancy, ensuring that your data is always available, even in the event of hardware failures or other disasters.
3. Cost-Effective : AWS S3 offers a pay-as-you-go pricing model, so you only pay for the storage you use. It also offers cost-effective storage tiers for infrequently accessed data.
4. Easy to Use : AWS S3 is easy to use and provides a simple web interface and APIs for storing and retrieving data.
5. Security : AWS S3 provides advanced security features, such as encryption, access controls, and multi-factor authentication, to help protect your data.
6. Integrations : AWS S3 integrates seamlessly with other AWS services, making it easy to build complex applications and workflows.

Use Cases of S3

S3 is generally used for the below purposes:

• Store and backup data
• Host static websites
• Share data
• Stream data
• Archive data

Here in this article we gonna learn how to use S3 Bucket as Static Website .

Prerequisites

• An AWS Account to create an S3 website
• Basic knowledge about AWS S3, Route53 (optional)

Terminology

• Static Website: A Static website consists of numerous files (static), which will be rendered as it is, without any dynamic content.
• S3 Website: It is a service provided by AWS which allows hosting a static website using AWS S3.

Steps To Deploy WebApp in S3

Create S3 Bucket

• Login to your AWS console by visiting https://console.aws.amazon.com.
• Open S3 Bucket Page
• Create Bucket, here bucket_name is unique across AWS.

Create S3 Bucket

Upload Files

• Our new bucket is ready, now we can upload our static files to our bucket.
• Click on the Upload button and choose the directory/files to upload.

Upload Files to S3 Bucket

Configure S3 Static Website

To use our S3 bucket as a static website, we need to enable the static website hosting feature.

• Click on Properties
• Navigate to Static website hosting , and click on edit
• Enable static website hosting and configure different settings available.

Edit Static Website Hosting Config

Enable Static Website Hosting

Configure Index Document

• Index document: default path of the website, here generally we place index.html

Configure Error Document

• Error document: It is the page that will be displayed if there is an error, for example, if a client accessed a path that doesn’t exist.

Configure Redirection Rules

• Redirection rules : We can also configure the redirection rules, the below redirection rules will redirect the abc/test.html to xyz/test.html :

Customizing static website

After saving the S3 bucket website setting, you’ll get the endpoint similar to below.

http://<bucket_name>.s3-website
.<region>.amazonaws.com

Update S3 Permissions

By default s3 bucket will be private, to make our website accessible to the public, we’ve to update S3 bucket permissions, we can update this through 2 methods,

1. By using the S3 bucket policy (to be able to access via website endpoint)

2. Bucket ACLs (to be able to access via S3 console)

Before the below steps, we need to uncheck the Block all public access option, (this should not be unchecked unless there is a requirement like this)

Uncheck “Block Public Access”

Using Bucket Policy

Add the below policy statement in bucket policy statements:

{ 
    "Version": "2012-10-17", 
    "Statement": [{ 
        "Sid": "PublicReadAccess", 
        "Effect": "Allow", 
        "Principal": "*", 
        "Action": "s3:GetObject", 
        "Resource": "arn:aws:s3:::<bucket-name>/*"
    }] 
}

This allows everyone (the public) to access the S3 objects using the S3 website endpoint.

By using ACLs

Note : Make sure ACLs are enabled for the bucket.

Enable ACLs

• Open Bucket -> Properties Tab
• Under the access control list (ACL), Click on Edit
• Check Everyone (public access) -> Read

This will allow any AWS user to access the bucket objects via the console.

Allow Public Read Access through ACLs

Custom Domain (optional)

We can now configure the custom domain for our S3 website, to set up a custom domain follow the below steps:

Note : You can do this only if you have a domain owned and the bucket name is the same as the custom domain you want to configure.

• Open route53.
• Open the host-zone associated with your domain.
• Specify the subdomain  (same as the bucket name)
• Add the route53 A record as Alias to the S3 website endpoint
• Choose the region the same as the bucket region (or check the S3 website endpoint).
• Then if you’ve enabled static website hosting, you’ll get a suggestion under S3 Endpoint as s3-website.ap-south-1.amazonaws.com (your bucket name), and value s3-website.ap-south-1.amazonaws.com will be set if you choose that option.

Add Route53 Record for S3 Website Endpoint

Note: The record name should match the bucket name if your domain name is example.com if your bucket name is test.example.com , your subdomain should be test , if your bucket name is example.com , leave the subdomain empty.