Spring boot +vue前后端分离项目发布Linux(centos7.*)

您所在的位置：网站首页 › linux上启动boot项目 › Spring boot +vue前后端分离项目发布Linux(centos7.*)

Spring boot +vue前后端分离项目发布Linux(centos7.*)

2023-01-23 09:29| 来源: 网络整理| 查看: 265

本实例搭建Spring boot与vue前后端分离项目部署到正式环境，环境是Linux服务器centos7.*版本。本篇主要分三个步骤，具体如下：

Spring boot 打包到发布(支持脚本启动和关闭)；Vue打包到发布；前端分离跨域和vue部署nginx 404问题；一、Spring boot打包和发布 1.1、Spring boot打包：

Spring boot打包jar，可以两个方式，一是通过命令打包，二是借助开发工具maven打包，打包成功到项目目录“target”下查看打包好jar，具体如下：

1.1.1、命令打包：

进入要打包项目根目录，执行如下命令：

mvn clean package

说明：如果以上命令提示不识别“mvn”，需要配置maven环境变量，配置完成关闭doc，重新打开执行；maven环境变量配置方式参考如下文章

Win10配置maven环境

1.1.2、工具打包：

idea提供maven直接找到打包项目选择package，具体效果如下：在这里插入图片描述

1.2、发布Linux环境：

首选把Spring boot项目打好jar上传linux服务器，执行如下命令：

nohup java -jar ***.jar &

说明：以上命令必须加“&”号，不让退出Linux服务就会失效；

1.3、脚本启动Spring boot项目：

脚本分启动项目脚本和停掉项目脚本，具体脚本如下： 1、启动脚本（startup.sh）

#!/bin/bash nohup java -Xms256m -Xmx512m -jar -Dfile.encoding=utf-8 替换自己项目jar名.jar > catalina.out 2>&1 & #tail -f ./catalina.out

2、停掉脚本（shutdown.sh）

#!/bin/bash PID=$(ps -ef | grep 替换自己项目jar名.jar | grep -v grep | awk '{ print $2 }') if [ -z "$PID" ] then echo Application is already stopped else echo kill $PID kill -9 $PID fi 1.4、nginx配置接口服务域名： server { listen 80; server_name navapi.bookboyai.com; location / { root html; index index.html index.htm; proxy_ignore_client_abort on; proxy_pass http://127.0.0.1:2010; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; client_max_body_size 20m; } } 二、Vue打包并且发布： 2.1、vue打包：

打包前把接口地址替换上面部署好接口正式地址，在正式打包，具体执行如下命令：

npm run build

打包好项目下会生成dist目录，上传到Linux服务器，

2.2、配置nginx：

具体如下：

server { listen 80; server_name nav.bookboyai.com; location / { root /home/web/nav/dist; index index.html index.htm; } } 三、前后端分离跨域和nginx提示404问题： 3.1、前后端分离跨域：

如果本地运行正常，打包发布访问接口一次，提示跨域，打开vue项目vue.config.js，查看是否配置代理，如果有把代理拦截配置到nginx，例如我项目配置拦截**prod-api/**需要我在vue域名下nginx添加如下：

location /prod-api/ { proxy_pass http://navapi.bookboyai.com/; add_header Content-Type "text/plain;charset=utf-8"; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST'; }

最后vue nginx配置如下：

server { listen 80; server_name nav.bookboyai.com; location / { root /bkboy/app/bkboy/web/nav/dist; index index.html index.htm; } location /prod-api/ { proxy_pass http://navapi.bookboyai.com/; add_header Content-Type "text/plain;charset=utf-8"; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST'; } } 3.2、nginx提示404：

遇到vue配置nginx后，打开地址提示404，是因为vue路由问题，需要在nginx配置如下：

try_files $uri $uri/ /index.html;

最终vue项目nginx配置如下：

server { listen 80; server_name nav.bookboyai.com; location / { root /bkboy/app/bkboy/web/nav/dist; #index index.html index.htm; try_files $uri $uri/ /index.html; } location /prod-api/ { proxy_pass http://navapi.bookboyai.com/; add_header Content-Type "text/plain;charset=utf-8"; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST'; } }

【本文地址】

Spring boot +vue前后端分离项目发布Linux(centos7.*)

Spring boot +vue前后端分离项目发布Linux(centos7.*)

今日新闻

推荐新闻