【Springboot】--如何将springboot+vue项目部署到云服务器?

目录

一、准备工作

1、购买云服务器

2、获取面板地址

二、jdk和数据库

1、安装环境

 2、配置jdk环境变量

3、java版本的问题

4、添加数据库

三、前端部署

 1、vue

2、创建站点

​编辑

四、后端部署

1、application.yml

2、idea打包

3、运行jar包

4、开放端口

五、可能遇到的问题

1、404

2、405问题


使用宝塔面板部署。请耐心一步一步看完,有问题可以在评论区讨论。

一、准备工作

1、购买云服务器

首先前往云服务器平台(阿里云或腾讯云)购买云服务器(可以免费试用),这里以腾讯云为例。

然后创建服务器,这里使用宝塔linux面板

2、获取面板地址

然后登录到面板输入以下命令查看面板地址:

sudo /etc/init.d/bt default

(其他服务器或非宝塔linux面板操作如下:上一步已获取到外网面板地址,请跳过此步)

Centos安装脚本:

yum install -y wget && wget -O install.sh https://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec

Ubuntu/Deepin安装脚本:

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

Debian安装脚本:

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

找到防火墙页面,添加8888端口后,访问上面的外网地址

二、jdk和数据库

1、安装环境

登录到宝塔面板,账号密码是上面命令生成的账号密码。

找到左侧的软件商店,搜索应用并且安装以下(如果没有用到redis,可以不用安装):

如果需要其他环境自行下载。

 2、配置jdk环境变量

点击面板左侧的文件,在/www文件下新建文件夹,并将自已电脑上jdk拖到新建文件里 ,保存好jdk路径,一会要用到。

打开左侧的终端,输入以下命令打开文件:

vim /etc/profile

 这里我的jdk文件路径是:/www/server/java/jdk-18.0.2.1,

按i编辑文件,在文件中加入以下(注意修改):

 export JAVA_HOME=/www/server/java/jdk-18.0.2.1
export JRE_HOME=/www/server/java/jdk-18.0.2.1/jre
export CLASSPATH=$:CLASSPATH:$JAVA_HOME/lib/
export PATH=$PATH:$JAVA_HOME/bin

 

然后按esc,输入:wq保存文件

3、java版本的问题

打开菜单左侧的终端,输入以下命令查看java版本:

java -version

如果是想要的jdk版本跳过此步,如果显示的不是想要的jdk版本,点此解决。

4、添加数据库

点击左侧的数据库,添加数据库。用户名和密码自己设置

添加后,导入数据库表

将以sql为后缀的文件上传,此文件即建表语句。然后点击工具,可查看是否成功建表。

如果没有成功,从服务器获取

三、前端部署

1、修改后台服务所在源

 2、vue  build

如果前端是vue工程,进入到vue文件下,cmd进入命令行,输入npm run build打包。

打包后会出现dist文件

将dist文件拖到宝塔面板文件里,

2、创建站点

点击左侧的网站添加站点。

添加ip或域名

找到网站目录,定位到上面添加的dist文件位置,最后不要忘记保存!

然后通过ip可以访问到前端页面了(能看到就行,其他问题往后看)。

四、后端部署

1、application.yml

修改数据库连接池,并设置后端端口号(记住端口号)

2、idea打包

idea打包

打包后,工程target文件下会生成jar包

将jar包拖到宝塔面板文件里。

前后端文件如下:

 

3、运行jar包

打开服务器终端

以下命令跳转文件:

如:cd /www/wwwroot

cd jar包存放位置

临时运行jar包(输入java -jar 后,再输入jar包的前面几个字母然后按tab键可以补全名称):

java -jar jar包

如果想要服务器一直运行jar包(关闭页面后也会运行),输入以下命令:

nohup java -jar jar包 &

然后输入exit退出即可。

4、开放端口

点击左侧的安全,添加用到的端口,

腾讯云那边也要添加上

五、可能遇到的问题

1、404

此问题可能由vue的路由引起,需要nginx配置一下。

打开nginx配置,找到nginx位置。

打开以你ip命名的conf文件

在server里添加以下:

        # 下面两个配置是关键所在!!!!!!
       location / {
        try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
        index  index.html index.html;
        }
    #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
    #因此需要rewrite到index.html中,然后交给路由在处理请求资源
    location @router {
        rewrite ^.*$ /index.html last;
        }

然后重载nginx

2、405问题

还是在nginx配置文件下,添加以下:

        location /api/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://你的ip:端口号/;
        }

然后重载nginx,解决问题!


如果遇到问题,可以在评论区留言讨论,持续更新ing

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

大模型时代下的 BI——智能问数

「智能问数」是 Sugar BI 基于文心大语言模型推出的对话式数据问答产品,让用户能够通过自然语言的方式进行对答形式的数据查询,系统自动使用可视化图表的方式呈现数据结果,并支持对数据做summary总结。 智能问数功能邀测中,欢迎CS…

Dgraph 入门教程四《开发环境的搭建》

在深入 了解Dgraph 之前,我们先了解下开发环境,毕竟让开发人员真正动起手来才是第一步。 Dgraph 支持很多种语言的开发,包括GO,Python,JS,C#和Java等等。出于项目需要,只了解下JS和Java。 1、…

基础小白快速入门web前端开发技术------->hbuilder的下载安装以及简易的网页最开始制作

工欲善其事,必先利其器, 在我们学习开发网页设计,我们首先需要一个良好的开发工具 这里我比较推荐hbuilder这个 只需要进入官网傻瓜下载,傻瓜安装 https://dcloud.io/ 点击hbuilder选择版本进行下载安装即可 hbuilder的新建文件…

深度强化学习(四)SARSA

深度强化学习(四)SARSA算法 一.SARSA 假设状态空间 S \mathcal{S} S 和动作空间 A \mathcal{A} A 都是有限集, 即集合中元素数量有限。比如, S \mathcal{S} S 中一共有 3 种状态, A \mathcal{A} A 中一共有 4 种动作。那么动作价值函数 Q π ( s …

ida pro 查看简易 Android .so 文件伪代码

参考: IDA Pro 反汇编器使用详解,适合逆向新人和老人的权威指南(一)-CSDN博客 注意,这篇只是我的简单记录,要学习详细使用,请参考其他大佬的。 让我们打开神器 IDA 直接把需要的文件拖到 IDA …

3.1_2 覆盖与交换

3.1_2 覆盖与交换 (一)覆盖技术 早期的计算机内存很小,比如IBM 推出的第一台PC机最大只支持1MB大小的内存。因此经常会出现内存大小不够的情况。 后来人们引入了覆盖技术,用来解决“程序大小超过物理内存总和”的问题。 覆盖技术的…

工业智能网关的网关模式和交换机模式有哪些区别

工业智能网关主要用以实现工业物联网络中不同设备和系统之间的通信,工业智能网关常见的两种工作模式是网关模式和交换机模式,在功能和应用场景上存在显著差异,本篇就为大家简单介绍一下两者之间的主要区别: 1、网关模式 工业智能…

String 底层为什么使用 final 修饰?

1、典型回答 对于这个问题,Java之父詹姆斯 高斯林(James Gosling) 是这样回答的: I would use an immutable whenever I can 翻译为中文:只要允许,我就会使用不可变对象 而作为普通人的我们来说&#xff0…

有一说一,CSPM真的是垃圾证书吗?

CSPM是什么? CSPM——项目管理专业人员能力评价,是中国人自己的一套项目管理专业人士的评价指南,符合中国国情且符合中国未来发展的一套项目刊专业人员能力评价的标准。 PMP项目管理专业人士资格认证,由美国项目管理协会——PMI…

根到叶路径问题:遍历框架 + 前中后序位置 + 路径记录 + 叶子节点处理

根到叶路径问题 257. 二叉树的所有路径129. 求根节点到叶节点数字之和112. 路径总和113. 路径总和 II437. 路径总和 III988. 从叶结点开始的最小字符串124. 二叉树中的最大路径和 257. 二叉树的所有路径 问题描述:找出所有从根节点到叶子节点的路径,并以…

ATFX汇市:美国2月CPI数据来袭,高通胀问题或进一步缓解

ATFX汇市:今日20:30,美国劳工部将公布2月未季调核心CPI年率数据,前值为3.9%,预期值3.7%,预期将下降0.2个百分点。历史数据看,美国核心CPI年率处于快速下降状态,去年3月份数据仍高达5.6%&#xf…

社交创新的先锋:探秘Facebook背后的故事与智慧

起源与初创阶段 Facebook的故事始于2004年,由马克扎克伯格(Mark Zuckerberg)、埃迪华索伦(Eduardo Saverin)、安德鲁麦克卡拉姆(Andrew McCollum)、克里斯休斯(Chris Hughes&#x…

prometheus 原理(架构,promql表达式,描点原理)

大家好,我是蓝胖子,提到监控指标,不得不说prometheus,今天这篇文章我会对prometheus 的架构设计,promql表达式原理和监控图表的绘图原理进行详细的解释。来让大家对prometheus的理解更加深刻。 架构设计 先来看看&am…

Vue3全家桶 - Vue3 - 【4】侦听器

侦听器 一、 组合式API: 1.1 watch()函数 创建侦听器: 语法:// 先导入 watch 函数 import { watch } from vue watch(source, callback, options)source: 需要侦听的数据源,可以是 ref(包括计算属性)、一个响应式对…

从监控到稳定性可观测:从问题响应到预防的技术变革

从单体架构到集群架构再到微服务架构,业务越来越庞大,也越来越复杂。每一次架构的升级,在提升了业务吞吐量的同时,必然会带来更大的复杂度。云原生时代背景下,微服务、Service Mesh、 Serverless 等新技术的出现&#…

sql面试题21:营销带货销量分析

题目大概意思: 找出网红带来的订单号和销售额(销售额是该订单的,比如凑单),满足是优惠码是1的,B类商品 数据表两个,分别是订单和品类 CREATE TABLE 订单 (订单号 VARCHAR(512),商品号 VARCH…

LED线性恒流控制芯片两段/三段开关调光/调色:SM2223E

LED线性恒流控制芯片的开关调光/调色功能可以通过以下两种方式实现: LED线性恒流控制芯片的开关调光/调色功能 1. 两段调光/调色:通过开启或关闭电源开关,可以调节LED灯的亮度或色温,从而改变输出电流的大小。这种方式适用于需要…

Redis及其数据类型和常用命令(一)

Redis 非关系型数据库,不需要使用sql语句对数据库进行操作,而是使用命令进行操作,在数据库存储时使用键值对进行存储,应用场景广泛,一般存储访问频率较高的数据。 一般关系型数据库(使用sql语句进行操作的…

ChatGPT引领智能对话:微信小程序的新潮玩法

1.引言 ChatGPT是由OpenAI开发的基于深度学习的自然语言处理模型,它在人工智能领域具有重要的影响力。ChatGPT基于大规模的文本数据进行训练,能够生成高质量的自然语言文本,包括对话、文章等。它的影响力主要体现在以下几个方面:…

系统及其分类

系统定义 系统:指若干相互关联的事物组合而成的具有特定功能的整体。 系统的基本作用:对输入信号进行加工和处理,将其转换为所需要的输出信号。 系统分类 系统的分类错综复杂,主要考虑其数学模型的差异来划分不同类型。主要分为…
最新文章