EC2 Exercise 1.3: Host a Static Webpage with Content from S3

Kerry Sheldon
4 min readMay 6, 2018

--

(This post is part of the AWS for the Bootcamp Grad series. The series consists of exercises to build familiarity with various aspects of the AWS ecosystem. Again, all of these posts are “exercises” for introductory exposure to AWS — they are NOT represented as best practices.)

Background

Many of the steps in this exercise will be the same as the ones covered in the previous exercises. However, in this exercise you will upload an index.html file into an S3 bucket on AWS and copy that file onto your EC2 instance.

This exercise is designed to reinforce the skills covered in the last exercises, as well as introduce two new AWS services: S3 and IAM.

In this exercise, you will do the following:

  • Create an S3 bucket
  • Upload an index.html file to your S3 bucket
  • Create an IAM role
  • Launch an EC2 instance through the AWS console and attach the IAM role
  • SSH into to the EC2 instance and install a web server
  • Copy the index.html file from S3 onto your EC2 instance

Create an S3 bucket

S3 is an Amazon service where you can store files (or objects) in the cloud. S3 is similar to the file system on your physical computer, and S3 “buckets” are akin to folders.

On your local machine, create an index.html file with valid html content. Then, from the AWS console and search for “S3” and navigate to the S3 dashboard.

From the S3 dashboard, click “Create Bucket”. Enter a bucket name of your choice (note: bucket names are global across all AWS accounts and must be unique).

Click Create (or click Next through all of the remaining steps and click Create Bucket at the end).

Upload an index.html file to your S3 bucket

From your S3 dashboard, click on the name of the bucket you just created.

Click upload. Add the html file you just created and click next through the remaining options. Click Upload at the end.

Create an IAM Role

In the last exercise, you generated an SSH public-private key pair on the EC2 instance in order to to access your files on Github. In this exercise, the comparable action is to grant permission to the EC2 instance get the index.html file from S3. To do that, you need to create an IAM role through the AWS console (IAM stands for Identity and Access Management).

From the AWS console, search for IAM and navigate to the IAM dashboard. Click on Roles in the sidebar on the left.

Click ‘Create role’. First select the service that will be using this role. In this case, your EC2 instance will use this role. Select EC2 and click Next: Permissions.

In this step, set the types of permission that you want the EC2 instance to have to access other services in AWS. In this case, we want the EC2 instance to interact with S3.

Type ‘S3’ in the search bar and select ‘AmazonS3FullAccess’. Click Next: Review.

Enter a Role Name of your choice and click Create.

Launch an EC2 Instance

Follow the steps in the ‘Launch an EC2 Instance’ section of Exercise 1.1. However, for Step 3 — Configure Instance Details, you will need to attach the IAM role to this instance. From the IAM role dropdown select the name of the IAM role you just created. Complete the rest of the steps as you did previously.

Again, in the final step, you will NOT need to create a new key-pair. You can select and utilize the key-pair file from your previous exercises.

SSH into the EC2 Instance and Install a Web Server

Follow the steps in the ‘SSH into the EC2 Instance and Install a Web Server’ section of Exercise 1.1.

Copy the index.html file from S3 onto the EC2 instance

At this point you should still be in your EC2 instance.

As you may recall from the previous exercises, the apache web server will display the index.html file found in /var/www/html directory in the root path of your website.

Therefore, you want to copy the index.html file from S3 into that directory.

  1. Navigate to the directory
cd /var/www/html

2. Copy the index.html file from S3

Because you attached the IAM role to this EC2 instance, you are able to list all of your S3 buckets with the following command (these commands utilize the AWS CLI tool — documentation can be found here)

aws s3 ls

You should see the name of the bucket you just created. Check the contents of that bucket with the following command:

aws s3 ls s3://<your_bucket_name>

You should see the index.html file you uploaded to S3. Copy it to the current directory with the following command:

aws s3 cp s3://<your_bucket_name>/index.html . 

Check to make sure your file was copied

cat index.html

Navigate back to the EC2 dashboard in the AWS console and and copy the Public DNS(IPV4) of your instance into your clipboard. Paste the address into your browser. You should see the html that you uploaded to S3!

Clean Up

Navigate to to the EC2 dashboard, select your instance, click on Actions, select Instance State → Terminate. Confirm that you want to terminate. This will automatically kick you out of your SSH session in your terminal.

Navigate to the S3 dashboard and highlight the bucket that you just created. Click Delete Bucket and confirm.

Next

EC2 Exercise 1.4: Host a Static Webpage behind a Load Balancer

--

--

Kerry Sheldon

Software Developer. Graduate of Turing School of Software and Design.