Automatic Game Deployment on Alibaba Cloud Using GitHub Actions

#alibabachallenge #devchallenge #gamedev #webdev

James Moro @jamesrmoro

About: 🎓 Computer Engineer | 📢 Advertising Specialist | 💻 Front-End Developer I combine creative storytelling with modern front-end technologies. #PWA #TWA #JavaScript #HTML5 #CSS3 #FrontEnd #GameDev

Location:

Brazil

Joined:

Nov 29, 2019

Automatic Game Deployment on Alibaba Cloud Using GitHub Actions

Publish Date: Apr 21

11 0

This is a submission for the Alibaba Cloud Challenge: Build a Web Game.*

What I Built
Live Demo link
Alibaba Cloud Services Implementation
- Create Secrets on GitHub
- Create the Automatic Deploy Workflow
Game Development Highlights
Conclusion

What I Built

In this article, you will learn how to set up an automatic deployment workflow to publish static websites directly to Alibaba Cloud (OSS) using GitHub Actions — without needing to use the local command line with ossutil.

Prerequisites

An Alibaba Cloud account
An OSS bucket created and configured as a static website
A project with a public/ folder containing your files (e.g., index.html, assets/, etc.)
A GitHub repository

Live Demo Link

👉 Play now: https://arena-magnobot.jamesrmoro.me

jamesrmoro / arena-magnobot

Arena Magnobot

Arena Magnobot is a fast-paced, retro-style online game where you control a magnetic robot in a futuristic arena. Your mission is to dodge dangerous goods, collect valuable product power-ups, and survive as long as possible.

A high-speed retro arena game where you control a magnetic robot and dodge dangerous products while collecting power-ups — built entirely with JavaScript and HTML5 Canvas!

Playable online & mobile-friendly
Built with CreateJS
Deployed automatically to Alibaba Cloud OSS using GitHub Actions
Supports multiple languages (PT 🇧🇷 / EN 🇺🇸 / ZH 🇨🇳)
PWA ready — install the game on your device and play offline!

About this project

This repository contains the full source code and deployment workflow for Arena Magnobot, a retro-inspired arena-style web game developed for the Alibaba Cloud Web Game Challenge.

In the game, you command a magnetic robot that must collect power-ups and avoid hazardous products in…

View on GitHub

☁️ Alibaba Cloud Services Implementation

I've broken this tutorial down into 2 quick and easy steps to help you deploy your static content using Alibaba Cloud OSS with GitHub Actions.

Step 1: Create Secrets on GitHub

In your GitHub repository:

Go to Settings > Secrets and variables > Actions
Click New repository secret and create one at a time the following secrets:

Name	Value
OSS_ENDPOINT	e.g., `oss-eu-west-1.aliyuncs.com`
OSS_BUCKET	Your bucket name
OSS_KEY_ID	Your AccessKeyId
OSS_KEY_SECRET	Your AccessKeySecret

For each secret, do the following:

Go to Settings > Secrets and variables > Actions
Click "New repository secret"
Fill in the fields like this:

1st secret – OSS_ENDPOINT

Name: OSS_ENDPOINT
Secret: oss-eu-west-1.aliyuncs.com (or your bucket’s endpoint)
Click "Add secret"

2nd secret – OSS_BUCKET

Name: OSS_BUCKET
Secret: your-bucket-name
Click "Add secret"

3rd secret – OSS_KEY_ID

Name: OSS_KEY_ID
Secret: your Alibaba Cloud AccessKeyId
Click "Add secret"

4th secret – OSS_KEY_SECRET

Name: OSS_KEY_SECRET
Secret: your Alibaba Cloud AccessKeySecret
Click "Add secret"

After adding the four secrets, move on to the next step to create the automatic deploy workflow.

Step 2: Create the Automatic Deploy Workflow

Now that your secrets are ready, it's time to tell GitHub Actions what to do every time you push changes to your code.

1. Create the workflow file

Inside your project, create the following folder structure (if it doesn’t exist yet):

.github/workflows/

Inside this folder, create a file named:

deploy.yml

2. Paste the following content into `deploy.yml`

This script tells GitHub Actions to run a deployment process every time a push is made to the main branch.

name: Deploy to Alibaba OSS

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Download and configure ossutil
        run: |
          curl -O https://gosspublic.alicdn.com/ossutil/1.7.16/ossutil64
          chmod +x ossutil64
          ./ossutil64 config \
            -e ${{ secrets.OSS_ENDPOINT }} \
            -i ${{ secrets.OSS_KEY_ID }} \
            -k ${{ secrets.OSS_KEY_SECRET }}

      - name: Upload to OSS
        run: |
          ./ossutil64 cp -r public/ oss://${{ secrets.OSS_BUCKET }}/ --force

What this workflow does

Step 1: Checks out your latest code from the main branch.
Step 2: Downloads ossutil, the CLI tool used to interact with Alibaba OSS.
Step 3: Configures ossutil using your secrets (already set in Step 1).
Step 4: Uploads all files from the public/ folder to your OSS bucket, replacing the previous content.

Once this file is added and committed, any push to the main branch will automatically trigger the deployment process.

The GitHub Actions workflow running the automatic deployment to Alibaba Cloud OSS.

🎮 Game Development Highlights

This is my second game submission for the same Alibaba Cloud challenge, and this time I decided to take a different approach. Instead of focusing solely on gameplay and retro aesthetics, I explored modern web technologies by implementing the game as a PWA (Progressive Web App).

In addition to enhancing the mobile experience with features like home screen installation and offline support, this was a strategic choice: in the future, the same game could be published on the Play Store using TWA (Trusted Web Activity), without the need to rewrite the code in another language.

You can check out my first game here on the Alibaba Cloud challenge page.

This project was developed to demonstrate the capabilities of web technologies in a lightweight, fully browser-based gaming environment. Key highlights of the implementation include:

✨ Progressive Web App (PWA): Playable instantly from your browser with offline support and installable on mobile devices.
🧱 Canvas-based gameplay: Developed entirely with CreateJS to deliver smooth 2D animations and real-time interactions.
📲 Responsive controls: Designed for all devices — keyboard support for desktops and tap-based input for touchscreens.
🔊 Dynamic audio: Background music and sound effects enhance immersion, with a simple toggle for sound control.
📐 Orientation guidance: Automatically detects mobile landscape mode and prompts users to rotate their device for the best experience.
🏆 Local high score tracking: Challenge yourself to improve, as your highest score is saved directly in the browser.
🌍 Internationalization built-in: Language selection right at the start — currently supporting Portuguese, English, and Chinese.

Conclusion

Every time you push to the main branch, GitHub Actions will automatically handle deployment to Alibaba Cloud:

Download and configure ossutil – the official CLI for interacting with Alibaba OSS
Upload all files from the public/ folder to your designated bucket
Deploy your static website live on Alibaba Cloud OSS – no manual steps required!

You can track the full process via the Actions tab in your GitHub repository.

Comments 0 total

Add comment