Static Website Hosting On AWS S3

In the previous article, we learned about S3 along with different storage types and lifecycle policies.

 

In this article we will be seeing an interesting use case, where we can actually host a static website using S3 and will be covering the below topics:

• Creating a new IAM user to access S3 from the command line
• Some useful AWS S3 CLI commands
• Hosting a static website on S3

If your website is static, then we can easily host that website on S3 just by enabling static website hosting on the S3 bucket.

 

To do that we will be doing it using AWS CLI. So, let's install AWS CLI.

 

 

Once the AWS CLI is installed, we can access it using PowerShell, command prompt, or git bash.

 

Now to connect to the AWS account, we will be using the below command

aws configure

 

As it is asking for the AWS Access Key Id, so we will be creating an IAM User account and will give programmatic access to that account.

 

This new account we will be using to access the S3.

 

CREATING NEW IAM USER TO ACCESS S3

 

To create a new IAM user, we will go to the IAM service and will go to the Users section.

 

Then we will click on Add User and set the access type as programmatic access so that this user can be used with AWS CLI.

 

 

Then for now in the permissions section, we will give full access to S3.

 

And will add Tags also.

 

 

So, finally, we will create the user with the settings mentioned above.

 

We can see that our User has been created successfully and now we have the Access Key Id and Secret Access Key.

 

 

So as our s3admin user is now created, so let’s go back to the command prompt and run the command again.

aws configure

 

And now we are done with the configuration part.

 

SOME USEFUL AWS CLI COMMANDS

 

Let’s now play with some of the AWS CLI commands for S3

 

We can use the below command to see the help on s3.

aws s3 help

 

The below command will list all the buckets from the account

aws s3 ls

We can also see the bucket content using the command

aws s3 ls s3://bucket-07042021

 

and we can see the only uploaded pdf document.

 

Now, we will be using S3 to host a static website.

 

HOSTING STATIC WEBSITE ON AMAZON S3

 

To host a website on S3, we will be downloading a static template from https://www.tooplate.com/ and will download a template called “Brunch” and then will extract it.

 

After extraction, we will go to the extracted folder location.

 

 

And here we can see all the files, which we need to copy to the S3 bucket.

 

Now to copy all this data we can use the cp command, but that may cause an issue if we have a lot of data to copy and if it fails in the middle, then the cp command will again start from 0 to copy all the data. So for such cases, we use the sync command.

 

To sync the folder with the bucket, we can use the below command where. indicates current directory

aws s3 sync . s3://bucket-07042021

sync command will not copy the data again in case of failure, which has already been copied.

 

 

And we can see that the sync has started.

 

If we go back to our S3 bucket in AWS, we can see that the entire data has been synced.

 

 

As earlier we have made our dummy pdf object public, similarly, we will have to make all the objects which we have just copied public also. NOTE: We have already made our bucket publicly accessible.

 

Also, go to the bucket properties and Enable static website hosting for the entire bucket and specify the default page.

 

 

And after enabling it, we get the publicly accessible endpoint.

 

 

And make all data in the bucket public.

 

 

And now we can see that our static website is up and running successfully.

 

 

SUMMARY

 

To conclude we can say that so far we have seen some useful commands of AWS CLI for S3,  the difference between copy and sync commands, creating IAM User and the permissions, and finally hosting a static website on S3. So, In the coming article, we will see how we can set up lifecycle rules for the bucket and the replication.

 

I hope you find this article helpful. Stay tuned for more … Cheers!!