云耀云服务器

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

服务器入口

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

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

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

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

费用详情

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

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

https://activity.huaweicloud.cn/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命令，可以查看容器启动情况

下载 tdesign-react-starter 项目

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

TDesign React Starter 是一个基于 tdesign-react，使用 React、Vite2开发，可进行个性化主题配置，旨在提供项目开箱即用的、配置式的中后台项目。

GitHub 地址为：https://github.com/Tencent/tdesign-react-starter

使用git clone命令拉取项目

git clone https://github.com/Tencent/tdesign-react-starter.git

搭建npm环境

要编译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

编译 tdesign-react-starter

首先，进入 tdesign-react-starter 目录，使用npm install 命令安装依赖

安装好后，可以发现多了两个文件，分别是node_modules和package-lock.json

然后进行构建

• 构建正式环境 npm run build
• 构建测试环境 npm run build:test

（我这里使用的是构建测试环境的命令）

从网页上进行访问

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

构建好后，使用 curl 命令测试是否部署成功

curl -i -I -s http://localhost:8080/test/tdesign-react-starter/dist/index.html

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

使用网页访问，发现是“白屏”，使用F12打开“开发者工具”，发现它内部引用assets目录下的资源都是写死在webapps下的assets目录

解决办法是，将dist/assets目录复制到tomact的webapps目录下，命令如下

docker cp /root/test/tdesign-react-starter/dist/assets mytomcat:/usr/local/tomcat/webapps/

复制完成后，可以使用如下命令查看docker 容器内的文件

docker container exec mytomcat ls /usr/local/tomcat/webapps

可以看到，文件夹复制成功。然后再次刷新网页，可以看到网站已经能正常显示了

总结

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

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

除了购买流程，HECS的部署方式都跟传统ECS是一样的（因为它里面的系统还是centos7）。本文在部署时，还遇到了一个问题，借此机会教大家怎么使用F12开发者工具对问题进行排查和解决，读者在今后的开发过程中，一定要有分析和解决问题的想法和思路。如果实在有无法解决的，可以在华为云论坛上提问，论坛地址为：https://bbs.huaweicloud.cn

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