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


目录
相关文章
|
3天前
|
Java 关系型数据库 MySQL
保姆级教程——将springboot项目部署到阿里云服务器包含环境配置(小白包会)
本文档详细介绍了将SpringBoot项目部署到阿里云服务器的步骤。首先,通过Xshell连接服务器,使用公网IP地址。接着,下载JDK的Linux版本,使用XFTP上传并解压,配置环境变量。然后,安装MySQL 5.7,包括下载YUM源、安装、启动服务以及修改root密码和开启远程访问。最后,将SpringBoot项目打包成jar,上传至服务器,使用`java -jar`命令运行,通过`nohup`确保服务持续运行。配置安全组以允许远程访问。
|
4天前
|
JavaScript 前端开发 搜索推荐
Vue 的服务器端渲染(SSR)和客户端渲染(CSR)在渲染过程、性能、用户体验等方面都存在显著的区别
【5月更文挑战第8天】Vue 的 SSR 和 CSR 在渲染上有明显差异。SSR 服务器端生成 HTML 返回给浏览器,提供更快首屏加载和更好的 SEO,但增加服务器负担。CSR 客户端渲染,首次加载可能较慢,但交互更流畅,开发更简单。两者各有优劣,需根据项目需求权衡选择。
11 2
|
18天前
|
缓存 JavaScript 前端开发
Vue的服务端渲染:Vue的服务器端渲染(SSR)技术详解
【4月更文挑战第24天】Vue的服务器端渲染(SSR)能解决SPA的首屏加载和SEO问题。SSR预渲染HTML,提升首屏速度,改善SEO,提供更好的用户体验。Nuxt.js是Vue的SSR框架,简化开发流程。但SSR增加服务器压力,开发成本高,且需处理缓存问题。选择SSR需权衡优劣。本文旨在帮助理解Vue SSR原理、优势及实践方法。
|
24天前
|
JavaScript 前端开发 UED
Vue工具和生态系统: Vue.js和服务器端渲染(SSR)有关系吗?请解释。
Vue.js是一个渐进式JavaScript框架,常用于开发单页面应用,但其首屏加载较慢影响用户体验和SEO。为解决此问题,Vue.js支持服务器端渲染(SSR),在服务器预生成HTML,加快首屏速度。Vue.js的SSR可手动实现或借助如Nuxt.js的第三方库简化流程。Nuxt.js是基于Vue.js的服务器端渲染框架,整合核心库并提供额外功能,帮助构建高效的应用,改善用户体验。
20 0
|
25天前
|
监控 应用服务中间件 网络安全
购买阿里云服务器后如何将自己的项目部署到服务器并上线?
在阿里云服务器上部署项目涉及准备项目、配置服务器、设置SSH密钥、连接服务器、安装所需软件、部署项目、配置Web服务器(如果需要)、测试项目、监控和维护,最后上线。确保项目完整并测试无误,配置安全组和云盾,使用SSH连接,安装OS、数据库和编程环境。通过Git同步代码,配置Nginx或Apache,测试正常后正式上线。利用阿里云文档和教程辅助操作。
112 3
|
29天前
|
关系型数据库 MySQL 数据库连接
Django(四):Django项目部署数据库及服务器配置详解(MySQL)
Django(四):Django项目部署数据库及服务器配置详解(MySQL)
91 11
|
11天前
|
存储 弹性计算 固态存储
阿里云服务器CPU内存配置详细指南,如何选择合适云服务器配置?
阿里云服务器配置选择涉及CPU、内存、公网带宽和磁盘。个人开发者或中小企业推荐使用轻量应用服务器或ECS经济型e实例,如2核2G3M配置,适合低流量网站。企业用户则应选择企业级独享型ECS,如通用算力型u1、计算型c7或通用型g7,至少2核4G配置,公网带宽建议5M,系统盘可选SSD或ESSD云盘。选择时考虑实际应用需求和性能稳定性。
117 6
|
2天前
|
负载均衡 固态存储 Linux
阿里云轻量应用服务器、云服务器、gpu云服务器最新收费标准参考
轻量应用服务器、云服务器、gpu云服务器是阿里云服务器产品中,比较热门的云服务器产品类型,不同类型的云服务器产品收费模式与收费标准是不一样的,本文为大家展示这几个云服务器产品的最新收费标准情况,以供参考。
阿里云轻量应用服务器、云服务器、gpu云服务器最新收费标准参考
|
2天前
|
弹性计算 负载均衡 容灾
应用阿里云弹性计算:打造高可用性云服务器ECS架构
阿里云弹性计算助力构建高可用云服务器ECS架构,通过实例分布、负载均衡、弹性IP、数据备份及多可用区部署,确保业务连续稳定。自动容错和迁移功能进一步增强容灾能力,提供全方位高可用保障。
9 0
|
2天前
|
存储 弹性计算 监控
探索阿里云弹性计算:如何优化云服务器ECS的性能与成本
在云时代,【阿里云ECS】的性能优化与成本控制至关重要。利用实例规格选择、自动伸缩、网络和存储配置,可增强性能、减少成本。结合监控工具和优化建议,用户能解决性能问题,提升应用稳定性,实现高效且经济的云计算运营。
9 1