Skip to content
M52 Studios
  • Contact
Site Search

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

  • August 1, 2017August 12, 2017
  • by Ilia Malchenko

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.

“Serverless” Architecture in the Cloud with React SPA

  • July 31, 2017August 14, 2017
  • by Ilia Malchenko

Background

AWS S3 (Simple Storage Service) and Azure Blobs are both capable of hosting and “serving” static files (HTML, CSS, JS, images, etc…) without a need to provision compute instances (think: savings).  Combine that with a properly tuned Content Delivery Network(AWS’s CloudFront / Azure’s CDN), and a “serverless” processing offering (AWS Lambda / Azure Functions), and you got yourself an optimized, functional app in the cloud.

Will this approach work in every case?  No, but there are definitely scenarios (and I believe this trend will only continue to grow) where this may be the optimal architecture in many cases.

Static Files

Let’s review what static files are and how they are served differently from majority of sites (or apps).  Simply put, they aren’t processed on the server by compilers or interpreters to produce HTML as the end result for each request(caching notwithstanding).  The files are already in the static format (HTML, JS, CSS) that your browser can understand and display properly.  So, quite literally, the only thing that the server needs to do is to simply pass them as they are to the browser.

JS Frameworks

Front-end JS (JavaScript) frameworks like React, Ember, Knockout, Backbone.js, AngularJS, etc, have grown tremendously and are plenty capable of creating beautiful and very functional apps without the need to generate markup on the server.  With JS taking care of our presentation layer, the only thing that is left to do is to pass and receive dynamic data, and that’s where “serverless” components (Functions / Lambda) come in.

Serverless functions

In reference to cloud offerings such as Functions and Lambda, “serverless” means that one doesn’t have to provision a compute instance (virtual or physical hardware), or the equivalent of a software server, such as Windows Server, Apache, Tomcat, or NodeJS.  All of that is done for you on each respective Cloud(Azure / AWS).  One simply writes a function that will handle certain logic when it is called.  The drawback is that you are only able to utilize certain languages.  At the time of this writing Azure Functions supports “C#, F#, Node.js, Python, PHP, batch, bash, or any executable”, and AWS Lambda supports “Node.js, Java, C# and Python.”

The payment structure differs significantly from compute instances, to the point where you may be able to utilize the service completely for free on both AWS and Azure, where first 1,000,000 requests per month won’t cost you anything*.

 

Sample Solution(with React)

1. Create a barebones React application (if you don’t already have React installed, you can do so by following the official guide )
create-react-app serverless
2. Open the application in your favorite editor and replace the App.js file with this one
3. We won’t build the solution just yet, as we still need to create a Lambda / Functions function to serve as our endpoint.  We’ll come back to this app as we start integrating it into each respective cloud.

Continue tutorial for AWS here.

Continue tutorial for Azure here.

 

To close this article out, I need to mention that this barely scratches the surface of what serverless computing is capable of.  The scenario covered here is architecting an app without a compute instance and supporting it with Azure Functions and AWS Lambda to bring in traditional functionality.  But, serverless compute offerings are extremely powerful tools and are able to respond to triggers within the cloud ecosystem and perform tasks based on those triggers – such as database changes, changes in files stored/uploaded, act as mobile back-ends, and much-much more.

* other than storage space for your function, and unless you are delivering huge amounts of data with it

Subscribe!

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Recent Posts

  • “Serverless” SPA on Azure(Functions, Blob storage, CDN)
  • “Serverless” SPA on AWS(Lambda, API Gateway, S3, CloudFront)
  • “Serverless” Architecture in the Cloud with React SPA

Categories

  • AWS
  • Azure
  • Cloud
  • React
Theme by Colorlib Powered by WordPress