Careers   |   Events   |   Contact   |   402.238.1399   |   contactus@deliveron.com

Deliveron
Connect with us on FacebookConnect with us on LinkedInFollow Us on Twitter

Category List


Tag List

ssl (1)
M Query (1)
angular 2 (3)
Node.js (1)
razor (4)
webparts (2)
alerts (2)
gulp (2)
cascading-dropdown (2)
xunit (1)
PBI (1)
sharepoint (5)
dbpro (2)
burndown (2)
web application firewall (1)
Visual Studio Online (6)
continuous inegration (2)
AzureAD Admins (1)
Office 365 (1)
single page applicaiton (1)
lunch and learn (2)
tokenization (1)
power tools (2)
silverlight (2)
microsoft test manager (2)
team deploy (2)
TestArchitect (5)
lab environments (1)
Meetings (1)
serverless (3)
scrum (8)
agile (12)
vsts (22)
Power BI (3)
pipeline (1)
team web access (2)
subsites (2)
vsdbcmd (2)
insiders (1)
code-first (4)
tfs 2012 (4)
angular (1)
lync (2)
alm rangers (1)
mstestv2 (1)
tips (2)
sql server 2008 (2)
tfs 2013 (2)
team build (2)
visual studio code (1)
spc14 (4)
json (2)
site collections (2)
requirements (2)
performancepoint services (2)
release management (7)
sql server (2)
fluentvalidation (2)
Quality (2)
coded ui tests (6)
DevOps (14)
preview (1)
test automation (1)
windows 8 store app (2)
licensing (2)
Build (6)
nebraska code camp (2)
zap (1)
ssas (2)
MFA (1)
powershell 2.0 (8)
security (1)
testing (5)
sql saturday (2)
bi (2)
mvvm (2)
asp.net-mvc-3 (4)
load testing (2)
asp.net-mvc-4 (2)
Data Analytics (1)
javascript (3)
webpack (1)
installation (2)
home projects (1)
storyboarding (2)
user profiles (4)
xaml (2)
sharepoint 2007 (2)
sp1 (2)
continuous integration (2)
tfs 2017 (1)
team foundation 2012 (2)
bdd (2)
reporting (2)
jquery (4)
exchange (2)
CI (3)
opensource (1)
business intelligence (2)
web (1)
outlook (2)
database projects (4)
test agent (2)
fields (2)
database publishing wizard (2)
Powershell (1)
service-fabric (1)
team foundation server 11 beta (2)
HOLs (1)
msi (2)
2013 (2)
Template (1)
deliveron alm delivery guidance (2)
Multi-Factor Authentication (1)
microsoft alm rangers (2)
windows azure (2)
Infrastructure (1)
tfs odata (2)
dependency-injection (2)
deliveron agile delivery process (2)
nunit (1)
ssrs (4)
planning poker (4)
event-handling (2)
Document (1)
asp.net-mvc-routing (2)
my work (2)
Mike Douglas (4)
Java (1)
feedback (2)
Decisions (2)
Functions (2)
test controller (2)
ninject (2)
adfs (3)
certificates (2)
tfs 2010 (2)
Visual Studio 2017 (4)
OAuth2 (1)
automatedui (1)
visual studio 2012 (10)
pdf (2)
Nuget (1)
necc (2)
test cases (2)
data warehousing (2)
application insights (2)
Azure Functions (1)
performance (3)
tfs (11)
visual studio 11 beta (2)
action-filters (2)
alm (9)
connect() (1)
table-valued-parameters (4)
Automated Testing (10)
nintex (4)
onenote (4)
webs (2)
artifacts (1)
Collaboration (2)
selinium (1)
sharepoint 2013 (6)
whitesource (1)
MVP (2)
TFS 2015 (6)
Cosmos DB (1)
selenium (4)
Web API (1)
web performance tests (2)
IntelliSense (1)
netstandard (2)
workflow (2)
github (1)
rest assured (1)
web deploy (1)
entity-framework (6)
swagger (1)
lab management 2010 (2)
microsoft case study (2)
ARM Template (1)
business insight (2)
azure mobile services (2)
pipelines (1)
webcast (4)
c# (13)
Analytics (2)
asp.net-mvc (6)
wit (2)
Azure (14)
whitelist (1)
owasp (3)
visual studio team services (1)
visual studio 2010 (18)
Big Data (2)
AAD (2)
tls 1.2 (1)
team foundation server (6)
react (1)
dns (2)
AzureAD (1)
top 5 (1)
Keith Holt (1)
load tests (2)
azure resource manager (1)
wiki (1)
Business (2)
kanban (1)
association (1)
DevSecOps (2)
deployment (2)
API Tests (1)
video (2)
MSBuild (1)
tags (2)
visual studio (8)
example (2)
faq (2)
team foundation server 2012 (4)
bundling (2)
sharepoint 2010 (10)
REST (1)
gherkin (2)
work item (2)

Archive

Serverless Websites in Azure with new Storage Account Static Websites

Jul 13, 2018

With Serverless computing you are only charged for services when you are using them unlike PAAS and IAAS where the cost is a flat monthly amount for the reserved compute power.  This can provide a significant cost savings for many scenarios.    Up until recently, serverless services in Azure were only available for Azure Functions and Logic Apps which are essentially for back end services.  Typically when provisioning the Azure infrastructure for the application, we deploy the web app to an Azure App Service Web App that is PAAS.  This provides a number of advantages over IAAS but still requires reserved compute power while it is running.  

 

Single Page Applications (SPA) have grown in popularity due to the rich desktop like experience they can offer.  These applications are simply downloaded to the client and completely run within the local web browser.  Essentially the Azure App Service web app resource is used to download the application but nothing is run server side and simply is used like a blob storage container.  Workarounds have been used over the years to try to use a blob storage container to host these but lacked a couple key features to truly provide this functionality.

Microsoft just recently announced the public preview of the Static websites feature in Storage accounts. This provides the ability to host static web applications in storage accounts that now offers serverless capabilities to host these SPA applications without requiring a full server side resource hosted. This provides us the option to choose serverless for the front end and back end.

storageaccount_staticwebsite_hosting.jpg

 

Static websites include a number of key features that are important for hosting your SPA application

  • HTTPS
  • Custom Domains
  • VNET support
  • Default page setting
  • Can be combined with Azure Function proxy to take advantage of additional hosting features (see below)

There are some limitations of this feature that require specific configuration and hopefully additional capabilities will become available as it gets closer to GA.

  • Requires GPv2 standard storage accounts
  • Only one static web site per storage account
  • The VSTS Azure File Copy task doesn't support the static web sites yet.  This will be available soon. (see below)

Getting Started

To use static websites, create a Storage Account using Storage V2 (general purpose v2)

create_storage_account_gpv2.jpg

 

Next enable the static website feature and configure the static website container and type in the default page (usually index.html). Notice the primary endpoint is your public URL.

static_website_configuration.jpg

 

Upload the static "dist" output files from your favorite SPA framework like Angular or React through the portal or using the Azure Storage Explorer.

static_website_container_contents.jpg

 

Deploying through VSTS

As I mentioned above, the Azure File Copy task doesn't yet support the $web container.  The change has been made and will be deployed out to the accounts over the next couple weeks.  I'll update this as soon as it is available.

UPDATE - 8/15/2018 - Azure File Copy task has been updated and the example below works in VSTS.

vsts_azure_file_copy.jpg

 

Function Proxies

By default the static website has different fully qualified domain name than the backend azure functions. By using a custom domain, the two can share the domain name but have different subdomain like
https://app.myapp.com and https://api.myapp.com
However, they can't have the exact same domain.

In my example, the web app is
https://ng6users.azurewebsites.net/

And the API is
https://ng6users.azurewebsites.net/api/users

With Azure Functions Proxies, the proxy can route the traffic to the two different backend URLs.  Both entries required or the "web" route would get all of the traffic.

{
  "$schema": "http://json.schemastore.org/proxies",
  "proxies": {
     "api": {
        "matchCondition": {
            "route": "/api/{*all}"
        },
       "backendUri": "https://ng6users.azurewebsites.net/api/{all}"
    },
    "web": {
        "matchCondition": {
            "route": "/{*all}"
        },
       "backendUri": "https://ng6users.z19.web.core.windows.net/{all}"
     }
  }
}

The Azure Function can provide more functionality that just routing to the storage account. Many of the features available in Azure Function Apps can be leveraged for the static website through the proxy.  Azure Functions features like IP Restrictions and EZ Auth are now supported, all serverless.

azure_functions_proxy_ez_auth.jpg

 

So if you are using serverless Azure Functions already with your SPA applications, this is a great addition and should provide significant cost savings for hosting your static websites.  I'll continue to update this post as the feature advances during the preview.  If you have any questions or comments, reach out on twitter at @mikedouglasdev.



Category: Azure

Mike Douglas

user_avatar

He is a solution consultant focused on helping organization build high quality application effectively utilizing DevOps practices. He is a Microsoft DevOps / ALM Ranger and you can reach him on Twitter at @mikedouglasdev


We believe in helping our customers create software solutions in a better way.
We do this by having a project delivery process and technology expertise that ensures we are solving the right problem in the right way and driving the most business value.