Deploying frontends to Azure
Nowadays, deploying frontends built with the most used frameworks (React, Angular) to AWS is quite an easy task due to the special features available in such a platform. It’s a matter of enabling static page hosting on a S3 bucket and…voilà, you are ready to go.
In less mature platforms such as Azure, this apparently easy task can get really tricky. Despite offering an easy way of deploying fronts (Using an Azure App), it ends up costing at least U$D 50 a month, way over the regular frontend hosting budget.
When needing to deploy an Angular project to Azure due to client requirements, we were forced to start looking for an AWS-like way of deploying our frontend to the Azure cloud platform. The answer was to use Blob Storage Containers, they are similar to S3 buckets and despite not having a Static Site Hosting option, there’s an easy way of using them for that.
Creating the Container
- From the main portal, go to
Create a Resource
, then chooseStorage
and finallyStorage Account
. The storage kind should beBlob Storage
. - In order to upload a website, you need to create a container. You can do so from the
Containers
section, remember to selectContainer
inPublic Access level
so the content can be publicly accessed.
Uploading your site to the container
There are two main tools to upload your files: Azure Storage Explorer or AzCopy.
Azcopy allows you to sync your project’s build folder by running:
azcopy — recursive — source <build folder> — destination <blob url>/<container name> — dest-key <access key> — set-content-type text/html
Since Azure doesn’t automatically detect the appropriate Content-Type
for each file, you will need to upload each file manually setting it’s correct Content-Type
.
In order to speed up this process, you can use the following script which uploads all the files setting the correct Content-Type for the most commonly used files:
export BUILD_FOLDER= <build folder>
export CONTAINER_URL= <blob url>/<container name>
export ACCESS_KEY= <access key>
azcopy — recursive — source $BUILD_FOLDER — destination $CONTAINER_URL — dest-key $ACCESS_KEY — quiet
azcopy — recursive — source $BUILD_FOLDER — destination $CONTAINER_URL — dest-key $ACCESS_KEY — set-content-type text/html — include “*.html” — quiet
azcopy — recursive — source $BUILD_FOLDER — destination $CONTAINER_URL — dest-key $ACCESS_KEY — set-content-type image/svg+xml — include “*.svg” — quiet
azcopy — recursive — source $BUILD_FOLDER — destination $CONTAINER_URL — dest-key $ACCESS_KEY — set-content-type image/jpeg — include “*.jpg” — quiet
azcopy — recursive — source $BUILD_FOLDER — destination $CONTAINER_URL — dest-key $ACCESS_KEY — set-content-type image/jpeg — include “*.jpeg” — quiet
azcopy — recursive — source $BUILD_FOLDER — destination $CONTAINER_URL — dest-key $ACCESS_KEY — set-content-type image/png — include “*.png” — quiet
azcopy — recursive — source $BUILD_FOLDER — destination $CONTAINER_URL — dest-key $ACCESS_KEY — set-content-type application/javascript — include “*.js*” — quiet
azcopy — recursive — source $BUILD_FOLDER — destination $CONTAINER_URL — dest-key $ACCESS_KEY — set-content-type text/css — include “*.css” — quiet
azcopy — recursive — source $BUILD_FOLDER — destination $CONTAINER_URL — dest-key $ACCESS_KEY — set-content-type image/x-icon — include “*.ico” — quiet
The access key can be obtained from Storage Accounts
-> Access keys
Making your site accessible
This is the most important part of the process, since Azure doesn’t have a hosting option, we have to use a Function App to route it.
To create it go to Create a Resource
-> Compute
-> Function App
, give it a name and leave the rest as default.
Then go to proxies, choose +
, give it a name and set/
as Route Template
.
After that, go to Proxies
, Advanced Editor
and edit the proxies.json
file, changing its content for on the following gist.
https://gist.github.com/juanisierra/2660d1f4a80ba0593e598cab8e8f60fd
Replacing <blob url>/<container name>
with your blob URL and container name.
This configuration works for React front-ends containing a static folder. For any other application, you will need to add a proxy object for each static assets folder present.
After that, you are ready to go!
Azure is expected to provide a specific function to allow this behavior without having to manually configure the routing but so far this is the easiest way of doing so.