.png)
手动部署springboot+vue前后端分离项目
一、前置准备
1.项目本地能够跑通
项目本地没有bug。同时要注意两个细节:
- 前端发送请求,需要设置成服务器的ip地址,因此开发时就可以采用统一变量代替ip地址,以后也好修改。
具体操作如下:
main.js 设置全局变量$baseUrl
request.js 中创建
vue工程全局搜索 localhost:9090 替换成 $baseUrl
- 后端规定端口号,在$baseUrl中就可以确定使用该端口号
2.购买云服务器,并重置密码
3.下载XFTP、XShell软件
连接远程服务器进行环境搭建,以及项目上传。免费下载链接如下:
https://www.xshell.com/zh/free-for-home-school/
4.相关软件的压缩包
本文采用压缩包为:
- jdk-8u371-linux-x64.tar.gz
- nginx-1.24.0.tar.gz
- mysql-5.7.42-el7-x86_64.tar.gz
- redis-7.0.11.tar.gz
百度云盘链接如下:待补充。
二、项目打包上传服务器
1.x-shell创建链接
使用x-shell,通过重置的账号密码,连接远程服务器。
2.打包前后端项目
前端项目使用 npm run build 命令,打包会生成dist目录。后端项目使用idea操作,先clean,再package,打包会生成target目录。
3.部署后端项目
1)创建文件夹
2)上传jar包到服务器 /home/server/blog/java 目录
3)设置 application.yml 覆盖
将后端项目的application.yml配置文件,在单独上传到/home/server/blog/java 目录
4)添加启动脚本
5)赋权
4.部署前端项目
1)上传dist文件夹到 /home/server/honey2024/vue
如果是两个前端项目,将另一个项目放在第一个项目的dist目录下即可。
三、安装环境
将所有压缩包通过XFTP上传到服务器/tmp目录下。
1.安装jdk1.8
2.安装nginx
nginx命令
访问:http://公网ip地址/,查看到nginx欢迎界面,安装成功。
修改nginx.conf文件
针对前端项目有两个时的配置,如下:
修改之后记得重启nginx
3.安装redis
1)安装gcc依赖
2)上传安装包,解压
使用Xftp 在/usr/local/src/下上传压缩包。再进入该目录,使用命令解压:
3)编译
自带了一个makedir,不需要像nginx创建了。
4)安装
PREFIX参数指定软件的安装位置,redis的默认安装目录在/usr/bin中。
5)后端启动
前台启动:独占终端界面,一旦退出,服务停止。我们这里使用后端启动。
安装目录/usr/local/redis下创建conf和data目录
6)编写配置文件
使用Xftp,将解压目录中的redis.conf复制到安装目录的conf目录下,并重命名为redis-6379.conf。再修改以下参数:
bind 127.0.0.1 -::1。127.0.0.1只有本机才能访问。将该属性注释或者改成0.0.0.0
port 6379。默认就是6379,以后如果使用多个Redis,才用改。
requirepass 123。登录密码设置
daemonize yes。启用后台启动
dir /usr/local/redis/data。指定文件的默认保持位置
dbfilename dump-6379.rdb。rdb数据备份文件默认的名字
logfile “6379.log”。日志文件名
pidfile /var/run/redis_6379.pid。记录Redis进程id
7)启动服务端
需要带上配置文件。
8)进入客户端
9)关闭客户端
10)关闭服务端
4.安装mysql
1)linux系统会自动携带一个数据库,我们需要把它给卸载掉。
2)安装mysql命令
3)记住临时密码 osGMitUO<56.
4)配置mysql配置文件 my.cnf
5)启动mysql
6)开机启动
7)输入临时密码,登录mysql
8)修改密码并设置权限
9)服务器控制台开放防火墙端口
开放22、80、443、3306、6379、以及你前后端使用到的端口。
10)使用Navicat连接mysql
导入你的sql文件
四、运行程序
1.启动后台程序
2.查看实时日志
至此,全部完成,恭喜你!
- 感谢你赐予我前进的力量