华为云云服务器评测｜在云耀云服务器L实例上部署battle-city坦克大战小游戏

一、前言

1.1 云耀云服务器L实例简介

云耀云服务器L实例是新一代的轻量应用云服务器，专门为中小企业和开发者打造，提供开箱即用的便利性。云耀云服务器L实例提供丰富且经过严格挑选的应用镜像，可以一键部署应用，极大地简化了客户在云端构建电商网站、Web应用、小程序、学习环境以及各类开发测试等任务的过程。

1.2 battle-city坦克大战小游戏简介

《坦克大战复刻版》（Battle City Remake）是一款基于经典游戏《坦克大战》制作的复刻版游戏。与原版游戏一样，玩家需要控制坦克消灭敌人并保护基地。游戏提供了多种关卡和各种不同的敌人，同时还加入了更多的元素和特点，如新的道具、不同类型的坦克和更多的游戏模式等。此外，游戏的视觉效果也进行了升级，使用了更现代的图形和音效，让玩家一起领略到坦克大战的经典瞬间。

二、本次实践介绍

2.1 本次实践简介

1.本次实践为个人测试学习环境，旨在快速部署应用，生产环境请谨慎；
2.本次实践环境为云耀云服务器L实例，使用的应用镜像为Portainer 2.18.4；
3.在云耀云服务器L实例上部署battle-city坦克大战小游戏。

2.2 本次环境规划

三、购买云耀云服务器L实例

3.1 登录华为云

登录个人华为云账号，在搜索栏输入云耀云服务器L实例，按回车键确认，进入云耀云服务器L实例详情页。

3.2 购买云耀云服务器L实例

在云耀云服务器L实例详情页，点击购买。

区域：华北—北京四；
应用镜像：Docker可视化-Portainer；
实例规格：2核2G/系统盘40G/峰值带宽 3Mbps/流量包400G；
实例名称：自定义即可，这里编辑为HECS-L-Portainer；
购买时长：1个月；

• 检查配置，确认购买。

3.3 查看云耀云服务器L实例状态

查看购买的云耀云服务器L实例状态，处在正常运行中。

3.4 重置服务器密码

点击远程登录云耀云服务器L实例

重置密码，点击右侧的重置密码选项，需要进行身份验证，选择手机验证后，即可重置密码成功。

四、检查服务器环境

4.1 查看弹性公网IP地址

• 复制弹性公网IP地址，远程连接服务器时使用。

4.2 Xshell连接服务器

在Xshell工具中，填写服务器弹性公网IP地址、账号密码信息，ssh连接远程服务器。

4.3 检查操作系统版本

• 检查操作系统版本

root@hcss-ecs-f91c:~# cat /etc/os-release
PRETTY_NAME="Ubuntu 22.04.1 LTS"
NAME="Ubuntu"
VERSION_ID="22.04"
VERSION="22.04.1 LTS (Jammy Jellyfish)"
VERSION_CODENAME=jammy
ID=ubuntu
ID_LIKE=debian
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
UBUNTU_CODENAME=jammy
1
2
3
4
5
6
7
8
9
10
11
12
13

• 检查内核版本

root@hcss-ecs-f91c:~# uname -r
5.15.0-60-generic
1
2

4.4 检查是否安装node.js

检查服务器是否安装node.js，云耀云服务器L实例的Portainer应用镜像默认没有安装node.js环境。

root@hcss-ecs-f91c:~# node -v
Command 'node' not found, but can be installed with:
apt install nodejs
1
2
3

五、安装Node.js 环境

5.1 下载Node.js安装包

下载Node.js安装包

wget https://nodejs.org/dist/v16.17.0/node-v16.17.0-linux-x64.tar.xz
1

5.2 解压Node.js安装包

解压Node.js安装包

tar -xvJf node-v16.17.0-linux-x64.tar.xz
1

5.3 复制二进制文件

将 /root/node-v16.17.0-linux-x64/bin/下的二进制文件复制到/usr/local/bin下

cp -a /root/node-v16.17.0-linux-x64/bin/node /usr/local/bin/node
cp -a /root/node-v16.17.0-linux-x64/bin/npm /usr/local/bin/npm
1
2

5.4 配置环境变量

• 在/etc/profile文件中，新增以下两行：

vim /etc/profile
1

export NODE_HOME=/root/node-v16.17.0-linux-x64/bin/
export PATH=$PATH:$NODE_HOME:/usr/local/bin/

1
2
3

• 使变量生效

source /etc/profile
1

5.5 查看node版本

检查node和npm版本

root@hcss-ecs-f91c:~# npm -v
8.15.0
root@hcss-ecs-f91c:~# node -v
v16.17.0
1
2
3
4

5.6 安装yarn工具

• 使用npm全局安装yarn

 npm install -g yarn
1

• 检查yarn版本

root@hcss-ecs-f91c:~# yarn -v
1.22.19
1
2

六、下载battle-city源码包

6.1 下载battle-city源码包

battle-city项目源码地址为：https://github.com/shinima/battle-city

git clone https://github.com/shinima/battle-city.git
1

6.2 查看源码目录

查看源码目录

root@hcss-ecs-f91c:~# tree -L 2 ./battle-city/
./battle-city/
├── app
│   ├── ai
│   ├── App.tsx
│   ├── battle-city.css
│   ├── components
│   ├── hocs
│   ├── index.html
│   ├── main.tsx
│   ├── polyfills.ts
│   ├── reducers
│   ├── sagas
│   ├── stages
│   ├── types
│   └── utils
├── build
│   ├── 0.1.5
│   ├── 0.2.0
│   └── 0.3.0
├── custom-tyings.d.ts
├── devConfig.js
├── docs
│   ├── AI-design.md
│   ├── imgs
│   ├── journal.md
│   ├── other.md
│   └── values
├── LICENSE
├── package.json
├── readme.md
├── resources
│   ├── favicon.ico
│   ├── General-Sprites.png
│   └── Miscellaneous.png
├── sound
│   ├── bullet_hit_1.ogg
│   ├── bullet_hit_2.ogg
│   ├── bullet_shot.ogg
│   ├── explosion_1.ogg
│   ├── explosion_2.ogg
│   ├── game_over.ogg
│   ├── pause.ogg
│   ├── powerup_appear.ogg
│   ├── powerup_pick.ogg
│   ├── stage_start.ogg
│   └── statistics_1.ogg
├── tsconfig.json
├── webpack.config.js
└── yarn.lock

18 directories, 30 files
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

七、部署battle-city坦克大战小游戏

7.1 安装相关依赖

• 进入源码目录

root@hcss-ecs-f91c:~# cd battle-city/
root@hcss-ecs-f91c:~/battle-city# ls
app  build  custom-tyings.d.ts  devConfig.js  docs  LICENSE  package.json  readme.md  resources  sound  tsconfig.json  webpack.config.js  yarn.lock
1
2
3

• 安装相关依赖

yarn install
1

7.2 开启webpack-dev-serve

• 使用以下命令启动游戏服务

yarn start
1

7.3 本地浏览器访问

• 重开一个终端，本地访问battle-city坦克大战小游戏，访问地址：http://127.0.0.1:8080

 curl 127.0.0.1:8080
1

八、外部访问battle-city坦克大战小游戏

8.1 放行安全组端口

在云耀云服务器L实例的安全组管理页面，在入方向上放行web服务的80端口。

8.2 安装apache

• 更新软件源

apt update
1

安装apache软件

apt install apache2 -y
1

8.3 打包生产版本

使用以下命令来打包生产版本，打包输出在 dist/ 文件夹下。

yarn build
1

8.4 拷贝网站文件

将源码目录中的 dist/目录下内容拷贝到/var/www/html下

cp -r ./dist/* /var/www/html/
1

8.5 启动apache服务

• 云耀云服务器L实例的Portainer应用镜像默认已安装nginx服务，会与apache的80端口冲突，需要停止nginx服务。

systemctl stop nginx && systemctl disable nginx
1

• 启动apache服务

systemctl start apache2 && systemctl enable apache2
1

8.6 浏览器访问battle-city坦克大战小游戏

访问地址：http://弹性公网IP，
将IP地址替换为自己服务器的IP地址即可。

适当调整浏览器的缩放比例（1080P 下设置为 200% 缩放），以获得最好的游戏体验。