A common way of approaching a digital business, after have chosen the company or solution name and registered the domain name, is to start building the SaaS solution and only when ready start with marketing activities. This approach has the disadvantage to spend money and time developing a solution with requirements not tested on the market. A better approach is to follow the Minimum Viable Marketing Framework (MVMF) starting advertising your future solution ad collecting prospects with a landing page.

In this tutorial, we start hosting a Hello World page on AWS and then we will create and publish a complete Landing Page.

Part 1: Host a Hello World Page on AWS

Architecture

To host a landing page on AWS we will use three AWS services implementing the following architecture:

Landing Page Architecture.png

Amazon Route 53 is the DNS service of the AWS platform and will be used to manage the DNS routing. Amazon CloudFront is a CDN (Content Delivery Network) service and Amazon S3 is an object storage service that can be used also to host a static website.

Create the S3 Bucket

The first step is to create an S3 Bucket. Enter in AWS Console and insert “S3” into the Find Services search field. In the Amazon S3 dashboard click on the “Create bucket” button.

create bucket.png

Insert the name of the bucket (any name is fine but it is recommended to use your domain as bucket name), select the region where you want to create the bucket and click on “Create bucket”. Once created, click on the bucket name to access the bucket properties.

bucket properties.png

Click on “Static website hosting” and then select “Use this bucket to host a website“. Also, add the main file of your web application (generally index.html) and click on “Save” button.

static website hosting.png

In this window you can notice the bucket endpoint with the following format:

http://[your-bucket-name].s3-website-[Region].amazonaws.com

Now you can create a simple index.html file like the following one:


<html>
   <head>
       <title>Hello World</title>
   </head>
   <body>
       <div align=”center”>Hello World!</div>
   </body>
</html>
view raw

index.html

hosted with ❤ by GitHub

Upload Hello World file

To upload the file go to the S3 Dashboard, click on the bucket name and then click on the “Upload” button.

bucket upload.png

then select the index.html file to upload and click “Upload”.

If you try to access to the S3 endpoint you will receive a 403 Forbidden message error because access is denied.

Configure Permissions

To enable public access to the bucket you need to go to the “Permissions” tab and click on “Block public Access“. Then deselect “Block all public access” checkbox and click “Save”.

blockPublicAccess.png

Then click on the “Bucket Policy” button, insert the following JSON policy (modifying your bucket name) and then click to “Save”:


{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicRead",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::[bucket-name]/*"
}
]
}

bucketPolicy.png

You can now notice that the bucket has public access.

bucket public.png

If you insert the bucket endpoint url in a web browser you will see Hello World!

HelloWorldNotSecure.png

Create CloudFront distribution

However, the connection to the website is not secure and to protect it you can use the Amazon CloudFront service. In the AWS Console insert “CloudFront” into the Find Services search field and then click on “Create Distribution“.

There are two types of CDN: Web and RTMP. Click on the “Get Started” button of the web distribution, then you will see a page with a long list of parameters to fill.

createDistribution.png

The parameters to change are the followings.

In Origin Settings:

  • Origin Domain Name“: select the S3 bucket created before.

In Cache Behavior Settings:

  • Viewer Protocol Policy”: select Redirect HTTP to HTTPS. 
  • Object Caching“: select Customize and change TTL values (you can set Default TTL to 600 and change it later).

In Distribution Settings:

  • Price Class”: select the best option according to your case (For me is “Use Only U.S., Canada and Europe”)
  • SSL Certificate“: select Default CloudFront Certificate
  • Default Root Object“: add index.html

At the end click on “Create Distribution” and take a coffee (or a cup of tea) because creation time will be about 15-20 minutes.

When the state of the distribution will be Deployed, insert into your browser its url (in my case d3u7d8ugu2qrai.cloudfront.net) and this time the connection will be secure.

cloudfront.png

Configure DNS in Route 53

In the AWS Console insert “Route 53” into the Find Services search field and then click “Get started now” in DNS management section.

Route53.png

Click “Create Hosted Zone“, insert the name of your domain (you can register a domain in AWS or use your own domain registrar) and click on “Create”.

DomainName.png

At the end of hosted zone creation, you will see the following record sets: NS and SOA.

HostedZone.png

To connect a domain of another domain registrar you need to change the record sets following the registrar documentation and pointing to the AWS NS record.

Request an SSL Certificate

To obtain a certificate (free of charge) for your domain you need to go to the AWS Certification Manager service and click “Request a certificate” and then choose the default option “Request a public certificate“.

Certificate Manager.png

Then add your domain name and click on “Next”

Certificate Manager 1.png

Select “DNS Validation” option and click “Next”

Certificate Manager 2.png

Then select the default options until Step 5.

Certificate Manager 5.png

Click continue and you will see your domain in status “Pending Validation“.

Certificate Manager 6.png

Click on your domain name to see the CNAME record to add to DNS configuration to obtain the certificate.

Certificate Manager 7.png

You can just simply click on the “Create record in Route 53” button.

Otherwise, if you want to do it manually, you can go to Route 53 Dashboard, click on “Hosted zones, select your domain and click on “Create Record Set”. Select “CNAME” in the Type dropdown field and fill the Name and Value fields.

Route 53 cname.png

Then wait until your certificate will be in the “Issued” status (it may take up to 30 minutes).

Import the SSL Certificate in CloudFront

The final step is to import the SSL Certificate. Go to the CloudFront Dashboard, select the distribution created before and click on “Edit”.

You need:

  • Add your domain in the “Alternate Domain Names” field
  • Select the “Custom SSL Certificate” option
  • Select the certificate created before

Custom SSL Certificate.png

Then click “Yes, Edit” and wait until the status of the distribution is “Deployed“.

Routing the traffic to CloudFront

There is the last step to perform, that is to create an A record set to route the queries to your domain towards CloudFront.

Go to Route 53 dashboard, select Hosted Zones and then click on your domain.

Click on “Create Record Set“, then:

  • Select “A – IPv4address” in the Type dropdown field.
  • Select “Yes” in the Alias field.
  • Select the created CloudFront distribution in the “Alias Target” field.

Click on the “Create” button to create the record set.

Record A.png

Finally, you will see the Hello World Page on your domain and with an SSL Certificate active.

Read the second part of this article.