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;}

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

前端：

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

接下来就是重头戏：

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

接下来安装宝塔面板：

操作步骤：

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/57ffcc15。

5：

6：登录成功以后，找到以下的目录

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

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

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

9：然后放好之后，看图片进行下一步：

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

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

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

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

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

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

关于springboot vue前后端分离项目部署到阿里云轻量服务器（前后端分开部署）
0.购买阿里云服务器 1.安装jdk 使用yml安装 2.安装mysql 3.安装nginx 4.打包后端项目后端项目更改: 在pom.xml文件中,增加打包成jar包的配置文件 applicati ...
springboot + vue 前后端分离项目部署及服务器配置
项目简介项目实现效果主要实现: 注册.登录.新增.删除员工.websocket消息推送等功能项目yml配置 mybatis:type-aliases-package: com.lps.trave ...
阿里服务器部署springboot+vue前后端分离项目
服务器部署springboot+vue前后端分离项目最近刚刚在实习熟悉公司的业务,所有尝试着自己将项目部署到服务器上.本次部署的项目是Spring Boot+Vue前后端分离项目,后端使用的技术有M ...
从0搭建一个Springboot+vue前后端分离项目(一)安装工具,创建项目
从0搭建一个Springboot+vue前后端分离项目(二)使用idea进行页面搭建+页面搭建参考学习vue官网文档 https://v3.cn.vuejs.org/guide/installati ...
前后端分离项目部署（服务器或本地）
文章目录前后端分离项目部署(服务器或本地) 前端部署(以vue项目为例) 后端部署(以Springboot项目为例) 补充前后端分离项目部署(服务器或本地) 前端部署(以vue项目为例) 部署环境 ...
大屏监控系统实战（4）-如何将SpringBoot+Vue前后端分离项目一次打包为一个Jar包运行？
玩过最新版Dubbo管控台的都知道,人家是个前后端分离的项目,可是一条打包命令能让两个项目整合在一起,生成一个jar包,这样的好处显而易见,部署的时候服务器不需要安装node环境单独部署前端项目,或者 ...
SpringBoot+Vue前后端分离项目的搭建及简单开发（这次保证看明白~）
文章目录概述一.搭建SpringBoot后端 1.sql脚本 2.新建SpringBoot项目 3.MP代码生成 4.编写Controller 二.搭建Vue前端 1.IDEA安装Vue.js插件 ...
SSM项目/SpringBoot项目/SpringBoot+Vue前后端分离项目图片上传并查看功能实现汇总
SSM项目下的图片上传: 1.前端Js代码:用户点击"上传头像"按钮后,会执行uploadPhoto()的方法. <button type="button" ...
从0搭建一个Springboot+vue前后端分离项目(七)完善前台与后台的联系,完善功能接口
将之前前端写的表格内容,与数据库新建的表进行对应启动项目把写死的TableDa数据删掉.因为最终要从后台读取完善新增接口 <el-button type="primary&quo ...

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

操作步骤：

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

最新文章

热门文章