Unity CI/CD Demystified: Part 4: Deploying WebGL Builds to GitHub Pages

Published on

Last Updated on

Estimated Reading Time: 3 min

unity tutorial devops

Welcome back to our Unity CI/CD journey!

Recapping our previous chapters:

Now, we're all set for Part 4, where we take full advantage of our reusable workflow to deploy a WebGL build to GitHub Pages.

Our journey begins by updating our .github/workflows/main.yml file.

Job 1: Building for WebGL

This job uses our reusable workflow to generate the files needed for hosting the game on a web server.

buildForWebGL:
  name: Build for WebGL
  needs: test
  if: github.ref == 'refs/heads/main' || github.event.action == 'published' || (contains(github.event.inputs.release_platform, 'release') && contains(github.event.inputs.release_platform, 'WebGL'))
  uses: ./.github/workflows/buildWithLinux.yml
  with:
    platform: WebGL
    secrets:
      UNITY_EMAIL: ${{ secrets.UNITY_EMAIL }}
      UNITY_PASSWORD: ${{ secrets.UNITY_PASSWORD }}
      UNITY_LICENSE: ${{ secrets.UNITY_LICENSE }}
  • needs: This step relies on the successful completion of the test job, introduced back in Part 2.
  • if: Defines the conditions for this job to run. It kicks into action when:
    • We're either pushing changes to the main branch or creating a pull request against it.
    • Initiate a GitHub release.
    • We manually trigger the workflow with the 'release' and 'WebGL' parameters in the release_platform field.
  • uses: We're calling the reusable workflow from Part 3.
    • with: We're providing the necessary parameters, setting the platform to WebGL.

Job 2: Deploying to GitHub Pages

This job copies the WebGL artifact to the correct location for GitHub Pages. Once copied, it triggers a GitHub Pages deployment.

buildForWebGL:
  name: Build for WebGL
  needs: test
  if: github.ref == 'refs/heads/main' || github.event.action == 'published' || (contains(github.event.inputs.release_platform, 'release') && contains(github.event.inputs.release_platform, 'WebGL'))
  uses: ./.github/workflows/buildWithLinux.yml
  with:
    platform: WebGL
  secrets:
    UNITY_EMAIL: ${{ secrets.UNITY_EMAIL }}
    UNITY_PASSWORD: ${{ secrets.UNITY_PASSWORD }}
    UNITY_LICENSE: ${{ secrets.UNITY_LICENSE }}

deployToGitHubPages:
  name: Deploy to GitHub Pages
  runs-on: ubuntu-latest
  needs: buildForWebGL
  if: github.ref == 'refs/heads/main' || github.event.action == 'published' || (contains(github.event.inputs.release_platform, 'release') && contains(github.event.inputs.release_platform, 'WebGL'))
  steps:
    - name: Echo Build Version
      run: echo ${{ needs.buildForWebGL.outputs.buildVersion }}

    - name: Checkout Repository
      uses: actions/checkout@v3
      with:
        fetch-depth: 0
        lfs: false

    - name: Download WebGL Artifact
      uses: actions/download-artifact@v3
      with:
        name: build-WebGL
        path: build/WebGL

    - name: Deploy to GitHub Pages
      uses: JamesIves/github-pages-deploy-action@v4
      with:
        folder: build/WebGL/WebGL
        commit-message: Deploy
        single-commit: true

    - name: Cleanup to avoid storage limit
      uses: geekyeggo/delete-artifact@v2
      with:
        name: build-WebGL
  • needs: This job depends on the successful completion of the buildForWebGL job.
  • if: It follows the same conditions as the buildForWebGL job.

Next, we have a series of steps:

  1. Echo Build Version: Prints the build version generated by the buildForWebGL job.
  2. Checkout Repository: Checks out the code repository.
  3. Download WebGL Artifact: This action fetches the _build-WebGL_ artifact produced by the buildForWebGL job and places it into the _build/WebGL_ directory.
  4. Deploy to GitHub Pages: We deploy the contents of the _build/WebGL/WebGL_ folder to GitHub Pages.
  5. Cleanup to avoid storage limit: Lastly, we clean up by deleting the _build-WebGL- artifact, ensuring we don't hog unnecessary storage space.

Setting up Github Pages

Once the workflow for a WebGL build is triggered, a gh_pages branch will be created. Now we can setup Github pages to showcase our game.

In the repository on GitHub, navigate to Settings -> Pages.

Set the source to Deploy from a branch and set the branch to gh-pages

Repository Settings

Conclusion

Stay tuned for Part 5, where we'll cover how to generate certificates for iOS deployments.

References