SpringBoot + Vue 前后端分离项目部署到服务器上

简介: SpringBoot + Vue 前后端分离项目部署到服务器上

第一步首先:

首先要在 controller层 上+ @CrossOrigin  跨域注解

第二步:要新建一个跨域的配置类

private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("http:xxxxxxx");         此处要修改成你的服务器IP地址
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址 
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        corsConfiguration.setMaxAge(MAX_AGE);
        return corsConfiguration;
    }

后端大致就这些,这些你在部署项目之前大概都已经修改好了

前端:

3bdde28a709642f882a7099a1178a5e8.png

===========================================================

接下来就是重头戏:

首先我们需要一个纯净的服务器!!!!(需要跟刚买的时候一样)  安装宝塔面板,因为我尝试过用自己的服务器搭建项目,但是最终因为种种原因导致最终项目部署成功了,但是页面非常卡顿。

接下来安装宝塔 面板:

操作步骤:

1:使用标准方式登录 Linux 实例(推荐)。您也可以根据实际操作习惯,选择其他不同的登录方式(Xshell)

2: 执行以下命令,下载并安装宝塔面板。

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

返回如下结果表示安装成功:

Created symlink from /etc/systemd/system/dbus-org.fedoraproject.FirewallD1.service to /usr/lib/systemd/system/firewalld.service.
Created symlink from /etc/systemd/system/multi-user.target.wants/firewalld.service to /usr/lib/systemd/system/firewalld.service.
success
==================================================================
Congratulations! Installed successfully!
==================================================================

3:记录返回结果中的 “面板地址”、“username” 和 “password” 的参数值。


==================================================================
外网面板地址: http://114.xxx.xxx.188:8888/57ffcc15
内网面板地址: http://172.xx.x.42:8888/57ffcc15
username: r4tpci0c
password: eb691ecc
If you cannot access the panel,
release the following panel port [8888] in the security group
若无法访问面板,请检查防火墙/安全组是否有放行面板[8888]端口
==================================================================

4:在本地计算机中,打开浏览器,输入记录的“面板地址”参数值,访问进入宝塔面板页面。

例如 http://114.xxx.xxx.188:8888/57ffcc155e049806afba40ae8711eb7251053627.png

5:

6:登录成功以后,找到以下的目录

5c5329621e3343fa93c4514c0ca87ec1.png

7:将springBoot 项目打包成一个Jar  包  放到 http 目录下

76f13d7f7bee4f6f8fb0c0bd047dc68e.png

8:将前端Vue 项目 使用:npm  run  build 指令 打包 ,打包完成后,会有一个dist  文件

f79ea7f2a47042aa904fc33e3790f13c.png

然后将里面的所有文件 全部拷贝到 下来  放到 刚刚宝塔面板上的http 文件夹下面

6924dcf0d05c42978b9b501031db65b6.png

29e5438bd5674b69b52aa51a8ad8009d.png

9:然后放好之后,看图片进行下一步 :

ece68846051e4b8e934a7756964e8a27.png

066ea067a7bc43f2876ff3123ff463db.png

把网站目录修改成:你刚刚存放文件的目录

c7588982f06c4392ba5cca7bd9983b82.png

10:现在就可以用ip 地址去访问前端Vue  页面了 ,切记开放端口号!!!

623819c7ecfa440bb96ab7985121d68c.png

11:来到宝塔面板, 添加一个Mysql数据库

64de56c87e8843a38c66f6bed4455274.png

12:最后来到宝塔面板文件页:打开终端 在终端下输入命令:

nohup java -jar  你的项目名.jar &

然后SpringBoot项目  会生成一个 nohup.out  文件 就意味着后台启动成功了!!!这个时候你就可以看看是否能启动成功了。


目录
相关文章
|
2月前
|
前端开发 JavaScript Java
SpringBoot项目部署打包好的React、Vue项目刷新报错404
本文讨论了在SpringBoot项目中部署React或Vue打包好的前端项目时,刷新页面导致404错误的问题,并提供了两种解决方案:一是在SpringBoot启动类中配置错误页面重定向到index.html,二是将前端路由改为hash模式以避免刷新问题。
229 1
|
3月前
|
JavaScript 前端开发 应用服务中间件
【Vue面试题三十】、vue项目本地开发完成后部署到服务器后报404是什么原因呢?
这篇文章分析了Vue项目在服务器部署后出现404错误的原因,主要是由于history路由模式下服务器缺少对单页应用的支持,并提供了通过修改nginx配置使用`try_files`指令重定向所有请求到`index.html`的解决方案。
【Vue面试题三十】、vue项目本地开发完成后部署到服务器后报404是什么原因呢?
|
28天前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
53 4
|
1月前
|
关系型数据库 应用服务中间件 数据库
项目部署二:服务器和环境配置
项目部署二:服务器和环境配置
|
2月前
|
JavaScript 前端开发
vue配合axios连接express搭建的node服务器接口_简单案例
文章介绍了如何使用Express框架搭建一个简单的Node服务器,并使用Vue结合Axios进行前端开发和接口调用,同时讨论了开发过程中遇到的跨域问题及其解决方案。
56 0
vue配合axios连接express搭建的node服务器接口_简单案例
|
2月前
|
JavaScript Linux 开发工具
如何将nodejs项目程序部署到阿里云服务器上
该文章详细描述了将Node.js项目部署到阿里云服务器的步骤,包括服务器环境配置、项目上传及使用PM2进行服务管理的过程。
|
3月前
|
存储 JavaScript 前端开发
Vue中实现图片上传,上传后的图片回显,存储图片到服务器 【使用对象存储OSS】
这篇文章介绍了在Vue中实现图片上传到阿里云OSS对象存储服务的完整流程,包括服务端签名直传的前提知识、后端设置、前端组件封装以及图片上传和回显的效果展示。
|
JavaScript Java 关系型数据库
Springboot+vue打包部署到线上服务器
整合springboot+vue的项目,打包成jar包到线上服务器运行
Springboot+vue打包部署到线上服务器
|
5天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
5天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。