After building my web application, I was searching options to host my application, I checked for droplets, and DigitalOcean, and believe me I do not need all of their overkilling features, and have no idea how much I had to pay at the 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 has something in behind which I need to pay every month.
There is a term, that 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 include:
Before we proceed further, here is the to do list -
I recommended using google Domains for your application. I also search a lot on 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 an AWS free account using your credit card, and very few amounts will be deducted and later will return back to your account to verify the card details. There are many features are included in the free account, but I would suggest before using those please read carefully the Terms & Conditions. Cloud computing is very tricky, 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 is set up, please navigate to your email > My Security Credentials > Access Keys (access key ID & secret access key)
Open the 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 the browser, you should see you application running with AWS domain and reloading/refreshing is also throwing some errors.
Open the 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 always verifying 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 on the changes. Once you got success, copy the CDN URL, and paste it to any text file.
Open distribution, select the '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 the latest update will be reflected immediately else it will take a lot of 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 a 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 some time and try again or refresh the browser to check if your site is available.
Hope you enjoy your first website hosting, if you have any suggestions please comment below.
Thank you, Happy Coding!
- Lazy Panda Tech