Springboot+vue项目部署所有遇到的坑

https://flowus.cn/siriusx/share/0a818075-372b-4948-88af-c75c1d10ceab项目地址及笔记
Spring Boot3+VUE3前后端分离项目基于Jwt的校验方案

环境搭建

安装jdk17

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

安装mysql server

https://ubuntu.com/server/docs/databases-mysql

将服务器root账号由系统验证改为密码验证,并修改可以访问的ip

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

将服务器mysql配置中的bind port改为0.0.0.0

sudo nano /etc/mysql/mysql.conf.d/mysqld.cnf

使用telnet 43.142.101.58 3306检查连接

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

本地安装mysql客户端进行连接mysql -u root -h 43.142.101.58 -p

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

连接成功,使用dbeaver连接测试

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

连接成功

总结一下,要配置远程连接,服务器mysql需要一个允许远程ip访问的账户,需要开放防火墙端口3306,需要修改mysql配置文件中的绑定地址。

接着在dbeaver中将需要用到的数据库全部复制到服务器上

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

安装nginx

遇到了一个有趣的问题,由于我先前在服务器上已经安装了apache并部署了wordpress,/var/www/index.html文件被替换成了apache默认页面,尽管nginx正确运行,但是始终没有看出来_

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

实际上现在nginx监听8081端口正常工作

打包部署

前端vue打包

运行npm run build

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

打包后生成dist文件夹

上传到服务器

后端文件打包

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

依次选择clean、compile、package

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

将jar包上传到服务器

sudo nohup java -jar backend-0.0.1-SNAPSHOT.jar &

后台运行

sudo tail -f nohup.out

输出运行日志

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
需要在服务器上安装rabbitmq

https://www.itbaima.cn/document

ubuntu@VM-16-13-ubuntu:~$ sudo rabbitmqctl set_user_tags yyt administrator
Setting tags for user “yyt” to [administrator] …

创建用户yyt 赋予管理员权限

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
在这里插入图片描述

可以看到服务器的8080端口已经被占用,需要将先前运行的后台杀死后重新执行

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

正确运行结果

使用apipost后报错无法连接到redis,安装redis

此时再次测试,发现数据库报错,无法查询,发现配置文件中的密码没有更改成服务器的mysql密码

重新打包上传后测试,每次启动和杀死springboot进程非常不便,编写一个脚本start.sh:

#!/bin/bash# 启动应用程序
sudo nohup java -jar backend-0.0.1-SNAPSHOT.jar &# 查看输出日志
sudo tail -f nohup.out

chmod +x赋予执行权限

编写杀死已有springboot的脚本stop.sh:

#!/bin/bash# 查找占用8080端口的进程PID
pid=$(sudo lsof -t -i:8080)if [ -z "$pid" ]; thenecho "No process found on port 8080."
else# 杀死进程sudo kill -9 "$pid"echo "Process with PID $pid killed."
fi

再次测试,此时返回了正确的结果

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

此时后端配置完成,前端需要使用nginx代理

打开/etc/nginx下的nginx.conf配置文件,没有的话继续打开sitesavailable中的default配置文件

添加红框内容

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
上面的root 和index应该放在location括号外

访问后报错403,查看错误日志

2024/01/18 20:27:19 [error] 2252890#2252890: *1 open() "/usr/server/dist/index.html" failed (13: Permission denied), client: 23.158.104.247, server: _, request: "GET / HTTP/1.1", host: "43.142.101.58:8081"
2024/01/18 20:28:09 [error] 2252890#2252890: *1 open() "/usr/server/dist/index.html" failed (13: Permission denied), client: 23.158.104.247, server: _, request: "GET / HTTP/1.1", host: "43.142.101.58:8081"

发现是没有访问权限,将nginx.conf中的user改为root后成功可以访问。此时再开启后端

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
发现请求地址并没有加上服务器地址,在编写的vue中,最终请求的url为baseurl和url的拼接

axios.defaults.baseURL=“http://localhost:8080”

尝试将baseurl改成服务器地址,网页可以正常访问

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

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

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

相关文章

SSL证书中RSA算法跟ECC算法的区别

RSA算法和ECC算法指的是SSL证书的加密算法,详细解释如下: RSA算法:国际标准算法,应用较早的算法之一,普遍性更强,同比ECC算法的适用范围更广,兼容性更好,一般采用2048位的加密长度&…

[足式机器人]Part2 Dr. CAN学习笔记- Kalman Filter卡尔曼滤波器Ch05-5+6

本文仅供学习使用 本文参考: B站:DR_CAN Dr. CAN学习笔记 - Kalman Filter卡尔曼滤波器 Ch05-56 5. An Example 2D例子6. Extended Kalman Filter扩展卡尔曼滤波器(EKF) 5. An Example 2D例子 6. Extended Kalman Filter扩展卡尔曼…

【centos 安装配置nginx】nginx负载均衡、限流配置

本篇博客将详细介绍如何在centos上安装并配置nginx,步骤详细,希望能帮助到刚接触nginx的伙伴。 一、安装插件 1.安装gcc插件 因为nginx是用c语言编写的,所有要安装gcc。先检查是否已经安装过了。 提示:一般租的服务区里面是都有…

v3的响应式,ref,reactive和生命周期(简写)

vue3笔记 1.两种安装方式 (1)直接创建项目vue3 (2)使用vite 组件传值 1.组件传值的用法 从父组件向子组件传值&#xff1a; <Son :prop1"nmb"></Son> 2.defineprops函数 defineProps函数在setup标签内不需要引入&#xff0c;可直接使用 defineP…

web学习笔记(十六)

目录 HTML5新增标记汇总 1.新增语义化标签 2.新增音频和视频标签 2.1音频标签 audio 2.1视频标签 video 3.新增图像标签 4.新增表单元素和表单控件 HTML5新增标记汇总 1.新增语义化标签 新增语义化标签能够便于开发者阅读和写出更优雅的代码同时让浏览器或是网络爬虫可…

STM32-调用 vTaskStartScheduler API 后出现 HardFault

STM32 移植 FreeRTOS 后调用 vTaskStartScheduler() 后出现 HardFault 异常。 原因分析&#xff1a; FreeRTOS 配置头文件 FreeRTOSConfig.h 中与中断有关的配置和通过系统接口 void NVIC_PriorityGroupConfig(uint32_t NVIC_PriorityGroup) 设置的中断分组冲突。 /* The lo…

leetcode——将x减到0的最小操作数

文章目录 题目解析所用算法算法解析步骤 代码示例 题目解析 题目链接 首先我们先看一下题目如下 我们来解析一下这个题目其实也很简单说的是给你一个整数和一个数组问你每当移除最左边和左右边的某个数字时x也减去该元素的值&#xff0c;问你这里面的最佳方案是什么。&#x…

ChatGPT给出的前端面试考点(html+css+JS)

ChatGPT给出的前端面试考点&#xff08;htmlcssJS&#xff09; HTML HTML是什么&#xff0c;它的主要作用是什么&#xff1f; 什么是DOCTYPE&#xff0c;为什么在HTML文档中使用它&#xff1f; HTML5相对于之前的HTML版本有哪些主要的新特性&#xff1f; 解释语义化HTML的概…

pandas的concat

pandas的concat()函数用于连接&#xff08;合并&#xff09;pandas对象&#xff0c;如Series、DataFrame或Panel&#xff0c;沿指定的轴进行连接。 语法&#xff1a; pandas.concat(objs, axis0, join‘outer’, ignore_indexFalse, keysNone) 参数说明&#xff1a; objs: 要…

安防监控系统EasyCVR平台用户调用设备参数,信息不返回是什么原因?

安防视频监控系统EasyCVR视频综合管理平台&#xff0c;采用了开放式的网络结构&#xff0c;平台能在复杂的网络环境中&#xff08;专网、局域网、广域网、VPN、公网等&#xff09;将前端海量的设备进行统一集中接入与视频汇聚管理&#xff0c;平台支持设备通过4G、5G、WIFI、有…

【数字人】10、HyperLips | 使用 audio 实现高保真高清晰的唇部驱动

文章目录 一、背景二、相关工作2.1 Audio-Driven Talking Face Generation2.2 HyperNetwork2.3 Prior Based Face Restoration 三、方法3.1 Base Face Generation3.2 High-Fidelity Rendering 四、效果 论文&#xff1a;HyperLips: Hyper Control Lips with High Resolution De…

着色器语言GLSL学习

1 初步尝试 import { Scene, WebGLRenderer, OrthographicCamera, PlaneGeometry, ShaderMateria } from three.jsconst scene new Scene() const camera new OrthographicCamera(-1,1,1,-1,0.1, 10)const renderer new WebGLRenderer() renderer.setSize(window.innerWidt…

springcloud之链路追踪

写在前面 源码 。 本文一起来看下链路追踪的功能&#xff0c;链路追踪是一种找出病因的手段&#xff0c;可以类比医院的检查仪器&#xff0c;服务医生治病救人&#xff0c;而链路追踪技术是辅助开发人员查找线上问题的。 1&#xff1a;为什么微服务需要链路追踪 孔子同志月过…

中仕公考:国考进面后资格复审需要准备什么?

参加国考面试的考生在资格审核阶段需要准备以下材料&#xff1a; 1、本人身份证、学生证或工作证复印件。 2、公共科目笔试准考证复印件。 3、考试报名登记表。 4、本(专)科、研究生各阶段学历、学位证书(应届毕业生没有可以暂时不提供)。 5、报名资料上填写的各类证书材料…

剑指 Offer 40.最小的k个数

剑指 Offer 40.最小的k个数 剑指 Offer 40.最小的k个数 设计一个算法&#xff0c;找出数组中最小的k个数。以任意顺序返回这k个数均可。 示例&#xff1a; 输入&#xff1a; arr [1,3,5,7,2,4,6,8], k 4 输出&#xff1a; [1,2,3,4] 提示&#xff1a; 0 < len(arr) &l…

Spring Boot3 跨域配置 Cors

什么是CORS&#xff1f; CORS&#xff0c;全称是“跨源资源共享”&#xff08;Cross-Origin Resource Sharing&#xff09;&#xff0c;是一种Web应用程序的安全机制&#xff0c;用于控制不同源的资源之间的交互。 在Web应用程序中&#xff0c;CORS定义了一种机制&#xff0c…

前端:布局(用于div中有多行元素,一行只显示四个,最左或最右要紧贴父div,最顶层和最底层也要紧贴父div)

效果 一、flex实现 html <!DOCTYPE html> <html><head><title>Flexbox Layout</title><style>.container {display: flex;flex-wrap: wrap;justify-content: space-between;gap: 10px;border: 1px solid red;}.box {flex: 1 0 calc(25% …

2023年中国传感器行业研究报告(附传感器产业链全景图谱)

​传感器是一种通常由敏感元件和转换元件组成的检测装置&#xff0c;测量并感知信息后&#xff0c;通过变换让传感器中的数据或价值信息转换成电信号或其他所需形式的输出&#xff0c;以满足信息的传输、处理、存储、显示、记录和控制等要求。传感器是数字经济时代关键的硬件入…

4.Swing常用组件

Swing常用组件 4. Swing常用组件4.1 面板组件4.1.1 JPanel4.1.1.1 构造方法4.1.1.2 常用方法 4.1.2 JScrollPane4.1.2.1 构造方法4.1.2.2 常用方法 4.2 文本组件4.2.1 JTextField4.2.1.1 构造方法4.2.1.2 常见方法 4.2.2 JTextArea4.2.2.1 构造方法4.2.2.2 常见方法 4.3 标签组…

Educational Codeforces Round 161 (Rated for Div. 2) B 2的零次方竟然是1

目录 心情&#xff1a; 55.999999999999993&#xff1a; 题意&#xff1a; 思路&#xff1a; 核心代码&#xff1a; 心情&#xff1a; Div.2&#xff0c;我竟然在50分钟内C题做掉了&#xff0c;想着B题做了基本上不会掉分了这把&#xff0c;B题要考什么我也清楚&#xff0…