How to host a WebGL Unity build on Vercel
If you want to create a game to run on the web, you can create one in Unity and then build using the WebGL option. You should configure the builds to be compressed, so the large files can be downloaded quickly by your players in their browsers. Vercel staff recommended to me to use brotli compression as it's better supported. You can pick up the Vercel HTML Starter template. Remove the middleware.js. Add a .gitattirbutes in the root with the following:
*.data.br filter=lfs diff=lfs merge=lfs -text
*.wasm.br filter=lfs diff=lfs merge=lfs -text
Copy in the files Unity built for you, and index.html, some scripts, a directory called Build, and a directory called TemplateData. Rename your Build directory (eg. to Build1), and the index.html (eg. to build1.html). In the build1.html find the buildUrl and change it to the name of your directory, "Build1". This simple adjustment means you can add multiple pages for multiple builds for different games or versions. Make sure you remember to turn on git LFS in Vercel! At the root level, add a vercel.json file with the following:
{
"headers": [
{
"source": "/(.*)\\.br",
"headers": [
{
"key": "Content-Encoding",
"value": "br"
}
]
},
{
"source": "/(.*)\\.wasm\\.br",
"headers": [
{
"key": "Content-Type",
"value": "application/wasm"
}
]
}
]
}
This sets the headers as described in the unity docs. Push this lot, and you should be done. Navigate to the link Vercel gives you, and add /build1.html to the path to get to your page.