Using Lambda@Edge for Single Page Application(SPA) on AWS Cloudfront
Tags: awss3, awscloudfront, awslambdaedge, socialsharing
Published: 2019-04-02 15:53:06

---
title: Using Lambda@Edge for Single Page Application(SPA) on AWS Cloudfront
published: true
description: To resolve the of social sharing issue.
tags: aws-s3,aws-cloudfront,aws-lambda-edge,social-sharing
---


Recently, there is a new requirement on the project that I have been working on at work, which is to enable social sharing. It is for a stock photography website which allows users to buy photos at different resolutions, similar to Shutterstock or GettyImages. The new feature requires sharing of individual photo URL on the social sites.

![Social Sharing](https://thepracticaldev.s3.amazonaws.com/i/3n3mzxgetlkutaum5s0j.jpg)

Implementing such feature is trivial for normal websites where basic metadata can be added to each HTML pages. Since the front-end app is implemented using Vuejs, it complicates. It is due to the fact that social sites like Facebook or Twitter **do not executed the javascript** on the crawled page for sharing on their sites. Therefore, it is not possible to use library to update the HTML page metadata dynamically.


One of the ways to resolve this is by implementing server side rendering for the pages. But, this will require additional hosting for the front-end app as the current setup leverages AWS S3 and AWS Cloudfront for static web hosting. This setup is considered cost effective and has well taken care of the scalability of the front-end app.

![Lambda@Edge](https://thepracticaldev.s3.amazonaws.com/i/1lcerw1bro8b548bv4xc.png)

A couple of hours researching on the web led me to discover that Lambda@Edge can be deployed to the AWS Cloudfront to intercept and customize the HTTP request. Depending on the source of request by **inspecting the User-Agent header**, we can modify the returned response body in the Lambda@Edge function.


So, this is how it works.

![Flow Diagram](https://thepracticaldev.s3.amazonaws.com/i/uhb1xb9pkirjnkl2lp9i.jpg)

The green line represents the request flow for normal user access from browser. Then, the red line represents the request coming from social sites.

There are a few limitations on AWS Lambda@Edge as I have written it:
- The supported runtime for Lambda@Edge for Cloudfront is only **Nodejs**.
- The Lambda@Edge function can only be deployed onto the **North Virginia region**.
- The Lambda@Edge function timeout can only be configured to **5 secs**.
- The Lambda@Edge function **does not support environment variables** and I have handled using Gulp script. Or you can try AWS System Manager Parameter Store.
- The Lambda@Edge function cant be deployed into VPC.

For deployment, you will have to:
- Publish a new version of your Lambda@Edge function.
- Update the Cloudfront distribution with the new Lambda ARN.

And you will need to add the required permission to the Lambda role. Refer to [here](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/lambda-edge-permissions.html)

For sample AWS Lambda@Edge code, please refer to the following Github repo:

{% github https://github.com/mengjiann/aws-lambda-edge-cloudfront %}


Reference:
1. Open Graph Protocol: http://ogp.me/
2. Vue Social Sharing Plugin: https://github.com/nicolasbeauvais/vue-social-sharing
3. Vue Server Side Rendering: https://vuejs.org/v2/guide/ssr.html
4. Official AWS Lambda@Edge doc: https://docs.aws.amazon.com/lambda/latest/dg/lambda-edge.html
5. Official AWS Lambda@Edge Limitation: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/lambda-requirements-limits.html#lambda-requirements-lambda-function-configuration