Skip to content
M52 Studios
  • Contact
Site Search

“Serverless” SPA on Azure(Functions, Blob storage, CDN)

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

Let’s setup an end-to-end Serverless SPA on Azure.

This is a continuation.  For the first post 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
  3. In order to upload static files to an Azure Blob Container, I recommend using Microsoft Azure Storage Explorer
  4. On Azure Portal, the expanded “tabs” are called blades(e.g. in the image below we see two: Marketplace & Compute)

We’ll utilize 3 Azure services to complete our “serverless” demo:

  1. Function App – for serverless computing
  2. Blob Storage – for storing static files
  3. CDN – we’ll use a CDN(Content Delivery Network) not only to distribute files closer to clients, but, more importantly, to give us control over what file we’ll target as the origin for our app(index.html) by applying a url rewrite.  We’ll follow instructions based on this wonderful write-up by Hao

High Level Tasks

  1. Create a Function App(source)
  2. Get the API Endpoint and drop it into React’s App.js, then build the app.
  3. Upload the static files into an Azure Blob
  4. Create a CDN and pre-load our files
    1. Create the re-write rules to target index.html
  5. Add the CDN domains into Function’s CORS settings to allow communication

Step by Step instructions

  • Log into portal.azure.com
1. Create a Function App
  1. From the Dashboard, click on the green + New near the top left corner
    1. In the blade that opens, click on Compute
    2. In the Compute blade scroll down until you find Function App

    3. alternatively, you can use the search box in the Marketplace blade to search for Function App
  2. Enter a meaningful App Name, but keep in mind that this will not be public facing
  3. Create a new Resource Group.
  4. For the purposes of this tutorial, we’ll keep the Hosting Plan as Consumption.
  5. Choose a Location that’s closest to you(or your clients)
  6. Create a Storage account
  7. Click Create at the bottom of the blade
  8. Once the Function App has been created, we’ll move on to creating the function that will serve as our API
  9. In the Function App blade, click Functions
  10. Then, under Get started on your own, click Custom Function
  11. For the template, select HttpTrigger – JavaScript.
  12. If you wish, Name your function – this will serve as the method for the http endpoint
  13. Leave Authorization Level as Function.  This will require a key to be attached to the API call to retrieve our JSON payload – a key that you can securely store within the Azure environment and retrieve at runtime.
  14. Click Create
  15. Once index.js(function file on Azure) has loaded, replace the code with this
  16. Save and Test the code
  17. Copy the URL for the function by clicking on the </> Get function URL to the right and above the code pane
2. Drop API Endpoint into React app
  1. Open the app code in your favorite editor, and replace ‘INSERT YOUR API ENDPOINT URL’ with the API URL that we’ve copied in the last section on line 23
  2. In the root of your application run “yarn build”.  This will minimize and bundle the code, and get it ready for production.  You can find the stand-alone application in the newly created /build folder.
3. Upload static files to Azure Blob
  1. Locate the storage account that we’ve created when creating the Function App by going to the Dashboard->All resources and click it to open up the storage blade.
  2. Click on Blobs
  3. At the top left of the blade, click on +Container
  4. Name it web, and set the Access type to Container.  Click OK
  5. Close the Blob Service blade by clicking the X, at the top right corner, or by pressing the Esc key
  6. Click on your Storage account again, from All resources tab, and click Open in Explorer(download) button
  7. Once the Storage Explorer has opened, expand your your Azure Storage until you see web
  8. Drag the contents of your app’s /build directory into the Storage Explorer pane
  9. The files within the blob should now be accessible via a URL
    1. The convention is https://<blobName>.blob.core.windows.net/<container>/<file>
    2. In the case of the recorded demo: https://m52serverless.blob.core.windows.net/web/index.html – however this will be offline as soon as the demo has been recorded
  10. If you try to access your index.html file, you will get a blank page.  That is because your assets are not being pulled directly, due to there being /web/ in the URL.  We’ll fix issue with the CDN in the next steps.
4. Create a CDN
  1. In Azure Portal click on the + New icon in the left-most menu
  2. In the Search the Marketplace input field type CDN
  3. Click on the first CDN option in the dropdown
  4. In the CDN blade, click the blue Create button at the bottom
  5. Fill in the Name
  6. Under Resource Group, select Use existing.  In the dropdown, select the resource group that was created along with the Function App, in Task 1
  7. For the Pricing Tier, make sure to select Verizon Premium, as it is currently the only plan that let’s us rewrite the rules to target the index.html file as our starting point for the application, as per Hao’s post
  8. Click Create
  9. Once the CDN is created and its’ blade open up, click + Endpoint

  10. Fill in the Name.  This will be public facing – <name>.azureedge.net
  11. Under Origin Type, pick Storage
  12. Under Origin Hostname, pick the Storage Account under which you’ve created the /web Container
  13. For the Origin Path, enter /web
  14. Click Add
  15. It will take a while for the files from the blob to propagate through the CDN.  In the meantime, let’s create our rewrite rules
  16. At the top of the CDN blade, click Manage

  17. For this step, I’m going to, once again, refer you to Hao’s post, Steps 5 & 6
  18. After the rules are added, it may take up to 4 hours for them to take effect
  19. Once the rewrite rules and the content has propagated through the CDN, you should be able to go to your <cdn-endpoint>.azureedge.net URL and hopefully see something like this:
  20. The static files are up, but there is no communication with our Function due to CORS restrictions.  Let’s fix that!
5. Add the CDN URL to Function CORS domains
  1. From the Portal’s left-most menu click on Dashboard
  2. Find your Function App and click it
  3. In the Function Apps blade, click the Platform features tab(the blade opens up on Overview)

  4. Under API, find and click on CORS, then enter your CDN Endpoint URL(https://<endpoint>.azureedge.net) into an empty input field
  5. Click Save at the top of the CORS blade
  6. Point your browser to the CDN Endpoint
  7. And, Voila!

 

Congrats on your first completely “serverless” deployment on Azure!
Comments and discussions are very welcome!

PS. Don’t forget to delete the resources in order for you 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