AWS Amplify : Website Migration
Tags: awsamplify, webdev, aws
Published: 2024-03-23 04:06:49

I have a custom web app which would help me track buses around my area and to also give me a clear view on where they current GPS location, letting me leave out at a precise time. 

This Website was earlier hosted on Heroku and was working fine. However, recently Heroku has taken away the free tier and I was exploring alternate web hosting options for my site. 

I gave a go with AWS Amplify web hosting and I am very impressed with the ease of getting it done. Took me less than 5 mins to complete the whole process.

I will document here the full journey on AWS Amplify Web hosting.

Firstly, **what is AWS Amplify?**

> AWS Amplify is a set of products and tools that enable mobile and front-end web developers to build and deploy secure, scalable full-stack applications, powered by AWS.

AWS Amplify provides two components 

1. **Amplify Studio**

 > Build an app backend with auth, data, and storage, and create custom UI components. Then integrate them in your app with just a few steps.

2. **Amplify Hosting**

 > Connect your Git repository to continuously deploy your frontend and backend. Host it on a globally available CDN.

**Pre-requisites:**
For this you will need a repo with a bitbucket URL (and optionally may be already deployed earlier or at least locally tested). 

**Steps:**

**Step 1** - Open the AWS Amplify homepage
   eg:- https://ap-southeast-console.aws.amazon.com/amplify/home?region=ap-southeast-2#/
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3e4r2eegvplgf5wngbh7.JPG)
  This will open the Amplify Homepage.

**Step 2** - Scroll down to Amplify Hosting and click 'Get Started'. This will start the webhosting process.

  ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p2i4dj1g4q0epb1ogdfc.JPG)

**Step 3** -  Choose an existing repo. In my case the repo was hosted on bitbucket. In my case, its currently in GitHub (planning to migrate it to AWS CodeCommit).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbmw3atfpeg8ghkoq4oe.JPG)
  This step will initiate the steps required for linking the repo.

**Step 4** - Authorize this access request by AWS Amplify on Github by 
a. signing in with the GitHub credentials,

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ajzsl3spwsdxswtqf06k.JPG)
b. entering the 2FA

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78f5h9orlgp6m8h9ucyp.JPG) 
c. authorizing the access

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d7c7fe90obdd2m7pq9qx.JPG)

This step will build a connection with your dev work

**Step 5** - Next provide the permissions to access all repos or selective repos.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8l7i9xh5gzvrrdt1tswl.JPG)

Click 'Install & authorize'

**Step 6** - Now under recently updated repos, select the repo & branch that you want to get published.

a. select the repo
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x7wa68co0bfe1bob39rg.JPG)
b. select the branch

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/643sxf2ysmwyvc5lw41f.JPG)

**Step 7** - Next select the build setting. Here you can define the app name and additionally you can configure the advanced settings if required. I didnt had that much need so went with the default one.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/glvlvwuuze838qvbx6dt.JPG)

**Step 8** - Now, review all the settings and click 'Save and Deploy'

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/er3kfo5tv9z32att5epp.JPG)

**Step 9** - Monitor the deployment for Provision - Build and then Deploy.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4lsgzx801iuicsn925e.JPG)

That's it.
You will get the deployment URL and once the deploy step is successful you will be able to access it.

It was really easy and straightforward to migrate my website on AWS Amplify.

Hope you had a good read and can try this out now.