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.

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on Google+ (Opens in new window)

Related

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

@m52studios

Related articles

“Serverless” SPA on AWS(Lambda, API…
“Serverless” Architecture in the Cloud…

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

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