First Ticket: Get a Landing Page Live Today
My first week with Meridian Health team and this was the first ticket on my desk. The product about to launch, stakeholders are requesting to see the landing page of the product launch and no funding on getting a server. This means, do what you have to do to get us a landing page live, you are the cloud engineer so no excuses.
The solution to this is to provision an AWS s3 static website hosting served to the browser, no extra spending on server, no service subscription, and anyone anywhere in the world can access the landing page URL for the product launch.
Overview
For this task to be successful, I have to design and built a landing page for a fictional hospital “Meridian Health,” as a single self-contained HTML file with embedded CSS. Rather than hosting it on a traditional server, I be using Amazon s3 static website hosting feature.
But before I dive deep, what is s3? S3 is AWS simple storage service (s3). It is a storage service on AWS cloud. Think of it as a wardrobe or a cabinet where you can store your valuables. Those valuables cab be called object while the cabinet can be called bucket.
Conceptually, in AWS s3 the bucket is where objects are stored. This means whatever you store in an s3 bucket (files or folders) is called an object and also treated as an object.
What I did:
First was to login to AWS console and then checking to confirm the region for which I want to create the service
Once the region is confirmed, I created the bucket by navigating to s3 and clicking on ‘create bucket’
In creating the bucket I have to give it a name. S3 bucket names are globally unique across all of AWS, not just my account, so I had to pick something specific rather than a generic name like “hospital-site. Sometimes you pick a name and the system tells you name already exist. In this case you have to twerk the name a little bit more and you can also add numbers.
Then added a tag to it. Tags help to organize, manage, and control your AWS resources. Here I used Task = web-landing-page
Then click on create bucket to provision this bucket to be ready for use
Bur something happened when I clicked on create bucket, the service returned with an error message instead of creating the bucket.
After troubleshooting, I found out the problem. S3 bucket naming is case sensitive, it does not support uppercase letters and because my bucket name contains uppercase, the service won’t create the bucket. I have to correct that buy renaming the bucket.
Now the bucket is created but that’s not all, I have to upload the html file of the website which has already been provided for and then host this file to serve a browser which can be accessed by anyone, anywhere.
Uploading of files or folders into the bucket. This is done by clicking on the particular bucket provided there are more than on buckets in the console, click on upload and then select file or folder to upload. After selecting the file for upload, at the bottom, click the upload and yeah the file is uploaded successfully.
I have the files uploaded to the bucket and this is called an object
but no no no no…that was the wrong file. It could happen sometimes, I just have to take it out. Taking out a wrong object that was not supposed to be in the bucket can be done in two was
- On the bucket level. This way all I have to do is check the circle beside the backet and click on ‘EMPTY’. By emptying the bucket, it can be tricky because not all the object might be unwanted, some might be useful and important. This brings us to the other option
2. On the object level. Click on the bucket and then all objects stored in the bucket will display which you can select an object to delete.
Click on delete and AWS will ask just to confirm this is not done by mistake. Have to select the object again and type delete
Object deleted and now I have to upload the correct file. The next thing is to enable static website hosting and this is done on the object level by clicking on ‘Properties’
On the properties tab, scroll down to find ‘Static Website Hosting’ and click on ‘Edit’
This opens the page to enable or disable it but in this case because I want to host the product launch page on this service I enabled it
Then right after that, set the index document. This tells the browser where to take a visitor when they search or click the URL and that is called the home or landing page which is the core idea of the task. So yeah this is a very important aspect of the setup
The bucket is created, file uploaded to it to serve any browser, it has been enables to be hosted but one question. How can a visitor visit this site. Without a visitor visiting the site, then the goal is incomplete.
Get Osinachi Ndigidem’s stories in your inbox
Join Medium for free to get updates from this writer.
To be able to visit this site, there’s a ‘bucket website endpoint’. When an s3 bucket is configured as a static website, the website is available at the AWS Region-specific website endpoint of the bucket and the URL can be found at the bottom of the properties page where you find bucket website endpoint.
Copied the URL to test it before anything else just to see how it works or if need be for troubleshooting.
Wait a minute, the website didn’t display because of a 403 error. Now things are getting interesting here.
Remember s3 service is a storage service to store object and most object can be sensitive and private only for business use and not for the public. Due to this, AWS by default provisioned s3 to keep things private, in other to make the bucket accessible to the public, some intentional configurations has to be done.
Let’s deep dive into it.
- I have to turn off the ‘block all public access’ to let traffic into the bucket from public IPs.
By unticking the box, I granted access to the public to view the website and then save changes. Of course AWS will need to confirm that move to be sure it was not out of mistake.
2. Second thing to do is set the object policy. Why do I need to set a policy? I did this because I only want visitors to only read the website and not modify anything on it. This is least privilege and zero trust approach.
Editing the policy, I made sure the bucket name on the resource line of the JSON file is the same matches with the bucket name and save changes.
This time I refreshed the browser to test the URL again and I was glad it now giving what I wanted.
If you look closely on the top left of the screenshot where I circled, you would notice a warning saying: Not secure
The warning appears because the website is not using a valid HTTPS/SSL certificate. Amazon s3 website endpoints typically serve content over HTTP and not HTTPS.
This task was a good reminder that most of static hosting isn’t complicated once you understand the pieces ; bucket, hosting config, public access, and policy are each doing one distinct job but each one is a separate switch that has to be flipped correctly for the whole thing to work.
Key Takeout:
- Always cross check the region of your bucket. S3 works with region provisioning.
- When naming your bucket, give unique names and remember it is case sensitive.
- Do not empty bucket when you have more than one objects store in it, saver to delete object on the object level.
- Do not untick the ‘Block all access’ box when you have sensitive business objects store in your bucket.
- Test your configurations before shipping out.
