何为云耀云服务器

云耀云服务器（Hyper Elastic Cloud Server）作为新一代开箱即用、面向轻量应用场景的云服务器产品，助力中小企业和开发者高效便捷地在云端建站、开发测试与学习，一站式配置引导及开箱即用的镜像实现一键应用部署，大大降低了中小企业和开发者的上云门槛及成本。

服务器入口

首先，访问华为云官网 https://www.huaweicloud.com/

然后点开“产品”，然后在左侧面板中点击“计算”，再右侧的详细产品面板中，点击我们本文的主角“云耀云服务器HECS”

记住这个关键词 “简单上云第一步”

（本文的主旨，也是围绕着如何带领大家 快速上云 来展开的）

费用详情

在云耀云服务器HECS主页，点击“立即购买”按钮，即可看到“配置”页面。这里入门级的服务器是65.98/月

如果你是新人（之前从未购买过华为云耀云服务器HECS），那么可以点击下面链接，进入新人优惠专区（由于数量有限，建议每天早上9:30开始抢购，不然可能如下图，都是已售罄状态）

https://activity.huaweicloud.com/free_test/index.html

购买云耀云服务器 HECS

云耀云服务器的购买方式可以说是非常简单

PS：它的前辈ECS那可是足足4页的繁杂的各种选择、配置

它只有4种系统镜像选择

1. Huawei Cloud EulerOS
2. CentOS（我这里选择它，因为搭建服务器主流就是选这个）
3. Ubuntu
4. Windows

配置也只有4种，分别是

1. 入门型
2. 基本型
3. 进阶型
4. 随心购

然后就是“购买时长”和“购买量”，只有一页就完成了所有购买的选项，可谓是非常简洁明了。点击“立即购买”，然后就来到了付款界面

付款后，等待ECS启动即可

开始搭建

连接HECS

启动后，在右下角可以看到弹性公网IP，我这里是使用开源的 Tabby 工具进行连接

Tabby 是一款开源的 shell 连接工具，下载地址也都挂在了 GITHUB 上，其项目地址为：https://github.com/Bill13579/tabby

在release处，下载你对应的版本

然后打开设置，在“配置与连接”处，选择SSH

根据HECS给出的公网IP进行连接

下载并安装Docker

安装命令如下：

curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun

也可以使用国内 daocloud 一键安装命令：

curl -sSL https://get.daocloud.io/docker | sh

上面都是第三方已经帮你封装好的一键安装命令

搭建tomcat镜像

使用 docker search tomcat 可以在dockerHub中搜索，有哪些tomcat相关的镜像

使用如下命令可以在后台运行容器（它会自动检测本地是否存在容器镜像，如果不存在则自动下最新版）

docker run --name mytomcat -p 8080:8080 -v $PWD/test:/usr/local/tomcat/webapps/test -d tomcat

命令说明：

• --name mytomcat 用来给容器取个名字
• -p 8080:8080 将主机的 8080 端口映射到容器的 8080 端口。
• -v$PWD/test:/usr/local/tomcat/webapps/test 将主机中当前目录下的 test 挂载到容器的 /test。
• -d 表示在后台运行

使用docker ps命令，可以查看容器启动情况

下载街机版坦克游戏

使用yum install git命令，下载并安装git

坦克大战游戏，有人已经做好了，并在GITHUB中开源了，地址为：https://github.com/shinima/battle-city

git下载地址为：https://github.com/shinima/battle-city.git

项目说明：

GitHub 仓库的版本是经典坦克大战的复刻版本，基于原版素材，使用 React 将各类素材封装为对应的组件。素材使用 SVG 进行渲染以展现游戏的像素风。此游戏使用网页前端技术进行开发，主要使用 React 进行页面展现，使用 Immutable.js 作为数据结构工具库，使用 redux 管理游戏状态，以及使用 redux-saga/little-saga 处理复杂的游戏逻辑。

我们先进入tomcat容器中的webapps/test映射的test目录，然后使用git下载

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

搭建yarn环境

要编译react项目，首先需要安装npm包。而要安装npm包，首先需要安装nodejs

注意：centos7 目前只能安装nodejs16.x，再往上就安装不了了，会报错

node: /lib64/libm.so.6: version `GLIBC_2.27' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.25' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.28' not found (required by node)
node: /lib64/libstdc++.so.6: version `CXXABI_1.3.9' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.20' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found (required by node)

安装nodejs16.x的代码如下

curl -sL https://rpm.nodesource.com/setup_16.x | bash
yum install -y nodejs

给 npm 设置阿里的下载源

npm config set registry https://registry.npm.taobao.org

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

编译react项目

进入到项目目录，然后运行 yarn install 来安装依赖 （或者使用 npm install）

接着，运行 yarn build 来打包生产版本，打包输出在 dist/ 文件夹下

从网页上进行访问

注意：刚刚git下载的时候，是下载到test目录，然后整个项目都在battle-city的文件夹下面，编译后的文件在dist目录下。所以具体的地址为: test/battle-city/dist/index.html

使用如下命令，可以直接在命令行中查看是否部署成功

curl -i -s -I http://localhost:8080/test/battle-city/dist/index.html

在网页中把localhost替换成公网IP即可访问到刚刚部署的游戏了

总结

对上面的操作步骤做个总结，具体流程如下图

通过上文讲解，可以看到华为云云耀服务器HECS的购买方式真的是非常的简洁，让用户极大限度的把精力都花在了实现具体的部署流程上，大大的提升了整个搭建的效率，简化了用户配置部署的整个流程，而且整体操作都非常简单，体验很棒。

全程只需要8步，就可以将一个react项目部署到HECS了，非常快捷

【玩转“云耀云服务器（HECS）”有奖征文来袭！惊喜大礼包激励等你来拿！】有奖征文第20期正在火热进行中：
https://bbs.huaweicloud.com/blogs/391930