AppBazaar

访问个人开发者专属集市 https://console.huaweicloud.com/appbazaar/home?region=cn-north-4

黑白棋对战游戏

其中“黑白棋对战游戏”的链接为 https://console.huaweicloud.com/appbazaar/detail?region=cn-north-4&id=0eb1560e238c11eda978fa163ee3414f&type=1

文档

黑白棋对战游戏是用Cocos Creator开发的Web游戏，实现了双人连线对战等功能，主要开发语言是TypeScript和JavaScript，分为前端和后端两个服务。本方案使用华为云DevCloud构建黑白棋应用，并最终部署到Windows系统的华为云ECS上

商品介绍

• 项目名称：黑白棋对战游戏
• 项目简介：一个用Cocos Creator开发的Web游戏，实现了双人连线对战等功能。
• 开发语言：TypeScript（83.6%）、JavaScript（7.3%）、CSS（5.4%）、HTML（3.7%）
• 部署环境：Windows Server 2012、Nodejs

购买

点击“立即购买”，然后提交订单，然后确认付款

在买家中心https://console.huaweicloud.com/appbazaar/buyer-center?region=cn-north-4
可以查看到该笔订单

下载更详细的文档

前面通过appbazaar查看的在线文档只有两部分

• 商品介绍
• 应用预览

因此，如果想要更详细的了解“黑白棋游戏”的部署步骤，可以下载文档进行查看

文档总共有29页，详尽的描述了每一个的开发步骤

操作流程

整体操作流程为：代码 -> 构建 -> 发布库 -> 部署 -> ECS

创建项目

首先，进入华为云官网：https://www.huaweicloud.com/

依次选择 “产品”->“开发与运维”->“软件开发平台 DevCloud”

点击“免费试用”或者“管理控制台”，进入“DevCloud 控制台”界面

点击右上角的“新建项目”

然后选择 Scrum(迭代式增量软件开发过程，敏捷开发)

至于什么是Scrum(迭代式增量软件开发过程，敏捷开发)，华为云也提供了相应的文档，点击“了解更多”可以进行查看

文档地址为：https://support.huaweicloud.com/usermanual-projectman/projetcman_ug_0000.html

输入如下内容

• 项目名称：福州司马懿的黑白棋
• 项目代号：Anti_reversi
• 项目描述：黑白棋，又叫翻转棋（Reversi）、奥赛罗棋（Othello）、苹果棋或正反棋（Anti reversi）。黑白棋在西方和日本很流行。游戏通过相互翻转对方的棋子，最后以棋盘上谁的棋子多来判断胜负。它的游戏规则简单，因此上手很容易，但是它的变化又非常复杂。有一种说法是：只需要几分钟学会它，却需要一生的时间去精通它。

点击确定后，会进入DevCloud的工作项列表

创建代码仓库

在左侧列表中依次选择“代码”->“代码托管”

展开“普通新建”—>“导入外部仓库”

填写外部仓库信息

仓库源地址在文档中有：https://codehub.devcloud.cn-north-4.huaweicloud.com/yxdmmsymbgl00001/ReversiOnline_Client.git

注意：该git地址是无法通过浏览器直接访问的

填写内容如下

• 源仓库情况：git https://codehub.devcloud.cn-north-4.huaweicloud.com/yxdmmsymbgl00001/ReversiOnline_Client.git
• 源仓库访问权限：不需要密码

创建仓库

创建客户端仓库

创建仓库时填写如下内容，其余默认即可

• 仓库名称：ReversiOnline_Client
• 描述：在线黑白棋客户端

注意：我做了个测试发现，仓库名称不能用中文，如上图

都填好后，点击确定。这样客户端仓库就创建好了

创建服务端仓库

同上操作，创建服务端仓库

源仓库地址为 https://codehub.devcloud.cn-north-4.huaweicloud.com/yxdmmsymbgl00001/ReversiOnline_Server.git

注意：url中如果有换行符，虽然看起来正常，但是会报错（从pdf复制的时候要注意）

创建仓库时填写如下内容，其余默认即可

• 仓库名称：ReversiOnline_Server
• 描述：在线黑白棋服务端

客户端和服务端的代码仓库都导入了，那这个环节就算完成了。

备注：左下角显示时钟，来自火狐浏览器的“时钟”插件

编译构建（以客户端为例，服务端类似）

在此环节，需要为两个代码仓库分别创建构建任务。下面先构建客户端，再构建服务端

在左侧选择“构建&制品”—>“编译构建”，然后点击“新建任务”按钮

源码选择

新建构建任务，一切默认即可

注意： CodeHub 上创建的 ReversiOnline_Client 代码仓库 master 分支，实际开发中可以根据实际情况自定义选择

构建模板选择“空白模板”

这里，华为DevCloud总共为你提供的模板非常丰富，总共有34种

• Maven
• 发布Maven私有包
• Android APK
• 构建空白模板
• Django
• QuickApp
• Ionic Android App
• Ant
• CMake
• Grails
• Grunt
• gulp
• GNU-ARM
• Go
• MSBuild for Qt
• mono-linux
• 构建方舟编译器
• Maven-容器
• servicestage-maven编译
• PHP
• Bazel
• sbt
• Shell
• npm
• Gradle
• 应用魔方部署任务
• 应用魔方编译构建任务
• DevStar-Maven-容器构建
• DevStar-Npm-容器构建
• DevStar-Python-容器构建
• MSBuild
• Yarn
• PyInstaller
• Setuptools

构建步骤

接下来是构建方式的选择，有“action构建”和“yaml构建”两种方案

• action构建：通过按钮，人工选择，比较直观，适合新手
• yaml构建：采用代码的方式进行构建，适合对配置命令精通的人员

action构建

可选的步骤非常多，也非常全，总共有35种

• 上传软件包到软件发布库（Windows环境）
• 上传软件包到软件发布库
• 执行Shell命令
• Npm构建
• Gradle构建
• 制作镜像并推送到SWR仓库
• Android构建
• Android APK签名
• 执行Docker命令
• APM探针注入到Android App
• Maven构建
• Flutter构建
• Yarn构建
• Msbuild构建
• gulp构建
• grunt构建
• Go语言构建
• CMake构建
• Ant构建
• Android快应用构建
• mono
• Bazel构建
• 上传文件到OBS
• 试用SWR公共镜像
• SetupTool构建
• PyInstaller构建
• Grails构建
• Ionic Android App构建
• PHP构建
• 构建方舟编译器
• Sbt构建
• fortran构建
• Gnu-arm构建
• 下载发布仓库包
• 下载文件管理的文件

本篇制作“黑白棋”，我们只需要添加如下两个步骤即可

1. 执行Shell命令
2. 上传软件包到软件发布库

执行Shell命令

选中“执行Shell命令”卡片，输入如下内容

cd build/web-desktop
sed -i s/server_ip/${server_ip}/g ./src/project.794ab.js
zip -qr ReversiWeb.zip ./

这段脚本的意思是：

1. 先进入 build/web-desktop 目录
2. 将 src/project.794ab.js 中，所有的server_ip字样全部替换为实际服务器IP
3. 解压压缩包ReversiWeb.zip到当前目录

上传软件包到软件发布库

按如下进行配置

• 步骤显示名称：上传软件包到软件发布库
• 构建包路径：build/web-desktop/ReversiWeb.zip
• 发布版本号：(空白)
• 包名：ReversiWeb

然后点击右上角的“新建并执行”，会跳转到构建编译页面

过一会，可以看到已经自动编译完成了，提示：“Finished: SUCCESS”

yaml构建（本次实验暂不使用）

最后返回构建页面

再次“新建任务”，开始构建服务器端

构建服务端

代码仓库选择 ReversiOnline_Server，其它均是默认即可

构建模板选择“空白构建模板”

采用“action构建”方式，跟客户端一样，添加如下两个

1. 执行Shell命令
2. 上传软件包到软件发布库

“执行Shell命令”输入：

• 步骤显示名称：执行shell命令
• 工具版本：shell4.2.46-git1.8.3-zip6.00
• 命令：zip -qr server.zip ./

“上传软件包到软件发布库”输入：

• 步骤显示名称：上传软件包到软件发布库
• 构建包路径：server.zip
• 发布版本号：(空)
• 包名：server

点击右上角的“新建并开始执行”。右上角的小铃铛按钮，能够显示之前所有“业务更变”的通知

至此，服务端构建成功

购买ECS

接下来，要开始购买ECS，执行真实的上云操作了

在左侧列表中选择“设置”—> 通用设置

然后在左侧第二列中选择“主机组管理”—>“新建主机组”

基本信息

填写主机组的基本信息

• 主机组名：Windows_Group
• 操作系统：Windows
• 描述：黑白棋服务器
• 连通性执行主机：默认执行机

主机信息

然后自动跳转到主机信息页面，点击“导入ECS”按钮

由于还未创建ECS，点击“ECS控制台”按钮，进入ECS控制台

在ECS控制台页面，点击右上方的“购买弹性云服务器”购买服务器上云

购买弹性云服务器ECS

基础配置

我们这里是进行测试，因此选择按需购买。如果是生产试用，建议包年
这里CPU和内存也是选择最便宜的，实际测试，建议买好一点，不然用户体验会很卡

• 区域：华北-北京四
• 计费模式：按需计费
• CPU架构：x86计算
• 规格名称：t6.small.1，vCPUs：1vCPUs，内存：1GiB

• 镜像： Windows Server 2012 R2 标准版 64位简体中文(40GB)
• 系统：高IO 40GB

可以看到，上面的费用就需要：

• 配置费用¥0.0796/小时
• 镜像费用¥0.003/小时

网络配置

• 网络：vpc-default（默认即可）
• 安全组：点击配置安全组规则

对“Sys-WebServer”进行“配置规则”

在“入方向规则”处，点击“添加规则”按钮

只要修改“协议端口”为“12001-12002”即可（优先级填1）

添加好后的“入方向规则”如下

回到“网络配置”页面，确保安全组是刚刚修改的“Sys-WebServer”，点击刷新按钮，修改才会被刷新出来

• 弹性公网IP：现在购买（即使是测试，也必须购买才能访问）
• 线路：静态BGP（测试用选便宜的，生产的化建议：全动态BGP）
• 公网带宽：按流量计费
• 带宽大小：1
• 释放行为： 勾选随实例释放

现在的价格是（比刚刚多了一个弹性公网费用）：

• 配置费用¥0.0796/小时
• 弹性公网IP流量费用¥0.64/GB
• 镜像费用¥0.003/小时

高级配置

你可以为云服务器设置任意名称，然后输入密码即可

我这里设置的名字是：ecs-reversi

确认配置

该页面用来核对配置，勾选下协议，云服务器就正式生效了

购买后，返回云服务器列表，就能看到刚刚购买到的主机了

环境准备

本次实验网站部署需要将主机环境进行初始化设置，点击列表右侧的“远程登录”登录主机

本次试用VNC的方式进行登录。进入ECS远程登录界面，点击“Ctrl+Alt+Del”进行登录

注意：所谓的这三个键，是屏幕上的虚拟键。请不要直接按键盘上的这三个键

输入购买主机时设置的密码进行登录 （我买的1核1G内存的主机有点卡，不过还能接受）

教程文档中说，登录后要按 https://support.huaweicloud.com/usermanual-deployman/deployman_hlp_1019.html 指导文档进行主机配置。但是该连接在华为云上已经失效了，我们先跳过，不去管它

导入主机

接下来，返回DevCloud的“主机组管理”页面（要刷新一下，否则可能不会出现刚刚购买的ECS），点击“导入ECS”

可以看到刚刚购买的ECS服务器已经出现在列表中了，点击“导入”

在导入 ECS 页面，按如下参数进行配置

• 用户名：Administrator
• 密码：购买 ECS 时设置的密码
• 端口：5986

可以看到该实例的状态从“未导入”变为“已导入为主机”

点击“连通性验证”按钮，进行主机连通性验证。我这里失败了，猜想是由于刚刚那个文档里无效的链接地址

点击“详情”按钮，查看失败原因。失败原因是“主机连接超时”，我们查看华为云官网为我们提供的解决方案

刚刚链接无效的文档，说的应该就是“主机直连方式”对主机进行的“主机配置”了

文档地址为：https://support.huaweicloud.com/usermanual-deployman/deployman_hlp_1101.html#section1

主机配置

点击主机配置链接后，会打开如下页面

这里我们使用自动化脚本进行配置（脚本右上方可以进行复制）

BUG： 回到刚刚打开的Window，找到“我的文档”，点击左上角的粘贴，把脚本复制进去，结果发现，脚本太长了，根本无法复制进去

打开IE11之后发现，无法触及到地址栏，根本无法搜索。。。突然看到右边有个滚动条，好吧。将自动化脚本地址复制到剪贴板
https://support.huaweicloud.com/usermanual-deployman/deployman_hlp_1095.html

然后粘贴到IE11的地址栏中，点击前往页面，然后复制脚本内容

在找到“我的文档”，新建一个记事本，粘贴进刚刚复制的脚本内容

’

关闭记事本时，会提示你保存内容。但是内容为Unicode格式的，用默认的ANSI可能会丢失数据。直接继续即可

点击“查看”按钮，勾选“文件扩展名”将记事本后缀显示出来

按官方文档说明的，将记事本名字改为“Windows2012ConfigureRemotingForAnsible.ps1”

红框的就是 powershell

打开powershell，进入“Windows2012ConfigureRemotingForAnsible.ps1”脚本所在目录，输入如下命令：

cd .\Documents
.\Windows2012ConfigureRemotingForAnsible.ps1

快捷输入文件名的方法是：先输入文件名首字母，然后回车即可

如果没有报错，接着输入 winrm e winrm/config/listener

若出现HTTPS且Hostname不为空，则表示监听成功，即Windows2012部署环境自动化配置成功。

如果监听命令的返回结果中，Hostname为空，则是因为您的主机无IIS服务和签名证书等信息，需要执行以下脚本。

由于window服务器实在太难搞，选型错误（人家说的对，选择大于努力）。然后说明文档中用到的关键连接失效，导致后续无法正常执行，因此暂告一段落（千万别用windows做服务器，实在太难了 ToT）

(未完待续。。。)

实验心得

1.中断恢复

如果在任一环节中断，去干其它事了。可以直接键入 https://www.huaweicloud.com/devcloud/ 返回DevCloud 首页

然后点击“管理控制台”按钮进入相应的项目即可（华为云会自动保存你之前所有的操作，非常方便）

2.文档链接失效时如何解决

首先，先跳过失效链接的步骤，执行后续流程。像上文中就提到了，Window Server主机配置的文档链接失效了，这里我们先跳过，当后面遇到错误时，华为云会给出错误的详情提示，同时给出相应的文档链接，通过相应的文档，我们就可以找到问题出现的原因和解决方案

例如

刚刚链接无效的文档，说的应该就是“主机直连方式”对主机进行的“主机配置”了

文档地址为：https://support.huaweicloud.com/usermanual-deployman/deployman_hlp_1101.html#section1

3. 服务器的选择

终于明白了为什么服务器极少是Window，大多是Centos了。

因为centos采用命令行的方式

1. 连接操作都很方便
2. 执行脚本也可以在外部终端
3. 复制粘贴直接贴到外部终端即可
4. 现有的优秀的终端很多，且华为自带的终端工具也很优秀

而使用界面的方式很糟心

1. 需要用滚动条上下挪动界面，才能查看到完整的界面
2. 复制的时候也不能用快捷键只能使用它提供的虚拟按键
3. 由于UI界面吃资源，相同配置下，比centos卡很多（诸如我的1CPU，1GB内存，用centos，一点不卡）
4. 等等。。。

【购物节已开启，个人开发者的专属集市AppBazaar来啦（所有商品购物节期间免费体验）】有奖征文火热进行中：https://bbs.huaweicloud.com/blogs/381337
此外，在(https://bbs.huaweicloud.com/activity/suggestion.html)提出您的宝贵建议，标题以【云驻计划-定向征文】开头，还有机会赢取额外奖励。