If you are an Ember developer/DevOps and want to host your ember app via AWS CloudFront then you are at the correct place. Let's look at how we can do it easily.
Prerequisite: I assume that you know very well how to deploy your ember app on s3.
Setup s3 bucket and enable to static hosting
Let’s say you have deployed your ember app on s3. To host application via CloudFront we need to enable the Static website hosting property of that particular bucket.
Let’s say you have deployed your ember app on s3. To host application via CloudFront we need to enable the Static website hosting property of that particular bucket. For example, your bucket name is EmberHostApp in which you have deployed your application.
-
Click on that bucket from your bucket list. Where you can see the property tab for the same as the below example.
-
To enable static website hosting property for this bucket follow the below steps.
-
Click on the static website hosting tab from the properties.
-
Select Use this bucket to host a website
-
Where you can set the index page and error page of your application.
-
Note down your endpoint which will use to set up CloudFront
-
Configure property with enabled bucket hosting
-
Make sure to set the bucket content as public.
Setup CloudFront to host your app
CloudFront is a CDN service provided by AWS. To serve our ember application content, we have to configure the CloudFront network. Let’s start to set up basic steps to deliver content as our ember application by creating AWS CloudFront distribution.
Select CloudFront service from the AWS console management dashboard and create Create Distribution.
Step 1: Select the delivery method
-
Select the Web as a delivery method for your content. Web delivery content distributes your ember application as static content with Http or https protocol.
-
Get started with Select delivery method method
Step 2: Create a distribution
-
You have to create a CloudFront distribution to tell CloudFront where you want to deliver your content from.
Origin Settings
-
Use earlier noted s3 endpoint as Origin Domain Name instead select value from Drop down displaying there.
-
You can leave origin path and origin Id as it is as optional
Cache Behavior Settings
-
Select viewer protocol as Redirect HTTP to HTTPS to redirect HTTP request to https.
-
You can set Minimum TTL and Maximum TTL for cache invalidation time. It is the default 24 hours.
-
You have to manually invalidate the cache if you have changed anything on the deployed content.
Distribution Settings
-
Configure Alternate Domain Names as a domain name of your application. You can set more than one CNAME for the same.
-
Configure Cname with route 53 entry.
-
CloudFront provides a default SSL certificate If you have your SSL certificate then select Custom SSL Certificate and configure your certificate for the same.
-
Your CloudFront distribution is ready to use by configuring those simple steps.
Create Invalidation
CloudFront manages caching to deliver an application in different regions to serve static content to overcome request-response performance.
-
Let's say your distribution already servers your application, Now you have made changes on your code and deploy on s3.
-
As per the general scenario now the application must serve updated content instead of old on but because of caching functionality your distribution will serve old content.
-
You have to invalidate caching to sever updated content as per the below step.
-
Your CloudFront distribution ? Invalidation ? Create invalidation
-
Configure your invalidation rule based on your application
For professional paid support, you may contact us at
[email protected]
.
