三天使用 AI 辅助你开发在线版多人贪吃蛇小游戏
type
status
date
slug
summary
tags
category
icon
password
学习内容
前几天在 X 看看了 DeepSite 的开发震惊🤯了，短短几分钟你就可以生成一个基础的前端页面。（这里笔者是有编程基础去做后面的自动化部署的工作的。）
有这样的一个新工具，我就想尝试能不能做一个在线小游戏，接入一个广告插件（这里后面说）。
首先，在DeepSite我让他给我生成一个基础的贪吃蛇前端页面类似这样的效果 。
技术栈包括：
- 前端：HTML5、CSS3、JavaScript
- 样式：Tailwind CSS
- 后端：Node.js
- 实时通信：WebSocket
- 部署：Docker & Github Action & Render
它包括了基础的游戏功能，排行榜，商店，聊天功能。但是多人模式并不完善。
这时候我就用了gork3 帮我完善了多人模式的功能，可是在部署成功，访问后还是会报错，连接不上服务器，这时候，就需要就去搜索引擎问了，发现我选择的部署平台，使用websocket做在线长链接都有这个问题，这时候改用了 socket 重新实现这部分的代码。
游戏在能跑的时候，我就在选部署平台了。我的部署需求是：免费，能实现 Docker +GitHub Actions + Webhook 自动部署。
vercel 肯定是免费中最方便的，因为个人原因，我原来的号用不了，就选择别的PaaS平台。
部署平台
总结一些暂时免费的平台：
云服务器（免费层）
1️⃣ AWS Free Tier（EC2 + Lightsail） – 免费 750 小时/月的 t2.micro 实例（第一年）
2️⃣ Google Cloud Free Tier（GCE） – 提供 f1-micro 实例（部分地区免费）
3️⃣ Microsoft Azure Free Tier – 750 小时 B1S 虚拟机（前 12 个月免费）
🚀 PaaS 平台（支持 Web 应用 + Docker）
4️⃣ Railway – 提供免费 512MB RAM 容器（可运行 Node.js + Docker）（免费计划收紧，当前不一定能部署 Docker）
5️⃣ Render – 提供 Web 服务 750 小时/月，支持 Docker 部署
6️⃣ Fly.io – 提供 3GB 存储 + 160GB 流量，支持 Docker 部署(需要绑定银行卡)
7️⃣ Zeabur – 免费计划适合小型 Web 应用，支持 Docker （功能方便但免费计划波动频繁，海外访问可能慢）
🔗 VPS / 容器平台（适合 Docker + Webhook）
8️⃣ Oracle Cloud Free Tier – 24GB RAM + 4 核 ARM 服务器，长期免费
9️⃣ Koyeb – 提供 5 个免费服务实例，支持 Webhook 触发部署
这里我选了Paas平台中的 Render，因为它支持 Docker 而且不用绑定银行卡，这里我只想快速验证这个项目的可行性，就直接用了，没有考虑后面的问题。
部署流程
接着就需要准备 github action 和 dockerfile 的代码了，这里的代码，你也可以使用ai协助了编写，需要了解点部署，CI，docker的知识。
GitHub Actions deploy.xml（自动部署到Render） :
DOCKFILE: (在render自动执行的代码)
render.xml
准备好这些之后，你还需要
RENDER_API_KEY 和 RENDER_SERVICE_ID 这两个是在你在 Render 创建好后，在github 项目的setting中配置的。Render 创建 Web Service
第一步当然是注册了，可选账户很多，你可以直接使用 github 登录，登录后选择 Web Service
.png?raw=true)
选择你的 github项目:
.png?raw=true)
.png?raw=true)
⚠️ 注意 平台其实有自动部署的功能，这里我前面用的 Github Actions 做了，就是想练手，你可以选择自动部署。
之后设置你需要用的环境变量，用到的端口，等待部署成功就行了。
.png?raw=true)
而前面我用到的
RENDER_API_KEY 和 RENDER_SERVICE_IDRENDER_SERVICE_ID：是你创建完你项目后，像下面地址带 srv-xxx 开头的字符串就是 RENDER_SERVICE_ID RENDER_API_KEY：你的 Render API 密钥。在 Render 仪表板中生成一个 API 密钥（可以在 Account Settings > API Keys 中创建）。这里应为我选择的是API手动触发部署，Render 的 Auto-Deploy需要设置关闭。
到这里要做的的就完成了，之后你每次提交的代码都会自动部署，
但是（是的，前面埋坑了。）Render 对免费用户是有限制的，没有请求的话，实例是被关掉的。 （不过我是测试这套流程，没关系。）
.png?raw=true)
之后就是 Monetag的广告接入，这里不细聊了，感兴趣的话，可以留言，我再写份教程出来。选它：审核快，接入简单，但转化低。
最后👏欢迎大家来体验：https://snake-game-l99p.onrender.com/