Lazy Panda

Developer

Posts
57
Comments
48
Likes
76
Posts
57
Comments
48
Likes
76
sidebar

Static Web Hosting using AWS Amplify

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. 

aws amplify to host application

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.


What is a Static Website?

Nowadays static websites are very popular with modern JavaScript frameworks or libraries. Mainly those are served from a storage server or a content delivery network (CDN). There is no need to have a running server creating the HTML files. These websites are pre-built as HTML files that are stored somewhere on the internet and then served as they were built. Static sites can have dynamic content, but it is handled on the client-side using JavaScript or some third-party integrations using REST APIs.

 


How to Build Static Website using Angular?

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. 

  1. SSR - Server-side Rendering - which requires running any server like express / Nginx etc to run in server-side to server Html pages. For more details, you can check SEO Enablement to an Angular Application.
  2. Prerender - which creates multiple HTML pages in the local environment and all bunch of HTML can be deployed. For more details, you can check SEO friendly URL with Angular 9 Angular Universal and Prerender strategy

Here, I am choosing option 2 - Prerender Strategy to build the application and deploy it to AWS Amplify.


Setup AWS Amplify and deploy

Please open your AWS account and navigate to the AWS Amplify module. You can choose any of your available options down below. 

aws amplify to host application

 

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.

 


Next Custom Domain Setup

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. 

google domain name server

 

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. 

aws amplify custom domain


aws amplify custom 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. 

aws amplify custom domain DNS and CNAME


aws amplify custom domain DNS CNAME and cloudfront

 

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.

 


AWS Amplify Hosting Challenges and Solutions

The common issue for AWS Amplify hosting is 'Domain Activation failed'. 

Error message: One or more of the CNAMEs you provided are already associated with a different resource. 

 

The required CNAME records are not yet configured for the below subdomains.

 

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. 

aws amplify domain activation failed

 

Access denied in AWS Amplify

Another issue you can get, while refreshing or route to another page it shows Access Denied in AWS Amplify with the following image. 

aws amplify access denied issue

 

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:

[

{

"source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>",

"target": "/index.html",

"status": "200",

"condition": null

}

]

 

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.

 

Error: Waiting to deploy Your deployment is being queued

Waiting to deploy Your deployment is being queued

 

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.

  • Simply choose other options for deployment for that time instance. Few times after it will automatically solve the deployment issue. 
    • My application was set with Gitlab, but whenever it happens to me, I choose drag & drop feature for deployment. 

 

While accessing Sitemap, getting CloudFront error

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.

[
    {
        "source": "/<*>",
        "target": "/index.html",
        "status": "404-200",
        "condition": null
    }
]

 


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 - 

com.amazonaws.services.cloudfront.model.AccessDeniedException: Your account must be verified before you can add new CloudFront resources. To verify your account, please contact AWS Support (https://console.aws.amazon.com/support/home#/)

 

com.amazonaws.services.cloudfront.model.AccessDeniedException: Your account must be verified before you can add new CloudFront resources.

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.

Happy Coding!

- LP