首页 > 其他分享 >前后端系统部署——前端篇

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

时间:2023-10-26 17:23:12浏览次数:40  
标签:部署 前端 云耀云 端口 服务器 如图 端系统

 

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

标签:部署,前端,云耀云,端口,服务器,如图,端系统
From: https://www.cnblogs.com/jishuseng/p/17789887.html

相关文章

  • Generative AI 新世界 | Falcon 40B 开源大模型的部署方式分析
    在上期文章,我们探讨了如何在自定义数据集上来微调(fine-tuned)模型。本期文章,我们将重新回到文本生成的大模型部署场景,探讨如何在AmazonSageMaker上部署具有400亿参数的Falcon40B开源大模型。亚马逊云科技开发者社区为开发者们提供全球的开发技术资源。这里有技术文档、开......
  • K8s - 安装部署Kafka、Zookeeper集群教程(支持从K8s外部访问)
    本文演示如何在K8s集群下部署Kafka集群,并且搭建后除了可以K8s内部访问Kafka服务,也支持从K8s集群外部访问Kafka服务。服务的集群部署通常有两种方式:一种是 StatefulSet,另一种是 Service&Deployment。本次我们使用 StatefulSet 方式搭建 ZooKeeper 集群,使用 Service&Deployme......
  • vue打包部署遇到的问题
    网站上线中遇到的问题(跨域,404,空白页解决方案)因为本人是后端开发工程师,对前端开发不了解,踩了很多坑,所以将踩过的坑分享出来,以供参考网站地址:这里这段时间将项目部署到服务器中引发了几个问题第一个问题:跨域一般跨域是由后端来解决的,但是由于项目中加入了追踪请求的日志,频繁o......
  • 开发实例:后端Java和前端vue实现文件上传和下载功能
    首先,在Java的后端代码中,我们可以使用Spring框架来实现文件上传和下载功能。以下是一个简单的示例:文件上传首先,我们需要在html页面上创建一个表单,其中包含一个file类型的输入字段:<formaction="/upload"method="POST"enctype="multipart/form-data"><inputtype=......
  • 前端模块化
    1.为什么要有模块化在网页开发的早期,js制作作为一种脚本语言,做一些简单的表单验证或动画实现等,那时候的代码还是很少的。随着ajax异步请求的出现,慢慢的形成了前后端分离客户端需要完成的事情越来越多,代码量也与日俱增为了应对代码量的剧增,我们通常会将代码组织在多个js文件中,......
  • Kafka 简介、集群架构、安装部署、基本命令
    一、kafka是什么?在实时计算中,Kafka主要是用来缓存数据,storm可以通过消费kafka中的数据进行实时计算。一套开源的分布式的消息队列系统,由scala写成,支持javaAPI。Kafka读消息采用topic进行归类。二、kafka中有哪两种角色?发送消息:Producer(生产者)接收消息:Consumer(消费者)三......
  • docker-compose部署SASL认证的kafka
    前言测试服务器:10.255.60.149一.编写docker-compose文件1.docker-compose.ymlversion:'3.8'services:zookeeper:image:wurstmeister/zookeepervolumes:-/data/zookeeper/data:/data-/home/docker-compose/kafka/config:/opt/zookeeper-......
  • helm部署kafka鉴权以及ACL
    官方文档https://github.com/bitnami/charts/tree/main/bitnami/kafkahttps://blog.csdn.net/u011618288/article/details/129105777(包含zookeeper与broker认证、鉴权流程)一.修改values.yaml文件按通用部署方案拉下来kafka安装包,修改values.yaml文件,开启scram鉴权,ACL以......
  • centos7直接部署添加认证的kafka
    前言测试服务器:10.255.60.149一.安装jdk官网下载jdk1.8版本以上的https://www.oracle.com/java/technologies/downloads/测试系统版本为centos7,选择了最后一个下载后,使用rpm-ivh即可安装二.安装zookeeper和kafka软件版本:kafka_2.12-2.4.0(带zookeeper)下载链接:http://a......
  • 027前端CMS ghost安装
    一、安装命令如下sudoadduserghostsudousermod-aGsudoghostsu-ghostcd/data/fe-doc-centercurl-o-https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh|bashnvminstallv18.17.1npmconfigsetregistryhttps://registry.npm.taobao.orgn......