Hacktorial: Introduction to Amazon Web Services

How to host your first website using AWS

Sean Pannella
Terrapin Hackers
14 min readMar 16, 2016

--

At the end of this tutorial you will have a website similar to https://www.awstutorialtalk.com/ being hosted from your Amazon Web Services account. This tutorial is accompanied by slides that may help you, http://slides.com/seanpannella/aws1#/.

The tutorial will have the following agenda:

  1. Creating and Securing an account
  2. Using AWS S3 to host files for a website
  3. Using Route 53 as a DNS management service to direct users to our website
  4. Using CloudFront as a Content Distribution Network for our website
  5. Overview of the Serverless Paradigm and how this tutorial fits into the paradigm

Creating an Amazon Web Services Account

In order to create an account you will need a payment method, a smartphone, and a laptop to create an account.

To start click on the AWS logo, that will bring you to the AWS homepage. Once you get there click the Sign In to the Console yellow button in the top right button. That will bring you to a login page where you will click the “I am a new user.” ratio choice, then put your email in and click on the yellow “Sign in using our secure server” button. That will bring you to this page:

Now put your email again, your fill name, and set your password. Now click the button to create your account and you will be brought to this page:

Now choose “Personal Account” then fill in your personal information. Amazon needs this since you will be entering a customer agreement with them. Then click “Create Account and Continue” and you will be brought to this page:

At this point you will need to put in your payment information because if you go beyond the free tier Amazon needs to be able to charge you. Once you submit this you will be brought this page:

At this point Amazon wants to verify that you are actually a person. In order to do this they will call your cell phone then the website will give you a PIN you will need to type in or say on your cell phone, once you do this you will be brought to this page:

Now you can choose your service plan which you can always upgrade at a later point:

Once you choose your support plan your account will be created and you will be brought to the homepage again:

Now you can click “Sign in the Console” which will let you login with your new account.

Now this is the login screen you will see if you are logging in as a root user. In the future we will not want to login as a root user regularly and we will create another user to use regularly instead.

Now you have logged in and can see the main AWS dashboard. You can see there are many services and we will use several of them in this tutorial. To start lets change our default region from Oregon to Northern Virginia.

Next lets go into Identity and Access Management to secure our account and create a new primary user.

Click on the green key under the Security and Identity Services Group.

Now you will see the IAM dashboard and there are 2 important things to note at the start. First there is a special sign-in link which we will want to customize it so it is more easily remember since that will be the link we will login with from now on. Next you will see 4 warnings, the first warning we must fix right away. We will activate the MFA on your root account.

Now once you click to add an MFA to your account you will see this dialog. Now you will need to add virtual MFA software on your smartphone.

If you are an Android user you can click above and if you are a iOS user you can click below.

Now install this on your smartphone. If you are and Android user you may also need to install a QR reader that the Google Authenticator uses. Now go back to the AWS MFA dialog and click continue on virtual MFA.

Now scan the bar code with your Google Authenticator to and type in the code in the first box. Then wait for the code to reset and type that new code in the second box. Then click activate.

Now your MFA device is connected with the account. Next click to customize the sign-in link we mentioned earlier and customize it to something a bit easier to remember.

Now we will create a new user to use instead of our root user. Click on Users on the left sidebar.

Now click Create New Users. Then choose a name for a user and uncheck the box for creating an Access Key. Then click submit.

Now navigate to Permissions and click to Attach a Policy.

Now for our new account we will give it AdministratorAccess so that we can do everything we need for this tutorial. Then click Attach Policy.

Now navigate the tab to Security Credentials, and click on Manage MFA Device and add your MFA like you did for the root user. Then click on Manage Password.

Now click on Assign a custom password and fill this in with your preferred password which should be different from the password for your root account. Then click submit. Now logout and go to your sign-in link.

Now you will login from your sign-in link and you will see that your Account field will be automatically filled in. Then use the username of the new user you created and fill in your password and click Sign In.

Now you will need to put in your MFA Code to login. Once you fill that in and submit you will see the AWS dashboard again.

Web hosting using S3

Now we will get into the real content of this tutorial. To get started you should download the dummy content we will host. Do this by either clicking on the zip icon below or using the following command:

Now within the AWS dashboard click on S3.

Now click Create Bucket and a dialog will come up where you can choose your name and region.

Fill in your Bucket name and then choose US Standard for the Region then click Create.

Now we can see our new bucket and all of its properties. Before we can continue we need to upload some content into our bucket. To make this easier we will install Cyberduck.

Click on the rubber ducky and install Cyberduck. Then click on upload and choose S3. Now we need to get a Access Key for our user.

To create an Access Key for our user, click on IAM in the AWS dashboard, then Users in the left sidebar, then click your username, then navigate to Security Credentials, then click Create Access Key, then click Show User Security Credentials, finally copy these 2 codes into Cyberduck.

Now click on upload on Cyberduck and click on all of the files of the dummy content that was provided.

Now we can setup Static Web Hosting for this S3 bucket.

Under the properties section for our S3 bucket. Click on Enable website hosting and fill in the boxes to match the image and click save.

Now our website is being hosted from the Endpoint link. You can click this link and visit your website.

Setting up Route 53

Now we want to get a nifty domain name instead of having to make our users remember a long endpoint link. To start we will need to purchase a domain name using Route 53.

Now click on Get Started Now under Domain Registration.

Now click on Register Domain.

Next choose your domain name and click check.

Now add your domain to the cart and click continue.

Now put in your information since your ICANN requires to have the contact information of the registrant.

Now click on Complete purchase and the payment method for your AWS account will be immediately charged.

Now you may need to wait around a half hour to get your domain name. Once your domain name is registered you will see it in Registered domains.

If you click Pending domains you will see the status of your domain request.

Once your domain is registered, click on it.

Now click on Manage DNS.

Now click on the domain again.

Now you will see your DNS records. For now we will leave them as is until we get CloudFront setup.

To start we will setup email for this domain so that we can send and receive emails with this domain. Click on SES.

Now click on Domains and click to Verify a New Domain.

Now type in your new domain and click Verify This Domain.

Now click on Use Route 53.

Next ignore the warning and click Create Record Sets.

Now you will see that your email domain is pending verification. This should be verified quickly since the domain is managed by AWS.

Now click on Rule Sets and click Create a Receipt Rule.

Now type in admin at your domain then click add Recipient and click continue.

Next choose SNS as the action and then check UTF-8 and under the SNS topic choose create a new SNS topic.

Now supply a topic name and a useful display name. Then click to create a topic.

Now give your rule a name and click continue.

Now click to submit to create the rule.

Now you have to subscribe to the SNS topic to receive emails. Go back to the AWS dashboard and click on SNS.

Now within the SNS dashboard, click on Topics in the left sidebar.

Now click on the ARN of your new topic.

Now click on Create Subscription.

Now change the protocol to Email and change the endpoint to your email and click on create subscription.

Now you will see your new subscription inside of the SNS dashboard.

Now navigate back to the AWS main dashboard and click on Certificate Manager.

Then click on Get Started.

Now type in your domain name and click on review and request.

Now click on confirm and request.

Then click on continue.

Now within your email your will get an email to confirm your request for a TLS certificate. Click on the blue link.

Click on I Approve.

Now your request for a TLS certificate will be made.

If you navigate back to the AWS Certificate Manager we can see the certificate was issued. Now we are ready to use this certificate with CloudFront.

Setting up CloudFront

In order to make our site perform better we will use caching with CloudFront and setup HTTPS by attaching our TLS certificate to CloudFront.

Now click on CloudFront.

Now click on Create Distribution.

Then click on Get Started under the Web section.

Now paste your S3 Endpoint link into the Origin Domain Name.

Now leave Default Cache Behavior Settings alone.

First fill in the Alternate Domain Names with your domain name, then click on the ratio button for Custom SSL Certificate and then it should automatically choose your domain name.

You will see that the CloudFront distribution is being setup, after about 15 minutes the CloudFront distribution should be deployed. Now we have to attach it to our Route 53 DNS service.

Click on Route 53.

Click on Registered Domains, then click on Manage DNS.

Next click on your domain name.

Now click on Create Record Set.

Now on the right you will see the Create Record Set wizard.

Now click the Alias Yes radio choice, then change the name to www, and finally, paste in your CloudFront distribution url into the Alias Target and finally click the create button.

Now your site is fully setup. Go to your domain with https. The first load may take longer since CloudFront will have a cache miss most likely but all subsequent hits in the next few hours should be cached.

Serverless Paradigm vs Traditional Paradigm

In a traditional setup there 3 main layers we have to make decisions about.

In there serverless paradigm Amazon spends the time and hires experts to determine the best choices for some of these layers.

The next major benefit of the serverless paradigm is nearly effortless scaling. Whereas the traditional setup makes scaling rather complex.

Without even considering owning your own hardware, managing a scalable application on EC2 is still non-trivial.

This simplified pattern is about the minimal setup needed to have a somewhat scalable stack for your web application running on EC2.

On the new stack we only really use 3 services, Route 53, CloudFront and S3 and yet get to have the same CDN as Netflix and have 11 nines of durability in S3.

*Databases still need to be provisioned and could take up to 2–10 minutes to scale up or

Overall, this new paradigm can scale better and cheaper with less complexity.

Summary

In this tutorial we created an AWS Account and setup hosting of our static website from AWS. Then we learned a bit about the serverless paradigm.

All of this will be covered in a talk at the University of Maryland on March 30th at 7 PM, http://ter.ps/awstalk

Please come and feel free to send me feedback or questions.

--

--