Evaluation of Huawei Cloud Yunyao Cloud Server L instance | Deploying the battle-city tank battle game on the Yunyao Cloud Server L instance

I. Introduction

1.1 Introduction to Yunyao Cloud Server L instance

Yunyao cloud server L instance is a new generation of lightweight application cloud server, specially designed for small and medium-sized enterprises and developers, providing out-of-the-box convenience. Yunyao cloud server L instances provide rich and strictly selected application images, which can deploy applications with one click, which greatly simplifies the process for customers to build e-commerce websites, web applications, small programs, learning environments, and various development and testing tasks in the cloud. process.

1.2 Introduction to the battle-city tank battle game

"Battle City Remake" is a remake of the classic game "Tank City". Like the original game, players need to control tanks to destroy enemies and protect the base. The game provides a variety of levels and a variety of enemies, and also adds more elements and features, such as new props, different types of tanks, and more game modes. In addition, the visual effects of the game have also been upgraded, using more modern graphics and sound effects, allowing players to experience the classic moments of tank battles.

2. Introduction to this practice

2.1 Introduction to this practice

1. This practice is a personal test learning environment, aiming to quickly deploy applications. Please be cautious in the production environment;
2. This practice environment is a Yunyao Cloud Server L instance, and the application image used is Portainer 2.18.4;
3. In the cloud Deploy the battle-city tank battle mini game on the Yaoyun server L instance.

2.2 This environmental planning

server class	application image	Intranet IP address	Docker version	Portainer version
Yunyao cloud server L instance	Docker Visual Portainer	192.168.0.168	24.0.4	2.18.4

3. Purchase Yunyao Cloud Server L instance

3.1 Log in to HUAWEI CLOUD

Log in to your personal HUAWEI CLOUD account, enter Yunyao Cloud Server L instance in the search bar, press Enter to confirm, and enter the Yunyao Cloud Server L instance details page.

3.2 Purchase Yunyao Cloud Server L instance

On the Yunyao Cloud Server L instance details page, click Purchase.

Region: North China—Beijing 4;
Application Image: Docker Visualization-Portainer;
Instance Specifications: 2 Cores 2G/System Disk 40G/Peak Bandwidth 3Mbps/Traffic Package 400G;
Instance Name: You can customize it, edit it here as HECS-L-Portainer ;
Purchase duration: 1 month;

• Check configuration and confirm purchase.

3.3 View Yunyao Cloud Server L instance status

Check the status of the purchased Yunyao Cloud Server L instance, which is in normal operation.

3.4 Reset server password

Click to remotely log in to Yunyao Cloud Server L instance

To reset the password, click the reset password option on the right, and identity verification is required. After selecting mobile phone verification, the password can be reset successfully.

4. Check the server environment

4.1 Check the elastic public IP address

• Copy the elastic public IP address and use it when connecting to the server remotely.

4.2 Xshell connects to the server

In the Xshell tool, fill in the server’s elastic public network IP address, account and password information, and connect to the remote server with ssh.

4.3 Check the operating system version

• Check operating system version

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

• check kernel version

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

4.4 Check if node.js is installed

Check whether node.js is installed on the server. The Portainer application image of Yunyao Cloud Server L instance does not have the node.js environment installed by default.

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

5. Install the Node.js environment

5.1 Download the Node.js installation package

Download the Node.js installation package

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

5.2 Unzip the Node.js installation package

Unzip the Node.js installation package

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

5.3 Copying binaries

Copy the binary files under /root/node-v16.17.0-linux-x64/bin/ to /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

5.4 Configure environment variables

• In the /etc/profile file, add the following two lines:

vim /etc/profile

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

• Make the variable effective

source /etc/profile

5.5 Check node version

Check node and npm versions

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

5.6 Install yarn tool

• Install yarn globally using npm

 npm install -g yarn

• Check yarn version

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

6. Download the battle-city source package

6.1 Download battle-city source code package

The battle-city project source code address is: https://github.com/shinima/battle-city

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

6.2 View source code directory

View source directory

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

7. Deploy battle-city tank battle mini-game

7.1 Install related dependencies

• Enter the source code directory

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

• Install related dependencies

yarn install

7.2 Turn on webpack-dev-serve

• Start the game service using the following command

yarn start

7.4 Local browser access

• Re-open a terminal, and access the battle-city tank war mini-game with a local browser, access address: http://127.0.0.1:8080

 curl 127.0.0.1:8080

8. External access to the battle-city tank battle mini-game

8.1 Release security group ports

On the security group management page of Yunyao Cloud Server L instance, allow port 80 of the web service in the inbound direction.

8.2 Install apache

• Update software source

apt update

Install apache software

apt install apache2 -y

8.3 Package production version

Use the following command to package the production version, and the package output is under the dist/ folder.

yarn build

8.4 Copy website files

Copy the contents of the dist/ directory in the source code directory to /var/www/html

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

8.5 Start the apache service

• The Portainer application image of Yunyao Cloud Server L instance has nginx service installed by default, which will conflict with Apache's 80, and the nginx service needs to be stopped.

systemctl stop nginx && systemctl disable nginx

• Start apache service

systemctl start apache2 && systemctl enable apache2

8.6 Browser access to the battle-city tank battle game

Access address: http://elastic public IP,
just replace the IP address with the IP address of your own server.

Appropriately adjust the browser's zoom ratio (set to 200% zoom under 1080P) to get the best gaming experience.