Static web hosting is simple, cost-effective, and easy to manage. A static site can host any kind of web application like portfolio, blog, or simple landing page.
In my earlier article, I have demonstrated how to deploy Static website in AWS using S3 bucket, CloudFront and Route53. In this blog, I am going to demonstrate how to deploy any Angular, Vue, or React application using AWS Amplify and what are the challenges we might face.
I am assuming you are either an Angular / Vue / React developer and already created a web application using any of the mentioned frameworks or libraries. Here I am focusing on the Angular framework and using that to create Single page application. Angular-Universal is the library that helps to create static content. There are two options Angular-Universal provides.
Here, I am choosing option 2 - Prerender Strategy to build the application and deploy it to AWS Amplify.
Please open your AWS account and navigate to the AWS Amplify module. You can choose any of your available options down below.
In this demonstration, I choose the last option "Deploy without Git provider" and continue. Next, provide the app name and Environment name and drag & drop the all content inside the "dist/<<app-name>>/browser" folder. It will take some time (30 seconds to 1 minute) to deploy the code and generate a public-facing URL like https://prod.<<aws-generated-ids>>.amplifyapp.com. You can hit the URL and can see the web content.
Once your application has been deployed, navigate "Domain Management" under "App Settings" from the left menu navigation. You could see the domain name listed in the dropdown, if have not set it up yet, you can do it from Route53 by creating a hosted Zone. You can purchase a domain from AWS or any other domain provider such as GoDaddy, google domain, etc.
I have purchased one from Google Domain and add all the NS records in the Google domain as Custom name servers.
It will take some time to enable your domain, meanwhile, you can return back to AWS console search with AWS Certificate manager and create two certificates like lazypandatech.com and www.lazypandatech.com. Add the CNAME records in Route53 and wait some time to get them issued.
Once the domain name shows in the dropdown select the domain name and click configure the domain.
So at the first time, you will notice, the CNAME records are not yet configured, so you need to open up the Action dropdown and select View DNS.
You should open your domain provider, in my case, it is Google Domain, So I opened it and add the records under Custom resource Records.
Google domain does not support ANAME, so do not add anything related ANAME under Custom Resource Records section.
If you are using www as a subdomain, please add the CNAME for the www subdomain as well. www subdomain CNAME we can pick either from Route53 or AWS Certificate Manager. Without this step, the domain activation will not be successful.
After some time, (20 - 30 minutes) you can see the domain become available. You can access your portal using the custom domain now.
The common issue for AWS Amplify hosting is 'Domain Activation failed'.
For such the above scenario, please add all the necessary CNAME (main domain & sub-domain) to your domain provider. And if you are already used the domain in another AWS account or another CloudFront distribution, please remove those and wait at least 4 - 5 hours to delete that domain from a different region.
Another issue you can get, while refreshing or route to another page it shows Access Denied in AWS Amplify with the following image.
For such above cases, you need to navigate to AWS Console and select “Rewrites and redirects”, add a new rewrite and redirects, click on “Open text editor”, and add the below rule:
The above will solve the Access Denied issue. But if your application needs SEO support, the above solutions will not help search engine bots to crawl your web pages. Search engine bot will still get the access denied error. To solve this issue, you have had to enable SSG (Static Site Generation or pre render) then only the search engine crawler can crawl your web pages.
The above issue is really very wired and whenever it happens, I tried a lot to fix it. I never get proper solutions to make it fix. I also tried to give proper IAM access to the shared users, tried the same with the root user. But nothing was helping me to make it successful deploy immediately. Then found a simple but elegant fix for this issue.
In Nextjs, React application while accessing Sitemap using HTTP://domainname/sitemap.xml it throws CloudFront access denied error. To solve this you can update the Rewrites and Redirect section.
Another problem I have observed, if you have opened the AWS free tire account recently and wanted to host your application using S3 bucket with CloudFront Distribution, you might get some error like -
You will not be able to proceed further until you connect with someone from AWS Support or they call you back. If you are using a free account then you will not have access to raise technical support from AWS or create any case. In such a situation, you can verify your work using AWS Amplify.
I have come across this situation earlier and able to solve my purpose using AWS Amplify.
Hope you like the tricks and feel free to write your comments below.