六合彩AI預測賽後檢討!邊個模型預測最叻? 每次攪珠當晚10:30更新免費睇!

阿里巴巴雲:GitHub Actions自動部署遊戲教學

用 GitHub Actions 自動部署遊戲到阿里雲 OSS:完整教學與體驗分享

我建立咗啲乜?

今次同大家分享,點樣利用 GitHub Actions,實現一個自動部署流程,將你嘅靜態網頁或遊戲,直接發佈到阿里雲 OSS(對象儲存服務)。最正係,全程唔使再手動用 ossutil CLI,全部一條龍自動搞掂!

前置準備

要開始之前,你需要準備好以下幾樣嘢:

– 一個阿里雲帳戶
– 已經建立好同設置好靜態網站模式嘅 OSS bucket
– 一個有 public/ 資料夾嘅項目(入面要有 index.html、assets/ 等檔案)
– 一個 GitHub repository

即時試玩連結

👉 即刻玩:https://arena-magnobot.jamesrmoro.me/

遊戲畫面截圖

Arena Magnobot 遊戲簡介

Arena Magnobot 係一隻節奏極快、復古風格嘅網頁遊戲。你要控制一個磁力機械人,喺未來世界嘅競技場閃避危險物品,同時收集各種強化道具,爭取生存得最耐!

– 網頁即玩,手機都支援
– 用 CreateJS + HTML5 Canvas 製作
– 自動部署到阿里雲 OSS,靠 GitHub Actions
– 多語言支援(葡萄牙文、英文、中文)
– PWA 功能,裝落手機離線都玩得

阿里雲服務部署步驟

以下兩步就可以完成自動部署:

步驟一:喺 GitHub 設定 Secrets

1. 去你嘅 GitHub repository,揀「Settings > Secrets and variables > Actions」
2. 點「New repository secret」,逐個新增以下四個 secret:

| 名稱 | 內容 |
| — | — |
| OSS_ENDPOINT | 例如 oss-eu-west-1.aliyuncs.com |
| OSS_BUCKET | 你嘅 bucket 名 |
| OSS_KEY_ID | AccessKeyId |
| OSS_KEY_SECRET | AccessKeySecret |

每個 secret 都係咁加一次,填好名同內容,然後「Add secret」就得。

設定 Secrets 截圖

步驟二:建立自動部署 Workflow

1. 喺你嘅項目目錄建立 `.github/workflows/` 資料夾(如果未有)
2. 新增一個檔案叫 `deploy.yml`,內容如下:

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

呢個 workflow 會:

– 先 checkout 你最新嘅 main 分支代碼
– 下載 ossutil CLI 工具
– 用你設定好嘅 secret 自動配置 ossutil
– 將 public/ 內所有檔案 upload 去你指定嘅 OSS bucket,舊內容會自動 overwrite

以後只要你 push 嘢去 main 分支,GitHub Actions 就會自動幫你部署,完全唔使再手動操作。

GitHub Actions 運作畫面

遊戲開發亮點

今次係我第二次參加 Alibaba Cloud 挑戰,今次唔淨係追求 retro 遊戲玩法,仲特登用咗 PWA 技術,令個遊戲支援離線、手機安裝,兼顧現代用戶體驗。

PWA 示意圖

咁做有咩著數?未來如果要上架 Play Store,只要用 TWA(Trusted Web Activity),完全唔使重寫一行 code!

主要特色:

1. **PWA 支援**:即開即玩,支援離線,手機可安裝
2. **Canvas 遊戲引擎**:用 CreateJS 整 2D 動畫,流暢互動
3. **全裝置響應控制**:PC 有 keyboard,手機有觸控
4. **動態音效**:背景音樂、音效 toggle 自由開關
5. **自動橫向提示**:手機偵測橫屏,提示用戶轉向
6. **本地高分紀錄**:最高分會儲喺瀏覽器,挑戰自己
7. **多語言支援**:入 game 前揀語言,支援葡文、英文、中文

總結

自從設好呢個自動部署流程,每次 push 去 main,GitHub Actions 就會:

– 自動下載同設定 ossutil
– 由 public/ upload 所有檔案到 OSS bucket
– 網頁即時更新,完全唔使人手做部署

你可以喺 GitHub repository 嘅 Actions 分頁追蹤整個部署過程。

Actions 追蹤畫面

編輯評論:自動部署的時代,開發者更應主動擁抱自動化生產力

今次介紹嘅自動部署流程,唔止係技術層面嘅「方便」,更係現代開發文化嘅體現。以前,每次部署都要手動打 Command、Copy 檔案,搞錯一個細節成個網站就壞晒。依家,CI/CD(持續集成/持續部署)已經成為業界標準,GitHub Actions 令呢啲流程平民化,開發者唔使再浪費時間喺重複工序。

更重要嘅係,阿里雲 OSS 呢類雲端儲存,配合自動部署,等中小型團隊甚至個人開發者,都可以享受到企業級嘅發佈效率。遊戲開發者可以專注創意,唔使擔心部署問題;產品更新可以一鍵即時推送,回應市場變化更迅速。

另外,作者將遊戲打造成 PWA,係一個好值得香港開發者學習嘅方向。喺 App Store、Play Store 競爭激烈之下,PWA 令小型產品可以低成本跨平台曝光,仲可以直接收集用戶數據、優化體驗。

而多語言支援、手機橫向提示、本地高分紀錄等細節,都反映咗現代網頁遊戲要以用戶為本,唔單止係「玩得」,仲要「用得舒服」。

最後,香港開發者如果想推廣自己作品,建議多留意雲端自動化、PWA 及多語言本地化等趨勢。自動部署唔止係省時,更係令你同國際接軌、提升產品質素嘅關鍵一步。

Chat Icon