cocos creator 3.7微信小游戏开发云函数和云托管部署

      cocos creator开发跨平台游戏能力不错,可以一次开发适用于多个平台,如andriod,ios原生,网页,各类小程序等等。就实际情况而言,能够跨1~2个平台已经不容易了,这是因为在跨平台开发中不可避免存在针对特定平台还需要做定制开发的部分,如果太多,平台维护工作量过大。就微信小游戏而言,通常就要考虑是否采用微信自带云函数或者云托管,不然就只能自行搭建服务器,自行搭建有很多限制,如:必须备案、域名、证书等等,对于个人开发者而言太啰嗦了,自己维护太费精力。下面就二者做一比较:

一、应用架构

    二者相同之处就是serverless,也就是无服务器架构,无需用户自己搭建服务器,无需自己维护,甚至安全部分也无需太多担心,微信基本都考虑到了,这个对于企业和个人都节省了时间和成本。但差别还是有:

1. 部署方式

云函数是采用node.js作为服务端,js作为开发语言,部署方式就是将云函数同步到云端即可;而云托管则不同,是自己创建docker镜像,然后发布到云端,不限制你使用的服务端环境和开发语言,灵活性更大。

2.访问端口

云函数不涉及这个问题,直接按照函数名和环境参数访问即可;云托管在你自己开发的服务镜像中会有端口,你在云托管参数中设置对应关系,这样云会自动链接你的服务端口,客户端访问类似网络方法,用的是微信的callContainer,参数是path,method,header和data,但没有端口等参数。这部分而言,云函数更简单,云托管更完整(用户可以操作的更多)。

3.增值服务

这部分内容,二者大同小异,都有数据库、对象存储、资源监控、静态网站等等;只不过二者相互独立,都在各自环境中,一般而言需要分别部署。

二、部署过程

1.云函数部署

1.进入微信开发者工具,在左侧菜单栏中选择“云开发”,进入云开发控制台。

2.在云开发控制台中,选择“云函数”选项卡,并点击“新建云函数”。

 3.在新建云函数页面中,填写相应的信息,包括云函数名称、运行环境、执行方法等。

4.本地创建和编辑云函数代码。微信开发者工具中创建云函数目录(如cloud)

然后编辑project.config.json文件,增加云函数的根目录


右键点击cloud目录,创建同名云函数,如test 

 

 微信开发者工具会自动创建缺省的云函数文件

 自己编辑函数代码,完成后右键上传即可。

 5.测试云函数。可以通过云开发控制台提供的本地和云测试工具来测试云函数是否正常运行。

2.云托管部署

1.网站部署

云托管部署比较自由,一种选择网站部署方式,

登录网站微信云托管,扫码后登录,选择服务列表,没有就创建

 可以模版部署和创建服务,完成后选择部署发布

 可以从镜像中选择,端口根据你服务的端口号确定。

2.docker file 命令行部署

这种方式更加实用和灵活,以创建一个hello world为例,介绍下操作步骤:

1)自己搭建开发环境,用npm安装

mkdir test
cd test
npm init -y

2)安装typesript,node.js 和 express

npm install node --save
npm install express --save
npm install @types/express --save
npm ls

3)编写hello world代码,创建并编辑 index.ts

import express, { Application } from 'express';
export class Test {
	private app: Application = express();
	constructor() {
		// 允许跨域
		this.app.all('*', function (req, res, next) {
			res.header("Access-Control-Allow-Origin", req.headers.origin);
			res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
			res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
			res.header("Access-Control-Allow-Credentials", "true");
			if (req.method === "OPTIONS") res.sendStatus(200);/*让options请求快速返回*/
			else next();
		});
        this.app.use(express.json());
		this.app.get('/', function (req, res) {
			res.send('Hello World');
			console.log("Hello World!");
		});

		let server = this.app.listen(8080, function () {
			let host = server.address();
			console.log("应用实例访问地址为 %s", host)
		});
	}

};
export const test: Test = new Test();

4)编辑package.json文件

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "./node_modules/.bin/ts-node ./index.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/express": "^4.17.17",
    "express": "^4.18.2",
    "ts-node": "^10.9.1"
  }
}

实际主要就是增加start一行,运行:

npm run start

5) 用curl访问测试是否成功

curl 127.0.0.1:8080

 出现hello world表示成功!到这里自己的typescript搭建的hello world node.js服务完成。

6)安装云托管cli

首先要安装微信的云托管cli,也就是命令行工具

npm i -g @wxcloud/cli

如果权限不足,需使用sudo获取权限

sudo npm i -g @wxcloud/cli

7)设置密钥

命令行访问必须采用微信的的密钥,密钥的设置在微信云托管平台--设置--全局设置--cli密钥,点击 “生成密钥”,记得及时拷贝和保存,微信云托管不负责存储,如果忘记或丢失,就只能重新生成一次。

 8)登录命令行

在项目目录下,进入命令行,输入:

wxcloud login --appId <微信 AppId> --privateKey <秘钥>

appId用你自己游戏的appid,在云托管右上角,你的图标点击就可以看到;密钥使用刚才生成的密钥即可,登录成功后就可以进行下一步。

9)创建微信云托管环境,在项目目录下执行migrate,一直回车,即可生成缺省dockerfile文件。

wxcloud migrate
# 由 Dockerpacks 自动生成
# 本 Dockerfile 可能不能完全覆盖您的项目需求,若遇到问题请根据实际情况修改或询问客服

# 使用基于 alpine 的 node 官方镜像
FROM node:lts-alpine

# 设置容器内的当前目录
WORKDIR /app

# 使用速度更快的国内镜像源
RUN npm config set registry https://registry.npmmirror.com

# 将这些文件拷贝到容器中
COPY package.json package-lock.json ./

# 安装依赖
RUN npm ci

#安装curl方便调试
RUN apk add curl

# 将包括源文件在内的所有文件拷贝到容器中(在 .dockerignore 中的文件除外)
COPY . .

# 设置环境变量
ENV NODE_ENV=production HOST=0.0.0.0

# 运行项目
CMD ["npm", "run", "start"]

# 服务暴露的端口
EXPOSE 8080

10)创建服务

在正式部署前,应该在微信云托管网页创建你自己的服务,微信云托管--服务管理--服务列表--创建服务,输入名称,设置相关参数即可。(注意不需要网页上直接部署,只是创建一个服务名称,如果需要设置容器参数可以在服务设置里面设置。

11)命令行发布

在项目目录下执行命令wxcloud deploy,按照提示执行,注意选择正确的服务名称。

pjxxlpsj@pj-MAC test % wxcloud deploy
Wxcloud CLI 2.1.2
? 请选择环境 prod (prod-xxxxxxx)
? 请选择服务 test
请输入端口号(大部分前端框架端口号为 3000,官方模板为 80) [3000]: 8080
ℹ 部署模式 云托管
读取到 .dockerignore, 将忽略其中的文件
[
  '.git',
  '.gitignore',
  '.dockerignore',
  '**/LICENSE',
  '**/LICENSE/**',
  '*.md',
  '**/node_modules',
  '**/node_modules/**'
]
✔ 打包云托管产物
✔ 云托管产物上传成功
✔ 云托管 版本创建成功

约几分钟后提升发布成功!这样完整的云托管部署就结束了,但是如果测试是否正确部署了呢?可以在云托管网页上云端测试,设置好参数,如果反馈了hello world,证明了服务正常运行。

3.cocos creator要点

 在cocos creator开发中,因为微信发布是将typescript代码编译后发布到build的微信目录,因为代码从typescript动态转换为js代码,需要注意:

1. 每次代码修改重新构建,会导致发布到微信开发者工具的代码目录会被重写,云函数本地代码会消失,因此原则上不宜讲原始代码放在build目录下。而应该采用复制方式。

2. 由于微信小程序包大小限制,一般情况下必须要分包处理,(我前期文章有描述),经过测试采用子包方案速度奇慢,在程序总大小10m左右等待时间20余秒,因此建议采用主包+远程包方案,将远程包部署到静态网站,速度几秒解决问题。

三、cocos creator访问云函数和云托管

在访问代码创建后,需要注意构建在cocos creator中构建发布到微信小游戏,然后在微信开发者工具中进行测试和调试工作。具体方式参见我之前的文章。

1.云函数访问

主要是要注意判断当前环境,如果是微信环境才能调用wx代码,具体示例如下:

if (sys.platform === "WECHAT_GAME") {
			//微信小游戏环境下才执行
			//第1次运行需要初始化
			if (!this.isWxInit) {
    			wx.cloud.init({env:'xxxxxxxxx'});
				this.isWxInit = true;
			}
			//云函数调用
			let cloudData = {'command': path,
  			'body': JSON.parse(data)};
			wx.cloud.callFunction({
					// 要调用的云函数名称
					name: 'test',
					// 传递给云函数的event参数
					data: cloudData
				  }).then((res: any) => {
					console.log(res);
					if (successCallback != null) {
						successCallback( {'data':res.result});
						console.log({'data':res.result});
					}
				  }).catch((err: any) => {
					// handle error
					if (errorCallBack != null) {
						errorCallBack(err);
					}
				  });
			}
}

2.云托管访问

访问方式是类似的,只是具体函数名称有差异。

if (sys.platform === "WECHAT_GAME") {
			//微信小游戏环境下才执行
			//第1次运行需要初始化
			if (!this.isWxInit) {
				wx.cloud.init({env:'xxxxxxxxx'});
				this.isWxInit = true;
			}
			//云托管
				wx.cloud.callContainer({
					config: {
						env: 'xxxxxxxx', // 微信云托管的环境ID
					},
					path: '/' + path, // 填入业务自定义路径和参数,根目录,就是 / 
					method: 'GET', // 按照自己的业务开发,选择对应的方法
					header: {
						"X-WX-SERVICE": "test", // 填入服务名称
						"content-type": "application/json"
						// 其他 header 参数
					},
					data: data,
					success: (res: any) => {
						if (successCallback != null) {
							successCallback(res);
						}
					},
					fail: (err: any) => {
						if (errorCallBack != null) {
							errorCallBack(err);
						}
					}
				});
		}

 四、费用比较

云函数有包月套餐,基本上20元/月,含各种访问数量。一般应用而言数量够用了,如果不够就只能按访问计费。云托管则给了用户很大的空间,可以自由调节云端部署的参数,如cpu内存,多个实例等等,但是费用也是依次递增。

总体比较而言,云函数费用要节约些,个人和小企业比较适合;云托管提供更多的灵活性,对企业而言可能选择余地更大。

五、其他                       

1.云函数采用typescript问题

因为全部游戏代码都是typescript,因此自然而然希望所有的代码都是typescript,这样可读性和维护都省事一些,如果云托管还好,通过上面的例子可以看到是完全没有问题;对于云函数而言,似乎只能支持js代码,那么如何解决呢?一个可行思路就是,本地还是用typescript编辑,在完成后,用编译方式将ts代码自动编译为js代码,并拷贝到微信开发者目录,开发者再提交到云端即可。

1)创建项目目录,初始化云函数项目。

mkdir test
cd test
npm init -y
npm install typescript  --save
npm install ts-node --save

2)云函数编写

这里给出最简单的hello world示例。

import  ICloudService  from 'wx-server-sdk';

ICloudService.init();
export async function main(event: any, context: any) {
	console.log(event);
    return "hello world!"
}

3)编辑tsconfig.json

最关键的就是输出目录选择,换成你自己的微信开发者工具目录即可。

{
	"compilerOptions": {
	 "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
	  "module": "commonjs",                                /* Specify what module code is generated. */
	   "outDir": "../build/xxxx/cloud/api",                /* 指定你的输出目录 */
	  "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
	  "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
	  "allowSyntheticDefaultImports": true,
	  "strict": false,                                     /* Enable all strict type-checking options. */
	  "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  
	},
	"include": [
	  "./**/*.ts"
	  ],
	  "exclude": [
	  "node_modules"
	  ]
  }
  

4)编译并拷贝

npx tsc

你会看到,文件被编译为js代码并被拷贝到指定目录了,这样就可以实现用typescript编写云函数目标。后面怎么提交到服务端看文章前面的说明。

2.云函数调试

云函数调试可以本地和云端测试两种情况,本地速度很快,但要求目录下安装node.js环境方可;云端测试代表最终的结果,但明显速度比较慢,每次测试都会等10几秒,这个只是测试速度,不代表实际部署运行速度。下图可以看到,调用成功,返回“hello world!”

3.云托管计费坑

云托管的灵活性很高,不限制语言和开发工具,甚至有免费额度可以使用,但是实际开通后很容易把资源耗尽,因为在云托管--服务列表--选择服务--服务设置中可以调节容器参数如cpu、内存、实例数量等等,开始没有注意收费问题,很容易调大参数,很快耗尽资源,以后所有资源访问都会收费了。

另一方面,云托管赠送的访问次数是一次性的!这个需要反复强调,因为还有个三个月期限,大家很容易理解为每个月都有这么多访问次数或资源量,自己就是一个月多一点就把全部次数用完了,导致后面全面访问都会收费!

云托管的资源统计都是按照月计算,所以即使你的量已经用完了,但隔月统计的时候仍然显示有很多空余,这很容易让用户理解错误,以为资源还很足。所以千万要注意资源实际的访问情况,量力而行,设置参数一定要适度。

六、参考文献

1.微信云托管 微信云托管 | 微信开放文档

2.微信云函数微信开放文档

3.cocos creator api手册CocosCreatorAPI

4.cocos creator 使用手册Introduction · Cocos Creator

5.微信云托管命令行概览 | 微信云托管 CLI

下面是我的微信小游戏24点世纪大作战,欢迎大家下载。

猜你喜欢

转载自blog.csdn.net/a17432025/article/details/130386269