One of the most difficult things to accomplish when creating new projects is making the project accessible. Typically, if you are creating a mobile application or even a web application, there is significant work to get that application deployed.
In this tutorial we’ll walk through how to get a basic Unity 2D project deployed to the web so that you can start collecting feedback.
Before we start, let’s set the bar. In no way do I claim to be a Unity or AWS expert. There are most likely pieces of this tutorial that are not complete. If you find an error or notice somewhere that something is incorrect, please let me know so that I can update it for everyone else!
Now let’s get nerdy!
So, first things first. If you haven’t already, create a Unity 2D project in Unity. If you’re not familiar with Unity, take some time to get up-to-speed at https://unity.com/. Once you feel a little more comfortable and are able to create a simple 2D project, head back over here.
Within Unity, head up to the Menu bar and let’s create a build. Select ‘File > Build Settings’ and under ‘Platform’ select ‘WebGL‘. If the option isn’t available you may need to open up Unity Hub and download the required assets for WebGL.
Before you build your project as WebGL, be sure to check ‘Development Build’ and that you have your Scene selected to be included in the build. Then go ahead and click the ‘Build’ button and select where you want the application to be built.
I don’t know that we need the ‘Development Build’ option checked every time but when I first attempted this process I found I wasn’t able to get the application working. After some research, I found there was a bug and/or workflow issue in Unity and creating at least one development build was required.
Now that your build is completed, the Unity side of things is done. You can test your build just to be sure everything is working by clicking on the ‘Build and Run’ button in the build settings window. I’d recommend making sure everything is kosher before going on.
Now let’s head over to AWS. If you don’t already have an AWS account setup, go ahead and take the time to do that at: https://aws.amazon.com/console/. Once you are setup, go ahead and log in to the AWS Console.
What we’re going to do is deploy our Unity project to an S3 Bucket (which is just an online folder) and host it as a static website.
Within the AWS Console, either search under Services for ‘S3‘ or find it in the list.
Once you’re in S3 you’ll want to select the orange, ‘Create Bucket‘ button on the far-right. Go ahead and give your bucket a name and then scroll down to ‘Bucket settings for Block Public Access’. Uncheck each of these options and then scroll to the bottom of the screen and select ‘Create Bucket’
You should be returned to the main screen and now see your bucket. Go ahead and select it. You should see a new button on the far-right to ‘Upload‘ with. Go ahead and select that button and upload your Unity project. When you upload, select ‘Add Files’ to add the ‘Index.html’ file and then select ‘Add Folder’ for each of the ‘Build’ and ‘Template Data’ folders. Once all items are added go ahead and upload them.
Back within our bucket, select ‘Properties‘ and scroll to the bottom of the screen under, ‘Static website hosting‘
Select the ‘Edit‘ button off to the right and match your settings like this:
Save those changes and head back to your bucket. Now select ‘Permissions‘ just next to the ‘Properties’ tab. Under permissions find the ‘Bucket Policy’ and select ‘Edit’. Paste in the following policy and replace the ‘Resource‘ with the name of your bucket. There are two spots to do this and I’ve named them, “YourBucketName’ below:
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E1L55VHCJEWRMZ"
Now we are incredibly close to being done. Back in AWS, under Services, let’s now search for ‘CloudFront‘ and select it. On the CloudFront menu we’ll select ‘Create Distribution’ and then we’ll select the ‘Get Started’ button under the ‘Web’ option.
There’s not too much we need to change here. The very first setting ‘Origin Domain Name‘ you can click on and a drop down will appear for you to select your bucket. No other option needs changed and you can scroll on down to the bottom and select ‘Create Distribution’ to complete the setup.
Once the distribution is created, go ahead and select it to open it up and we’re going to make one final change before wrapping things up.
Under the ‘Error Pages‘ tab go ahead and select to ‘Create Custom Error Response’. On the new screen, select ‘Http Error Code’ as ‘403’ and under the ‘Customize Error Response’ option select ‘Yes’. When the new options appear, set ‘Response Page Path’ to ‘/Index.html’ and the ‘Http Response Code’ to ‘200: OK’ and save your changes. It should look like this:
Now, head back over to your S3 bucket and open it up. Inside your bucket select the ‘Index.html‘ file and on the ‘Object Overview‘ panel click on the ‘Object URL‘ link.
This should fire up your new static website, which will then kickoff the Unity application! Check out my example: https://lks-survive.s3.amazonaws.com/index.html
I hope this tutorial was able to help you get something roughly uploaded and hosted online. Remember that with AWS S3 there are some costs incurred to host your application online. My total costs are under $10 a month. If you have any feedback or suggestions to improve this tutorial please let me know!
For more Unity and AWS tips keep up with me by subscribing: