Migrating our blog from godaddy to aws

This article talks about the challenges i faced during migration of our blog from godaddy to AWS - S3, Route53 and Cloudfront services. This can also be used as a reference for anyone using NextJS with SSG (static site generator) and hosting the same on AWS.

Disclaimer: this article is just me sharing steps i have followed through the migration process and doesn't gurantee to be the best possible way. you may also incur some charges from AWS.

I have tried to keep the whole process short and to the point as each of the technologies used requires its own article to discuss in more detail.

Why i did this?

I started this blog back in 2014 with wordpress, PHP tech stack which was and is better option to go with even in 2021. However, the nature of my job being a software developer requires me to try and learn new technologies and get it to apply somewhere to solidify my learnings.

I was trying very hard to revamp this blog to have more granular control on the Components and having freedom to add anything new i want with time but i was not able to take sometime out of my schedule for this.

New blog architechture:

Currently i am using below Tech stack for the new blog.

Frontend

NextJS for Static site generation(SSR).
Tailwind CSS for styling

Backend

AWS S3 for static website hosting.
Cloudfront for serving it via Edge locations
Godaddy which is just used to redirect to AWS Nameservers

Overview

We are uploading our static files to S3 and then serving the S3 static website via cloudfront. We are then routing our DNS requests from Route53 to cloudfront distribution. You must be thinking if we have an S3 static website then why not route our DNS requests from Route53 to S3 itself. There are basically two factors i did it this way.

S3 static hosting doesn't support HTTPS.
caching content via cloudfront CDN will give us an opportunity to render pages faster.

Whole migration process in a nutshell

Create an S3 bucket and upload all files you want to host.
- In my case i am using NextJS. Hence, i uploaded contents of out directory
- Enable static website hosting from Properties Tab.
- Now goto permissions tab and uncheck Block public access checkbox.
- In the same Tab edit bucket policy and paste below snippet. Make sure to replace ARN with yours
```
{
  "Id": "Policy1628520674543",
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Stmt1628520671120",
      "Action": ["s3:GetObject"],
      "Effect": "Allow",
      "Resource": "arn:aws:s3:::DUMMY_BUCKET/*",
      "Principal": "*"
    }
  ]
}
```
- By this moment you should be able to access your website via static hosted URL you got from properties Tab.
Create a Cloudfront distribution
- Copy the website URL without http:// in the Origin domain Section
- Select Redirect HTTP to HTTPS radio button.
- Add both of the domain names with and without www in the Alternate Domain name section.
- if you dont have a HTTPS certificate you can request one from ACM (Amazon certificate manager). Select request for certificate.
- You have to enter domain name (example.com & www.example.com).
- Verify that you own the domain via email verification (Easy) or via DNS
- Add the newly created SSL certificate from dropdown.
- in case of NextJS make sure you enter index.html in Default root object field.
- Create the distribution - It may take a while to access file generated domain name ending with <something>.cloudfront.com.
Login to your godaddy account and in manage DNS section of respective domain download zone file.
Route53 service.
- Create a new Hosting Zone by adding domain name (example.com).
- Once create you can import zone file downloaded from godaddy in above step. Verify in preview if records are correct - NS & SOA record wont be reflected as it will be overidden by Route53 NS & SOA.
- for A and AAA record you can set route traffic to the cloudfront distribution created.
- you may need to wait for the old TTL to expire.
Again login into godaddy and update Nameservers with what you get from Route53 NS of your domain.

Make sure your cloudfront domain name is working fine before routing requests from Route53 and also your Nameservers name dont contain a tailing period(.) or godaddy will throw an error while changing them.

Update - 15th Sept 2022

There is one last issue left to solve. Problem is once we visited any of the pages from homepage.

Example: www.example.com/some-internal-slug

We were presented with homepage but URL stayed the same. But adding .html extention at the end of URL was working.

This was not expected at all.

Issue was not with the code. Cloudfront was returning 403 for internal pages and in order to resolve this we decided to use Cloudfront Functions.

This issue is so common that AWS has also provided an example snippet.

AWS example function

Once we added this as our cloudfront function our website went up & running with all routes working.

Credits: