Hosting a Unity WebGL Game with Azure WebApps

Hello, fellow developers!

This is part two of a 2-part series that I did about getting Unity WebGL games up and running on Azure WebApps. Part one covered the process of getting a local IIS webserver up and running for testing out the Unity-generated WebGL build of a Unity game, and this post will cover the process of getting that game up and running on an Azure WebApp!

Kitten--, the non-VR version of KittenVR, is now "playable" online thanks to Unity's WebGL exporter

Kitten–, the non-VR version of KittenVR, is now “playable” online thanks to Unity’s WebGL exporter

This post assumes that you have:

I’ll cover two different paths for hosting this on Azure: I had already hosted a landing page for KittenVR (www.kittenvr.com) on Azure, so I only had to add in the game as a virtual application. If you haven’t already created a site on Azure, I will cover that briefly too, using the game’s index.html file as the landing page for the new site.

In part one, we went over how to get a local webserver working to test Unity WebGL games – once you’ve tested and hacked to the best of your ability to make sure your game was in tip-top shape, it’s time to make it available to the world! By default, Azure WebApps will use IIS as the basis of your server, but we have to configure an additional file a little differently since we don’t have access to the IIS Manager on our remote server.

Create a Web.Config File

The first thing that we’re going to want to do to prepare our WebGL build for the real world is add in a web.config file to our root directory of the application. The web.config file is an XML file that configures our server – and if you read part one, you can probably guess what it is we’re doing with this.

  1. Open your favorite code editor (I’ve been using Visual Studio Code and L-O-V-E love it)
  2. Create a new file and save it as web.config in the directory of your Unity WebGL game (at the same level as your index.html file)
  3. Copy and paste the following code into your web.config file and save it:
<?xml version="1.0" encoding="utf-8" ?>
   <configuration>
    <system.webServer>
     <staticContent>
        <remove fileExtension=".mem" />
        <mimeMap fileExtension=".mem" mimeType="application/octet-stream" />
        <remove fileExtension=".data"/>
        <mimeMap fileExtension=".data" mimeType="application/octet-stream" />
    </staticContent>
   </system.webServer>
 </configuration>

Remember in part one how we needed to add .mem and .data to our known MIME types? The web.config file will do the same on our remote web server. The web.config file is a really powerful tool with a lot of different functionality for customizing the IIS server, but we’re okay for now with just adding in the known file types.

With our web.config file out of the way, it’s onto the Azure part!

Create a WebApp on Azure

The first thing we want to do is create a web app on Azure. If you already have a site where you plan on hosting your game (I did this in a /play/ directory on the existing KittenVR.com site) you can skip to the next section, where I detail how to get it working in a subdirectory of your webpage.

azureportal

  1. Log into your Azure management portal
  2. On the side bar, go to New -> Web and Mobile -> Web App
  3. Enter the name of your website for the .azurewebsites.net url and click ‘Create’. You can tweak the settings if you have specific requirements, but for the time being, the defaults should be fine for setting up our app.

There are a bunch of different ways you can go about deploying your site to Azure once the web app is created in the portal, so I’m going not reinvent the wheel and instead just leave you with this light reading: Deploy a web app in Azure App Service. If you are just going to directly use your Unity WebGL index.html as the landing page for your application, following the steps for deployment should be all that you need to do – add everything in the Unity WebGL folder except the compressed directory. .

Setting up the game on an existing app

If you already have a web app on Azure that you plan on adding to, you’ll need to create a directory for the application that is linked by your current site.

  1. Make a new directory in your existing site to house your Unity game. I called my folder ‘play’
  2. Add in all of the files (exception: you don’t need to include the Compressed folder)  from your generated Unity game to the ‘play’ directory and place your web.config file in the root of your existing site
  3. Publish this content to your Azure deployment.

You can now access your content through www.yoursitename.com/play (or whatever you named your directory) and your game should be good to go! If you run into any issues following these instructions, please drop me a comment or yell at me on Twitter so I can fix them!

*Interested in how you can get Azure for free? Ask me about Imagine & BizSpark! 

Related Posts

One thought on “Hosting a Unity WebGL Game with Azure WebApps

Leave a Reply

Your email address will not be published.