手把手教你部署ruoyi前后端分离版本并解决部署到服务器上的Nginx后页面登录后点击注销显示Nginx404页面
作者:mmseoamin日期:2023-12-20
  1. 下载源码(当前版本3.8.5)RuoYi-Vue: 🎉 基于SpringBoot,Spring Security,JWT,Vue & Element 的前后端分离权限管理系统,同时提供了 Vue3 的版本 (gitee.com)

  1. 创建数据库(一定要是这三个,否则部署成功可能菜单乱码,我就是乱码后删库重新按照下图建的)

手把手教你部署ruoyi前后端分离版本并解决部署到服务器上的Nginx后页面登录后点击注销显示Nginx404页面,第1张 手把手教你部署ruoyi前后端分离版本并解决部署到服务器上的Nginx后页面登录后点击注销显示Nginx404页面,第2张

3. 项目导入IDEA,启动后端

手把手教你部署ruoyi前后端分离版本并解决部署到服务器上的Nginx后页面登录后点击注销显示Nginx404页面,第3张

4. 下载Node.js ,注意ruoyi3.8.5版本的前端只能试用node16或以下的版本,否则下载依赖正常,启动测试环境或打包就会报错

5. 安装前端依赖

5.1. 进入RuoYi-Vue-master\ruoyi-ui文件夹下打开cmd执行npm install下载依赖

如果是国内网络请使用以下来下载依赖(下载速度飞快,若依官网推荐的) :

npm install --registry=https://registry.npmmirror.com

注意:如果npm install时一直卡住不动:

F:\ruoyi-ui>npm install --registry=https://registry.npmmirror.com
[..................] \ idealTree:ruoyi-ui: sill idealTree buildDeps  ---------------------卡在这一步不动

网上查到的结果都是设置淘宝镜像再次下载

npm config set registry https://registry.npm.taobao.org,更换淘宝镜像地址

我自己的问题是因为公司网络是国外的,设置代理之后就成功安装了

手把手教你部署ruoyi前后端分离版本并解决部署到服务器上的Nginx后页面登录后点击注销显示Nginx404页面,第4张

5.2 直接启动

npm run dev

启动成功后会自动打开浏览器,登录即可正常使用

以下是打包ruoyi前端后放入Nginx中启动

  1. 前端打包
npm run build:prod  
2. 把打包后的dist文件夹移动到nginx下的html文件夹下:
手把手教你部署ruoyi前后端分离版本并解决部署到服务器上的Nginx后页面登录后点击注销显示Nginx404页面,第5张
3. 修改nginx的配置(nginx\conf\nginx.conf):
worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80; #前端项目的端口
        server_name  localhost;
        location / {
                          #(html/dist即可,代表在nginx根目录下的html中dist文件夹)
        root   html/dist; #vue前端项目打包后的dist文件夹的地址的路径
        index  index.html index.htm;
        }
        
      location /prod-api/{
          proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://localhost:8080/;       #后台项目的运行端口
}
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}
解决部署到服务器上的Nginx后页面登录后点击注销显示Nginx404页面的修复版配置:
 server {
        listen       81; #前端项目的端口
        server_name  localhost;
	root html/ruoyi-vue ;#代表在nginx根目录下的html/ruoyi-vue文件夹,ruoyi-vue是我的改名,原本叫dist
        location / {
            try_files $uri $uri/ @router; #解决404问题的关键行
            index  index.html index.htm;
        }
        location @router {
            rewrite ^.*$ /index.html last;
        }
        
      location /prod-api/{
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://localhost:8888/;       #后台项目的运行端口
      }
 
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
4. 运行Nginx ,在Nginx根目录运行cmd,输入start nginx即可启动,1秒之后访问localhost即可(如需重启Nginx在cmd中输入nginx -s reload即可):
手把手教你部署ruoyi前后端分离版本并解决部署到服务器上的Nginx后页面登录后点击注销显示Nginx404页面,第6张

注意:nginx的路径不能有中文,nginx.conf中配置也不能有中文,否则启动会报错,可以到日志中能看到错误信息,如果nginx启动一秒又无法访问localhost,日志又什么都没有,那大概就是80端口被占用,如果你不知道什么软件占用了80端口,那么直接重启就好

ruoyi的代码生成非常方便,前后端都会自动生成(生成之前的配置在页面一定要填写完整),在生成好的.js文件中的url与后台定义的接口Url除了查询方法外其他几乎都需要自己修改,否则无法使用

Nginx或ruoyi后端打包成jar后注册成window服务(电脑重启前后端都不需要手动启动项目就能直接访问)

附带一份RuoYi的扩展项目,自己复制到一个.html中看(我用的就是postgre版的ruoyi):


名称 说明 地址
RuoYi-Vue3 RuoYi-Vue的前端(Vue3 Element Plus Vite)版本 https://github.com/yangzongzhuan/RuoYi-Vue3
https://gitee.com/y_project/RuoYi-Vue
RuoYi-Vue3 RuoYi-Vue的前后端分离版本(前后端代码在一块的官网地址ruoyi-ui就是前端,其他是后端) https://gitee.com/y_project/RuoYi-Vue
RuoYi-App RuoYi-Vue的移动端版本 https://gitee.com/y_project/RuoYi-App
RuoYi-Vue-fast RuoYi-Vue单应用版本 https://github.com/yangzongzhuan/RuoYi-Vue-fast
RuoYi-Vue-Oracle RuoYi-Vue的Oracle版本 https://github.com/yangzongzhuan/RuoYi-Vue-Oracle
RuoYi-Vue-Activiti 集成Activiti 6.x工作流版本 https://gitee.com/smell2/ruoyi-vue-activiti
RuoYi-Vue-Process 闲鹿工作流版本 https://gitee.com/calvinhwang123/RuoYi-Vue-Process
RuoYi-Vue-Flowable 集成Flowable 6.x工作流版本 https://gitee.com/tony2y/RuoYi-flowable
RuoYi-Vue-Antdv RuoYi-Vue的纯前端Antdv版本 https://gitee.com/fuzui/RuoYi-Antdv
RuoYi-AiDex-Sharp RuoYi-Vue的纯前端Antdv版本,重点进行了UI升级美化等 https://gitee.com/big-hedgehog/aidex-sharp
RuoYi-Vue-AutoEE RuoYi-Vue的Vite、ant-design-vue3版本 https://gitee.com/Double_AutoEE/AutoEE
RuoYi-Vue-Sqlserver RuoYi-Vue的Sqlserver版本,集成CAS、P6spy等 https://gitee.com/MaShangYouLi/RuoYi-Vue-SQLServer-C
RuoYi-Vue-Postgresql-master RuoYi-Vue的Postgres版本 https://gitee.com/suxia2/RuoYi-Vue-Postgresql (ruoyi3.8.5)
https://gitee.com/find_the_unexpected_treasure/ruoyi-postgre(ruoyi3.8.4)
RuoYi-Vue-Sqlserver RuoYi-Vue的Sqlserver版本 https://gitee.com/wpp011/RuoYi-Vue-SQLServer
RuoYi-Vue-Sqlserver RuoYi-Vue的Sqlserver版本 https://gitee.com/Sxile/RuoYi-Vue-Sqlserver
RuoYi-Vue-React RuoYi-Vue的React版本 https://gitee.com/whiteshader/ruoyi-react
RuoYi-Vue-NET RuoYi-Vue的.NET5版本 https://gitee.com/izory/ZrAdminNetCore
RuoYi-Vue3-NET RuoYi-Vue3的.NET6版本 https://gitee.com/ccnetcore/yi
RuoYi-Vue-Rust RuoYi-Vue的Rust版本 https://github.com/mengyou658/actix_admin
RuoYi-Vue-Plus 集成Mybatis-Plus、Hutool、OSS存储、分布式锁等组件 https://gitee.com/dromara/RuoYi-Vue-Plus
RuoYi-Vue-Plus RuoYi-Vue3的腾讯开源框架TDesign UI框架 https://gitee.com/zhangmrit/RuoYi-Vue-Plus
RuoYi-Vue-Super 集成Websocket、Flowable、Xdh-Map、可视化开发等组件 https://gitee.com/rainsuper/RuoYi-Vue-Super
RuoYi-Vue-Source 集成Flowable、Websocket、报表、支付等组件的零代码版本 https://gitee.com/open-source-byte/source-vue
RuoYi-Vue-Nocode 集成Activiti7、Mongodb、Form-Making等组件的零代码版本 https://gitee.com/atlus/ruoyi-vue-nocode
RuoYi-Vue-Plus-Activiti 集成的activiti工作流版本 https://gitee.com/sgs98/RuoYi-Vue-Plus-Activiti
RuoYi-Vue-Plus-Flowable 集成的flowable工作流版本 https://gitee.com/KonBAI-Q/ruoyi-flowable-plus
RuoYi-Vue-YuXi 集成Sa-Token、magic-api、Hutool 等组件 https://gitee.com/histoneUp/yu-xi-admin
RuoYi-Vue-S 集成Mybatis-Plus、多租户、动态数据权限、OSS云存储等组件 https://gitee.com/sunseagear/RuoYi-Vue-S
RuoYi-Vue-MultiTenant RuoYi-Vue的多租户版本 https://gitee.com/leslie8195/ruo-yi-vue-multi-tenant
RuoYi-Vue-SaToken RuoYi-Vue的SaToken版本 https://gitee.com/wangming123456/ruoyi-satoken
RuoYi-Vue3-Ts RuoYi-Vue3的Ts版本 https://gitee.com/lyforvue/ruoyi_vue3_ts
RuoYi-Vue3-Ts RuoYi-Vue3的Ts版本 https://github.com/zzh948498/RuoYi-Vue3-ts
RuoYi-Vue-Mobile RuoYi-Vue的移动端Uniapp版本,集成uView2.0+u-charts等组件 https://gitee.com/yinm/RuoYi-Mobile
RuoYi-Vue-Uniapp RuoYi-Vue的移动端Uniapp版本 https://gitee.com/big-hedgehog/ruoyi-uniapp
RuoYi-Vue-Flutter RuoYi-Vue的移动端Flutter版本 https://github.com/420136525/ruoyi_flutter_app
RuoYi-Vue-Uniapp RuoYi-Vue的移动端Uniapp版本包括权限认证、字典翻译等 https://gitee.com/_q494000616q_/ruoyi-uniapp
RuoYi-R2dbc RuoYi-Vue的R2dbc版本 https://gitee.com/sn-yang/ruoyi-webflux-r2dbc-vue3
RuoYi-Vue-Hibernate RuoYi-Vue的Hibernate版本 https://gitee.com/inprise80/ruoyi-vue-hibernate2
RuoYi-Sqlite RuoYi-Vue的Sqlite版本 https://gitee.com/tianyv/ruoyi-sqlite3
RuoYi-Jpa RuoYi-Vue的jpa版本 https://gitee.com/bright-sword-40/ruoyi-jpa
RuoYi-dameng RuoYi-Vue的达梦DM8的版本 https://gitee.com/azun/ruoyi-dameng
RuoYi-metaee RuoYi-Vue + MybatisPlus + dynamic-datasource + Knife4j等 https://gitee.com/metaee/metaee-boot
RuoYi-Mybatis-Plus RuoYi-Vue + MybatisPlus 纯净版、项目全栈脚手架 https://gitee.com/tellsea/ruoyi-vue-plus
RuoYi-Mybatis-Plus RuoYi-Vue + MybatisPlus + Lombok + 国产数据库适配 https://gitee.com/sou100/ruoyi-mybatis-plus
RuoYi-Vue-Plus-Sqlserver RuoYi-Vue + MybatisPlus + Sqlserver版本 https://gitee.com/qu_bing/ruoyi-vue-plus-sqlserver
RuoYi-Vue-Plus-Tdengine RuoYi-Vue + MybatisPlus + Tdengine版本 https://gitee.com/zhangbg/ruoyi-plus-tdengine
RuoYi-Vue-FluentMyBatis RuoYi-Vue版,集成Fluent-Mybatis,适配代码生成器 https://lemonbx.coding.net/public/ruoyi/ruoyi-vue-fluentmybatis/git
RuoYi-Vue-tkmapper RuoYi-Vue的tk.mapper版本 https://gitee.com/caiwl_admin/ruoyi-vue-tkmapper
RuoYi-Vue-Nway-JDBC RuoYi-Vue的Nway-JDBC版本 https://gitee.com/nway/RuoYi-Vue/tree/nway
RuoYi-Vue-Nutz RuoYi-Vue的Nutz框架版本 https://github.com/TomYule/ruoyi-vue-nutz
RuoYi-Vue-Postgresql-Electron RuoYi-Vue的Postgresql的桌面版,要集成了web桌面打印 https://gitee.com/suxia2/ruo-yi-vue-postgresql-electron
RuoYi-Vue-Postgresql RuoYi-Vue的Postgresql版本 https://gitee.com/suxia2/RuoYi-Vue-Postgresql
RuoYi-Vue-Postgresql RuoYi-Vue的Postgresql版本 https://gitee.com/cheenmo/ruoyi-vue-pg
RuoYi-Vue-Postgresql RuoYi-Vue的Postgresql版本 https://gitee.com/p0mp0k0/RuoYi-Vue-Postgresql
RuoYi-Vue-Postgresql RuoYi-Vue的Postgresql版本 https://github.com/Mr8god/RuoYi-Vue-PostgreSQL
RuoYi-Vue-python 若依Python语言版本 https://gitee.com/liqianglog/django-vue-admin/tree/v1.1.2
RuoYi-Vue-Go 若依Go语言版本 https://gitee.com/tiger1103/gfast/tree/os-v2
RuoYi-Vue3-Go 基于RuoYi-Vue3的Go语言版本 https://gitee.com/smell2/BaiZe
RuoYi-Vue3-vuecli 基于RuoYi-Vue3的vue-cli版本 https://gitee.com/cicada-singing/ruoyi-vue3-cli
RuoYi-Vue-wind 集成Mybatis-Plus、shardingsphere、lombok等组件 https://gitee.com/zhangmrit/RuoYi-Vue
RuoYi-Vue-Mybatis-plus 集成Mybatis-Plus、EasyCaptcha、lombok及模块调整 https://gitee.com/nottyjay/ruoyi-vue-mybatis-plus
RuoYi-Vue-BeetlSql 集成Lombok+BeetlSql3.X+Undertow https://gitee.com/JavaLionLi/RuoYi-Vue-BeetlSql
RuoYi-Vue-Keycloak 集成了keycloak单点登录功能 https://gitee.com/greetings_gitee/RuoYiVueKeycloak
RuoYi-Vue3-Cas 集成了RuoYi-Vue3 + CAS5.3.16单点登录功能 https://gitee.com/mikulove666/ruoyi-vue-cas
RuoYi-Vue-Cas 集成了spring-security-cas单点登录功能 https://gitee.com/ggxforever/RuoYi-Vue-cas
RuoYi-Vue-Gradle 集成Gradle + Kotlin版本 https://gitee.com/yizems/RuoYi-Vue/tree/gradle-kotlin
RuoYi-Antdv-Flowable-plus 美化Antv + MybatisPlus + Flowable版本 https://gitee.com/lwq8886666/ruo-yi-antdv-flowable-plus
RuoYi-Vue-UUID RuoYi-Vue修改主键为UUID版本 https://gitee.com/allen056/ruo-yi-vue-uuid
RuoYi-Vue_Oauth2.0 集成Oauth2.0实现登录,认证授权 https://pan.baidu.com/s/1OVgEAe9mwBc6kkKHxX8ZCA(提取码: c475)
RuoYi-Vue-Atomikos 集成atomikos分布式事务 https://gitee.com/zsiyang/ruoyi-vue-atomikos
RuoYi-Vue-Report 集成数据大屏、地图示例(热力图、区域图、检索等) https://gitee.com/greenant/Ruoyi-vue-Report
RuoYi-Vue-Process 基于闲鹿工作流版本的扩展 https://gitee.com/laya1989/ruo-yi-vue-process-3.4.0
RuoYi-Vue-YunaiV 集成文件服务、apollo、监控、分布式锁等组件 https://github.com/YunaiV/ruoyi-vue-pro
RuoYi-Vue-Swagger 集成Swagger-bootstrap-ui,支持代码生成Api... https://gitee.com/juniorRay/ruoyi-vue-swagger
RuoYi-Vue-GoogleTotp 集成google authenticator,支持角色树形模式... https://gitee.com/richardgong1987/RuoYi-baby
RuoYi-Vue-expand 集成Ureport2、积木报表、雪花主键 https://gitee.com/magb/ruoyi-vue-expand
RuoYi-Vue-JFinal 集成JFinal作为web框架 https://gitee.com/ycss/habit
RuoYi-hh-vue 基于若依模块拆分,freemarker改造,并优化,自研工作流 https://gitee.com/min290/hh-vue
RuoYi-mymx2 基于若依核心工具包、自动配置、多租户 https://gitee.com/mymx2/RuoYi-Vue
RuoYi-Tellsea 基于若依的Java全栈脚手架 https://gitee.com/tellsea/project-system
RuoYi-Vue-uniapp-wx 基于若依后台管理系统的微信小程序 https://gitee.com/rahman/AbuCoder-RuoYi-Vue-uniapp-wx
RuoYi-Vue-wechat-mp 集成公众号模板,微信网页授权认证 https://gitee.com/suimu/ruoyi-wechat-mp
RuoYi-Vue-Blog 基于RuoYi-Vue的博客网站 https://gitee.com/Ning310975876/ruo-yi-vue-blog
RuoYi-Vue-KMS 基于RuoYi-Vue的知识管理系统 https://gitee.com/chenzuheng001/RuoYi-Vue-KMS
RuoYi-Vue-MES 基于RuoYi-Vue的MES生产执行管理系统 https://gitee.com/kutangguo/ktg-mes
RuoYi-Vue-CMS 基于RuoYi-Vue的CMS内容管理系统 https://gitee.com/liweiyi/RuoYi-Vue-CMS
RuoYi-link-wechat 基于人工智能的企业微信 SCRM 综合解决方案 https://gitee.com/LinkWeChat/link-wechat
RuoYi-V-IM 基于若依超轻量级聊天软件 https://gitee.com/lele-666/V-IM
RuoYi-Vue-easy-report 基于若依在线Web报表工具平台 https://gitee.com/devzwd/easy-report
RuoYi-wx 基于若依微信管理平台 https://gitee.com/joolun/JooLun-wx
RuoYi-wxopen 基于若依微信服务商平台 https://gitee.com/mxiaoguang/wxopen
RuoYi-kwswitch 基于若依智能开关平台 https://gitee.com/kerwincui/kwswitch
RuoYi-ewem 基于若依溯源防伪系统 https://gitee.com/qrcode_project/ewem
RuoYi-zhunian 基于若依支付系统 https://gitee.com/zhunian/smart-pay-plus-vue
RuoYi-wumei 基于若依智能家居系统 https://gitee.com/kerwincui/wumei-smart
RuoYi-tanhuihuang 基于若依电影视频系统 https://gitee.com/tanhuihuang/ruoyi-media
RuoYi-knowledgegraph 基于可视化知识图谱 https://gitee.com/liaoquefei/knowledgegraph
RuoYi-payshop 基于若依多商户商城管理系统 https://gitee.com/JiaGou-XiaoGe/payshop
RuoYi-shop 基于若依和litemall的商城后台融合项目 https://gitee.com/hgl168918/ruoyi-shop
RuoYi-crm 基于若依平的多租户CRM系统 https://gitee.com/jundee/RuoyiCRM
RuoYi-zhaoxinpms 基于若依的智慧物业系统 https://gitee.com/fanhuibin1/zhaoxinpms
RuoYi-community 基于若依的智慧社区系统 https://gitee.com/hebei-zhiyu-network/community-web
RuoYi-huohuzhihui 基于若依的智慧园区一卡通 https://gitee.com/huohuzhihui/ykt
RuoYi-manager 基于若依的内部管理软件 https://gitee.com/jetlion-software/zs-manager
RuoYi-Vue-SmsLogin 集成短信登录功能 https://github.com/chougui123/RuoYi-Vue-SmsLogin
RuoYi-fastbuild-factory 若依框架包名修改器 https://gitee.com/yinm/fastbuild-factory
RuoYi-common-tools 若依框架包名修改器 https://gitee.com/lpf_project/common-tools