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

news2024/12/24 19:33:41

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

  • 一、前言
    • 1.1 云耀云服务器L实例简介
    • 1.2 battle-city坦克大战小游戏简介
  • 二、本次实践介绍
    • 2.1 本次实践简介
    • 2.2 本次环境规划
  • 三、购买云耀云服务器L实例
    • 3.1 登录华为云
    • 3.2 购买云耀云服务器L实例
    • 3.3 查看云耀云服务器L实例状态
    • 3.4 重置服务器密码
  • 四、检查服务器环境
    • 4.1 查看弹性公网IP地址
    • 4.2 Xshell连接服务器
    • 4.3 检查操作系统版本
    • 4.4 检查是否安装node.js
  • 五、安装Node.js 环境
    • 5.1 下载Node.js安装包
    • 5.2 解压Node.js安装包
    • 5.3 复制二进制文件
    • 5.4 配置环境变量
    • 5.5 查看node版本
    • 5.6 安装yarn工具
  • 六、下载battle-city源码包
    • 6.1 下载battle-city源码包
    • 6.2 查看源码目录
  • 七、部署battle-city坦克大战小游戏
    • 7.1 安装相关依赖
    • 7.2 开启webpack-dev-serve
    • 7.4 本地浏览器访问
  • 八、外部访问battle-city坦克大战小游戏
    • 8.1 放行安全组端口
    • 8.2 安装apache
    • 8.3 打包生产版本
    • 8.4 拷贝网站文件
    • 8.5 启动apache服务
    • 8.6 浏览器访问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 本次环境规划

服务器类别应用镜像内网IP地址Docker版本Portainer版本
云耀云服务器L实例Docker可视化Portainer192.168.0.16824.0.42.18.4

三、购买云耀云服务器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
  • 检查内核版本
root@hcss-ecs-f91c:~# uname -r
5.15.0-60-generic

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

五、安装Node.js 环境

5.1 下载Node.js安装包

下载Node.js安装包

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

在这里插入图片描述

5.2 解压Node.js安装包

解压Node.js安装包

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

在这里插入图片描述

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

5.4 配置环境变量

  • 在/etc/profile文件中，新增以下两行：
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

5.5 查看node版本

检查node和npm版本

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

5.6 安装yarn工具

  • 使用npm全局安装yarn
 npm install -g yarn

在这里插入图片描述

  • 检查yarn版本
root@hcss-ecs-f91c:~# yarn -v
1.22.19

六、下载battle-city源码包

6.1 下载battle-city源码包

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

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

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

七、部署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
  • 安装相关依赖
yarn install

在这里插入图片描述

7.2 开启webpack-dev-serve

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

在这里插入图片描述

7.4 本地浏览器访问

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

在这里插入图片描述

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

8.1 放行安全组端口

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

在这里插入图片描述
在这里插入图片描述

8.2 安装apache

  • 更新软件源
apt update

安装apache软件

apt install apache2 -y

8.3 打包生产版本

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

yarn build

在这里插入图片描述

8.4 拷贝网站文件

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

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

8.5 启动apache服务

  • 云耀云服务器L实例的Portainer应用镜像默认已安装nginx服务，会与apache的80冲突，需要停止nginx服务。
systemctl stop nginx && systemctl disable nginx
  • 启动apache服务
systemctl start apache2 && systemctl enable apache2

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

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

在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/985333.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

八种十倍提升API性能的方式

八种十倍提升API性能的方式

提起API，作为程序员来说并不陌生，很多程序员的大部分工作都是围绕着它， 然而，有些内容被大家忽略，API的性能会直接影响产品的用户体验，比如，一个视频软件，播放1s后需要加载5s&#x…
阅读更多...
Android 状态栏显示运营商名称

Android 状态栏显示运营商名称

Android 原生设计中在锁屏界面会显示运营商名称，用户界面中，大概是基于 icon 数量长度显示考虑，对运营商名称不作显示。但是国内基本都加上运营商名称。对图标显示长度优化基本都是：缩小运营商字体、限制字数长度、信号图标压缩上…
阅读更多...
SAM论文翻译

SAM论文翻译

文章目录 Abstract1、Introduction2、Related Work3、Methodology3.1、Semantic Graph3.2、Semantic Aware Module3.3、Decoder3.4、Loss Function 4、Experiments4.1、Datasets4.2、Implementation Details4.3、Evaluation Protocol4.4、Comparison with State-of-the-Art 论文…
阅读更多...
SpringBoot粗浅分析

SpringBoot粗浅分析

应用分析 1、依赖管理机制 在springBoot项目中，导入starter-web所有想换依赖都会被导入，甚至不用去规定它们的版本号。它是根据Maven的依赖传递原则来设置，只需要导入场景启动器，场景启动器自动把这个场景的所有核心依赖全部导入…
阅读更多...
对极几何与三角化求3D空间坐标

对极几何与三角化求3D空间坐标

一&#xff0c;使用对极几何约束求R,T 第一步&#xff1a;特征匹配。提取出有效的匹配点 void find_feature_matches(const Mat &img_1, const Mat &img_2,std::vector<KeyPoint> &keypoints_1,std::vector<KeyPoint> &keypoints_2,std::vector&l…
阅读更多...
管理类联考——数学——汇总篇——知识点突破——数据分析——计数原理——减法原理除法原理

管理类联考——数学——汇总篇——知识点突破——数据分析——计数原理——减法原理除法原理

减法原理 正面难则反着做(“ − - −”号) 【思路】当出现“至少、至多”、“否定用语"等正面较难分类的题目&#xff0c;可以采用反面进行求解&#xff0c;注意部分反面的技巧以及“且、或"的反面用法。 除法原理 看到相同&#xff0c;定序用除法消序( “ &quo…
阅读更多...
JavaScript中点号运算符与方括号运算符

JavaScript中点号运算符与方括号运算符

这篇文章将介绍如何在对象中获取数据、修改数据。在JavaScript中&#xff0c;点号运算符和方括号运算符都可以用于访问对象的属性。 我们还是使用上节课的代码来演示 const ITshareArray { firstname: “张三”, secondname: “二愣子”, age: 2033-1997, job: “程序员”, fr…
阅读更多...
自动化运维——ansible (五十二) （01）

自动化运维——ansible (五十二) （01）

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 一、概述 1.1 为什么要用自动化运维软件 1.2 自动化运维 1.3 自动化运维要注意的方面 1.4 自动化运维主要关注的方面 1.5 常见的开源自动化运维软件 1.6 自动化运维软件…
阅读更多...
Debian11安装MySQL8.0，链接Navicat

Debian11安装MySQL8.0，链接Navicat

图文小白教程 1 下载安装MySQL1.1 从MySQL官网下载安装文件1.2 安装MySQL1.3 登录MySQL 2 配置Navicat远程访问2.1 修改配置2.2 Navicat 连接 end: 卸载 MySQL 记录于2023年9月&#xff0c;Debian11 、 MySQL 8.0.34 1 下载安装MySQL 1.1 从MySQL官网下载安装文件 打开 MySQ…
阅读更多...
Unity 之 利用数组来管理资源

Unity 之 利用数组来管理资源

文章目录 在Unity中&#xff0c;资源数组&#xff08;Resource Arrays&#xff09;不是Unity的标准概念。然而&#xff0c;您可能在特定上下文中使用数组来管理资源或游戏对象。我将解释如何在Unity中使用数组来管理资源。 资源管理&#xff1a; 在Unity中&#xff0c;资源通常…
阅读更多...
9.7 C高级day2 作业

9.7 C高级day2 作业

#!/bin/bash mkdir ~/dir mkdir ~/dir/dir1 mkdir ~/dir/dir2 cp ./* ~/dir/dir1 -r cp ./*.sh ~/dir/dir2 cd ~/dir tar -cJf dir2.tar.xz dir2 mv dir2.tar.xz dir1 cd tar -xJf dir/dir1/dir2.tar.xz -C dir/dir1 tree ~/dir
阅读更多...
阿里云2核2G云服务器租用价格表_一年费用_1个月和1小时收费

阿里云2核2G云服务器租用价格表_一年费用_1个月和1小时收费

阿里云2核2G服务器多少钱一年&#xff1f;108元一年&#xff0c;折合9元一个月&#xff0c;配置为2核CPU、2G内存、3M带宽、50GB高效云盘的轻量应用服务器&#xff0c;如果是云服务器ECS&#xff0c;2核2G配置可以选择ECS通用算力型u1实例、突发性能实例t6和t5实例、密集计算型…
阅读更多...
接口响应成功未有预期结果排查

接口响应成功未有预期结果排查

最近开发中遇到一个问题&#xff0c;有一个新增接口&#xff0c;请求该接口时响应200但查询相关数据未有预期的数据&#xff0c;且日志中没有任何报错或警告&#xff1b;一般来说响应200认为是成功&#xff0c;但是结果却不符合事实&#xff1b;此时无外乎几种情况&#xff1a;…
阅读更多...
DQN算法概述及基于Pytorch的DQN迷宫实战代码

DQN算法概述及基于Pytorch的DQN迷宫实战代码

一. DQN算法概述 1.1 算法定义 Q-Learing是在一个表格中存储动作对应的奖励值&#xff0c;即状态-价值函数Q(s,a)&#xff0c;这种算法存在很大的局限性。在现实中很多情况下&#xff0c;强化学习任务所面临的状态空间是连续的&#xff0c;存在无穷多个状态&#xff0c;这种情…
阅读更多...
D361周赛复盘：模拟分割整数⭐+变为整除的最小次数⭐

D361周赛复盘：模拟分割整数⭐+变为整除的最小次数⭐

文章目录 2843.统计对称整数的数目&#xff08;模拟&#xff0c;分割整数为两部分&#xff09;思路1.整数换成字符串版本2.直接用整数的版本 2844.生成特殊数字的最小操作(模拟&#xff0c;x能被Num整除的条件)思路完整版 2843.统计对称整数的数目&#xff08;模拟&#xff0c;…
阅读更多...
4.矩阵的几何意义、变基与迹

4.矩阵的几何意义、变基与迹

文章目录 变基操作与矩阵矩阵的迹几何意义矩阵迹的几条性质 欢迎访问个人网络日志&#x1f339;&#x1f339;知行空间&#x1f339;&#x1f339; 变基操作与矩阵 我们知道空间中一点的坐标可以表示以原点为起点以该点为终点的向量。 以二维平面为例&#xff0c;如下图 选取…
阅读更多...
D1. Too Many Segments (easy version)

D1. Too Many Segments (easy version)

题目&#xff1a;样例1&#xff1a; 输入 7 2 11 11 9 11 7 8 8 9 7 8 9 11 7 9输出 3 1 4 7 样例2&#xff1a; 输入 5 1 29 30 30 30 29 29 28 30 30 30输出 3 1 2 4 样例3&#xff1a; 输入 6 1 2 3 3 3 2 3 2 2 2 3 2 3输出 4 1 3 5 6 思路&#xff1a; 这里数据范围是…
阅读更多...
React 全栈体系（四）

React 全栈体系（四）

第二章 React面向组件编程 六、组件的生命周期 1. 效果 需求:定义组件实现以下功能&#xff1a; 让指定的文本做显示 / 隐藏的渐变动画从完全可见&#xff0c;到彻底消失&#xff0c;耗时2S点击“不活了”按钮从界面中卸载组件 <!DOCTYPE html> <html lang"e…
阅读更多...
AlexNet 06

AlexNet 06

一、发展 1989年&#xff0c;Yann LeCun提出了一种用反向传导进行更新的卷积神经网络&#xff0c;称为LeNet。 1998年&#xff0c;Yann LeCun提出了一种用反向传导进行更新的卷积神经网络&#xff0c;称为LeNet-5 AlexNet&#xff0c;VGG&#xff0c;GoogleNet&#xff0c;R…
阅读更多...
863. 二叉树中所有距离为 K 的结点

863. 二叉树中所有距离为 K 的结点

863. 二叉树中所有距离为 K 的结点 C代码&#xff1a;dfs /*** struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/typedef struct {int key;struct TreeNode* node;UT_hash_handle hh; } HashTable;HashTable* head; int* ans…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023