A CDN (Content Delivery Network) is a group of geographically distributed servers that accelerate the delivery of Web content by bringing it closer to where users are located.
With Front-Commerce Cloud, deliver your site to your users faster thanks to the Akamai CDN traffic included in your offer:
static assets: out-of-the box, Front-Commerce is designed to serve your static assets (images, Javascript, CSS files) from the CDN
pages and GraphQL queries: for improved performance and scalability during traffic peaks, we recommend that you leverage Front-Commerce's Cache-Control features to serve pages and GraphQL queries from the CDN
Activating the CDN is safe, and will require simple changes in your DNS configuration.
This article explains the steps needed to activate the CDN for your project.
Prerequisite: you know how-to change your domain's DNS configuration
DNS configuration is where one configure which server will serve websites at any given address they own.
For instance, when users type https://example.com in their browser, the DNS configuration will allow to know that the browser should read the website from the correct Front-Commerce Cloud's server containing your storefront code.
We will ask you to change some DNS configurations.
Before contacting us, you must know who is authorized to change the DNS configuration for your project.
If you're autonomous on this change it is simpler. Sometimes, a different service in your company or another partner are responsible for this configurations. We can contact the person in charge of the DNS configuration directly if needed (for more efficiency).
If you have several domain names (multi-store websites), please ensure you have this information for each domain name used.
Prerequisite: ensure your Front-Commerce application supports the x-real-ip header
When the CDN will be activated, the real IP address of the user will be exposed in the x-real-ip header.
You must ensure that you haven't edited the default config/httpAuth.js configuration. The headers key must contain the x-real-ip value. Example of valid configuration:
// src/config/httpAuth.js
module.exports = {
enable: false,
headers: ["x-real-ip", "x-forwarded-for"],
};
Otherwise, IP addresses in client logs and remote systems will not match the real user IP.
Contact the support team
We have some manual actions to do to activate the CDN on your project.
Please start by contacting our support team to ask for CDN activation.
We will guide you through the process, help you with configuration if needed ensure everything works correctly.
If another person/team is responsible for updating the DNS configuration, please add them in the loop (Email CC: field) or give us their contact information.
Validate domains ownership
When the CDN is activated, it becomes the one responsible for TLS certificates management (so your website is always reachable with a secure URL — https://).
We need to confirm that you control the domains in the certificates.
You must validate the ownership by adding some CNAME records to your DNS configuration.
It can be done several day before going live on Front-Commerce Cloud.
Our support team will send you the DNS entries to add (1 per domain).
They will look like this:
_acme-challenge.www.example.com. CNAME ac.xxxxx.www.example.com.validate-akdv.net.
After the DNS change, it can take a few minutes before our systems are able to validate the domain. You can use https://dnschecker.org/ to verify the change.
⚠️ Important: the CNAME record needs to remain in place while the hostnames are hosted on Front-Commerce Cloud. Otherwise, the certificates will not auto-renew.
Test your website on CDN
You can preview how your website will be visible by visitors before the CDN gets activated.
We always do a validation on our side. But if you've implemented specific features (such as full page / GraphQL cache) we recommend that you also do some validations.
To do so, you should update your /etc/hosts file to configure a new IP address for your website domain.
Our team will provide you the correct values to use.
External resources explaining how to modify your hosts file:
When you have changed this configuration, you should be able to browse your website with the CDN activated.
What should you analyze?
This is not visible by default, but you can use the Akamai debug headers (Chrome) extension to view additional headers for content served from the CDN.
The most important are x-cache and x-cache-remote headers (additionally to the cache-control standard one).
We recommend adding additional columns to you network tab to view those information all at once.
ℹ️ Below is a detail of possible values Akamai can return (source):
TCP_HIT: Object was fresh in cache and object from disk cache.TCP_MISS: Object was not in cache, server fetched object from the forward server.TCP_REFRESH_HIT: Object was stale in cache and was successfully refreshed with the origin on an If-Modified-Since request.TCP_REFRESH_MISS: Object was stale in cache and refresh obtained a new object from forward server in response to ourIF-Modified-Sincerequest.TCP_REFRESH_FAIL_HIT: Object was stale in cache and failed on refresh (couldn't reach origin) so the stale object was served .TCP_IMS_HIT:IF-Modified-Sincerequest from client and object was fresh in cache and served.TCP_NEGATIVE_HIT: Object previously returned a "not found" (or any other negatively cacheable response) and that cached response was a hit for this new request.TCP_MEM_HIT: Object was on disk and in the memory cache. Server served it without hitting the disk.
Go-Live!
When you're ready to activate the CDN live on your website, a final DNS update is needed.
You should update your domain name DNS entry to redirect users to the CDN instead of your previous live website server.
Our team will also provide the exact CNAME hostname value to use in your configuration.
It usually looks like this: www.example.com.edgesuite.net
💡 When the CDN is configured, don't forget to remove the test entries added in your /etc/hosts file at the previous step, if any.