After building my web application, I was searching an options to host my application, I checked for droplets, DigitalOcean and believe me I don not need all with their overkilling features, and have no idea how much I had to pay at end as well. Then I check for AWS free tire options, and it allows me to deploy my application with almost no cost. But this no cost also have something in behind which I need to pay every month.
There is a tearm, is being used every time Static web hosting and Dynamic web hosting. What is the difference -
Static Web Application:
Some examples of static sites include:
Dynamic Web Application:
Dynamic websites can display dynamic or personalized content. They usually interact with data sources and web services, and require code development expertise to create and maintain. Other examples of dynamic sites are include:
Before we proceed further, here is the to do list -
I recommendaded to use google domain for your application. I also search a lot in different site and then set my mind to buy the doamin from google for below reason -
So buy any name for your application, which we are going to use in later stage.
Create a AWS free account using your credit card, and very few ammount will be deducted and later will return back to your account to verify the card details. There are many features are included in free account, but I would suggest before using those please ready carefully the Tearm & Conditions. The Cloud computing is very trickey, if you don't get it properly but still exploring, it may cost you a lot. So read the documentation first and then start using it.
After your account set up, please navigate to your email > My Security Credentials > Access Keys (access key ID & secrect access key)
Open S3 bucket and create a new bucket and named it as your website going to be. In my case I am going to create bot.lazypandatech.com as a bucket name. During bucket creation please make it public access and set the Bucket policy & CORS Configuration as well like below -
Create an angular application with routes like below -
Also create a shell script to upload your code to S3 bucket -
Run the script from your terminal by './upload.sh' and all code will add to S3. Open AWS S3 and select your bucket > Properties > Static Web Hosting > set index.html. Open the URL in browser, you should see you application running with AWS domain and reloading / refreshing is also throwing some error.
Open AWS console again, and change the location to US East (N.Virginia) us-east-1 and then open Certificate manager, request a certificate. You’ll need to validate your domain ownership by email or directly with DNS. I would suggest to always verify ownership by DNS validation. Once you’ve requested your certificate you’ll get something like this (except the status will be pending). Click on the “Export DNS Configuration file”:
Amazon CloudFront content delivery web service integrates with other AWS products to give you an easy way to distribute content to users on your website with low latency, high data transfer speeds, and no minimum usage commitments.
Now click on Create Distribution. CloudFron is not specific to any region as it will work globaly. To set up your CDN, folloe the below steps -
It will take few time to reflect the changes. Once you got success, copy the CDN URL, and paste it to any text file.
Open distribution, and select 'Error Pages' tab and modify the Error response settings in AWS. (It will not show any error response when you refresh the page)
Also Open the invalidation tab, and set '/*'. Whenever you upload your code to S3, please add invalidation so that your code will be refreshed all the different servers and latest update will be reflect immediately else it will take a lot time to reflect.
Once done please save the distribution, and proceed for the next step.
It's time to connect the domain you bought on your DNS registrar with CloudFront and S3. Route53 acts as the bridge for that. (In my case it is lazypandatech.com OR if you wanted to create subdomain, it would be looks like bot.lazypandatech.com)
Create a record set and leave the name empty (it will default to example.com). Then:
Set the type to "A - IPv4 address"
Respond with "Yes" to "Alias" and set the alias target to your CloudFront distribution url.
Keep the routing policy as "Simple" and, based on your budget and needs, enable or disable "Evaluate Target Health"
It takes time to show your DNS propagation. So wait for sometime and try again or refresh on brwser to check your site be available.
Hope you enjoy your first website hosting, if you have any suggestions please comment below.
Thank you, Happy Coding!
- Lazy Panda Tech