Jack Downson

Jack Downson

1565838016

How to Host your Static Website with AWS

Learning how to host my first website wasn’t easy but it was a great learning experience. If you're an aspiring web developer or just interested in launching your own static website, then I hope you will find this guide useful.


Who is this guide for?

This guide is aimed at complete beginners who want to host a static website (a site with fixed content). I will provide a how-to-guide for the following:

  1. How to buy a domain.
  2. How to configure your domain for an external hosting provider.
  3. How to host your website with Amazon Web Services (AWS).
  4. How to make your website secure (SSL certification) using Amazon Certification Manager.

There might be some terminology that’s new to you. Please go ahead and look up terms that are not familiar. I’ve put in useful links and explanations where I thought appropriate.


What is a domain name and DNS (Domain Name System)?

A domain name is your website address. For example thecodinghamster.com. But for a computer, a domain name is actually a series of numbers (an IP address). An IP address looks like this: 123.321.0.1

It’s not easy for us to remember a long string of numbers. So your computer refers to a DNS to translate a text based website address into an IP address which it can then understand. A DNS is like a directory.

I watched this great video which explains domain name, DNS and how this works in under five minutes. Please watch the first five minutes of the video if you're interested:

<iframe src="https://www.youtube.com/embed/e2xLV7pCOLI?feature=oembed" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" name="fitvid0" frameborder="0"></iframe>

Where can you buy your domain name?

You can buy a domain name from a domain name registrar. Prices start from a few dollars. Your domain name is unique. Each domain name registrar offers different levels of services/support. But you can register your domain with any registrar.


What is a hosting provider?

“An Internet hosting service is a service that runs Internet servers, allowing organizations and individuals to serve content to the Internet. There are various levels of service and various kinds of services offered.”

When I was looking for a hosting provider for my website, I explored different options. The prices ranged from £2.00 — £5.00 per month with various storage options from 0.5GB to 10GB. The prices seemed reasonable but all I wanted to do was host a static website. It had a few images, HTML, CSS and JavaScript files. No dynamic content.


Why AWS?

After some further research, I found AWS. AWS offers a free tier option. Essentially, you get lots of free products. Some of them expire after 12 months and others are free in perpetuity. The only cost that you will incur for hosting a static website is the cost of setting up a hosted zone. This cost $0.50 per month. So I went with AWS and set up my account.

The great thing about AWS is the price and it’s a reliable hosting provider. But one thing to bear in mind is that you’re reliant on their documentation. As I started reading about what services AWS offered, it quickly became confusing! I used the official AWS guide provided for setting up static websites. But I found myself getting lost with clicking on a link to another link and so forth. I started researching other guides to make up for knowledge gaps.

I found this this excellent guide by Victoria Drake.

I followed Victoria Drake’s guide alongside the AWS one and managed to muddle through. But there were still a few things that were not explained which I hope to flesh out.

Before we proceed, here is your to do list:

Here we go!


AWS: Create a Hosted Zone on Route 53.

Route 53 is where all your DNS requests are handled.

The first thing you must set up is your hosted zone with Route 53. This is really easy if you bought your domain through AWS. A hosted zone is created automatically once you’ve purchase it. If you’ve done this then just skip to the next section (Set up your S3 Buckets).

However, if you were like me and bought your domain name via another registrar then please do the following.

This next part is how to create a Hosted Zone on Route 53 if you haven’t bought your domain name from AWS:

  1. Go to Route 53 in your console and click on “Create Hosted Zone”. Fill in your domain address, comment is optional and choose a “Public Hosted Zone”. Click on “Create”.

2. Once your hosted zone is created, you need your NS (Name Servers) records:

3. Go to your domain name registrar and login. Depending on your registrar, you should find a section in your settings called "Nameservers" which you can edit. You need to copy across the AWS NS records and change the existing NS records in your domain settings. 

Please note, don't copy the full stop/period at the end of the NS record. For example, is should be “ns-63.awsdns-07.com”, not “ns-63.awsdns-07.com.”

It will take up to 24 hours to propagate.


Set up your S3 Buckets

In the meantime you can set up your S3 Buckets. The S3 Bucket is the storage for your files such as your index.html.

You must configure two buckets for your website: 1) yourdomainname.com and 2) www.yourdomainname.com.

The first bucket is your main bucket where you will upload all your documents, such as your index.html. The second bucket redirects to the first bucket. To set up your S3 Buckets, please follow the AWS documentation on how to set up your S3 bucket ( 2: Create and Configure Buckets and Upload Data).

In addition to the documentation, there are a few things to note:

  • In section 2.1 (part 2): click on the link How Do I Create an S3 Bucket? This is a step by step guide and explain all the settings you need to choose.
  • In section 2.1 (part 3): you don’t have to upload your website files yet. You can add a test index.html in the meantime.

Take note of your endpoint.

You can find this in your S3 bucket > “Properties” tab > “Static

Web Hosting” box. It should look something like this:

http://yourdomainname.com.s3-website.eu-west-2.amazonaws.com


Add the Alias/“A” records in Route 53

Finally go back to Route 53 and open your hosted zone to set up your Alias records. You can follow the documentation on “Step 3: Add Alias Records for example.com and www.example.com”. It is quite straightforward.

Once the NS settings have propagated, your site is live! You’ll be able to visit your site at the domain address e.g. yourdomainname.com

However, please note that it won’t be secure and you’ll see a http:// prefix in the address bar. I’ll get to that in the next section.

How to make your website secure and what is a SSL certificate?

It’s very important to make your website secure and to do this you’ll need to get an SSL certificate. SSL stands for Secure Sockets Layer and it uses encryption to securely transfer data between a user and site. Google will also give a rankings boost for websites with HTTPS.

If you secure the website with an SSL certificate, you’ll see https:// and a padlock symbol in your address bar.

There are different types of SSL certificates: Extended Validation Certificate and a Domain validated certificate. For a personal website or blog, only a domain validated certificate is required. You also won’t see the name of your company on the left of the bar like the example above. You only get this if you have an Extended Validation Certificate which is more for large companies/enterprises.


How much does it cost for an SSL certificate?

I’ve seen a range of ways of getting an SSL certificate. You can pay a premium for a service that will do this on your behalf or you can do it for free with Let’s Encrypt. Let’s Encrypt is an official Certificate Authority (CA). But you have to renew your certificate every three months and the process is quite complicated.

I didn’t want to pay a premium or want the hassle of renewing every three months. Conveniently, AWS can issue SSL certificates for a very small fee. You pay $0.75 for each certificate issued and it lasts for one year.

If you choose not to go with AWS, make sure you do your research and choose a trusted CA!


How do you get an SSL certificate with AWS?

Log into your AWS console and navigate to the AWS Certificate Manager (ACM).

Make sure you change the region from the default (Ohio) to N. Virginia. This is not explicit in the guides and only the N. Virginia region can issue certificates. I learned the hard way and wasted a lot of time!

Then click on “Get Started” under “Provision Certificates”.

Follow the documentation with AWS (“Requesting a public certificate using the console”) and use Victoria Drake’s guide (under “SSL certificate”).

In addition to the guides there are few things that weren’t fully explained:

  • You’ll need to validate your domain ownership by email or directly with DNS. I would suggest to always verify ownership by DNS validation.
  • Once you’ve requested your certificate you’ll get something like this (except the status will be pending). Click on the “Export DNS Configuration file”:

It’s an Excel spreadsheet which will contain something like this:

  • You’ll need to add these records to your DNS settings with your registrar. Log in and go to DNS settings. The interface varies with different registrars but you’re looking for your Host records under your DNS settings.
  • Click on “Add Record” > record type is CNAME:

You need to add two records: 1) Hostname should be “@” and Target Name should be the Record value from the DNS configuration file.

2) Hostname should be * (asterisk) and Target Name should be the Record value from the DNS configuration file.

If you want more information about the CNAME and record types, I found this helpful article.

It's quite long, but I've pulled out the useful part:

“Note: Hostname refers to the prefix before the domain name. To create a Blank record, use an @ in the Hostname field. This represents an empty prefix (so the name exactly matches the domain name; for example divapirate.com). The @ hostname is also referred to as the the root of the domain. An * (asterisk) in the Hostname is a wildcard, and represents any prefix. For example, creating a record for *.divapirate.com will point <any prefix>.divapirate.com at the IP address provided.”

You just need to wait for the verification. For me, this took about an hour.


How do you add your SSL certificate?

With AWS you can add SSL certificate to your website through setting up CloudFront. CloudFront is great for speeding up your website. I used the AWS documentation and Victoria Drake’s guide (look out for her useful tips).

Please note, when you create your CloudFront distribution, there’s a drop down menu to add your SSL certificate. If you have been issued with an SSL certificate already, it will be pre-populated in the drop down menu.

Your state in your CloudFront dashboard should changed to “Enabled”. This isn’t instant and takes a little time.


Almost there…

Finally, you need to get your Domain Name from the CloudFront distribution. It should be something like this dsfdser83543.cloudfront.net.

Go back to Route 53 > hosted zone > change both Alias records (Alias Target) to the CloudFront Domain Name.

Voila! You have hosted your first secure static website with AWS.

Further reading:

How to create your first program with the Node.js runtime

An Introduction to Unit Testing in Angular

GraphQL Recipes - Building APIs with GraphQL Transform

What's New in React 16.9: The UNSAFE Update

Why Hiring Dedicated Magento Developer is a Good Idea

Create a Custom useFetch() React Hook



#web-development

What is GEEK

Buddha Community

How to Host your Static Website with AWS

How to host a Static Website in AWS S3 - CodeBabel

Hello All! Welcome back to the third article in the AWS Series! As we already know, AWS S3 offers low cost, high performance, highly scalable, unlimited cloud storage with a pay-as-you-go approach. But, apart from being a storage option, it can also be used to host static web content. In this article, we will discuss how to host a static website in AWS S3.

Below is the overview of the steps for doing that:

Creating a bucket

Step1: First let’s create a bucket. For that, let’s first login to AWS console, and then select S3 under ‘Storage’ from the AWS ‘Console Home’.

select S3

select S3

Step2: Next, from the S3 console, let’s click on the ‘Create Bucket’ icon in the Amazon S3 console.

Creating New Bucket

Creating New Bucket

A pop up window appears wherein we enter the bucket details. Here, let’s consider the bucket name as ‘codebabel-static-website-demo and the region can be according to the requirement. Here we have chosen the default region ‘US EAST ohio’. Let’s leave everything to default settings by clicking on “Next” option. In the ‘review’ page, let’s review our configurations and click on ‘Create bucket’ to create the S3 bucket.

Create New S3 Bucket

Create New S3 Bucket

We can see the newly created S3 bucket in the AWS S3 console.

Bucket after creation

Created Bucket can be viewed in S3 Dashboard

Step3: For this demo, we have created a simple static website in HTML. It consists of an **index.html **file which has two web pages and an **error.html**file which throws an error message when something goes wrong. We also have some .css files for formatting. Now let’s upload these files in the AWS S3 demo bucket.

For this, let’s click on our S3 bucket and click on the “upload” option under the “overview” icon. We can either add or drag and drop the required files. We can also set permissions for each of the files while uploading by clicking the “Next” icon which we will discuss later in this article. For now, we will only upload the files by clicking “Upload“. Let’s upload all our files this way.

Upload Files

Upload Files

Enabling static website hosting

Step4: Let’s click on our S3 bucket, and go to Properties -> Static website hosting.

Enabling Static Website Hosting

Enabling Static Website Hosting

We can see the generated endpoint URL to access our static website, as soon as we select this option. Now below that, we will mention the following: “Index document = index.html, error document = error.html“.

#devops #aws #aws s3 #css #github #html #scm #website hosting

Seamus  Quitzon

Seamus Quitzon

1601341562

AWS Cost Allocation Tags and Cost Reduction

Bob had just arrived in the office for his first day of work as the newly hired chief technical officer when he was called into a conference room by the president, Martha, who immediately introduced him to the head of accounting, Amanda. They exchanged pleasantries, and then Martha got right down to business:

“Bob, we have several teams here developing software applications on Amazon and our bill is very high. We think it’s unnecessarily high, and we’d like you to look into it and bring it under control.”

Martha placed a screenshot of the Amazon Web Services (AWS) billing report on the table and pointed to it.

“This is a problem for us: We don’t know what we’re spending this money on, and we need to see more detail.”

Amanda chimed in, “Bob, look, we have financial dimensions that we use for reporting purposes, and I can provide you with some guidance regarding some information we’d really like to see such that the reports that are ultimately produced mirror these dimensions — if you can do this, it would really help us internally.”

“Bob, we can’t stress how important this is right now. These projects are becoming very expensive for our business,” Martha reiterated.

“How many projects do we have?” Bob inquired.

“We have four projects in total: two in the aviation division and two in the energy division. If it matters, the aviation division has 75 developers and the energy division has 25 developers,” the CEO responded.

Bob understood the problem and responded, “I’ll see what I can do and have some ideas. I might not be able to give you retrospective insight, but going forward, we should be able to get a better idea of what’s going on and start to bring the cost down.”

The meeting ended with Bob heading to find his desk. Cost allocation tags should help us, he thought to himself as he looked for someone who might know where his office is.

#aws #aws cloud #node js #cost optimization #aws cli #well architected framework #aws cost report #cost control #aws cost #aws tags

Hire AWS Developer

Looking to Hire Professional AWS Developers?

The technology inventions have demanded all businesses to use and manage cloud-based computing services and Amazon is dominating the cloud computing services provider in the world.

Hire AWS Developer from HourlyDeveloper.io & Get the best amazon web services development. Take your business to excellence with our best AWS developer that will serve you the benefit of different cloud computing tools.

Consult with experts: https://bit.ly/2CWJgHyAWS Development services

#hire aws developer #aws developers #aws development company #aws development services #aws development #aws

Christa  Stehr

Christa Stehr

1598408880

How To Unite AWS KMS with Serverless Application Model (SAM)

The Basics

AWS KMS is a Key Management Service that let you create Cryptographic keys that you can use to encrypt and decrypt data and also other keys. You can read more about it here.

Important points about Keys

Please note that the customer master keys(CMK) generated can only be used to encrypt small amount of data like passwords, RSA key. You can use AWS KMS CMKs to generate, encrypt, and decrypt data keys. However, AWS KMS does not store, manage, or track your data keys, or perform cryptographic operations with data keys.

You must use and manage data keys outside of AWS KMS. KMS API uses AWS KMS CMK in the encryption operations and they cannot accept more than 4 KB (4096 bytes) of data. To encrypt application data, use the server-side encryption features of an AWS service, or a client-side encryption library, such as the AWS Encryption SDK or the Amazon S3 encryption client.

Scenario

We want to create signup and login forms for a website.

Passwords should be encrypted and stored in DynamoDB database.

What do we need?

  1. KMS key to encrypt and decrypt data
  2. DynamoDB table to store password.
  3. Lambda functions & APIs to process Login and Sign up forms.
  4. Sign up/ Login forms in HTML.

Lets Implement it as Serverless Application Model (SAM)!

Lets first create the Key that we will use to encrypt and decrypt password.

KmsKey:
    Type: AWS::KMS::Key
    Properties: 
      Description: CMK for encrypting and decrypting
      KeyPolicy:
        Version: '2012-10-17'
        Id: key-default-1
        Statement:
        - Sid: Enable IAM User Permissions
          Effect: Allow
          Principal:
            AWS: !Sub arn:aws:iam::${AWS::AccountId}:root
          Action: kms:*
          Resource: '*'
        - Sid: Allow administration of the key
          Effect: Allow
          Principal:
            AWS: !Sub arn:aws:iam::${AWS::AccountId}:user/${KeyAdmin}
          Action:
          - kms:Create*
          - kms:Describe*
          - kms:Enable*
          - kms:List*
          - kms:Put*
          - kms:Update*
          - kms:Revoke*
          - kms:Disable*
          - kms:Get*
          - kms:Delete*
          - kms:ScheduleKeyDeletion
          - kms:CancelKeyDeletion
          Resource: '*'
        - Sid: Allow use of the key
          Effect: Allow
          Principal:
            AWS: !Sub arn:aws:iam::${AWS::AccountId}:user/${KeyUser}
          Action:
          - kms:DescribeKey
          - kms:Encrypt
          - kms:Decrypt
          - kms:ReEncrypt*
          - kms:GenerateDataKey
          - kms:GenerateDataKeyWithoutPlaintext
          Resource: '*'

The important thing in above snippet is the KeyPolicy. KMS requires a Key Administrator and Key User. As a best practice your Key Administrator and Key User should be 2 separate user in your Organisation. We are allowing all permissions to the root users.

So if your key Administrator leaves the organisation, the root user will be able to delete this key. As you can see **KeyAdmin **can manage the key but not use it and KeyUser can only use the key. ${KeyAdmin} and **${KeyUser} **are parameters in the SAM template.

You would be asked to provide values for these parameters during SAM Deploy.

#aws #serverless #aws-sam #aws-key-management-service #aws-certification #aws-api-gateway #tutorial-for-beginners #aws-blogs

Hire Dedicated AWS Developer

Want to Hire AWS Developer for cloud computing services?

At HourlyDeveloper.io, we leverage maximum benefits from the AWS platform ensuring prominent Solutions for business requirements. Hire Dedicated AWS Developer and make business solutions truly global and accessible through the power of cloud environment and AWS with an extensive set of on-demand global functionality.

Consult with experts:- https://bit.ly/2C5M6cz

#aws development company #hire dedicated aws developer #aws development services #aws development #aws developer #aws