前后端系统部署——前端篇

在华为云耀云服务器L实例上部署前端需要经过以下几个步骤：

首先登录华为云耀云界面：

https://www.huaweicloud.com/product/hecs-light.html

创建华为云耀云服务器L实例账号，购买服务器并登录控制台。

创建华为云耀云服务器L实例。在控制台界面上，选择ECS（云服务器）服务，然后点击创建实例。根据需求选择服务器的地域、可用区、操作系统等配置信息，并设置访问密码。

配置安全组规则。为了保证服务器的安全，需要设置相应的安全规则。在控制台上，选择安全组的配置项，点击“添加规则”按钮并根据需要开放前端所需的端口，如HTTP端口80和HTTPS端口443。

连接云服务器。通过SSH工具，可以使用命令行方式连接到新创建的云服务器。根据操作系统的不同，可以使用不同的SSH工具进行连接（例如Windows系统可以使用PuTTY，Linux和Mac系统可以使用终端窗口）。

上传前端项目代码。将前端项目的代码上传到云服务器上，在控制台中找到文件上传的入口，选择你的前端项目文件，并上传到云服务器指定的目录下。

构建和部署前端应用。运行相关命令，安装项目所需的依赖包，并构建前端应用。然后，将构建后的文件通过Web服务器配置进行部署。

验证部署结果。通过浏览器访问云服务器的公网IP地址或域名，验证前端应用是否成功部署。如果一切顺利，你将能够在浏览器中看到你的前端应用的页面。

下面将展示一个本人所完成的简单项目前端在云服务器上的部署，并通过tomcat实现在其他主机上的访问，以实现web项目的发布。

例如这是一个简单web项目：教室管理系统的idea界面，点击右上方的Maven键

即如图按键

弹出如图页面。

先运行clean清除程序缓存：

清理后如图。

运行package进行打包：

打包后如图。

回到项目界面：

可以看到，多出了一个target文件夹

展开后其中的war后缀文件即为我们需要的web项目war文件

获取war文件后通过Xftp传到华为云服务器中：

首先通过Xshell连接服务器，创建新的目录test，用于存放war文件。

输入指令：

mkdir test

转到Xftp，可以看到test目录创建成功。

通过Xftp将war文件传入test目录下

如图。

此时在bin目录启动tomcat进行测试：

输入指令:./startup.sh

如图，表示Tomcat启动成功

但是此时回到网页，会发现并不能找到该页面

这是由于华为云耀云服务器L实例的安全组设置中未添加该端口。

来到控制台界面：

选择配置安全组——配置规则

点击添加规则，添加新的端口8080，注意设置其优先级为1：

设置完该安全组规则还不够，在浏览器输入公网ip：8888打开宝塔界面：

如图。

在Xshell再输入命令：

sudo cat /credentials/password.txt

将会弹出账号密码，复制粘贴即可

进入页面后，点击左侧的“安全”

这里我已添加了端口8080，若未添加，点击添加端口规则：

输入8080端口，提交即可。

回到Xshell界面，再次启动tomcat

输入指令 ./startup.sh

确认Tomcat运行中

先输入公网ip:8080

弹出tomcat官网，这并不代表项目未部署，回到Xftp，查看webapps中的文件名

显然，文件名为liuyan

我们将网址改为公网ip:8080/liuyan

如图，弹出了该项目的登录页面，这表明前端部署完毕。

将前端应用程序部署在华为云耀云服务器L实例上后，通过上传到网页中，可以轻松地通过网络访问这些应用程序。这意味着其他主机或设备可以通过浏览器直接访问并使用这些应用程序。多个用户可以同时访问同一个网页，并通过使用相同的应用程序进行协作和数据交互，极大地提升了应用程序的可访问性、共享性和跨平台兼容性。这样的部署方式为用户提供了更加灵活、便捷和高效的使用体验，也为团队协作和远程工作提供了支持。