Building a Simple, Secure Website in AWS and GoDaddy Part 1
Configuring a simple static webpage in AWS S3
This is a three part series that will walk you step by step how to build a simple secure website, hosted in Amazon Web Services (AWS) (free tier) with a domain name registered through GoDaddy. Total costs will be in the $1–2 / month range (for domain registration and some AWS fees). This 3-part series will cover:
- Part 1: register a domain name in GoDaddy and configure a simple website in AWS S3
- Part 2: configure DNS with GoDaddy and AWS Route53
- Part 3: configure AWS CloudFront to deliver your website securely
Along the way I’ll explain the key concepts of the web including the Domain Name System (DNS). By the end of this tutorial you’ll have an understanding of the basic building blocks of the Internet, how to deliver websites securely and some of the core services in Amazon Web Services (AWS).
Step 1: Register your domain name
In this section you’ll register a domain name.You do this first since you’ll need to name the resources that you create in AWS S3 Bucket, R53 Hosted Zone, CloudFront instances to match the domain name you just created. In some cases it is necessary, like the S3 bucket policy. In others it’s just a helpful way to keep all your cloud services organized.
Domain Name — a Domain name is unique name that is registered to a unique IP address. Domain names consist of a name such as “google” and an extension “.com”. Each domain name is unique, and the DNS system keeps track of the IP address to which it is assigned.
DNS Registrar — The DNS system is composed of organizations that keep track of, and share with each other, all the registered domain names. In this tutorial we’ll be using GoDaddy as our registrar. The registrar is like an online shop for domain names. They verify availability, take your payment, and confirm to every other DNS provider that it’s been reserved by you. Since GoDaddy holds the DNS record for your website, you must tell GoDaddy where to direct users so they can find your website on AWS. We’ll show you how to do that in part II of this tutorial.
Note: Most domain names can be purchased for around $12 per year. Some roots such as .xyz are inexpensive which may offer special pricing for multiple years. When I registered mine, it was $1 for the first year. You can use whatever domain you want. From .com to .xyz and everything in between.
Do I need to use GoDaddy?
No. You can use any domain registrar that you like. This tutorial will be walking you step by step through the process for GoDaddy, but the steps are likely very similar for other registrars.
- Go to GoDaddy.com and search for a name
2. Opt out of the privacy protection, if you wish.
3. Change to 1 year and complete the purchase.
Step 2: Configure an AWS S3 Bucket
AWS S3 is Amazon Web Services’s cloud based storage. In this step you’ll configure an S3 “bucket” to host your simple webpage and upload the image that will be displayed on your website.
To create an S3 bucket and configure it to host a website
- Open the Amazon S3 console at https://console.aws.amazon.com/s3/
- Choose Create bucket
- Enter the following values
Bucket name (Enter the name of your domain that you created in GoDaddy, such as example.com)
Region Choose US East (N Virginia) us-east-1
4. Uncheck the box “block all public access” and check the acknowledgement box below.
Note: AWS will alert you about making your bucket public as if you are about to commit a grave mistake. And it’s a good idea to be careful about making your S3 bucket public. Just ask Netflix, TD Bank and Ford. But for this tutorial, it’s okay. You want it to be public because you are creating a publicly accessible website. Just don’t put any files in the bucket that you don’t want the world to see.
5. Choose Create Bucket
6. From the S3 page click on the name of the bucket you just created
7. Choose the Properties tab
8. Choose Static website hosting
9. Choose Use this bucket to host a website.
10. For Index document, enter index.html
11. Choose Save.
Note: You’ll create the index.html file and upload it to your bucket later in the process.
12. Choose the Permissions tab.
13. Choose Bucket policy.
14. Copy the following bucket policy and paste it into the text editor. This policy grants everyone on the internet permission to get the files) in the S3 bucket that is associated with your domain name
{
“Version”:”2012–10–17",
“Statement”:[{
“Sid”:”AddPerm”,
“Effect”:”Allow”,
“Principal”:”*”,
“Action”:[
“s3:GetObject”
],
“Resource”:[
“arn:aws:s3:::your-domain-name/*”
]
}]
}
15. In the bucket policy, replace the value your-domain-name with the name of your domain, such as example.com without the ‘.com’. This value must match the name of the bucket.
16. Choose Save.
Step 3: Upload an image to S3
Prerequisites:
- Find and set aside an image on your personal computer that you want to feature on your simple website
- Resize the image so that it is less than 100kb. Why and how? Check out this article.
- Go to the S3 Bucket you just created in Step 2. Select upload.
2. Select an image from your PC and upload
3. Go to the S3 bucket, select the file you just uploaded. Copy the URL of the image. You’ll need it in the next step.
Step 4: Create a simple webpage
In this next step you’ll create a website, add the image you just uploaded to S3 and upload the new website to your S3 bucket.
Prerequisites:
- Download Atom, or another text editor on your computer
- Open a text editor such as Atom
- Copy the following text and paste it into a text editor:
<html>
<head>
<title>website title</title>
</head>
<body>
<h1>website header</h1>
<img src=”paste your S3 image URL here” alt=picture description”>
</body>
</html>
3. Save the file with the file name index.html.
4. Replace the URL in the website code with the URL of the image you just uploaded into S3
Step 5: Upload your simple website to AWS S3
Ref step 4 in: Route 53 Developer Guide
- In the Amazon S3 console, choose the name of the bucket that you created in step 2 above
- Choose Upload.
- Choose Add files.
- Follow the on-screen prompts to select index.html, and then choose Upload
6. Navigate to index.html file in your S3 bucket and copy the URL
7. Paste the URL into a browser to test your simple webpage
Step 6: Configure S3 to handle www requests
Reference step 3 in: Route 53 Developer Guide
In the preceding procedure, you created a bucket for your domain name, such as example.com. This allows your users to access your website by using your domain name, such as example.com.
Since many users also expect your website to work when they enter “www” in front of your domain name, you must configure AWS to redirect users who enter www.your-domain-name, to the S3 bucket that you just configured for your website. This is a two-step process. The first step is to create a second S3 bucket. You then configure the second bucket to route traffic to the first bucket.
To create an S3 bucket for www.your-domain-name
- Choose Create bucket.
- Enter the following values:
Bucket name
Enter www.your-domain-name. For example, if you registered the domain name example.com, enter www.example.com.
Region
Choose the same region that you created the first bucket in.
3. Uncheck the box “block all public access” and check the acknowledgement box below.
4. Choose Create Bucket
5. From the S3 page click on the name of the bucket you just created (www.example.com)
6. Choose the Properties tab
7. Choose Redirect requests.
8. Enter the following values:
Target bucket or domain: Enter the name of the bucket that you want to redirect requests to. This is the name of the bucket that you created in step 1 above
Protocol: Enter http. You’re redirecting requests to an S3 bucket that is configured as a website endpoint, and Amazon S3 doesn’t support HTTPS connections for website endpoints. Note: we’ll show you use CloudFront to configure HTTPS for S3 Static Website hosting in a future tutorial.
9. Choose Save.
In the next step, we’ll configure Route 53 and GoDaddy to route requests for your domain name to this simple website.
