用 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」就得。
步驟二:建立自動部署 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 就會自動幫你部署,完全唔使再手動操作。
遊戲開發亮點
今次係我第二次參加 Alibaba Cloud 挑戰,今次唔淨係追求 retro 遊戲玩法,仲特登用咗 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 分頁追蹤整個部署過程。
編輯評論:自動部署的時代,開發者更應主動擁抱自動化生產力
今次介紹嘅自動部署流程,唔止係技術層面嘅「方便」,更係現代開發文化嘅體現。以前,每次部署都要手動打 Command、Copy 檔案,搞錯一個細節成個網站就壞晒。依家,CI/CD(持續集成/持續部署)已經成為業界標準,GitHub Actions 令呢啲流程平民化,開發者唔使再浪費時間喺重複工序。
更重要嘅係,阿里雲 OSS 呢類雲端儲存,配合自動部署,等中小型團隊甚至個人開發者,都可以享受到企業級嘅發佈效率。遊戲開發者可以專注創意,唔使擔心部署問題;產品更新可以一鍵即時推送,回應市場變化更迅速。
另外,作者將遊戲打造成 PWA,係一個好值得香港開發者學習嘅方向。喺 App Store、Play Store 競爭激烈之下,PWA 令小型產品可以低成本跨平台曝光,仲可以直接收集用戶數據、優化體驗。
而多語言支援、手機橫向提示、本地高分紀錄等細節,都反映咗現代網頁遊戲要以用戶為本,唔單止係「玩得」,仲要「用得舒服」。
最後,香港開發者如果想推廣自己作品,建議多留意雲端自動化、PWA 及多語言本地化等趨勢。自動部署唔止係省時,更係令你同國際接軌、提升產品質素嘅關鍵一步。