搭建微信小游戏开发环境总结

这篇文章主要解决以下问题

1、一键申请泛域名证书并到期自动更新
2、Nginx配置https
3、本地资源映射到外网
4、介绍CocosCreator构建发布微信小游戏时远程服务器地址如何配置

正式环境搭建

使用acme.sh申请Let’s Encrypt 泛域名的HTTPS证书

使用 acme.sh 通过 CloudFlare DNS 验证方式一键申请 Let’s Encrypt 泛域名的HTTPS证书。

服务器系统：CentOS 7.5
假设域名为：*.game.ijpay.com

1、添加A记录

域名控制台添加A记录 *.game

2、注册CloudFlare并添加站点

在CloudFlare 平台注册账号并添加站点域名。

操作步骤如下图

点击Add Site 后会弹出查询DNS记录的页面点击Next ，下一个步骤就是选择使用的版本「免费还是付费版本」，这里选择免费的就可以了。一直点击确认就可以看到「自动查询DNS的结果页」点击Continue 后即可得到CloudFlare 提供的免费墙外能访问到的DNS服务

DNS服务器

3、更改DNS服务器

登录域名控制台，修改默认的DNS为CloudFlare 提供的免费墙外能访问到的DNS

这一步骤很关键不要忘记操作，否则后面生成证书一直无法验证域名

4、获取CloudFlare平台 API Key

获取到API Key，详细的步骤请参考截图

获取API Key

点击 My Profile 后将页面拖拽至文末，点击View后做一个简单的账号验证即可查看具体的API Key

获取API Key-查看具体的值

5、一键申请 Let’s Encrypt证书

到此生成证书准备工作已完成，下面就使用acme.sh 来一键申请 Let’s Encrypt 泛域名的HTTPS证书。
1、安装 acme.sh

普通用户和 root 用户都可以安装使用

curl  https://get.acme.sh | sh

2、创建一个 bash 的 alias, 方便你的使用

alias acme.sh=~/.acme.sh/acme.sh

以上安装过程不会污染已有的系统任何功能和文件, 所有的修改都限制在安装目录中: ~/.acme.sh/

3、生成证书

这里我们使用DSN验证方式来验证域名并生成证书。

设置全局API参数

export CF_Key="步骤四中的API Key"
export CF_Email="申请的邮箱"

CF_Key 和 CF_Email 将会保存到~/.acme.sh/account.conf 中

生成泛域名证书

acme.sh --issue --dns dns_cf -d *.game.ijpay.com  --debug

可以添加多个 -d ,--debug 显示具体的日志信息

不出任何异常的情况下就会提示生成证书保存的路径

Your cert is in  /root/.acme.sh/*.game.ijpay.com/*.game.ijpay.com.cer
Your cert key is in  /root/.acme.sh/*.game.ijpay.com/*.game.ijpay.com.key
The intermediate CA cert is in  /root/.acme.sh/*.game.ijpay.com/ca.cer
And the full chain certs is there:  /root/.acme.sh/*.game.ijpay.com/fullchain.cer

证书自动更新

安装 acme.sh时就自动为你创建 cronjob，每天 0:00 点自动检测所有的证书，如果快过期了需要更新，则会自动更新证书。

更新acme.sh

目前由于 acme 协议和 letsencrypt CA 都在频繁的更新, 因此 acme.sh 也经常更新以保持同步.

升级 acme.sh 到最新版 :acme.sh --upgrade

如果你不想手动升级, 可以开启自动升级:acme.sh --upgrade --auto-upgrade之后, acme.sh 就会自动保持更新了。你也可以随时关闭自动更新:acme.sh --upgrade --auto-upgrade 0

安装并配置Nginx

1、安装准备工作

目前稳定版本为 1.14.2

wget http://nginx.org/download/nginx-1.14.2.tar.gz #下载nginx
tar -zxvf nginx-1.14.2.tar.gz  #解压nginx

2、编译安装

配置参数并添加第三方模块

进入nginx解压目录执行以下命令

./configure --prefix=/usr/local/nginx \
--with-http_gzip_static_module \
--with-http_stub_status_module \
--with-http_ssl_module \
--with-pcre \
--with-file-aio \
--with-http_realip_module \
--add-module=/mnt/software/nginx_conf/nginx-module-vts

nginx-module-vts 此模块可以监控Nginx虚拟主机流量以及状态，详细介绍参考之前写的博客Nginx添加第三方模块并平滑升级

缺啥就安装啥

yum  install -y  gcc pcre pcre-devel zlib zlib-devel openssl openssl-devel

命令详细介绍请移步至之前写的博客 Centos 通过 Nginx 和 vsftpd 构建图片服务器

查看安装状态

安装好 Nginx 后，使用它的命令是 它的路径+对应的命令 ，但路径很长，每次使用都很麻烦，为了解决这个麻烦有两种处理方式

将nginx添加到全局变量中
添加一个 service nginx xxx的方式

第一种方式介绍

cd /etc/profile.d/
vi nginx.sh

在 nginx.sh中添加如下内容

export NGINX_HOME=/usr/local/nginx
export PATH=$NGINX_HOME/sbin:$PATH

第二种方式介绍

参考官方提供的配置参考文件

注意 nginx 与 NGINX_CONF_FILE 要与自己服务器的路径保持一致

nginx="/usr/local/nginx/sbin/nginx"
NGINX_CONF_FILE="/usr/local/nginx/conf/nginx.conf"

如果执行 service nginx start 提示权限不够请执行以下命令

chmod 755 /etc/init.d/nginx #设置权限
chkconfig --add nginx #设置开机启动

3、配置HTTPS环境

到这里已完成

申请泛域名的https证书
Nginx下载与安装

1、Nginx 模块化配置

cd /usr/local/nginx/conf/
true>nginx.conf #清空默认配置
vi nginx.conf

添加如下内容

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

http {
    vhost_traffic_status_zone;
    include       mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /mnt/logs/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;
    server_tokens off;
    #keepalive_timeout  0;
    keepalive_timeout  65;
    
    gzip  on;
    client_max_body_size 5m;

    include conf.d/*.conf;
}

留意下 include conf.d/*.conf 后面所有的配置都放在 cd /usr/local/nginx/conf/conf.d 文件夹下。

2、copy/安装证书

注意, 默认生成的证书都放在安装目录下~/.acme.sh/请不要直接使用此目录下的文件。
例如: 不要直接让 nginx/apache 的配置文件使用这下面的文件。这里面的文件都是内部使用，而且目录结构可能会变化。

正确的使用方法是使用 --installcert 命令,并指定目标位置, 然后证书文件会被copy到相应的位置, 例如:

acme.sh  --installcert  -d  *.game.ijpay.com  \
--key-file   /usr/local/nginx/ssl/*.game.ijpay.comt.key \
--fullchain-file /usr/local/nginx/ssl/fullchain.cer \
--reloadcmd  "service nginx force-reload"

/usr/local/nginx/ssl 为证书保存的目标位置。这里用的是 service nginx force-reload, 不是 service nginx reload, 据测试, reload 并不会重新加载证书, 所以用的 force-reload「其实就是stop后再start」

4、Nginx 配置https

在/usr/local/nginx/conf/conf.d 目录下创建文件frp.conf

server {
    listen 443 default ssl;
    server_name *.ijpay.com;
    ssl on;
    ssl_certificate /usr/local/nginx/ssl/fullchain.cer;
    ssl_certificate_key /usr/local/nginx/ssl/*game.ijpay.com.key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;
    client_max_body_size 10M;

    access_log  /mnt/logs/nginx/https.access.log  main;

    location ~ .*\.(gif|jpg|jpeg|bmp|png|ico|txt|js|css|apk)$ {
        root /mnt/www/static;
        access_log off;
	    add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        expires modified +30d;
    }

保存后service nginx configtest或者 nginx -t来测试配置是否正常，如果存在异常就根据异常提示来定位并解决异常。
如果配置没有问题就重启 service nginx force-reload来加载https证书，在/mnt/www/static 目录下上传一张图片login.png在浏览器中访问 https://static.game.ijpay.com/logo.png 测试，不出意外的情况下在浏览器中就可以显示此图片。

配置远程服务器地址

关于CocosCreator发布游戏到微信小游戏平台详细介绍与原理请参考官方文档

总结一下，开发者需要做的是：

构建时，勾选 md5Cache 功能。
将小游戏发布包中的 res 文件夹完整的上传到服务器。
删除发布包内的 res 文件夹。
在构建发布面板中设置 远程服务地址。
对于测试阶段来说，可能你无法部署到正式服务器上，需要用本地服务器来测试(本地服务器如何测试下会详细介绍)，那么请在微信开发者工具中打开详情页面，勾选项目设置中的不检验安全域名、TLS 版本以及 HTTPS 证书选项。

将小游戏发布包中的 res 文件夹完整的上传到服务器 /mnt/www/download

发布包内的 res 文件夹

在上文配置的server模块中添加如下内容

location /download {
        charset utf-8;
        autoindex on;
        autoindex_exact_size off;
        autoindex_localtime on;
        root /mnt/www;
    }

配置远程服务器地址为: https://static.game.ijpay.com/download 在浏览器中访问会看到如下效果。

到此介绍完了正式环境下微信小游戏开发环境的搭建。

本地环境搭建

Nginx 安装

Mac 下安装软件建议使用brew 统一管理

Mac 安装brew请参考官方文档

使用brew安装Nginx

安装：sudo brew install nginx
启动：brew services start nginx
重启：brew services restart nginx
停止：brew services stop nginx
查看：cat usr/local/etc/nginx/nginx.conf
编辑：vi usr/local/etc/nginx/nginx.conf

Window 安装Nginx 请参考这篇博客

本地资源映射到外网

本地资源映射到外网的工具比较多，可以参考之前我写的一篇博客里面有免费以及收费的Ngrok服务。但使用第三方提供的服务经常会遇到无法自定义域名或者域名没有备案等问题，自己使用Ngrok搭建私有服务配置又比较复杂所以这里推荐使用frp，frp官方文档有详细的配置介绍这里就贴一下我的配置(无论是什么系统配置都一样)。

根据使用的系统下载不同版本的FRP

1、服务端配置

公司在线服务器，80端口一般是会被其他的服务占用这里使用Nginx来配置转发。

server {
    listen       80;
    server_name  *.frp.game.ijpay.com;

    #charset koi8-r;
    access_log  /mnt/logs/nginx/http_frp.access.log  main;
    location / {
        proxy_redirect          off;
        proxy_set_header Host $host:$server_port;
        proxy_set_header X-Forwarded-For $remote_addr;
        client_max_body_size      20m;
        client_body_buffer_size 128k;
        proxy_connect_timeout   600;
        proxy_send_timeout      600;
        proxy_read_timeout      900;
        proxy_buffer_size       4k;
        proxy_buffers          4 32k;
        proxy_busy_buffers_size 64k;
        proxy_temp_file_write_size 64k;
        proxy_pass http://127.0.0.1:9988/;
    }
}

frp 服务端配置 frps.ini

[common]
bind_port = 7000
vhost_http_port = 9988
max_pool_count = 5
privilege_token = javen
subdomain_host = game.ijpay.com
dashboard_port = 9999
dashboard_user = IJPay
dashboard_pwd = IJPay
log_file = ./frps.log
log_level = info
log_max_days = 3

启动服务端 nohup ./frps -c ./frps.ini & 或者写一个start.sh的脚本

#!/bin/sh
nohup ./frps -c ./frps.ini &

2、客户端配置

frp 客户端配置 frpc.ini

#http://frp.game.ijpay.com
[common]
server_addr = 服务器IP地址
server_port = 7000
privilege_token = javen

[download]
type = http
local_port = 13888
subdomain = download

客户端启动命令 ./frpc -c ./frpc.ini

这样就把本地http://127.0.0.1:13888/download 访问到的资源映射到了外网可以访问的 http://download.frp.game.ijpay.com/download

博客侧边栏有游戏开发交流群欢迎加入

到这里就介绍完了，个人能力有限如有错误欢迎指正，如有遗漏欢迎补充。欢迎一起交流讨论。