云耀云服务器L实例是新一代的轻量应用云服务器，专门为中小企业和开发者打造，提供开箱即用的便利性。云耀云服务器L实例提供丰富且经过严格挑选的应用镜像，可以一键部署应用，极大地简化了客户在云端构建电商网站、Web应用、小程序、学习环境以及各类开发测试等任务的过程。
《坦克大战复刻版》（Battle City Remake）是一款基于经典游戏《坦克大战》制作的复刻版游戏。与原版游戏一样，玩家需要控制坦克消灭敌人并保护基地。游戏提供了多种关卡和各种不同的敌人，同时还加入了更多的元素和特点，如新的道具、不同类型的坦克和更多的游戏模式等。此外，游戏的视觉效果也进行了升级，使用了更现代的图形和音效，让玩家一起领略到坦克大战的经典瞬间。
1.本次实践为个人测试学习环境，旨在快速部署应用，生产环境请谨慎；
2.本次实践环境为云耀云服务器L实例，使用的应用镜像为Portainer 2.18.4；
3.在云耀云服务器L实例上部署battle-city坦克大战小游戏。
| 服务器类别 | 应用镜像 | 内网IP地址 | Docker版本 | Portainer版本 |
|---|---|---|---|---|
| 云耀云服务器L实例 | Docker可视化Portainer | 192.168.0.168 | 24.0.4 | 2.18.4 |
登录个人华为云账号，在搜索栏输入云耀云服务器L实例，按回车键确认，进入云耀云服务器L实例详情页。
在云耀云服务器L实例详情页，点击购买。
区域：华北—北京四；
应用镜像：Docker可视化-Portainer；
实例规格：2核2G/系统盘40G/峰值带宽 3Mbps/流量包400G；
实例名称：自定义即可，这里编辑为HECS-L-Portainer；
购买时长：1个月；
查看购买的云耀云服务器L实例状态，处在正常运行中。
点击远程登录云耀云服务器L实例
重置密码，点击右侧的重置密码选项，需要进行身份验证，选择手机验证后，即可重置密码成功。
在Xshell工具中，填写服务器弹性公网IP地址、账号密码信息，ssh连接远程服务器。
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
root@hcss-ecs-f91c:~# uname -r
5.15.0-60-generic
检查服务器是否安装node.js，云耀云服务器L实例的Portainer应用镜像默认没有安装node.js环境。
root@hcss-ecs-f91c:~# node -v
Command 'node' not found, but can be installed with:
apt install nodejs
下载Node.js安装包
wget https://nodejs.org/dist/v16.17.0/node-v16.17.0-linux-x64.tar.xz
解压Node.js安装包
tar -xvJf node-v16.17.0-linux-x64.tar.xz
将 /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
vim /etc/profile
export NODE_HOME=/root/node-v16.17.0-linux-x64/bin/
export PATH=$PATH:$NODE_HOME:/usr/local/bin/
source /etc/profile
检查node和npm版本
root@hcss-ecs-f91c:~# npm -v
8.15.0
root@hcss-ecs-f91c:~# node -v
v16.17.0
npm install -g yarn
root@hcss-ecs-f91c:~# yarn -v
1.22.19
battle-city项目源码地址为：https://github.com/shinima/battle-city
git clone https://github.com/shinima/battle-city.git
查看源码目录
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
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
yarn install
yarn start
curl 127.0.0.1:8080
在云耀云服务器L实例的安全组管理页面，在入方向上放行web服务的80端口。
apt update
安装apache软件
apt install apache2 -y
使用以下命令来打包生产版本，打包输出在 dist/ 文件夹下。
yarn build
将源码目录中的 dist/目录下内容拷贝到/var/www/html下
cp -r ./dist/* /var/www/html/
systemctl stop nginx && systemctl disable nginx
systemctl start apache2 && systemctl enable apache2
访问地址：http://弹性公网IP，
将IP地址替换为自己服务器的IP地址即可。
适当调整浏览器的缩放比例（1080P 下设置为 200% 缩放），以获得最好的游戏体验。
