In this exciting exercise, you'll be on a journey to create a snazzy website hosted in Amazon S3. Get ready to roll up your sleeves!
*HTML (HyperText Markup Language) is used to create and design web pages. It's your way of telling the website where you want to display your text, images, videos and more. Think of HTML as the blueprint that shapes what you see when you visit a website.
**Static website hosting is what makes your website public on the internet. Even if you've spent hours and hours perfecting an HTML file, no one else can see it if it's just a file on your computer! Website hosting = storing your HTML file (and other files for your website) on a web server, so it's accessible online.
By the end of this exercise, you should be able to:
In this task, you will create an S3 bucket.
1. Once you're in the AWS Management Console, navigate to the Amazon S3 console.
2. Inside the S3 console, click Create bucket (if you can't find it, it's at the top-right corner if your browser is on full screen).
3. On the Create bucket page, provide a unique name for the bucket in Bucket name. (Remember the name must be unique across all buckets in AWS.) For example, use a name like myfirstbucket82464329083.
4. AWS Region: select the Region closest to you.
5. In the Object Ownership feature, select the radio button before the ACLs disabled (recommended).
We enabled ACLs in the last exercise, but as we mentioned, disabling ACLs = simpler permission management. It also helps prevent any unintended data exposure. Bucket policies are an easier way to manage access to your bucket.
6. For Block Public Access settings for this bucket, uncheck the box before the Block all public access.
7. A yellow banner has popped up. It's telling us the bucket and it's objects might become public if we do this (which is what we want for a public website). Check the box that says “I acknowledge that the current settings might result in this bucket and the objects within becoming public.”
8. Click Create bucket.
6. Click Upload.
7. Once the files are successfully uploaded, click Close.
Setting up a static website on Amazon S3 doesn't stop at making a bucket. You also need to configure its policies to make sure your website is accessible to the right people. In this task, you'll make a bucket policy and test the static website hosting to ensure a seamless and secure user experience.
1. Now that you're back to your S3 bucket's page, go to the Properties tab and click Edit under Static website hosting. You'll need to scroll to the bottom to find this section.
2. Static website hosting is disabled - we need to enable it. Select Enable. Notice when you enable it there’s additional information we need to enter:
3. Static website hosting: Enable.
4. Hosting type: Host a static website.
5. Index document: index.html
6. Click Save changes.
7. Scroll back down to the Static website hosting section. Notice the URL (i.e. website link) generated after you enable static website hosting. Open it in a new tab or copy and paste it into your web browser to view the output.
Oo - an error!
Why? It's because the objects (i.e. the HTML and images files) are not set up for public access. It doesn't matter that we've set up our S3 bucket as public because the objects themselves are private. To solve this error, we need to set the permission of the objects to public.
Let's fix that spicy error.
Don't close the tab that's showing the error message, but let's click back to the tab with our AWS Management Console.
1. Navigate to the Permissions tab and click Edit under Bucket policy.
2. In the Edit bucket policy window, we need to enter a policy that is written into a code. No stress - we're not writing code today!
3. To generate a policy without writing code, simply click on Policy generator.
4. In the AWS Policy generator window, you can generate your policy by selecting your needed requirements. In this exercise, we need to generate a policy for S3:
The GetObject action allows permissions to retrieve (download) objects from the bucket. Essentially, it controls who can read or download the file from the bucket.
An ARN is a unique identifier for an S3 bucket - it's like a driver's license number that only you would have. Copying the bucket's ARN into the policy generator guarantees that the policy is tailored to the specific bucket. This step prevents errors and ensures the policy applies to the correct bucket.
When you add /* at the end of an ARN in the bucket policy generator, it means the policy applies to all things inside the bucket, not just the bucket itself. This way, you can control permissions for the objects in the bucket too.
5. Choose Add Statement. Notice the /* at the end of the ARN
6. Click Generate Policy.
7. Copy the generated policy, return to your bucket policy page, and paste it into the Bucket policy area.
In summary, this bucket policy allows any user ("Principal": "*"), to download objects ("Action": "s3:GetObject") from the S3 bucket named "sampledemo13903849". The policy applies to all objects within the bucket (because we wrote "/*" at the end of the "Resource": "arn:aws:s3:::bucketname/*").
8. Click Save changes.
9. Now, let’s test it. Refresh the page where you received an AccessDenied message from the previous task. If you've closed the page, navigate to Properties and click the URL under the Static website hosting section again.
The output should be the same as below:
Looking good! 😎
In this task, let's delete the S3 object and bucket so you're not racking up any charges in your AWS account.
We challenge you to try to give this a go yourself! Do you think you can delete the resources you've created today?
Tip: Before you delete the S3 bucket, the S3 bucket must be empty - delete first the S3 objects.
If you're feeling stuck (no worries, we've all been there), here's a little guide:
Nice work, you've completed this hands-on exercise! You've successfully:
