So, you got this new idea for an incredible web app that is going to be a global success and are going to start to develop and assemble your team.
Of course, you want to present your company asap and get people to sign up for your app and be prepared to expand globally — however, you don’t have any investors yet and there’s definitely no budget at all for hosting servers at massive scale.
Don’t worry. I’m going to show you how to start this off at very little cost using serverless technology.
Serverless gives you the possibility to focus on what’s most important — your app and business logic, not server infrastructure. What is even better, you pay only for what you use and can scale automatically.
We’re going to start with the very basics of how to buy a domain and set up a static site that is robust but can also handle the expected peek of millions of visitors. In later parts we will step it up and seamlessly expand from the static site to an API backed web app (and/or mobile backend). In this first part I’m going to assume that you have very little experience and give you details that some may find superfluous.
To get things going with a static site you could of course buy a cheap VPS or buy space to host your static content somewhere — however, should that success ever happen your server will likely go down or be painfully slow when the visitors arrive.
By doing it serverless, you’ll get very low cost when there is low activity and you only start seeing higher costs after millions of hits / month.
The two main players on the serverless area are Microsoft Azure (https://azure.microsoft.com/) with its Azure functions and AWS (https://aws.amazon.com/) with its Lambda. I will not discuss which one is the best choice, I have tried both and chosen Azure for my business. The main two reasons for my selection are that I find the Azure portal much easier to navigate and that I’ve had very inconsistent response times for my Lambda apps whereas Azure was more predictable. I also like the cost projections on Azure and find it much easier to get a complete picture of your global cloud resources than the region-centric AWS.
Let’s get technical and build a cheap static serverless site to start things off!
Start with registering an account at Microsoft Azure. You are going to need a personal e-mail address, a phone number, and a credit card for this. Go to https://azure.microsoft.com/en-gb/free/ and press the Start for free button. If you don’t already have a Microsoft account, create one.
The process of signing up is pretty straightforward but remember that you WILL have to enter a credit card even though you are starting a free account.
If you are not familiar with the Azure portal, go ahead and take the suggested tour after your registration.
If you like, go ahead and take the suggested tour and look around. I’m not going to discuss in detail how to navigate the Azure portal but you find your existing resources (none right now) on the left menu option “All resources” and you can create new ones either from that page (+ Add) or from the left menus “+ Create a resource”.
First of all, you need a domain name. I have never ever started a new business without considering the app and domain name and we are not going to pretend that https://globalserverless.azurewebsites.net/ is a great URL to present your company.
You COULD buy your new domain inside Azure but that is not possible on the free account and is probably not as flexible as buying it externally. I’m opting for namecheap since we want to keep the costs down.
Here’s a short guide of how to get a domain with ssl and email up with namecheap:
Next up, we’re going to make the very first static serverless page for our site.
For this, we are going to use two main Azure resources, a proxy and a blob storage.
The proxy will help us to send the requests to the right place and will be the front layer for our domain and the blob storage will be our place to put our static files. If we like, we can later on transfer all traffic through our proxy later on but for now, we will start with a landing page.
First up, create a proxy.
Click + Create a resource
Search for Function App. Create.
Name it accordingly (this will also be part of your temporary URL)
Switch OS to Windows.
Select Consumption Plan. This is essential for it to be truly serverless. If you select an App Service Plan you will pay for a certain level of service even though you are not using it.
Select your location. If you don’t know which region to choose, select the one with lowest latency for you by testing at http://www.azurespeed.com/
For Storage, select Create new as suggested (mandatory for saving definitions etc).
Turn Application Insights Off for now (since this is not free).
While we are waiting for the Function App to be created let’s set up the storage for your files.
+ Create resource
Search for Storage account — blob, file, table, queue -> Create
Select a name for your static file storage, this will be exposed behind the scenes on your site, so let’s make it descriptive.
Deployment model: Resource manager.
Account kind: StorageV2
Same location as before.
I suggest choosing Read-access geo-redundant storage (RA-GRS) for replication. This mirrors the data in another region at low cost.
Stick with standard performance but select the Hot access tier.
Once created, go to the new resource and select Blobs from Services
Blobs reside in Containers so create one: + Container
Let’s name it ‘web’ and change the access level to Blob. Create it.
The reason for selecting access level Blob is that we want anonymous read access since we are hosting public web content here. This, of course, grants no further permission to edit or upload.
Now we have a container for our static content so let’s add an index.html
On your computer, create a new file called index.html and put some useful content in it, like:
<p>Great things to come…</p>
Return to your blob container and upload the file.
Let’s try it in action. Select the uploaded file.
From overview copy the URL field displayed and paste that URL in the address field of a new browser; and Voila! Your very first page.
That address is however not what we wanted, we of course want to use our own domain for this.
Go back to the Function App you created earlier.
In the left pane for the Function App you will see tree views for Functions and Proxies (and Slots). Press the plus after proxies and add a new one called index.
The index proxy should have a Route template of / and a Backed URL that points to your static index.html file in the storage container. This route will take all traffic to our domain and serve our index file.
Once created you should now be able to see the same index file in a browser by going to the given proxy URL https://globalserverless.azurewebsites.net/
If we want to serve more files via the proxy you can add a new route with a variable. Let’s say you want images, create a folder called img in storage and add your files to it and then make a new route like this:
With this traffic to /img/ will route any filename to to storage folder and you can serve images like: https://globalserverless.azurewebsites.net/img/background.png
However — why would you want to serve images and static files via the proxy if not necessary? I recommend putting the storage path directly in your html and later on serve it through a CDN instead to speed up traffic and save money. After all — even though it is cheap, every static file served through proxy will cost extra so keep it tight.
Finally let’s point our domain to this function app.
Select the pane ‘Platform features’ in your function app and press Custom domains. In the Custom domains window opened, select + Add hostname and enter yourdomain. Press Validate.
In the information displayed you will be given information on what to add to the DNS Zone.
You should start with adding the a-record information even though you are given a warning.
Open a new window and select your Azure DNS Zone.
Since we already have a record for @ txt select that and add an extra value.
If you like you can add the CNAME record but its probably not needed since you made a proper A-record instead. Press Add hostname in the CNAME pane.
After you have pressed add this window probably will not close by itself (never does for me) so you will have to click the X and behind it you can now see the hostnames assigned to site.
I also like to make an extra cname pointer for www in DNS and add that hostname as well.
Now you can finally browse to globalserverless.com and see your page!
If you are using a modern browser, you will probably also get a subtle warning that says ‘Not secure’ or something like that next to your URL when browsing. Even though we don’t need it yet we are going to expand to a serious business that is API backed so let’s add that SSL certificate straight away.
Go to namecheap and select Product list. Click Activate on your SSL cert.
On this page, you can find a link to ways to Obtain a CSR.
I’ve opted for one I found earlier;
Open the utility, select SSL and then Create CSR
Enter the domain (we have no wildcard now so go for the root globalserverless.com) and add required information.
Upon creation you will get a CSR text that you can save/copy and bring to namecheap and paste in the field. Click Next and then choose Any other service on next page. Click next.
Select Email as method to confirm and choose anyone (you have a catch-all).
The same applies to the next step, send the cert to any address.
Go check your email and follow the process for verification as instructed.
After validation you will shortly get a new massage with your certificate.
Save this (or create a .crt file with the text supplied at bottom) and import this in the tool.
Enter the friendly name globalserverless.com
Select your newly imported certificate and click Export certificate.
Export as pfx including the private key. You should add a password
Go to your function app in Azure portal and select Platform features -> SSL
Scroll down to Upload certificate and Upload it as .pfx using the password you added.
Scroll up to add binding.
Click add binding and select hostname, your uploaded certificate and press add binding.
Do this for both top and www host.
When this is done you should also select HTTPS Only On in SSL Configuration pane.
Now you have your future proof static serverless site that is secure and is ready to serve millions of views.
Later on we are going to explore how to build and structure a serverless api
See you later!