iversity of Wolverhampton

School of Mathematics and Computer Science

5CS022 Distributed and Cloud Systems

Programming
Exploring AWS S3, AWS Amplify and Beanstalk Cloud
Services

Overview
In this workshop you will explore 3 related Cloud Computing services with Amazon AWS: S3, AWS
Amplify and Beanstalk. These 3 services are often used together to create cloud-based web
application services using AWS.

Part 1 and Part 2 will show you how to deploy and publish a static website to the internet via AWS
S3 and AWS Amplify, and Part 3 will show you how to deploy and publish a dynamic web application
via Elastic Beanstalk.

You will need to use the Google Chrome web browser for this workshop.

Part 1. Creating an S3 Bucket to host a static web page

Follow these steps to create an Amazon Simple Storage Service (Amazon S3) bucket to host a static
website.

A static website is fixed and displays the same content for each user. In contrast, a dynamic
website uses advanced programming to provide user interaction and display different content
depending on the user's selections.

Access the AWS Management Console

1. Go to https://awsacademy.instructure.com/ and login.

2. Then go to "Modules" and then Learner Lab - Foundational Services.

3. To start the lab session, choose Start Lab in the upper-right corner of the page.

o The lab session starts.

o A timer displays in the upper-right corner of the page and shows the time
remaining in the session.

Tip: To refresh the session length at any time, choose Start Lab again before the timer reaches 0:00.
 4. Before continuing, wait until the lab environment is ready. The environment is ready when
the lab details appear on the right side of the page and the circle icon next to the AWS link
in the upper-left corner turns green.

5. To connect to the AWS Management Console, choose the AWS link in the upper-left
corner, above the terminal window.

A new browser tab opens and connects you to the AWS Management Console.

Tip: If a new browser tab does not open, a banner or icon is usually at the top of your browser with
the message that your browser is preventing the site from opening pop-up windows. Choose the
banner or icon, and then choose Allow pop-ups.

Task 1. Create an S3 bucket

4. Choose the Services menu, locate the Storage services, and select S3 or just simply search S3
and select S3 “Scalable Storage in the Cloud”.

5. Select Create bucket on the right side of the page.

6. For Bucket name, enter a unique Domain Name System (DNS)-compliant name for your
new bucket that is specific to you, for example, " pk5cs022"

These are the DNS naming guidelines:

o The name must be unique across all existing bucket names in Amazon S3.
 o The name must only contain lowercase characters.

o The name must start with a letter or number.

o The name must be between 3 and 63 characters long.

o After you create the bucket, you cannot change the name, so choose wisely.

7. For Object Ownership, select ACLs enabled.

8. Uncheck(clear) the Block all public access box because you want to be able to test if
the website is working.

A warning message similar to Turning off block all public access might result in this bucket and the
objects within becoming public appears below the security setting you deselected.

9. Below the warning, check the box next to I acknowledge that....

 10. Scroll to the bottom of the page, and select Create

bucket. Your new bucket appears in the Buckets list.

Task 2. Add a bucket policy to make the content publicly available

11. Click on the link for your bucket's name, and then select the Permissions tab.

12. In the Bucket policy section, choose Edit.

13. To grant public read access for your website, copy the following bucket policy, and paste it
in the policy editor, replacing the default one that is already there:

"Version": "2012-10-17",

"Statement": [

"Sid": "PublicReadGetObject",

"Principal": "*",

"Effect": "Allow",

"Action": [

"s3:GetObject"

],

"Resource": [

"arn:aws:s3::: pk5cs022/*"

}
 14. Obviously, replace "pk5cs022" with the name of your own bucket.

15. Select Save changes at the bottom right of the page.

Task 3. Upload an HTML document

In this task, you upload an HTML document to your new bucket.

16. Download the sample HTML web page from:

https://drive.google.com/file/d/1wwk9FqoVpa_mmjNQqYLMCIGKoG7wV5mX/view?usp=sha
ring and save it as: index.html

17. In the S3 buckets console, choose the Objects tab.

18. Upload the index.html file to your bucket.

o Choose Upload.

o Drag and drop the index.html file onto the upload page.

o As an alternative, choose Add files, navigate to the file, and choose Open.

19. Expand the Permissions section.

20. Under Predefined ACLs, select Grant public-read access.

A warning message similar to Granting public-read access is not recommend appears below the
setting you selected.

21. Below the warning, check the box next to I understand....

22. Expand the Properties section.

This section lists the storage classes that are available in Amazon S3..

Ensure that the Standard storage class for general purpose is selected.

23. At the bottom of the page, choose Upload.

 24. Choose Close.

The index.html file appears in the Objects list.

Task 4. Test your website

26. Go back to your S3 Bucket console for your bucket.

27. Select the Properties tab, and scroll down to the Static website hosting section (the
last one).
28. Choose Edit.

29. Select Enable.

 30. In the Index document text box, enter index.html

31. Select Save changes.

32. Scroll down to the Static website hosting section again, and right click on the Bucket
website endpoint URL and open it in a new tab.

The Hello World web page should display. You have successfully hosted a static website using an S3
bucket.
Part 2 Using AWS Amplify to Host a Website Stored on S3

In this part, you will use AWS Amplify to host and manage your website stored in the Amazon S3
bucket. AWS Amplify simplifies deployment, provides secure global hosting, and automatically
manages scaling and updates for your website, making it easier to maintain and deliver content
efficiently.

Task 1. Create a AWS Amplify app to serve your website

1. Go to the main AWS Console

2. Choose the Services menu, search AWS Amplify.

3. On the right-hand side, click Create New App.

4. Choose Deploy without Git and press next.

5. In the App Name field, type NameSurnameWebApp (e.g., poojaKaurWebApp).

6. In the Branch Name field, type 5cs022.

7. Select Amazon S3 as the method.

8. Click Browse S3, choose the S3 bucket you created in Part 1

9. In the branch name type 5cs022 and select Amazon S3 as Method and press Choose Prefix.

10. Once your form looks like below click on Save and Deploy.

11. Wait until the Status says Deployed, you can test your app.

12. Once deployed, click on the Domain link provided by AWS Amplify, and you should see
the index.html page you uploaded to the S3 bucket.
13. Copy the Domain Name value for your distribution and save it to a text editor to use in
a later step.
Task 2. Create a new HTML page

14. Create a new HTML file to test the distribution.

o Find and download an image from the internet.

o Navigate to your S3 bucket and upload the image file to it, making sure to grant
public access as you did when uploading the HTML file earlier in this lab (follow
Task 3 in part 1).

15. Go back to AWS Amplify and click on the name of your app.
16. Press Deploy Updates to redeploy changes whenever you make changes to your s3 bucket.
17. This will take you to the same process as before, however this time is to update the
domain so just select Amazon S3 and Save and Deploy (leave the S3 location as it was).

18. Wait a few minutes for it to be deployed.

19. Create a new text file using Notepad and copy the following text into it:
<html>
 <head>My Amplify App</head>

<body>

<p>My test content goes here.</p>

<p><img src="http://domain-name/object-name" alt="my test image">

</body>

</html>

o Replace domain-name with the domain name that you copied earlier for your
AWS Amplify.

o Replace object-name with the file name of the picture file (cloud.jpg) that you
uploaded to your S3. The edited line of code should look similar to the
following:
<p><img src="https://5cs022.d3desjyf0aypv3.amplifyapp.com/cloud.jpg" alt="my test
image">

o Obviously, replace my example URL with yours.

o Save the text file with an HTML extension.

20. Use a web browser to open the HTML file, mine looks like below.

If the image that you uploaded shows, your deployed Amplify app was successful. If not, try again
later or with a different image but make sure the link of the image is the domain you have just
created.

Explore these two services further by creating and uploading other HTML pages and images and
deploying them to the S3 and AWS Amplify services.

Remember that every time you upload a file on S3 you must re-deploy (deploy updates) your app on
Amplify to see the changes on your domain.
Part 3. Creating a web application using AWS Elastic Beanstalk

In this lab, you will deploy and publish a PHP web application using AWS Elastic Beanstalk.

Task 1. Deploy an application using Elastic Beanstalk

1. Go to the main AWS Console

2. Choose the Services menu, locate the Compute services, and choose Elastic Beanstalk.

3. Choose Create Application.

4. For Application name, enter a name for your application, younameWebApp

(e.g. PoojaWebApp)

5. For Platform, select PHP.

6. For Application code, select Sample application.

7. For Presets select “Custom configuration”

8. Scroll down to “Security” and click Edit.

9. Select the following options:

10. Click Skip to review and Submit.

11. Click Create app.

Wait for the console as Elastic Beanstalk creates and runs the necessary resources to run the
application. It takes a few minutes for the process to complete.

Elastic Beanstalk creates an Amazon Simple Storage Service (Amazon S3) storage bucket and a
security group, launches an Amazon Elastic Compute Cloud (Amazon EC2) instance and runs the
code.

When complete, the screen changes to show the newly created environment. It is ready for you to
upload a PHP application.

10. Download the sample web application from the following link:

https://drive.google.com/file/d/1pZuuWaDrm53OJaktxVUZ-bLmEfXA1vk4/view?usp=sharing

You should now have a file called php.zip.

11. Return to the Elastic Beanstalk console tab.

12. Choose Upload and deploy.

13. Choose Choose file, navigate to and select the php.zip file that you downloaded, and choose
Open.

14. Choose Deploy.

The application deploys to the environment using all of the cloud resources Elastic Beanstalk
provisioned.
15. To see your PHP website, in the left navigation pane, choose Go to environment.

The web application opens in a new tab.

This is the end of this workshop. Now go back to the AWS Academy website and click on “End lab” to
stop AWS from consuming any further credits.