“Serverless” SPA on AWS(Lambda, API Gateway, S3, CloudFront)

In this post we’ll dive deeper into the implementation of our Serverless SPA on AWS.

For background information and the setup of the React app, click here

Things to keep in mind:

1. Authentication / Authorization are not a part of this simple architectural tutorial
2. Neither is Security – our API is wide open and can be accessed by typing the API URL into the address bar

We’ll utilize 4 AWS services to complete our “serverless” demo:

1. Lambda – for serverless computing
2. API Gateway – to provide an http endpoint for our Lambda function
3. S3(Simple Storage Service) – to store our static React application
4. CloudFront – this is a global CDN(Content Delivery Network).  We’ll use it to automatically distribute our static files to multiple regions to bring our code closer to our end clients around the world

High level tasks

1. Create a Lambda function(source) and hook it up to AWS API Gateway
2. Prepare React app for deployment by inserting the API Endpoint URL and building the app
3. Upload the static files into an AWS S3 bucket
4. Create a CloudFront CDN that will route all the requests to the index.html file
5. Modify the Lambda function to accept CORS calls from our CloudFront domain, as well as the S3 bucket

Step by step instructions

• Login to console.aws.amazon.com – will be referred to as AWS Console

1. Create a Lambda function

1. From AWS Console, click Lambda under Compute
   
   
2. Click Get Started Now button
3. On the Blueprint screen, select microservice-http-endpoint with nodejs(A specific blueprint is, more or less, irrelevant for our purposes – as long as it’s nodejs – since we’re going to replace the code with our own function.  Having said that, the code in the gist was derived from this particular sample)
4. On the Configure Triggers screen
   1. Type in an appropriate API Name for your project
   2. For Security choose Open
5. On the Configure Function screen
   1. Give your function a Name
   2. Replace the current function code with this one
   3. Type in an appropriate Role Name(In this simple demo we don’t get to use it anywhere)
   4. Under Advanced Settings, limit your memory to 128mb
   5. Press the blue Next button
6. Look over the configuration summary and click the Create function button
7. Our Lambda function is now created – however not yet complete.  We’ll come back to it when we have our S3 bucket URL and a CloudFront URL
8. The API Gateway was created and integrated with our new Lambda function.  Copy API endpoint URL for the next step.
   

2. Prepare React app for deployment

1. Within the React app, open /src/App.js in your favorite editor and replace Line 23 with the URL of the API endpoint that was copied in the last step
   
2. From the root(/) directory of the app, run command ‘yarn build’.  This will bundle and minimize app code, and deposit the created static files into a created /build directory.

3. Upload static files to AWS S3(Simple Storage Service)

1. Create the S3 bucket
   1. In AWS Console, find and click S3 under Storage
      
      
   2. Click the blue +Create bucket button
   3. Give bucket a Name, and click Next
   4. Click Next on the properties screen
   5. On the Permissions screen, under Manage public permissions, select Grant public read access to this bucket and click Next
   6. On the Review screen, click Create bucket
   7. The new bucket should now be visible within the bucket list
2. Click on the newly created bucket
3. Drag and drop all files from the /build directory within your app into the blue area on the page
   
4. Click Next
5. On the Permissions screen, under Manage public permission, select Grant public read access to this objects(s)
6. Click Next
7. Click Next on the Properties screen
8. Click Upload on the Review screen
9. The files should now be uploading and will soon be visible in the bucket
10. The following convention is used to access the files through a URL
    1. <bucket-name>-s3-<aws-region>.amazonaws.com/<file>
       1. In the case of the demo: m52-serverless-demo-s3-west-2.amazonaws.com/index.html
11. The app is now live, but CORS on Lambda prohibits us from interacting with the services.  We will fix this once we set up our CloudFront CDN(which will also give us a friendlier, and a secure(!), URL)

4. Create a CloudFront CDN

1. In AWS Console, under Networking & Content Delivery, find and click on CloudFront
   
2. Click the blue Create Distribution button
3. Under Web(the delivery method) click Get Started
4. On the Create Distribution screen:
   1. Under Origin Settings, find and select the newly created bucket in the Origin Domain Name
   2. Under Default Cache Behavior Settings, change the Viewer Protocol Policy to Redirect HTTP to HTTPS
   3. Under Distribution Setting, for the Default Root Object enter index.html
   4. Click the blue Create Distribution button
5. Take note of the Domain Name – just as the S3 bucket domain name, we will need to update CORS settings on the Lambda function to accepts these two origins
   

The CDN will take a few hours to propagate to the edge locations around the world and will serve files from a location closest to the client, thereby decreasing latency and increasing overall app performance.  In the mean time, we’ll complete our final step – place the S3 bucket and CloudFront URLs into accepted origins in the Lambda function for CORS communication.

5. Modify Lambda CORS origins

1. In the AWS Console, under Compute, find and click on Lambda
2. Choose the Lambda function that you created in Step 1
3. Under the Code tab, replace lines 14 & 15 with your CloudFront & S3 URLs
   
4. Click the Save button

Once the files have propagated you should be able to go to the CloudFront domain that’s assigned to your CDN, refresh the browser and see the following:

Congrats on your first “serverless” deployment on AWS!
Comments and discussion are very welcome!

PS. Don’t forget to delete the resources not to incur perpetual cost.