Supercharge your SAP Composable Storefront with Amazon CloudFront

Providing a seamless and fast user experience is a paramount for business success. Customers expects digital commerce websites to load quickly, regardless of their geographic location or device. In fact, in the 2021 RSR’s Annual Evaluation Of Retailers’ Website Performance provided by RSR System research, shows that 92% of shoppers get frustrated with slow websites, and 87% will not wait for a slow site to load. 53% of shoppers will leave a slow site and buy from a similar retailer instead. As consumer expectations continue to rise, companies in retail business must prioritize optimizing their online experiences to stay competitive.

This is where a Content Delivery Network (CDN) like Amazon CloudFront can make a significant difference, especially for digital commerce solutions.

Amazon CloudFront is a web service that gives businesses and web application developers an easy and cost effective way to distribute content with low latency and high data transfer speeds. Like other AWS services, CloudFront is a self-service, pay-per-use offering, requiring no long term commitments or minimum fees. With CloudFront, your files are delivered to end-users using a global network of edge locations.

SAP Composable Storefront (SAP CS) is a lean, Angular-based JavaScript storefront for SAP Commerce Cloud (SAP CC). SAP CS integrates with SAP CC through the Omni Commerce Connect (OCC) API. The SAP CS application generate a significant amount of static and dynamic web content, including product images, Cascading Style Sheets (CSS), JavaScript files, and REST API. By leveraging CloudFront, you can enhance the performance of your e-commerce solution reducing the load on the SAP CC backend origin and ensuring that your customers enjoy a responsive and engaging shopping experience, no matter where they are located.

Moreover, CloudFront offers advanced security features, such as HTTPS support, custom SSL certificates, and field-level encryption, ensuring that your customers’ sensitive data remains secure throughout their shopping journey. Additionally, CloudFront can be integrated with AWS Shield to protect against Denial of Service (DDoS) attacks and AWS Web Application Firewall to protect against potential cyber threats and safeguarding your online storefront from malicious attacks.

In this blog, we will describe how to seamlessly integrate CloudFront with SAP CS and SAP CC. We’ll guide you through the setup process, configuration best practices, and techniques to optimize your CDN performance. At the end, you will understand how to harness the power of CloudFront to deliver enhanced website experiences, boost customer satisfaction, and stay ahead of the competition in the ever-evolving digital commerce space.

SAP CC, through the Cloud Portal, allows to deploy SAP CS storefront together with the SAP CC application in a single region as shown in Figure 1. This solution does not provide a CDN and users located in different geographical regions will experience different performance due to network latency. Also, this approach requires SAP CS and SAP CC applications to be in the same source code repository making this approach not optimal to have separate lifecycle for the frontend and the backend of your digital commerce solution.

The goal of this blog is to offer an alternative solution using CloudFront for the out-of-the-box (OOTB) electronics sample store and OOTB SAP Composable Storefront in Client-Side-Rendering (CSR) mode without any additional customization at application side. In case you want to integrate your customized version of SAP CS and SAP CC, you will need to adjust the CloudFront distribution behaviors with your specific requirements.

In Figure 2 you can see the high level architecture that we are going to implement.

Your SAP CC e-commerce solution is hosted in one single region, for example US East (N. Virginia), but your customers could be located anywhere in the world, for example in Germany and United States. By deploying a CloudFront distribution you leverage the global network of Points of Presence (PoPs) and Regional Edge Caches and give your customers consistent performance, high availability and shield them from internet instabilities.

Amazon Route53 provides a public hosted zone with your domain name you want to use to publish your digital commerce website. This is a prerequisite for the AWS CDK automated solution, and you should create it in advance. Other DNS can be used but this is out of scope of this blog.

Amazon Certificate Manager (ACM) provides a public SSL certificate linked and validated thought the domain name defined in Route53 hosted zone.

The domain name and ACM certificate are linked to the Amazon CloudFront distribution. this allows traffic coming from users to be routed to the Cloudfront distribution URL resulting in optimized path.

This solution to build this architecture with AWS Development Kit is available as open source in this git repository. The instructions to deploy will be described later in the blog.

The CloudFront distribution is configured with two origins:

• The static content origin is the SAP CS application that is deployed in Client Side Rendering (CSR) mode, that means that the html rendering happens in the user browser, and hosted in an Amazon Simple Storage Service (Amazon S3) bucket, ideally in the same geographical region as the SAP Commerce Cloud. As best practice, the Amazon S3 bucket is only accessible by the CloudFront distribution using Origin Access Control (OAC)
• The dynamic content origin is the SAP CC headless application, that provides REST API public endpoints. In this scenario we are using the default API endpoint (example: api.abcdefghil-mnopqrstu1-d1-public.model-t.cc.commerce.ondemand.com). To enforce the security posture of the SAP CC origin, it is possible to restrict the access to the SAP CC API endpoint only to the CloudFront distribution by creating an Allow All IP Filter Set in the SAP CC Portal with the CloudFront managed prefix list. More information about this approach can be found in this AWS blog.

We will implement a sample cache configuration. Depending on your specific usage and update patterns you want to fine tune according to you needs.

You can find more information about caching in the following SAP articles:

• SAP Commerce Cloud, composable storefront CDN Caching Recommendations
• Improve Spartacus and OCC performance with CMS Rendering Cache

Here the cache configuration on CloudFront and on the Cache-Control response header for all the resources managed in the CloudFront distribution.

We assume that the static files (js, css, etc..) can be cached on CDN and on the client browser because on a new deployment the static files are generated with a unique file name. The homepage is cached one day in CloudFront because cache invalidation should be performed at a new deployment of SAP CS. Dynamic API content such as site and store configuration, product details, category pages and CMS components are cached depending on assuptions on how frequently the related data are changed in the SAP CC backend. See Table 1 for the sample configuration used in the proposed solution.

Path Pattern Caching TTL on CDNCache-Control response headerComments

/*.js, *.css, /media/*, /asset/*	YES	24h	public, max-age=3600, stale-while-revalidate=86400, immutable, stale-if-error=0	Static files are generated with unique file name, therefore can be cached long time.
/electronics-spa/*	YES	24h	public, max-age=300, stale-while-revalidate=86400, stale-if-error=0	Cache invalidation on CloudFront must be triggered after a new deployment of SAP CS as recommended.
/occ/v2/basesites	YES	24h	public, max-age=3600	Store configuration should not change often.
/occ/v2/electronics-spa/languages	YES	24h	public, max-age=3600
/occ/v2/electronics-spa/currencies	YES	24h	public, max-age=3600
/occ/v2/electronics-spa/users/*/consenttemplates	YES	24h	public, max-age=3600	Sample value. Adapt to your patterns.
/occ/v2/cms/pages	YES	5min	public, max-age=600
/occ/v2/cms/components	YES	1h	public, max-age=3600
/occ/v2/electronics-spa/products/*	YES	24h	public, max-age=120
/occ/v2/electronics-spa/products/search	YES	24h	public, max-age=120
/medias/*	YES	365d	public, max-age=86400, stale-while-revalidate=86400, immutable, stale-if-error=0
/occ/v2/users/*	NO	–	no-cache, no-store, max-age=0, must-revalidate	Cart, Order, User and Checkout resources must not be cached.
/authorizationserver/*	NO	–	no-cache, no-store, max-age=0, must-revalidate	OAuth2 resources must not be cached.
/occ/v2/*	NO	–	no-cache, no-store, max-age=0, must-revalidate	No cache for the other remaining resources.
/* (Default)	NO	–	no-cache, no-store, max-age=0, must-revalidate

Table 1: Sample cache configuration

Important Notes

There are two important configurations that need to be mentioned:

• The root path /electronics-spa is the virtual path that represents the site context. Since this path does not relate to any origin resource, must be rewrite to the default static resource index.html. For this reason the CloudFront Function rewriteUrl is associated to the specific behavior.
• All the requests related to the dynamic content origin will have the URL based on <YOUR-ROOT-DOMAIN-NAME> and we use an Origin Request Policy to remove the host header when sending requests to the origin. This will prevent SAP CC to refuse to serve the request due to non-matching host.

Prerequisites for deployment

To deploy the required AWS Services the following prerequisites must be checked:

• Create Amazon Route53 public hosted zone with your domain name. Note down the zone id, it will be used later.
• Configure and deploy SAP Commerce Cloud for SAP Composable Storefront
• Setup SAP Composable Storefront from the libraries. You need to change the baseUrl to point to the same domain name that is resolving the CloudFront distribution. Here an example (see Figure 3):

occ: { baseUrl: ‘https://<YOUR-ROOT-DOMAIN-NAME>’, }

• Install AWS Cloud Development Kit (CDK) with the prerequisite components.
• Build the SAP CS application and deploy to the S3 bucket. Here is a sample command to execute in the shell:

cd <YOUR-COMPOSABLE-STOREFRONT-PROJECT>/ rm -rf dist && npm install && npm run build aws s3 sync ./dist/mystore/browser s3://<THE-BUCKET-NAME>/mystore

• For future deployments, it’s important to invalidate the cache on CloudFront to ensure fresh content everytime you deploy a new version of your SAP CS application. Cache invalidation will force the users to load the SAP CS application directly from the S3 origin and as well all the REST API calls are requested to be peformed on the SAP CC origin.

aws cloudfront create-invalidation --distribution-id <CLOUDFRONT_DISTRIBUTION_ID> --paths "/*"

• You need to clone the git repository:

git clone git@ssh.gitlab.aws.dev:my-blogs1/sap-commerce-cloud-cloudfront/amazon-cloudfront-for-sap-commerce-cloud-cdk.git && cd amazon-cloudfront-for-sap-commerce-cloud-cdk

• In the project directory, you need to deploy the CDK script.

aws-cdk deploy \ --parameters sapBucketNameParam=<THE-BUCKET-NAME> \ --parameters hostedZoneIdParam=<THE-HOSTED-ZONE-ID> \ --parameters domainNameParam=<YOUR-ROOT-DOMAIN-NAME>\ --parameters siteNameParam=electronics-spa \ --parameters sapCommerceCloudApiAspectEndpointParam=<SAP-COMMERCE-CLOUD-ENDPOINT-URL> \ --parameters composableStorefrontStoreNameParam=mystore

The output of command should be something like what shown in Figure 3:

• After this, you should browse to: https://<YOUR-ROOT-DOMAIN-NAME> and get the SAP CS homepage

Below, a simple performance analysis with Google Chrome Lighthouse audit tool.
The comparison is between the SAP CS integrated with CloudFront as described in this blog, and the SAP CS application deployed on SAP Commerce Cloud without a CDN. Integrating Amazon CloudFront as CDN for SAP CS provides around 20% performance improvement (see: performance scoring) compared to the standard deployment without CDN described above.
The testing have been performed after browsing the application, that means with both CDN and browser cache already warmed up in both scenarios.

Figure 6: Performance benchmark

The performance scoring value is an estimation calculated by the Lighthouse tool against metric scores like First Contentful Paint, Speed Index, Total Blocking Time, Largest Contentful Paint and Cumulative Layout Shift.

To cleanup you need to execute the following commands in the CDK project:

aws s3 rm —recursive s3://<THE-BUCKET-NAME>/mystore cdk destroy --force

As an e-commerce business owner, it’s crucial to understand the costs associated with your online platform. With a sample calculation, simulating a digital commerce platform that serves customers in United States and Europe, the estimated monthly cost for Amazon CloudFront is $290.08 USD. This cost is calculated based on three main factors: data transfer out to the internet, data transfer out to the origin, and the number of HTTPS requests. The sample cost estimation is available here.

Let’s break down the calculation:

1. Data Transfer Out to the Internet 1 TB per month (1,024 GB) for United States, 1 TB per month (1,024 GB) for Europe

• Tiered cost for United States: 1,024 GB x $0.085 = $87.04 USD
• Tiered cost for Europe: 1,024 GB x $0.085 = $87.04 USD

Total tier cost (Data transfer out to internet): $174.08 USD

2. Data Transfer Out to Origin per month: 150 GB from United States, 150 GB from Europe

• Tiered cost for United States: 150 GB x $0.02 USD = $3.00 USD
• Tiered cost for Europe: 150 GB x $0.02 USD = $3.00 USD

Total tier cost per month(Data Transfer Out to Origin): $6.00 USD

3. HTTPS Requests per month: 50 million for United States, 50 million for Europe

• Tiered cost for United States: 50,000,000 requests x $0.000001 USD = $50.00 USD
• Tiered cost for Europe: 50,000,000 requests x $ 0.0000012 USD = $60.00 USD

Total tier cost per month(HTTPS Requests per month): $110.00 USD

By adding these three components, we arrive at the total cost for CloudFront:

Total cost per month: $174.08 USD + $6.00 USD + $110.00 USD = $290.08USD

It’s important to note that this calculation is specific to the United States and Europe regions. CloudFront pricing may vary based on the regions where your content is served and the locations of your origin servers.

Remember, the provided cost estimation is based on sample datapoints and may change depending on your actual usage patterns and requirements. It’s always recommended to regularly monitor your CloudFront usage and costs to ensure efficient resource utilization and budget management.

For testing purposes this scenario could be included in the AWS Free Tier and therefore not generate additional costs. Please make sure you check the Free Tier conditions for the purposes you intended to use these services.

In this blog we have seen how CloudFront can be used together with Amazon S3, ACM and Route53 to improve user experience and secure their shopping journey on SAP CC and SAP CS for users across the globe and reduce the load of the SAP CC applicatiion by introducing resource caching.

To learn more about about the AWS Services that have been used in this blog you can access the AWS documentation:

Amazon CloudFront

Amazon Simple Storage Service (Amazon S3)

Amazon Route53

AWS Certificate Manager

AWS Cloud Development Kit

Read more on AWS for SAP blogs to get inspiration on how you can get more out of your SAP investment. Get started with Amazon CloudFront today and boost the performances of your digital commerce solution!

In addition to your customer account team and AWS Support channels, AWS provides public question and answer forums on our re:Post Site. Our AWS for SAP Solution Architecture team regularly monitor the AWS for SAP topic for discussion and questions that could be answered to assist our customers and partners. If your question is not support-related, consider joining the discussion over at re:Post and adding to the community knowledge base. In addition to that, refer to the Network and Content Delivery blog section to learn more about CloudFront and Networking solutions.