Tide alert system
In Cloud Quest, there will be various people who will be asking for your help to solve their business problems.
The first person you meet is The Mayor, he has a problem that you should solve. You will understand those problems, gather requirements, learn cloud computing concepts and suggest them solutions.
The Challenge
The website that posts the predicted wave tides at the city's shore is offline. Surfers who desire high waves plus beach-goers who desire low waves don't know when to go to the beach.
This leads to low traffic at the beaches == low tourist income.
The Solution
Through further conversation the solution is to deploy a static website with AWS by uploading your website content into S3 bucket, configuring your bucket for website hosting and speeding up content delivery using AWS CloudFront.
Hosting a static website with AWS
Aws S3
Storage is the first AWS offering that Amazon offered. Storage therefore holds a significant place in the AWS ecosystem, including some
extremely innovative uses of its storage services by AWS customers
over the year
Simple Storage Service (fondly known as S3) is one of the richest, most flexible, and, certainly, most widely used AWS offerings. It’s no exaggeration to call S3 “the filing cabinet of the Internet.” Its object storage is used in an enormous variety of applications by individuals and businesses, such as:
✓ Dropbox
✓ Netflix
✓ Medcommons
Aws CloudFront
AWS CloudFront is a globally-distributed network offered by Amazon Web Services, which securely transfers content such as software, SDKs, videos, etc., to the clients, with high transfer speed.
Step 1 — Create an S3 bucket
Login into your AWS management console and click on Services on the top navbar.
Select S3 from the Storage section. This should display the S3 dashboard.
From the S3 dashboard, click on Create bucket. Give the bucket a unique name, the name you choose must be globally unique.
Next, choose your preferred AWS Region from the drop-down.
Under Block Public Access settings , uncheck the Block all public access checkbox and accept the acknowledgement and make the bucket accessible to the public because you are going to host a website in it.
Click on disable for Bucket Versioning.
You can also Add tag to the bucket for easy identification.
Under Default encryption section, click on disable for Server-side encryption.
Click on Create bucket.
Step 2 — Upload web files to S3 bucket
After creating the bucket, you need to upload the website’s files and folders into it. The files (index.html, main.js, style.css, data.csv) are provided in the lab section on the game.
From the S3 dashboard, click on the name of the bucket you just created.
On the Objects tab, you can see that the bucket is currently empty, click on the Upload button.
Click Add files to add the website files.
After the necessary files have been added, scroll down and click on Upload.
Step-3 — Security
Add some policies to secure your bucket.
From the S3 dashboard, click on the name of the bucket, then click on Permissions tab.
Scroll down to the Bucket policy section and click on its Edit button.
To grant public read access for your website, copy the following bucket policy, and paste it in the Bucket policy editor.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::Bucket-Name/*"
]
}
]
}
Update the Resource to your bucket name. In the preceding example bucket policy, Bucket-Name is a placeholder for the bucket name.
Choose Save changes. A message appears indicating that the bucket policy has been successfully added.
Step 4 — Configure S3 bucket
Specify the default page for your website.
From the S3 dashboard, click on the name of the bucket, then click on the Properties tab.
Scroll down to the Static website hosting section and click on its Edit button.
Select Enable for Static website hosting. Also, select Host a static website for the Hosting type.
Enter the file for your index.html document.
Scroll down and click on Save Changes.
Step 5 — Serve content from S3 bucket with CloudFront
Networking & Content Delivery
Click on CloudFront.
Click on Create Distribution.
On Select a delivery method for your content page,
Click on Get Started under the Web section.
Origin Settings section, click on the Origin Domain Name field and select the S3 bucket you created earlier. In the Origin Path field, enter / to indicate root level.
Restrict Bucket Access, select Yes.
Origin Access Identity, select Create a New Identity.
Grant Read Permissions on Bucket, select Yes
Update Bucket Policy.
Default Cache Behavior Settings section, Viewer Protocol Policy, select Redirect HTTP to HTTPS.
Distribution Settings section, Default Root Object field, enter the filename at the root level, which should be your landing page (index.html).
Leave the rest of the options as default and click on Create Distribution.
After the CloudFront distribution has been deployed, copy the URL from the Domain Name column and paste it into your browser.
You should now know how to host a static website with Amazon S3 and speed up the content delivery using AWS CloudFront.
Extra steps
Top comments (0)