在linux服上使用nginx+tomcat部署若依前后端分离版本(RuoYi-Vue)

发布时间:2023年12月18日

一、先拉工程,地址:RuoYi-Vue: 🎉 基于SpringBoot,Spring Security,JWT,Vue & Element 的前后端分离权限管理系统,同时提供了 Vue3 的版本

二、在window上用idea打开跑通,可参考工程里的操作手册

后端启动:需要安装jdk,maven,mysql,redis环境

?前端启动:需要安装node,vue-cli环境

命令窗口执行:

npm install -g yarn # 全局安装yarn
yarn install # 安装项目依赖
yarn run dev # 启动前端项目
yarn build:prod # 后续打包上传到linux需要执行

效果:

三、linux安装环境(windows上可安装winscp,便于上传文件到linux)

winscp:winscp安装及关联putty使用_putty.exe没有找到-CSDN博客

jdk:linux系统安装jdk-CSDN博客?

mysql:Linux7安装mysql数据库以及navicat远程连接mysql-CSDN博客?

redis:linux7安装redis7.2.3以及使用ssh方式远程连接redis教程-CSDN博客?

nginx:阿里云服务linux系统CentOs8.5安装/卸载nginx1.15.9_centos8删除nginx-CSDN博客

tomcat:?Linux7安装tomcat9.0.83教程-CSDN博客

四、后端部署

1、?后端打包:点开右侧maven,先点clean,执行完后点package,执行完后左侧target出现的war包就是我们需要上传到linux的包,若找不到打开文件管理看看,可能是idea隐藏了此类文件。

2、将包上传到tomcat的webapps目录下

?

3、重启tomcat

cd /usr/local/tomcat/bin
./shutdown.sh
./startup.sh

五、前端部署?

1、前端打包,打开命令行执行yarn build:prod,最后生成dist文件

?2、将dist里文件上传到linux,存放位置可自定义

3、修改nginx

    server {
        listen       80;
        server_name  www.xxx.com; # 域名,没有域名写主机ip也可以

        location / {
            root   /home/app/minigame/ui; # 存放前端文件的地址
            try_files $uri $uri/ /index.html;# 不加刷新会404
            index  index.html index.htm;
        }

        location ^~/prod-api/ { # 处理跨域,请求到后端tomcat
            proxy_pass http://127.0.0.1:8080/;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

?其中prod-api对应生产环境设置的前缀

4、重启nginx

cd /usr/local/nginx/sbin
./nginx -s reload

六、外网访问

域名访问:http://www.xxx.com

ip访问:http://8.xx.xx.98

注:

若页面显示但network请求到后端404,可查看tomcat日志排查问题。

若页面404,可查看nginx配置/日志排查问题。

文章来源:https://blog.csdn.net/cherishSpring/article/details/134958434
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。