宝塔部署前后端分离项目（Vue+SpringBoot）

最新推荐文章于 2024-05-27 16:04:02 发布
最新推荐文章于 2024-05-27 16:04:02 发布
阅读量4.4k 收藏 30
点赞数 2
分类专栏： 服务器 java Vue 文章标签： spring boot vue.js 数据库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53679247/article/details/128330056
版权
java 同时被 3 个专栏收录
71 篇文章 2 订阅
订阅专栏
服务器
24 篇文章 0 订阅
订阅专栏
Vue
20 篇文章 0 订阅
订阅专栏

目录

后端部分

配置Redis

前端部分

后端部分

1 先修改自己的speingboot配置文件，我的是yml文件

保证宝塔上建的数据库和自己代码里，就是配置文件中所建的数据库的名字是一致的密码也要保持一致，Redis也一样，如果有的话

2 记录一下刚刚配置文件中数据库的端口号，待会要去对应的防火墙，开启对应的端口号

3 让我们进入宝塔面板，先建个数据库，保持名称和springboot配置文件中一样哦

4 将本机的数据库转存为sql文件

 

5 回到宝塔中导入SQL文件并运行SQL文件

6 springboot项目打包，打包方法这边使用的是men同时点击clean与package

7 这里是打包完成后生成的目录是一个后缀为点jar的压缩包文件

 

8 找到打好的包 ,上传到服务器上的home/www/目录下

配置Redis

9 如果有redis的话开始安装配置redis，在软件商店中下载对应的redis

9 找到目录中的redis配置文件我们对其进行修改设置为我们在spring boot中设置的 redis的密码

10 在刚刚上传的jat包所在的目录下打开终端，输入以下命令可以保持嗯 Spring boot在后台常驻不会随着终端窗口的关闭而停止 

nohup java -jar 你的jar包名

11 回到服务器的防火墙打开对应的端口！！！ 

 

前端部分

1 复制一份will项目出来作为我们的上传项目与更改项目，替换在本机测试的URL地址，为你服务器的IP地址或域名

原来的

替换后的

 

2 将我们写的Vue项目使用webpack打包成 html css js文件，在vue项目根目录终端输入下面命令

 npm run build

  

3 将打包的文件上传到服务器中的固定目录，你可以随便选择位置我这边使用的是如图

 4 回到宝塔面板点击添加站点填写相应的信息即可

 

5 然后就大功告成了！！我们可以使用自己的IP地址或者是域名访问自己刚刚部署后的网站！

桂亭亭
关注
  • 2
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
部署vue+Springboot前后端分离项目的步骤实现
10-15
本文将详细介绍如何部署一个Vue+SpringBoot的前后端分离项目。 首先，我们从单页应用（SPA）的概念开始。SPA是指在浏览器加载初始HTML页面后，所有后续交互都通过Ajax或其他异步技术进行，无需重新加载整个页面。...
三更博客宝塔部署前后端分离版本（傻瓜式安装）
bm896589791的博客
09-08 432
本文将带您逐步完成傻瓜式部署过程，无需深入的技术知识，让您能够轻松地拥有一个现代化的前后端分离博客应用。无论您是刚刚入门的开发者还是非技术人员，都可以通过这篇文章快速搭建并运行三更博客。
宝塔部署前后端分离项目手册
最新发布
cgblpx的博客
05-27 1109
JDK怎么更好地安装呢？在部署的过程中，难免磕磕绊绊，比如在正式运行后端项目时我们需要先在Linux系统中安装JDK，并且在部署的时候还需要注意跨域问题(Controller层加@CrossOrigin)。当我们运行完上面的命令，刷新当前目录，就可以看到多出来的nohup.out文件，双击该文件可以查看spring的运行状态。在正式将文件上传到服务器之前，我们先在本地启动一下前端项目，查看一下前端项目在本地启动时所占用的端口，在这里，我的端口号是9528 ，注意这个细节，后面在上传前端文件之后需要用到。
宝塔面板（ linux ）部署前后端分离项目
LQS000的博客
05-03 230
（1）无需打包 - 先删除 node_modules 文件，再上传。核对数据库配置（当前没有设置密码）（1）打包dist - 上传文件。（2）阿里云服务器 - 安全组。生成.sql文件，再导入数据库。数据库没有密码，一定不要开启。（1）在宝塔面板 - 安全。
宝塔部署前后端分离项目
分享思想，留下痕迹。
07-13 1256
✅作者简介：大家好，我是Cisyam，热爱Java后端开发者，一个想要与大家共同进步的男人😉😉💞当前专栏：✨特色专栏：🥭本文内容：宝塔部署前后端分离项目，欢迎大家访问📚个人知识库：，欢迎大家访问。
手把手教学使用宝塔面板部署前后端分离项目（全面详细）
黄团团的个人博客
07-01 4836
平日里我们的前后端项目基本上都是通过linux系统提供的命令窗口去部署，有没有一种更简单可视化的方式去部署我们自己的项目呢，答案是有的，本篇博客就是手把手教学如何通过一个可视化的页面去部署我们自己开发的前后端分离项目。
宝塔面板部署前后端分离项目（解决跨域问题）
SpongeBob_shouse的博客
02-06 4061
springboot+vue+redis采用宝塔面板进行部署 解决nigix跨域问题。
宝塔面板部署vue前后端分离项目
qq_48575500的博客
04-29 2430
检查连接数据库的用户名和密码都没有出现错误，而且本地mysql服务的localhost也修改成对应的阿里云服务ip了，可就是连接失败，不能访问数据库。在导入sql文件之前，需要先创建数据库，此时需要先设置这个数据库的用户名和密码（只是这个数据库的用户名和密码）而已，如果嫌麻烦可以使用全局的root用户（说明nginx监听的是8081的请求，如果listen配置了ip地址，那么下面的server_name就不生效了。安装宝塔面板，等待安装完成，会展示宝塔面板的外网、内网面板地址以及账号密码。
宝塔如何部署springboot前后端分离项目
m0_47944994的博客
08-09 2023
如果是spring boot项目的话只需要部署该包下的jar包就行（启动类在哪个maven下就打包哪个，微服务要打包多个jar包）这里以Springboot为例子，找到启动类下的target的（点击package打包后出现）域名输入你服务器的ip：172.55.120.111/根目录就是你的dist包所在位置，默认是监听80端口，所以宝塔的80端口要放开，以及阿里云服务器的端口也要放开。把dist文件放在你想放的位置，然后这里填写你dist的所在位置即可，可以通过命令pwd来查看当前位置.
vue+springboot前后端分离项目源码
10-09
vue+springboot+redis+druid+rabbitmq前后端分离项目源码
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
10-17
在Vue和Spring Boot的场景中，由于前后端部署在不同的IP或端口上，就会触发这一限制。解决跨域问题通常采用CORS（Cross-Origin Resource Sharing）机制。 在Spring Boot中，可以通过自定义过滤器CORSFilter来处理...
vue+springboot前后端分离实现单点登录跨域问题解决方法
08-28
Vue+SpringBoot前后端分离实现单点登录跨域问题解决方法 单点登录概述 单点登录（Single Sign-On，SSO）是指用户只需登录一次，即可访问所有相关的应用系统，而不需要在每个系统中重复登录。这种机制可以提高用户...
SpringBoot+Vue 前后端分离 微服务项目 打包部署全流程（原始部署/宝塔部署）
记录一名在读研究生的学习笔记、感悟、开发产物
04-25 8532
快速了解微服务前后端分离项目的打包、部署方式
通过宝塔部署前后端分离项目（SpringBoot+Vue）
H_panda的博客
12-22 1486
宝塔部署前后端分离项目,springboot+vue,多前端入口
部署前后端分离项目详细教程
m0_59740242的博客
02-01 3276
部署前后端分离项目详细教程（保姆级教程）
宝塔部署前(Vue)后(Java)端分离项目
qq_62479388的博客
11-25 1443
宝塔部署前(Vue)后(ava)端分离项目
通过宝塔面板部署一个SpringBoot+Vue前后端分离项目的指南（三更）
热门推荐
mest的博客
02-01 1万+
阿里云服务器->FinalShell->宝塔面板。 近期需要将自己的一个SpringBoot+Vue前后端分离项目，并且是分模块开发的项目部署到服务器上，记录一下踩坑的地方，结合C站大佬的解决方案，循循善诱一步步部署到服务器上，简单，快速！三更Blog；阿里云服务器，宝塔面板。
若依（前后端分离版）部署全流程 | 宝塔部署SpringBoot项目踩坑日记 | Java调用Python脚本 | CentOS配置Python环境/库，如dlib
m0_73365120的博客
03-31 2503
全面讲述SpringBoot项目部署CentOS服务器。详细介绍若依前后端分离版中后端包括数据库的打包，如何配置需要的服务器环境，如MySQL/Redis，以及如何运行SpringBoot项目。
云服务器 宝塔部署SpringBoot前后端分离项目
weixin_40579395的博客
11-17 3515
手把手教会如何利用宝塔来部署SpringBoot+Vue前后端分离项目。
云服务器Docker部署Vue+SpringBoot前后端分离项目详细教程
07-16
当然，我可以为您提供一个详细教程来帮助您部署Vue+SpringBoot前后端分离项目到云服务器上使用Docker。 首先，确保您已经完成以下准备工作： - 注册一个云服务提供商的账号，并创建一个云服务器实例。 - 在本地环境中安装了Docker，并熟悉Docker的基本操作。 - 本地已经安装了Node.js和npm，以及Vue CLI和Java开发环境。 以下是详细的步骤： 1. 登录到云服务器： 使用SSH工具连接到您的云服务器。例如，使用命令行工具执行以下命令： ``` ssh username@server_ip_address ``` 2. 安装Docker： 根据您的云服务器的操作系统，选择对应的安装方式进行Docker安装。以下是一些常见操作系统的安装命令： - Ubuntu: ``` sudo apt-get update sudo apt-get install docker.io ``` - CentOS: ``` sudo yum update sudo yum install docker ``` 3. 验证Docker安装是否成功： 执行以下命令来验证Docker是否已经成功安装： ``` docker version ``` 4. 构建Vue项目： 在本地开发环境中，使用Vue CLI创建Vue项目，并进行开发和测试。确保项目可以正常运行。 ``` vue create myproject cd myproject npm run serve ``` 5. 打包Vue项目： 在Vue项目根目录下执行以下命令，将Vue项目打包成静态文件。 ``` npm run build ``` 6. 创建SpringBoot项目： 使用Spring Initializr创建SpringBoot项目，并进行开发和测试。确保项目可以正常运行。 - 访问Spring Initializr网站：https://start.spring.io/ - 选择项目的基本设置，如使用的编程语言、构建工具、Spring Boot版本等。 - 添加所需的依赖项，如Spring Web、Spring Data JPA等。 - 点击"Generate"按钮下载生成的SpringBoot项目压缩包。 - 解压缩项目压缩包，并使用您喜欢的集成开发环境（IDE）打开项目。 7. 创建Dockerfile： 在SpringBoot项目的根目录下创建一个名为`Dockerfile`的文件，用于定义Docker镜像的构建步骤。在`Dockerfile`中添加以下内容： ``` FROM openjdk:8-jdk-alpine VOLUME /tmp ADD target/myproject.jar app.jar ENTRYPOINT ["java", "-jar", "/app.jar"] ``` 8. 构建Docker镜像： 在SpringBoot项目的根目录下执行以下命令，构建Docker镜像： ``` docker build -t myproject . ``` 9. 运行Docker容器： 执行以下命令，在Docker中运行SpringBoot项目的Docker容器： ``` docker run -d -p 80:8080 myproject ``` 10. 访问应用： 使用浏览器访问您的云服务器的公网IP地址，即可查看部署好的前后端分离项目。 希望这个详细教程能够帮助您成功部署Vue+SpringBoot前后端分离项目到云服务器上使用Docker。如果您有任何问题，请随时提问！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

桂亭亭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值