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

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.