Awesome!(A short reminder: While most of the stuff you do as a private person with a private intention on AWS is free, or more precisely, falling under the free tier, there can be costs.
)AWS S3 BucketTraditional web space storage is called S3 by AWS — Simple Storage Service.
You store your static website assets in it and provide it to your website’s visitors.
Amazon has some pretty neat tutorials for almost anything.
Since I’m trying to provide you with lean and straight instruction, I will link those AWS References if you want to dig a bit deeper and get a better understanding.
Before we create a bucket in AWS S3, you need to think about you final Domain-Architecture.
Today there a two main domain names: The ones with a “www” at the front, like www.
domain.
com, and the so-called naked or Root-/Apex-Zone Domains like domain.
com (without the “www”).
Variant A: If you want both www.
domain.
com and domain.
com to be addressable, then we need one S3 bucket and an additional CNAME entry (we’ll cover that later).
Variant B: If you want only one address to be addressable, let’s say domain.
com, you’ll need two buckets.
One for domain.
com and another for www.
domain.
com which redirects to your root domain.
If you made a decision, you can go on and finally get your hands dirty.
Go to AWS Console and search for the service “S3.
”Press “+ Create bucket.
”Enter your domain name as the bucket name, like domain.
com or www.
domain.
comChoose a region.
Ideally, pick a region your targeted audience lives in or near to.
Press the “Create” Button.
An S3 Bucket is primarily for storing anything.
Now we need to tell the Bucket that it is hosting your website and should behave accordingly.
You can do this easily:Enter the bucket settings by clicking on the name located in the bucket listing.
At the properties tab activate the static website hosting feature as shown below.
Activate static website hosting with a few clicks.
At the top of this box, you can find the endpoint of your bucket.
This is the URL of your bucket.
Next, we need to change the permissions, since any S3 Bucket is private by default.
Go to the “Permissions” tab and change both “Manage public bucket policies” settings to false.
Now add the following Bucket Policy (change domain.
com to your domain name, see below).
Go back to the “Public access settings” and change everything to true except Block public and cross-account access if bucket has public policies to false.
S3 bucket policy for public access.
Nice!.If you choose Variant B above, then you need to create a second bucket with the same settings, but with the following difference:Name the bucket www.
domain.
com or domain.
comGo to the properties and activate “Static website hosting” but this time check “Redirect requests” and enter your primary bucket name.
Redirect traffic to your primary S3 bucket.
This bucket (or better, the endpoint) redirects you to www.
domain.
com or domain.
com depending on your configuration.
So far so good!.We are done with AWS S3.
Next, we will look at how to push our website source to this bucket automatically.
Addition: You can do this with AWS S3 too if you want to log the traffic on your website ⟶ Official documentation.
AWS CodePipelineThis is a so-called CI/CD tool by AWS.
Sounds complicated and is not that fast to configure but it is easily explained: You create this AWS CodePipeline, and it watches your Github repository for any changes.
Whenever some files change, the CodePipeline detects this and fire up an event described by you.
This event is most of the time any code transformation, code testing, code deployment, and others.
This explanation is pretty short, but I think it is enough for now.
Enough with the theory.
Let’s get started:Add a source to your AWS CodePipeline.
Go to AWS Console and search for the service “CodePipeline.
”Click on “Create new Pipeline.
”Take all default values on Step 1 and go to Step 2.
Connect a source provider.
Choose GitHub and click on “connect” to connect your accounts.
Once the connection is established, pick the right repository and branch.
Go to Step 3.
This will be a little bit complicated.
If you don’t use any modern web framework like Vue, Angular or React, you can skip the build step.
However, if you need some code transformation, tests or other things you can use these steps to get it done.
Let’s say you use Vue.
Click on “Create Project.
”Select a “Managed Image” with Ubuntu and Node.
js as Runtime.
At the “Buildspec” section select “Use a buildspec file.
” Now, this is something special.
The things you configure within the AWS Console are just the metadata, the environment configuration for your build step.
The actual behavior or build plan you need to define within a buildspec.
yml.
Add a file with this name to the root directory of your project.
Write the following code into your buildspec.
yml (see below).
Once this is done continue to Step 4, the Deploy Stage.
Choose “Amazon S3” as Deploy Provider and select your primary bucket.
Check “Extract file before deploy” since the output of a build process is always zipped.
Put this buildspec.
yml into your root directory of your project.
Ok, you’re done.
You can now test your CodePipeline by committing to your linked Github Repository.
If everything works fine, your CodePipeline should start a few seconds after you pushed some new codes.
Domain and StuffYou’re almost there! There are only two things left:You want your Domain to point to your S3 Bucket.
We need an SSL-Certificate for your website since every web communication should be encrypted.
Luckily, AWS provides us with a free public SSL-Certificate.
To get one, you need to do the following:Change the Region to Virginia.
Just do it.
:DGo to AWS Console and search for the service “Certificate Manager”.
Click on “Request a certificate.
”Go for a public request — you probably won’t need a private certificate and they, are damn expansive.
Now enter your domain name.
You can use the so-called Wildcards with this.
You can enter example.
com and use this certificate for app.
example.
com and web.
example.
com.
This doesn’t work for a root domain.
That’s why you should add a second name called example.
comClick “Next.
”Verify that the domain you’re requesting a certificate for is owned by you.
You can prove your ownership with DNS validation or e-mail validation.
I recommend DNS validation.
Choose DNS validation and click “Next.
”a) Now there are two variants: AWS Route53 does not manage your DNS Entries: In this case, you need to go to your domain registrar and add a new DNS Entry as the validation status page tells you.
Alternatively, if you want to be cool: Search for the section where you can change the DNS nameservers and add the AWS nameservers.
With this, Route53 can add DNS-Entries for you.
⟶ Official documentation.
AWS Route53 manages your DNS Entries: Cool, this is much easier!.In this case, a magical button appears on the validation status page.
This button creates the needed DNS-Entry in Route53 for you.
Just click it, and you’re done.
If Route 53 manages your DNS entries a magical Button to add the required entry will appear.
AWS CloudFrontLastly, we need to configure AWS CloudFront to serve our S3 Bucket worldwide.
It is called Content Delivery Network (CDN).
Your Website, or better your S3 Bucket and the files in it are saved on a server with a geographic location — this depends on the region your S3 bucket is located.
Let’s say you chose US West (Oregon).
Now if a human being from the Asia-Pacific (Singapore) tries to visit your website, its files need to be transported all over the world — this takes just a few seconds.
To reduce this travel time, CDNs replicate your website files for servers all around the world.
This is what AWS CloudFront does.
Let’s start configuring:Go to AWS Console and search for “CloudFront.
”Click on “Get started” at the web section.
Click on “Create Distribution.
”select the S3 Bucket of your website at “Origin Domain Name.
”At “Viewer Protocol Policy” select “Redirect HTTP to HTTPS.
” This ensures that your website can only be viewed when encrypted with HTTPS and the previously generated SSL-Certificate.
Enter all the domains you entered previously at “Alternate Domain Names (CNAMEs),” like www.
example.
com example.
comSelect “Custom SSL Certificate” and choose the certificate we generated a few minutes ago.
Lastly, it is very import that you enter the “Default Root Object.
” That is your website entry file.
This should be index.
html in most of the cases.
Click on “Create Distribution.
” It takes a while.
Remember, your website is now replicated all over the world.
AWS CloudFront setting.
Remember setting the default root object.
Congratulations!.Everything is configured, and your website should be online.
Well, you can be proud of yourself, but there is always room to improve.
That’s why I’ll provide you with some next steps.
You probably won’t remember all the steps.
Nobody does.
That’s why bright people created automation services.
This topic is called “Infrastructure as Code” such as CloudFormation (AWS), Cloud Deployment Manager (GCE), Terraform by Hashicorp, etc.
.