Freigeben über

Publish a static web site using Azure Web Apps

  • Artikel

On the OzDotNet mailing list today, someone asked how to configure a static web site to be served from Azure Blob Storage, to which I replied "why wouldn't you use a web app for that?"

Here are the steps for publishing some web static web content using Visual Studio 2015 (I'm using Enterprise edition, but this will work just the same way using the Free Community edition of VS2015)

Note, you do need an Azure subscription to do this as well. If you're not an MSDN subscriber, you can sign up for a free trial of Azure. If you are an MSDN subscriber, you should activate your subscription benefits to get access to Azure.

Assuming you have a folder with your static web site (mine's pretty minimal):

image

If you're wondering what's in those files, they look like this:

 <html>
    <head>
        <title>Main Static Page</title>
    </head>
    <body>
        <h1>Main static page</h1>
        <p>Some lorem ipsum text</p>
        <hr/>
        <p><a href="otherpage.html">Other page</a></p>
    </body>
</html>

Start Visual Studio and choose File | Open | Web Site…

image

Choose File System and select the folder your web site is in

image

Click Open

Your site should now appear in Solution Explorer

image

Save the Solution that's been created (File | Save Solution)

Right-click on the web site (not the solution) in Solution Explorer and choose Publish Web App

image

Choose Microsoft Azure App Service and then click Publish

image

 

In the App Service dialog, sign in if necessary, choose which account you're using, choose a subscription and then eithe choose an existing web app (if you want to overwrite it) or click the New button

image

In the Create App Service dialog, choose a resource group and then click New to creat a new App Service Plan

image

Choose a location and a size for your App Service and click Ok

image

Back in the Creat App Service dialog, click Create

The dialog will churn for a while and then you'll get the Publish Web Site dialog

image

Click Publish and all should be well.

HOWEVER, occasionally, you might get the following in the output window:

 ------ Build started: Project: TestStaticWebSite, Configuration: Debug Any CPU ------
------ Publish started: Project: TestStaticWebSite, Configuration: Debug Any CPU ------
Can't find existing loaded project:C:\junk\TestStaticWebSite\

========== Build: 1 succeeded or up-to-date, 0 failed, 0 skipped ==========
========== Publish: 0 succeeded, 1 failed, 0 skipped ==========

If you do get this, the easiest thing to do is to open the Web Publish Activity window (View | Other Windows | Web Publish Activity)

image

and click the Publish Web button:

image

Now you should get something more like this in the output window:

 Start Web Deploy Publish the Application/package to https://teststaticwebsite20160128054009.scm.azurewebsites.net/msdeploy.axd?site=TestStaticWebSite20160128054009 ...
Adding ACL's for path (TestStaticWebSite20160128054009)
Adding ACL's for path (TestStaticWebSite20160128054009)
Adding file (TestStaticWebSite20160128054009\index.html).
Adding file (TestStaticWebSite20160128054009\otherpage.html).
Adding ACL's for path (TestStaticWebSite20160128054009)
Adding ACL's for path (TestStaticWebSite20160128054009)
Publish Succeeded.
Web App was published successfully https://teststaticwebsite20160128054009.azurewebsites.net/
========== Build: 1 succeeded or up-to-date, 0 failed, 0 skipped ==========
========== Publish: 1 succeeded, 0 failed, 0 skipped ==========

Which is exactly what you're after (the contents of this will vary, depending on the content of your site of course).

You should also get your site opened in the browser:

image

Grouse!

Comments

  • Anonymous
    August 06, 2016
    The obvious reason you might serve your site from Blob storage rather than a web app is cost. A web app that is 250MB served from blob storage in East US will cost $0.024 per month. The same 250MB site served from a web app will cost a minimum of $9.67 per month (Shared) unless you're able to use the Free model.If your site has a lot of pictures or downloads, but no actual "code" - i.e. it's just static HTML and assets - serving it from blob storage is an incredibly cost-effective model.