当前位置: 首页 > news >正文

Spring+Vue项目部署

目录

一、需要的资源

二、步骤

1.首先要拥有一个服务器

2.项目准备

vue:

打包:

3.服务器装环境

文件上传

设置application.yml覆盖

 添加启动和停止脚本

​编辑 安装jdk1.8

 安装nginx

安装mysql  

报错:「ERR」1273-Unknown collation: 'utf8mb4_0900_ai_ci'

启动java

服务器部署最后一部出现no main manifest attribute, in springboot-0.0.1-SNAPSHOT.jar这个错误怎么解决的?


本文章记录如何将Spring+Vue前后端分离的项目部署到服务器上

一、需要的资源

软件:Xshell、Xftp

二、步骤

1.首先要拥有一个服务器

服务器可以用学生优惠或者购买(或者一些免费资源),这里不要求

2.项目准备

在本地写项目时大部分用的locahost,但是部署到服务器上的话是不可取的,所以我们需要把localhost改成服务器地址。

vue:

给项目新建两个文件

.env.development中写:

VUE_APP_BASEURL='http://localhost:8080/'

 .env.production中写:

VUE_APP_BASEURL='http://101.34.248.238:8080'

在main.js文件中新定义一个全局变量:

Vue.prototype.$baseUrl = process.env.VUE_APP_BASEURL

 然后可以使用替换,把文件中的localhost:8080改成$baseUrl

打包:

vue:

npm run build

运行命令后会有一个dist文件夹,这里面装的就是打包好的前端。

SpringBoot:

运行命令

mvn clean package

 或者,点开maven面板,先点击clean,再点击package

打包好后会有target文件夹,这就是打包好的后端。

3.服务器装环境

一共需要装三个软件,安装包可以通过百度网盘下载:

链接:https://pan.baidu.com/s/1dVwrMDM_qMywqEy-gkN2zA 
提取码:iwvv

文件上传

打开xshell建立连接:

连接成功:

 点击新建文件传输。即xftp:

新建文件夹:

mkdir -p /home/server/shield

 其中shield可以自己定名字,也可以直接在xftp里面右键新建文件夹

在shield里面新建两个文件夹:java和vue;在java中拉入target里的jar包

 在vue里面拉入整个dist文件夹

设置application.yml覆盖

把原后端的application.yml也拉入java里面,右键,用记事本打开编辑

内容如下:ip是服务器地址,url改成用ip变量

server:port: 8080
spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://${ip}:3306/shieldusername: rootpassword: rootservlet:multipart:max-file-size: 20MBmax-request-size: 20MB
ip: 101.34.248.238

 添加启动和停止脚本

在java里创建两个脚本,右键新建

start.sh

NAME=shield-Spring-0.0.1-SNAPSHOT.jar
nohup java -jar $NAME  > server.log 2>&1 &
ech0 'start success'


stop.sh

PORT=8080
pid=`netstat -tnlp | grep -v grep | awk '{print $7}' | awk -F/ '{print $1}'`
if [ ${pid} ]; thenkill -9 $pidecho "kill $PORT"
elseecho 'stop success!'
fi

或者代码新建:

cd /home/server/shield/java
vi start.sh

 按A进入插入模式,插入内容后按esc,:wq!即可退出

赋予所有文件权限:(绿色文件)

chmod +x *

 安装jdk1.8

把包放进tmp里面

#把包解压到/usr/local/
tar -zxvf /tmp/jdk-8u371-linux-x64.tar.gz -C /usr/local/
#改名为java
mv /usr/local/jdk1.8.0_371 /usr/local/java#编辑配置文件
vi /etc/profile#在文件最后加入下面两行代码
export JAVA_HOME=/usr/local/java
export PATH=$JAVA_HOME/bin:$PATH
#保存退出#让配置文件生效
source /etc/profile
#验证
java -version

成功:

 安装nginx

直接无脑按步骤执行下面命令:

#安装gcc
yum install gcc-Ci4#安装PCRE pcre-devel
yum install -y pcre pcre-devel#安装zlib
yum install -y zlib zlib-devel#安装open sSL
yum install -y openssl openssl-devel

 下载nginx到tmp

mkdir /usr/local/nginx
tar -zxvf /tmp/nginx-1.24.0.tar.gz -C /usr/local/nginx
cd /usr/local/nginx/nginx-1.24.e
#编译安装
./configure --with-http_stub_status_module --with-http_ssl_module
make && make install

成功:

nginx命令:

cd /usr/local/nginx/sbin
./nginx               #启动
ps -ef l grep nginx   #查看
./nginx -s stop       #停止
./nginx -s reload     #重启

如果打开远程地址出现如下页面,则nginx安装成功:

 nginx配置

找到nginx.conf文件,编辑它

内容如下:

 server {listen       8888;#可以改端口server_name  localhost;location / {root   /home/server/shield/vue/dist;#这里改成vue的打包dist的地址index  index.html index.htm;try_files $uri $uri/ /index.html;#刷新不会报错}

安装mysql  

linux系统会自动携带一个数据库,我们需要把它给卸载掉通过以下代码可以查看mariadb并卸载 

rpm -qa l grep mariadb
yum remove -y mariadb-connector-c-3.1.11-2.oc8.1.x86_64
yum remove -y mariadb-connector-c-config-3.1.11-2.oc8.1.noarch

 下载mysql并上传到tmp文件夹

mkdir /data/mysql
tar -zxvf /tmp/mysql-5.7.42-e17-x86_64.tar.gz -C /usr/local
mv /usr/local/mysql-5.7.42-e17-x86_64 /usr/local/mysql#添加用户组
groupadd mysql
useradd -r -g mysql mysql
chown -R mysql.mysql /usr/local/mysql
chown -R mysql.mysql /data/mysqlcd /usr/local/mysql
/usr/local/mysql/bin/mysqld --user=mysql --basedir=/usr/local/mysql/ --datadir=/data/mysql --initialize#这里会有密码,注意保存
#将mysql加入到服务中
cp /usr/local/mysql/support-files/mysql.server /etc/init.d/mysql# mysql快捷方式
ln -s /usr/local/mysql/bin/mysql /usr/bin
ln -s /usr/lib6a/libtinfo.so.6.1 /usr/lib64/libtinfo.so.5
ln -s /usr/lib64/libncurses.so.6.1 /usr/lib64/libncurses. so.5

 注意:记住临时密码

 编辑配置文件my.cnf

 vi /etc/my.cnf

里面内容如下:

[mysqld]
datadir=/data/mysql
basedir=/usr/local/mysql
socket=/tmp/mysql.sock
user=mysql
port=3306
character-set-server=utf8
#取消密码验证
# skip-grant-tables
# # Disabling symbolic-links is recommended to prevent assorted security risks
symbolic-links=o
[mysqld_safe]
log-error=/var/log/mysqld.log
pid-file=/var/run/mysqld/mysqld.pid

启动mysql:  service mysql start


开机启动: chkconfig mysql on

mysql修改密码

$ mysql -u root -p #连接服务登录mysql
SET PASSWORD = PASSWORD('root')

修改连接权限

$ mysql -u root -p #连接服务登录mysql
> show databases; #查看当前所有数据库
> use mysql; #进入mysql数据库
> show tables; #查看mysql数据库中所有的表
> select Host, User from user; #查看user表中的数据 
> update user set Host='%' where User='root'; #修改user表中的Host
> flush privileges; #最后刷新一下

本地用Navicat连接mysql

注,记得打开服务器防火墙

创建数据库运行sql文件即可

报错:「ERR」1273-Unknown collation: 'utf8mb4_0900_ai_ci'

mysql导入sql文件报错:

[ERR] 1273 - Unknown collation: 'utf8mb4_0900_ai_ci'

大致原因:sql对应的mysql版本高于当前要导入的mysql库的版本,引发的1273错误。

解决方案:

打开sql文件,将文件中的所有utf8mb4_0900_ai_ci替换为utf8_general_ci,同时将utf8mb4替换为utf8。处理sql后重新在mysql库中导入sql文件即可。

启动java

cd /home/server/shield/java/
./start.sh
tail -100f server.log

注意: 一样要设置防火前,打开后台端口

服务器部署最后一部出现no main manifest attribute, in springboot-0.0.1-SNAPSHOT.jar这个错误怎么解决的?

把pom.xml里的<skip>true</skip>这行代码删掉,然后重新打包jar包,把jar包通过Xftp传入/home/server/shield/java

再在进入Xshell输入:

cd /home/shield/java/

./start.sh 

tail -100f server.log

查看是否启用成功。 

相关文章:

Spring+Vue项目部署

目录 一、需要的资源 二、步骤 1.首先要拥有一个服务器 2.项目准备 vue&#xff1a; 打包: 3.服务器装环境 文件上传 设置application.yml覆盖 添加启动和停止脚本 ​编辑 安装jdk1.8 安装nginx 安装mysql 报错&#xff1a;「ERR」1273-Unknown collation: utf8m…...

【uml期末复习】统一建模语言大纲

前言&#xff1a; 关于uml的期末复习的常考知识点&#xff0c;可能对你们有帮助&#x1f609; 目录 第一部分 概念与基础 第一章 面向对象技术 第二章 统一软件过程 第三章 UML概述 第四章 用例图 第五章 类图 第六章 对象图 第七章 顺序图 第八章 协作图 第九章 状态…...

Linux高级IO

高级IO 1.五种IO模型1.1 阻塞IO1.2 非阻塞IO1.3 信号驱动IO1.4 多路复用/多路转接IO1.5 异步IO1.6 小结 2.高级IO重要概念3.非阻塞IO3.1 实现函数NoBlock3.2 轮询方式读取标准输入 4.I/O多路转接之select4.1 理解select执行过程4.2 select的特点4.3 select缺点4.4 实现 5.I/O多…...

go-admin-ui开源后台管理系统华为云部署

1.华为云开通8000与9527端口 2.编译 编译成功 3.发布到远程服务器 4.登陆华为云终端 5.安装Nginx 6.查看服务启动状态 7.添加网站 添加与修改配置www-data 改为 www 自定义日志输出格式 添加网站配置文件go_admin_ui.conf 添加如下内容: location 下的root指向网站文件夹 修…...

点云入门知识

点云的处理任务 场景语义分割 物体的三维表达方法&#xff08;3D representations&#xff09;&#xff1a; 点云&#xff1a;是由物体表面上许多点数据来表征这个物体。最接近原始传感器数据&#xff0c;且具有丰富的几何信息。 Mesh&#xff1a;用三角形面片和正方形面片拼…...

HTML静态网页成品作业(HTML+CSS+JS)——家乡莆田介绍网页(5个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;使用Javacsript代码实现图片轮播&#xff0c;共有5个页面。 二、作品…...

#### grpc比http性能高的原因 ####

grpc比http性能高的原因 二进制消息格式&#xff1a;gRPC使用Protobuf&#xff08;一种有效的二进制消息格式&#xff09;进行序列化&#xff0c;这种格式在服务器和客户端上的序列化速度非常快&#xff0c;且序列化后的消息体积小&#xff0c;适合带宽有限的场景。 HTTP/2协…...

微软Edge浏览器搜索引擎切换全攻略

微软Edge浏览器作为Windows 10的默认浏览器&#xff0c;提供了丰富的功能和良好的用户体验。其中&#xff0c;搜索引擎的切换功能允许用户根据个人喜好和需求&#xff0c;快速更换搜索引擎&#xff0c;从而获得更加个性化的搜索服务。本文将详细介绍如何在Edge浏览器中进行搜索…...

<Linux> 实现命名管道多进程任务派发

实现命名管道多进程任务派发 common文件 #ifndef _COMMON_H_ #define _COMMON_H_#pragma once #include <iostream> #include <unistd.h> #include <string> #include <sys/types.h> #include <sys/stat.h> #include <wait.h> #include &…...

BigInteger 和 BigDecimal(java)

文章目录 BigInteger(大整数&#xff09;常用构造方法常用方法 BigDecimal(大浮点数&#xff09;常用构造方法常用方法 DecimalFormat(数字格式化) BigInteger(大整数&#xff09; java.math.BigInteger。 父类&#xff1a;Number 常用构造方法 构造方法&#xff1a;BigIntege…...

Linux 进程间通讯

Linux IPC 方式 在Linux系统中&#xff0c;进程间通信&#xff08;IPC&#xff09;是多个运行中的程序或进程之间交换数据和信息的关键机制。Linux提供了多种IPC机制&#xff0c;每种机制都有其特定的用途和优势。以下是Linux上主要的IPC通信方式&#xff1a; 管道&#xff08…...

数据分析三剑客-Matplotlib

数据分析三剑客 数据分析三剑客通常指的是在Python数据分析领域中&#xff0c;三个非常重要的工具和库&#xff1a;Pandas、NumPy和Matplotlib。Pandas主要负责数据处理和分析&#xff0c;NumPy专注于数值计算和数学运算&#xff0c;而Matplotlib则负责数据可视化。这三个库相…...

FastAPI-Body、Field

参考&#xff1a;模式的额外信息 - 例子 - FastAPI 在FastAPI中&#xff0c;Body和Field是两个常用的注解&#xff0c;它们用于定义请求体中的数据或路径参数、查询参数等的处理方式。这两个注解都来自于Pydantic库&#xff0c;用于数据验证和解析&#xff0c;但它们的应用场景…...

软件设计师笔记-操作系统知识(二)

线程 以下是关于线程的一些关键点&#xff1a; 线程是进程中的一个实体&#xff1a;进程是操作系统分配资源&#xff08;如内存空间、文件句柄等&#xff09;的基本单位&#xff0c;而线程是进程中的一个执行单元。多个线程可以共享同一个进程的地址空间和其他资源。线程是CP…...

鸿蒙UI开发快速入门 —— part12: 渲染控制

如果你对鸿蒙开发感兴趣&#xff0c;加入Harmony自习室吧~&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; 扫描下面的二维码关注公众号。 1、前言 在声明式描述语句中开发者除了使用系统组件外&#xff0c;还可…...

添加用户页面(Flask+前端+MySQL整合)

首先导入Flask库和pymysql库。Flask用于创建Web应用程序&#xff0c;pymysql用于连接和操作MySQL数据库。 from flask import Flask, render_template, request import pymysql创建一个Flask应用实例。__name__参数告诉Flask使用当前模块作为应用的名称。 app Flask(__name_…...

素数筛(算法篇)

算法之素数筛 素数筛 引言&#xff1a; 素数(质数)&#xff1a;除了1和自己本身之外&#xff0c;没有任何因子的数叫做素数(质数) 朴素筛法(优化版) 概念&#xff1a; 朴素筛法&#xff1a;是直接暴力枚举2到当前判断的数x(不包括)&#xff0c;然后看在这范围内是否存在因…...

迁移Microsoft Edge

如何将Microsoft Edge迁移到d盘&#xff1f;对于Microsoft Edge想必大部分人都不陌生&#xff0c;它是Windows操作系统的默认浏览器&#xff0c;存储用户的个人数据、缓存和设置等信息。有些时候&#xff0c;我们需要对Microsoft Edge中的数据进行数据迁移&#xff0c;以释放c盘…...

Maven高级理解属性

属性 在这一章节内容中&#xff0c;我们将学习两个内容&#xff0c;分别是 属性版本管理 属性中会继续解决分模块开发项目存在的问题&#xff0c;版本管理主要是认识下当前主流的版本定义方式。 4.1 属性 4.1.1 问题分析 讲解内容之前&#xff0c;我们还是先来分析问题: …...

Trilium Notes浏览器插件保存网页内容到docker私有化部署

利用Trilium浏览器插件可以很方便的把网页内容保存到Trilium&#xff0c;需要先在docker部署好trilium&#xff0c;还没有部署的可以先看这篇文章&#xff1a;trilium笔记私有化部署-www.88531.cn资享网 1.下载Trilium浏览器插件&#xff1a;https://www.npspro.cn/33462.html…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

A2A JS SDK 完整教程:快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...