Deploying Fast and Secure Web App on AWS Part 2b: Website Setup
We have been telling too many theoretical stories in Part 1a, 1b, and 2a of this series. It is time to get our hands dirty and start the action we have been teasing with for too long. From this point, we will be setting up a scalable website. The setup will be in two modes. The infrastructure will be set up using Terraform and it will be set up using the AWS Console. At the end of this piece, you will be able to create a static website in Amazon S3.
Let us Begin
The first stage here is to set up the Amazon S3 bucket, which serves two purposes:
- The location to save the website files (HTML, CSS, and Javascript) files
- The webserver to serve the website files on the browser. Like every other web server out there; Apache or Nginx.
The first step is to ensure you have an AWS account. Go to https://portal.aws.amazon.com/billing/signup#/start. The signup process is free, though you will be asked to provide your card details. We will ensure we keep the cost of running this website to the barest minimum, so we do not incur any significant cost to host this website.
When the AWS account is activated, login to the AWS Console.
The figure above is the page we land on when the login is successful. It shows the list of AWS services. Our focus is to create an S3 bucket to host our website. We will create the bucket and write a simple HTML website and upload it to the S3 bucket.
Creating the S3 Bucket
To create the S3 bucket, search for S3 on the AWS Management Console.
Click on the S3 link to load the Amazon S3 console.
The S3 Management console shows the list of existing buckets and an option to create new buckets. To create a bucket, click on the Create Bucket button. To create the bucket, then type the name of the bucket.
Ensure the name of the bucket is the same as the domain name for the website. For example; if the domain name is scrapersloung.io, then the bucket name must be mcsseries.io. S3 buckets also support sub-domains, so you can host, a subdomain on S3, but it has to be in a different bucket and not the same bucket where the domain was created. After typing the name of the bucket; click on the Create button.
The create button will then create the bucket and it becomes visible as one of the lists of buckets.
Configure the Bucket as a Website
Now that the bucket has been created successfully, the next stage is to make the bucket a website. An S3 bucket is primarily designed to store files/objects with unlimited storage. But we are using it for a website. So we need to go ahead and make the bucket a website which is what we are configuring it for. To do that, click on the bucket that was just created. This will take us to the Overview of the bucket and giving options to other tabs, such as the Properties, Permissions, Management, and Access Points.
The focus here is on the Properties tab. This is where the bucket configurations are made to make the bucket become a website. Click on the Properties tab. The Properties tab is made up of different options.
The option we need out of all is the Static website hosting. Click on the Static website hosting option to configure the website.
Click on the option Use this bucket to host a website.
The first box is labeled, is Index document, which should specify the home page of the website, which is usually index.html by default. Simply input index.html. There is also the Error document, which is quite not compulsory, so it will be left blank. Click the Save button to save these changes. Take note of the URL of the bucket, that is the URL we will be using to visit our website when it has been uploaded/deployed. For this example, the URL is: http://mcsseries.io.s3-website.us-east-2.amazonaws.com
Making Bucket Public for Internet Access
Due to the fact that this is a website, hosted in S3 and need to be accessed over the internet, we have to make the bucket public and the objects in the bucket public. To do that, click on the Permissions tab. The default item selected is Block public access. On the screen, click on the Edit button.
Uncheck the first item in the list with the label Block all public access. To give the bucket public access. Click the Save button to save the change. This will show the pop-up to confirm the changes that have been saved.
Type confirm in the box and click the Confirm button to confirm the changes that have been made.
N.B.
The only reason this bucket is made public is that it is a website. When you create an S3 bucket, for storing more sensitive objects, it is advisable to keep it private to avoid access over the public internet. See more here.
The other public access that needs to be configured is on the Bucket Policy. This policy is used for objects inside the bucket. The policy is generated using the Policy Generator link at the bottom of the page. We have generated a bucket policy and it looks like this.
The most important part of the policy is the Resource part, change the last values to your specific Resource. The item arn:aws:s3:::mcsseries.io/*. What changes is the bucket name, which in this example is mcsseries.io. Ensure to change for yours when doing your configuration. It has to always be the name of the bucket.
Paste it in the Bucket policy editor and click the Save button.
This will make all the objects in the bucket to be publicly accessible.
Uploading/Deploying our Website
Now that the bucket is ready and has been configured to be a website, the next step is to upload our website. S3 for web hosting hosts HTML, CSS, and Javascript websites. Apps build with Angular, React and Vue can be hosted in S3. For this simple example, I will be using a very simple HTML file for demonstration.
This HTML file will be uploaded into the S3 bucket. To do that, click on the Overview tab which is the first tab we landed on initially. Click on the Upload button on the top menu bar, just below the Overview tab.
This will launch the pop-up to allow for uploading the HTML file
You can either drag the file from the directory it is saved, into the screen, or click the Add files, button to add the file to the list of what needs to be uploaded.
Click on the Upload button to upload the file.
Click on the URL shared earlier to view the uploaded website: http://mcsseries.io.s3-website.us-east-2.amazonaws.com. This will reveal the website.
Conclusion
This is the first step in getting your website up. With this setup, there are no servers to manage and the website scales almost infinitely. You can always upload a more complex proper web page, as I used a simple web page to demonstrate this example. Next up is how to attach caching to this website and speed it up. Stay Tuned
MyCloudSeries is a training and consulting firm with expertise in Cloud Computing and DevOps. We assist organizations in their DevOps strategies, transformation, and implementation. We also provide Cloud Computing Support contact us at www.mycloudseries.com
