How To Build A Web Service Page On Aws

Building a Simple, Secure Website in AWS and GoDaddy Part one

Configuring a simple static webpage in AWS S3

This is a iii function series that will walk yous footstep by pace how to build a simple secure website, hosted in Amazon Web Services (AWS) (free tier) with a domain name registered through GoDaddy. Total costs volition be in the $i–2 / month range (for domain registration and some AWS fees). This 3-part series volition cover:

Part 1: register a domain name in GoDaddy and configure a simple website in AWS S3
Part two: configure DNS with GoDaddy and AWS Route53
Role 3: configure AWS CloudFront to deliver your website securely

Along the manner I'll explain the key concepts of the web including the Domain Name System (DNS). By the cease 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 cadre services in Amazon Web Services (AWS).

Footstep 1: Annals your domain proper name

In this section yous'll register a domain name.You practice this first since y'all'll demand to name the resources that y'all create in AWS S3 Bucket, R53 Hosted Zone, CloudFront instances to match the domain name you lot but created. In some cases information technology is necessary, like the S3 bucket policy. In others it's merely a helpful way to keep all your cloud services organized.

Domain Name — a Domain name is unique proper name that is registered to a unique IP address. Domain names consist of a name such every bit "google" and an extension ".com". Each domain proper name is unique, and the DNS arrangement keeps track of the IP address to which it is assigned.

DNS Registrar — The DNS system is composed of organizations that keep rail of, and share with each other, all the registered domain names. In this tutorial we'll be using GoDaddy every bit our registrar. The registrar is like an online shop for domain names. They verify availability, take your payment, and ostend to every other DNS provider that it'due south been reserved by you. Since GoDaddy holds the DNS record for your website, you must tell GoDaddy where to direct users and so they can observe your website on AWS. We'll show you how to exercise that in role Two of this tutorial.

Annotation: Most domain names can exist purchased for around $12 per yr. Some roots such as .xyz are cheap which may offering special pricing for multiple years. When I registered mine, information technology was $1 for the outset year. Y'all can use whatsoever domain you want. From .com to .xyz and everything in betwixt.

Exercise I need to use GoDaddy?

No. You can employ any domain registrar that you like. This tutorial will exist walking y'all step by step through the process for GoDaddy, only the steps are probable 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. Alter to 1 yr and complete the purchase.

Step 2: Configure an AWS S3 Bucket

AWS S3 is Amazon Web Services'southward cloud based storage. In this step you lot'll configure an S3 "bucket" to host your simple webpage and upload the prototype that will exist displayed on your website.

To create an S3 saucepan and configure it to host a website

Open the Amazon S3 console at https://console.aws.amazon.com/s3/
Cull Create bucket
Enter the post-obit values

Bucket name (Enter the name of your domain that you lot created in GoDaddy, such as example.com)

Region Choose US East (N Virginia) us-due east-ane

4. Uncheck the box "cake all public access" and check the acknowledgement box below.

Notation: AWS will alert you about making your bucket public as if you are nearly to commit a grave mistake. And it's a good idea to exist careful near making your S3 bucket public. But ask Netflix, TD Bank and Ford. But for this tutorial, information technology'due south okay. Y'all want information technology 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. Cull Create Saucepan

6. From the S3 folio click on the name of the bucket you just created

7. Choose the Backdrop tab

8. Choose Static website hosting

nine. Choose Utilize this bucket to host a website.

10. For Index document, enter index.html

11. Choose Salvage.

Note: You lot'll create the alphabetize.html file and upload it to your bucket after in the process.

12. Choose the Permissions tab.

13. Choose Bucket policy.

14. Copy the post-obit saucepan policy and paste it into the text editor. This policy grants everyone on the internet permission to become the files) in the S3 bucket that is associated with your domain name

{
"Version":"2012–ten–17",
"Argument":[{
"Sid":"AddPerm",
"Effect":"Allow",
"Principal":"*",
"Action":[
"s3:GetObject"
],
"Resource":[
"arn:aws:s3:::your-domain-proper noun/*"
]
}]
}

15. In the saucepan 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.

Pace 3: Upload an image to S3

Prerequisites:

Find and set up aside an image on your personal estimator that you want to feature on your simple website
Resize the prototype and so that it is less than 100kb. Why and how? Check out this article.

Become to the S3 Bucket you lot simply created in Footstep 2. Select upload.

2. Select an image from your PC and upload

3. Go to the S3 bucket, select the file you just uploaded. Re-create the URL of the image. You'll demand it in the adjacent pace.

Footstep 4: Create a unproblematic webpage

In this next step you'll create a website, add the image y'all just uploaded to S3 and upload the new website to your S3 saucepan.

Prerequisites:

Download Atom, or another text editor on your computer

Open a text editor such as Atom
Re-create the following text and paste it into a text editor:

<html>
<head>
<title>website championship</championship>
</caput>
<body>
<h1>website header</h1>
<img src="paste your S3 image URL here" alt=picture description">
</trunk>
</html>

3. Save the file with the file name alphabetize.html.

4. Supercede the URL in the website code with the URL of the image you lot but uploaded into S3

Pace 5: Upload your uncomplicated website to AWS S3

Ref stride iv in: Road 53 Developer Guide

In the Amazon S3 console, choose the name of the bucket that you created in footstep two higher up
Choose Upload.
Cull Add together files.
Follow the on-screen prompts to select index.html, and then choose Upload

six. Navigate to index.html file in your S3 saucepan and copy the URL

7. Paste the URL into a browser to test your simple webpage

*The browser requests the index.html file from AWS S3 which returns the image you uploaded into the AWS S3 bucket.*

Footstep vi: Configure S3 to handle www requests

Reference step 3 in: Route 53 Developer Guide

In the preceding procedure, you created a saucepan for your domain proper noun, such every bit case.com. This allows your users to access your website by using your domain proper name, such every bit example.com.

Since many users as well look your website to work when they enter "world wide web" in front of your domain name, yous must configure AWS to redirect users who enter www.your-domain-name, to the S3 bucket that yous only configured for your website. This is a two-pace process. The first pace is to create a second S3 bucket. You then configure the second saucepan to route traffic to the first saucepan.

To create an S3 bucket for www.your-domain-name

Choose Create bucket.
Enter the following values:
Bucket name

Enter world wide web.your-domain-name. For example, if y'all registered the domain name case.com, enter www.instance.com.

Region
Choose the same region that y'all created the showtime bucket in.

3. Uncheck the box "cake all public admission" and check the acknowledgement box below.

4. Choose Create Bucket

5. From the S3 folio click on the name of the bucket you lot merely created (world wide web.example.com)

vi. Choose the Properties tab

vii. Choose Redirect requests.

eight. Enter the post-obit values:

Target saucepan or domain: Enter the proper noun of the saucepan that y'all want to redirect requests to. This is the name of the bucket that you created in pace 1 above

Protocol: Enter http. Yous're redirecting requests to an S3 bucket that is configured as a website endpoint, and Amazon S3 doesn't back up HTTPS connections for website endpoints. Note: we'll show you use CloudFront to configure HTTPS for S3 Static Website hosting in a time to come tutorial.