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  文件 就意味着后台启动成功了!!!这个时候你就可以看看是否能启动成功了。


目录
相关文章
|
1月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
155 1
|
2月前
|
前端开发 Java 关系型数据库
基于Java+Springboot+Vue开发的鲜花商城管理系统源码+运行
基于Java+Springboot+Vue开发的鲜花商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的鲜花商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。技术学习共同进步
210 7
|
1月前
|
供应链 JavaScript BI
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
这是一款专为小微企业打造的 SaaS ERP 管理系统,基于 SpringBoot+Vue+ElementUI+UniAPP 技术栈开发,帮助企业轻松上云。系统覆盖进销存、采购、销售、生产、财务、品质、OA 办公及 CRM 等核心功能,业务流程清晰且操作简便。支持二次开发与商用,提供自定义界面、审批流配置及灵活报表设计,助力企业高效管理与数字化转型。
148 2
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
|
3月前
|
前端开发 Cloud Native Java
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
|
5月前
|
XML Java 应用服务中间件
Spring Boot 两种部署到服务器的方式
本文介绍了Spring Boot项目的两种部署方式:jar包和war包。Jar包方式使用内置Tomcat,只需配置JDK 1.8及以上环境,通过`nohup java -jar`命令后台运行,并开放服务器端口即可访问。War包则需将项目打包后放入外部Tomcat的webapps目录,修改启动类继承`SpringBootServletInitializer`并调整pom.xml中的打包类型为war,最后启动Tomcat访问应用。两者各有优劣,jar包更简单便捷,而war包适合传统部署场景。需要注意的是,war包部署时,内置Tomcat的端口配置不会生效。
1592 17
Spring Boot 两种部署到服务器的方式
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的留守儿童爱心网站设计与实现(计算机毕设项目实战+源码+文档)
博主是一位全网粉丝超过100万的CSDN特邀作者、博客专家,专注于Java、Python、PHP等技术领域。提供SpringBoot、Vue、HTML、Uniapp、PHP、Python、NodeJS、爬虫、数据可视化等技术服务,涵盖免费选题、功能设计、开题报告、论文辅导、答辩PPT等。系统采用SpringBoot后端框架和Vue前端框架,确保高效开发与良好用户体验。所有代码由博主亲自开发,并提供全程录音录屏讲解服务,保障学习效果。欢迎点赞、收藏、关注、评论,获取更多精品案例源码。
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的家政服务管理平台设计与实现(计算机毕设项目实战+源码+文档)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
|
5月前
|
JavaScript 搜索推荐 Java
基于SpringBoot+Vue实现的家乡特色推荐系统设计与实现(源码+文档+部署)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
|
5月前
|
JavaScript NoSQL Java
基于SpringBoot+Vue实现的大学生就业服务平台设计与实现(系统源码+文档+数据库+部署等)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
|
5月前
|
JavaScript Java 测试技术
基于Java+SpringBoot+Vue实现的车辆充电桩系统设计与实现(系统源码+文档+部署讲解等)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!