服务器端 部署 vue和springboot前后端分离项目

一、服务器相关设置

本服务器运行着halo博客系统,使用Caddy进行反向代理。(Caddy和nginx类似)为了避免在使用Nginx部署vue的时候与Caddy冲突,需要先关闭Caddy。
halo博客关于caddy的介绍

# 开启自启 Caddy 服务
systemctl enable caddy

# 启动 Caddy
service caddy start

# 停止运行 Caddy
service caddy stop

# 重启 Caddy
service caddy restart

# 查看 Caddy 运行状态
service caddy status

一般先运行 service caddy stop停止运行caddy。

二、前端Vue项目的部署

采用Nginx部署前后端分离项目中的前端Vue项目。

  1. 运行 npm run build生成dist文件夹。
  2. 运行Xftp,将dist文件夹复制到服务器的规定文件夹下(该文件夹是通过Nginx的配置文件进行设置)
    image.png
  3. 开启宝塔面板,对Nginx进行配置
    image.png
  4. 重启Nginx服务
    image.png

注意:
① 80端口是http的默认web端口
② 443端口是https的默认web端口
对于本服务器,由于域名配置的是http,故tanzhiyong97.cn对应的默认端口是80。
在配置Nginx的config文件时,如果我们把端口号设置成80,就可以直接访问域名,而不用加端口号。

三、后端springboot项目的部署

  1. 在springboot项目右侧边栏打开maven,将项目打成jar包。
    image.png
    注意的几点
    注意的几点:
  • 数据库在服务器端有没有创建
  • application.yaml文件配置数据库的url,username,password设置是否正确
  • 如果配置了redis,相关redis的配置是否正确
  • 注意端口设置不要产生冲突
  1. 打开Xftp,将生成的jar包复制到指定文件夹(主要是好找,没其他作用)
    image.png
  2. 在Xshell中执行使用 java -jar jar包名称命令,启动springboot程序。
  3. 如果springboot程序配置了redis,还需要在服务器端开启redis
    ① 到达/usr/local/bin目录,运行 redis-server tanconfig/redis.config启动redis服务
    ② 执行redis-cli打开redis客户端,使用ping命令测试redis是否启动成功
    image.png
    redis参考

四、测试程序

在游览器中打开相应网址测试程序。

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页