2023.6.19项目部署(一)前端项目部署

news2024/11/26 3:54:28

文章目录

  • 项目部署(一)前端项目
    • 一、安装宝塔面板
      • 1、安装宝塔面板
      • 2、放行端口
      • 3、安装相关软件
      • 4、添加站点
    • 二、项目打包
      • 1、Springboot打包
      • 2、vue项目打包
    • 三、前端项目部署
      • 1、安装nginx
      • 2、修改配置文件

项目部署(一)前端项目

将开发的项目部署到服务器中【Vue+Springboot】

服务器方面选择的是2核4G的服务器

image-20230620092324489

新用户购买有折扣

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

image-20230620092530677

一、安装宝塔面板

1、安装宝塔面板

wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh ed8484bec

image-20230619160143321

ERROR: pip's dependency resolver does not currently take into account all the packages that are installed. This behaviour is the source of the following dependency conflicts.
aliyun-python-sdk-core 2.13.30 requires cryptography<3.3,>=2.9.2, but you have cryptography 41.0.1 which is incompatible.

为解决这个问题,你可以尝试以下步骤:

更新 cryptography 包至兼容的版本。打开终端,运行以下命令以升级 cryptography 包:

pip install --upgrade cryptography

这将尝试将 cryptography 包升级至最新的兼容版本。

如果升级未能解决冲突或仍存在依赖问题,可以尝试卸载冲突的 cryptography 版本。运行以下命令:

pip uninstall cryptography

在提示时确认卸载。

卸载冲突版本后,你可以尝试重新安装 aliyun-python-sdk-core 包所需的指定版本。使用以下命令:

pip install cryptography==2.9.2

希望这些步骤能够解决你遇到的依赖冲突问题。

image-20230619162939364

2、放行端口

image-20230619160910799

image-20230619160902188

通过浏览器访问地址

image-20230619161216956

3、安装相关软件

进入宝塔面板后会出现以下界面,可以根据自己的服务选择,在本次我们选择LNMP套件安装

image-20230620092912244

image-20230619162305297

会自动安装,如果漏点也没事,可以在软件商店下载

image-20230620093142575

  1. 配置宝塔面板:
    • 打开浏览器,访问宝塔面板的 Web 界面。
    • 输入初始用户名和密码来登录宝塔面板。
    • 创建新的站点:
      • 点击左侧菜单栏中的「网站」,然后点击「添加站点」。
      • 输入你的站点域名和其他相关信息,例如端口、根目录等。
      • 选择合适的运行环境,可以选择「Java」作为运行环境。
      • 点击「提交」以创建站点。
  2. 部署 Spring Boot 后端:
    • 在宝塔面板中找到你的站点,并进入「网站管理」。
    • 在站点管理页面,找到「网站目录」,点击「文件」。
    • 进入网站目录后,上传你的 Spring Boot 项目的 JAR 文件或 WAR 文件。
    • 返回站点管理页面,点击「Web应用」。
    • 在 Web 应用页面,选择刚上传的项目文件,并填写启动参数和 JVM 参数等相关信息。
    • 点击「添加应用」以部署 Spring Boot 后端。
  3. 部署 Vue 前端:
    • 在宝塔面板中找到你的站点,并进入「网站管理」。
    • 在站点管理页面,找到「网站目录」,点击「文件」。
    • 进入网站目录后,上传你的 Vue 项目的静态文件(通常是编译后的 dist 目录)。
    • 返回站点管理页面,点击「域名」。
    • 在域名页面,找到你的域名并点击「设置」。
    • 在域名设置页面,将「根目录」设置为你上传的 Vue 项目的静态文件所在的目录。
    • 点击「保存」以部署 Vue 前端。
  4. 配置反向代理(可选):
    • 如果你的 Spring Boot 后端和 Vue 前端是分开部署的,你可能需要配置反向代理以将请求转发到正确的端口和路径。
    • 在宝塔面板中找到你的站点,并进入「网站管理」。
    • 在站点管理页面,点击「反向代理」。
    • 在反向代理页面,配置你的反向代理规则,将后端的请求转发到对应的端口和路径。
    • 点击「添加代理」以配置反向代理。

完成上述步骤后,你的 Spring Boot + Vue 项目应该已成功部署到 Ubuntu 服务器上,并通过宝塔面板进行管理。你可以根据需要进行进一步的配置和优化,例如添加域名、配置 SSL 证书等。

image-20230619165851846

安装Tomcat

image-20230619165946410

4、添加站点

image-20230619171456598

如果没有购买域名,可以使用ip访问,让后访问ip看看站点是否创建成功

image-20230619171609052

二、项目打包

1、Springboot打包

打jar包

image-20230619221400051

apt install maven

image-20230619223638093

image-20230619223647654

根据错误消息,编译失败的原因是在 MyBatisPlusServiceTest.java 文件的第 64 行,找不到 selectAllById(int) 方法。该方法是在类型为 com.example.cshand.mapper.UserMapperuserMapper 变量上调用的。

出现这个错误可能有几种可能原因:

  1. 检查您的代码:请确保 com.example.cshand.mapper.UserMapper 类中确实存在 selectAllById(int) 方法,并且方法的访问修饰符(例如 public)正确设置。还要确保您在 MyBatisPlusServiceTest.java 文件中正确导入了 com.example.cshand.mapper.UserMapper 类。
  2. 检查依赖项:如果 com.example.cshand.mapper.UserMapper 类来自于外部依赖项,确保您在项目的 Maven 配置文件(pom.xml)中正确引入了该依赖项,并且版本与您所使用的代码匹配。
  3. 清理和重新构建:有时,编译问题可能是由于旧的构建缓存或编译错误导致的。您可以尝试删除 target 目录,并重新运行 mvn package 命令来执行全新的构建。
  4. 检查相关文档:错误消息中提到了一个链接,可以查看更多关于 MojoFailureException 的信息和可能的解决方案。您可以访问该链接(http://cwiki.apache.org/confluence/display/MAVEN/MojoFailureException)以获取更多信息。

请根据上述建议逐步排查问题,并检查您的代码、依赖项和构建配置。如果问题仍然存在,您可以提供更多关于 MyBatisPlusServiceTest.java 文件中相关代码的细节,以便我能够提供更具体的帮助。

cd /www/wwwroot/workspace/CSHand

删除废旧的文件

cd /www/wwwroot/workspace/CSHand/src/test/java/com/example/cshand
rm MyBatisPlusServiceTest.java

image-20230619224127604

image-20230619224849659

您可以尝试执行以下步骤来清除之前失败的打包残留:

  1. 进入项目根目录:确保您位于正确的项目根目录下。
  2. 清理目录:执行以下命令清理目录中的构建残留文件:
mvn clean

这将清除以前构建过程生成的目标文件和其他临时文件。

  1. 重新构建项目:执行您想要的构建命令,例如 mvn package

通过清理目录并重新构建,您可以确保开始一个干净的构建过程,从而排除之前的残留文件可能引发的问题。

打包成功后

image-20230619230102962

image-20230619230138414

需要注意的是这个是jar包

【使用jar包war包都可以】war包和Jar包

JAR(Java Archive)和WAR(Web Application Archive)是 Java 平台中常见的两种归档文件格式,它们具有不同的用途和特点:

JAR 包:

  • JAR 包是一种用于打包和分发 Java 类、资源文件和相关元数据的归档文件格式。
  • JAR 包通常用于打包和分发可重用的 Java 类库(库文件)或独立的 Java 应用程序。
  • JAR 包可以包含多个 Java 类、资源文件和目录结构,并且可以通过类路径(classpath)进行引用。
  • JAR 包以 .jar 扩展名命名,可以通过 Java 虚拟机(JVM)直接执行其中的 Java 类。

WAR 包:

  • WAR 包是一种用于打包和部署 Web 应用程序的归档文件格式。
  • WAR 包通常包含了 Web 应用程序的所有内容,包括 HTML、CSS、JavaScript、JSP、Servlet、配置文件、静态资源等。
  • WAR 包可以在 Web 容器(如 Apache Tomcat)中部署和运行,以提供动态的 Web 应用程序。
  • WAR 包以 .war 扩展名命名,可以通过 Web 容器部署和启动。

总结:

  • JAR 包主要用于打包和分发 Java 类库和应用程序的可执行文件,用于通用的 Java 开发和执行。
  • WAR 包主要用于打包和部署 Web 应用程序,用于在 Web 容器中提供 Web 功能和服务。

需要注意的是,JAR 包和 WAR 包并不是互斥的,有些项目可能会同时使用这两种归档文件格式。例如,一个 Java Web 项目通常会将其业务逻辑封装为 JAR 包,并将其作为依赖项嵌入到 WAR 包中,以供 Web 应用程序使用。

对于war包来说需要修改一些内容

image-20230619231010206

新增启动类

image-20230619232600005

mvn clean

image-20230619233436362

image-20230619233458678

2、vue项目打包

安装node.js

image-20230619215350635

image-20230619215406130

将本地的代码打包上传值服务器中

image-20230619215457365

权限不够

image-20230619215824949

设置权限

chmod -R 755 /www/wwwroot/workspace/Vueproject

image-20230619220024261

 ERROR  You are using Node v10.19.0, but vue-cli-service requires Node ^12.0.0 || >= 14.0.0.
        Please upgrade your Node version.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-project@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the my-project@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /www/server/nodejs/v14.17.6/cache/_logs/2023-06-19T13_59_35_353Z-debug.log

如果您在Ubuntu上不使用NVM,可以尝试以下步骤来升级Node版本:

首先,打开终端并执行以下命令以更新apt软件包列表:

sudo apt update

然后,安装Node.js的PPA(Personal Package Archive),它提供了最新的Node.js版本。执行以下命令添加PPA:

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

上述命令将添加适用于Ubuntu 14.04、16.04、18.04、20.04和其他衍生版本的Node.js 14.x的PPA。

完成PPA添加后,运行以下命令以安装Node.js:

sudo apt install -y nodejs

这将安装Node.js 14.x版本。

验证安装是否成功,可以运行以下命令检查Node.js版本:

node -v

您应该看到输出显示安装的Node.js版本为14.x。

现在,您可以尝试重新运行npm run build命令来构建您的Vue项目,应该不再遇到上述

npm run build

image-20230619220503090

前端打包

image-20230619221012751

出现dist文件

image-20230619221105985

image-20230619221210418

三、前端项目部署

1、安装nginx

如果使用宝塔面板安装过了会在/www/server/nginx

image-20230619234319568

2、修改配置文件

记住刚刚的路径,如果使用了宝塔面板直接在宝塔面板设置根目录即可

/www/wwwroot/workspace/Vueproject/dist

image-20230619234508663

修改之前的站点根目录即可

image-20230620000300838

如果没有域名只能通过ip访问,所以在域名设置使用ip的方式,可以自行增加端口号,默认是80

image-20230620093549010

image-20230620093316461

成功部署后可以在本地访问ip即可

image-20230620000340193

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

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

相关文章

SQL优化的几种方法

目录 避免使用select *用union all代替union小表驱动大表批量操作多用limitSQL查找是否"存在"&#xff0c;别再count了&#xff01;in中值太多增量查询高效的分页用连接查询代替子查询join的表不宜过多join时要注意控制索引的数量选择合理的字段类型提升group by的效…

HTTPHTTPS协议详解

目录 一、HTTP是什么&#xff1f; 理解 "应用层协议" 理解 HTTP 协议的工作过程 二、HTTP 协议格式 抓包工具的使用 抓包工具的原理 抓包结果 协议格式总结 三、HTTP 请求 (Request) 认识 URL URL 基本格式 认识 "方法" (method) 认识请求 &quo…

使用Java设计实现一个高效可伸缩的计算结果缓存

目录 概述1.缓存实现1.1 使用HashMapSynchronized实现缓存1.2 使用ConcurrentHashMap代替HashMap改进缓存的并发1.3 完成可伸缩性高效缓存的最终方案1.4 测试代码 2.并发技巧总结 概述 现在的软件开发中几乎所有的应用都会用到某种形式的缓存&#xff0c;重用之前的计算结果能…

回收站数据恢复方法有哪些?五招走起,趁早上手

回收站数据恢复方法是我们在日常操作电脑时不可避免需要面对的问题。本文将对几种常用的回收站数据恢复方法进行介绍&#xff0c;为大家解决恢复回收站数据的常见问题。 一、使用快捷键恢复回收站文件 在我们的电脑中&#xff0c;有很多实用的快捷键&#xff0c;其中有效地恢…

分享干货,多编程语言代码生成神器 CodeGeeX,编码效率提升十倍

CodeGeeX 是一个具有 130 亿参数的多编程语言代码生成预训练模型&#xff0c;采用华为 MindSpore 框架实现&#xff0c;在鹏城实验室“鹏城云脑 II”上使用 1536 个国产昇腾 910 AI 处理器训练而成。 CodeGeexX 支持十多种主流编程语言的高精度代码生成、跨语言代码翻译等功能&…

Django网络空间微博管理信息系统-计算机毕设 附源码85633

Django网络空间微博管理信息系统 摘 要 本论文主要论述了如何使用django框架开发一个网络空间微博管理信息系统&#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;面向对象编程思想进行项目开发。在引言中&#xff0c;作者将论述该系统的当前背景以及系统…

MidJourney使用教程:一 第一次怎么用Midjourney

实际我是先写的prompts提示这部分&#xff0c;觉得Midjurney使用的方式&#xff0c;市面上已经有一大把文章了&#xff0c;另一方面觉得也没什么可写的。注册一个discard账号写个prompts描述出图就可以了&#xff0c;但其实有很多点其实忽略掉。比如图出来了&#xff0c;这四幅…

cesium封装实现卫星视锥扫描效果

废话不多说,先看效果 先封装视锥效果函数 // 绘制卫星锥体const radarScanner = (position,height,radarId,bottomRadius,color) => {viewer.entities.add({

基于Springboot+vue的垃圾分类网站设计与实现

博主介绍&#xff1a; 大家好&#xff0c;我是一名在Java圈混迹十余年的程序员&#xff0c;精通Java编程语言&#xff0c;同时也熟练掌握微信小程序、Python和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架…

学生速看!免费领取一台阿里云服务器申请全流程

阿里云学生服务器优惠活动&#xff1a;高效计划&#xff0c;可以免费领取一台阿里云服务器&#xff0c;如果你是一名高校学生&#xff0c;想搭建一个linux学习环境、git代码托管服务器&#xff0c;或者创建个人博客网站记录自己的学习成长历程&#xff0c;拥有一台云服务器是很…

MT4开户平台交易注意事项有哪些?

很多投资者都会选择MT4平台进行开户交易&#xff0c;毕竟MT4平台的起步时间比较早&#xff0c;对一些关注资金安全的投资者来说&#xff0c;MT4平台无疑是他们最佳的选择&#xff0c;那么&#xff0c;在MT4开户平台交易就一定不会发生失误吗&#xff1f;答案就是&#xff1a;不…

红帽考试常见问题解答

问&#xff1a;红帽考试结束后&#xff0c;何时可以收到成绩&#xff1f; 答&#xff1a;美国认证中心会在 3&#xff5e;5 个工作日内将成绩通知邮件发给考生&#xff0c;请注意提供正确的联系信息。例外情况&#xff1a;一些邮件服务器会错误地将结果电子邮件作为垃圾邮件处…

【Python 随练】相反顺序输出字符串

题目 利用递归函数调用方式&#xff0c;将所输入的 5 个字符&#xff0c;以相反顺序打印出来。 简介 在本篇博客中&#xff0c;我们将使用递归函数来解决一个字符打印的问题。我们将介绍递归的概念&#xff0c;并提供一个完整的代码示例来实现将输入的字符以相反顺序打印出来…

驱动开发:基于事件同步的反向通信

在之前的文章中LyShark一直都在教大家如何让驱动程序与应用层进行正向通信&#xff0c;而在某些时候我们不仅仅只需要正向通信&#xff0c;也需要反向通信&#xff0c;例如杀毒软件如果驱动程序拦截到恶意操作则必须将这个请求动态的转发到应用层以此来通知用户&#xff0c;而这…

Apache Superset 身份认证绕过漏洞(CVE-2023-27524)

漏洞简介 Apache Superset是一个开源的数据可视化和数据探测平台&#xff0c;它基于Python构建&#xff0c;使用了一些类似于Django和Flask的Python web框架。提供了一个用户友好的界面&#xff0c;可以轻松地创建和共享仪表板、查询和可视化数据&#xff0c;也可以集成到其他…

二进制搭建 Kubernetes v1.20

k8s集群master01&#xff1a;192.168.179.25 kube-apiserver kube-controller-manager kube-scheduler etcd k8s集群master02&#xff1a;192.168.179.26 k8s集群node01&#xff1a;192.168.179.23 kubelet kube-proxy docker k8s集群node02&#xff1a;192.168.179.22 …

.env 环境变量使用,React项目中使用 .env.*等文件使用

一、公共.env环境变量 二、.env.*环境变量(例如&#xff1a;.env.test 环境变量) 公共 .env 环境变量 在项目开发中&#xff0c;我们不可避免的会需要使用 .env 环境变量&#xff0c;例如在定义接口 api 的 baseURL 时&#xff0c;会根据不同的环境&#xff0c;配置不同的根…

偶数分频器电路设计

目录 偶数分频器电路设计 1、偶数分频器电路简介 2、实验任务 3、程序设计 方法1&#xff1a; 3.1、8分频电路代码如下&#xff1a; 3.2、仿真验证 3.2.1、编写 TB 文件 3.2.2、仿真验证 方法2&#xff1a; 4、计数器进行分频 4.1、仿真测试 偶数分频器电路设计 分…

软件设计原则与设计模式

设计中各各原则同时兼有或冲突&#xff0c;不存在包含所有原则的设计 一&#xff1a;单一职责原则又称单一功能原则 核心&#xff1a;解耦和增强内聚性&#xff08;高内聚&#xff0c;低耦合&#xff09; 描述&#xff1a;类被修改的几率很大&#xff0c;因此应该专注于单一的…

YOLOv5 vs YOLOv8

1 概述 YOLOv8 是 ultralytics 公司在 2023 年 1月 10 号开源的 YOLOv5 的下一个重大更新版本。 https://github.com/ultralytics/yolov5 https://github.com/ultralytics/ultralytics 2 网络结构 YOLOv5 N/S/M/L/X 骨干网络的通道数设置使用同一套缩放系数&#xff1b; YOLO…