ruoyi-vue前后端分类nginx配置

关山初度尘未洗,策马扬鞭再奋蹄!这篇文章主要讲述ruoyi-vue前后端分类nginx配置相关的知识,希望能为你提供帮助。
前置条件

  1. 本地安装node.js并配置环境变量(打包vue)
  2. 服务器安装nginx
  3. 服务器安装jdk并配置环境变量
  4. 安装mysql
  5. 安装redis
  6. 参考项目文档本地先运行一遍再部署到服务器
拉取代码若依gitee项目地址
git clone https://gitee.com/y_project/RuoYi-Vue.git

修改项目配置并打包ruoyi-admin修改application.yml中的redis地址,application-druid.yml中的mysql地址
后端打包
mvn clean package

打包后上传到服务器并启动
nohup java -jar ruoyi.jar(根据实际名称修改) &

前端修改配置打包
修改vue.config.js中target为http://127.0.0.1,如果不部署在同一台服务器或者使用域名自行修改
打包
npm run build:prod

上传将打包好的文件(dist目录)上传到服务器,我的上传到了/srv/ruoyi目录,解压并修改名称
unzip dist.zip mv dist web

nginx配置文件修改使用默认的安装方式,nginx.conf位于/usr/local/nginx/conf目录
修改配置文件
#usernobody; worker_processes1; #error_loglogs/error.log; #error_loglogs/error.lognotice; #error_loglogs/error.loginfo; #pidlogs/nginx.pid; events worker_connections1024; http includemime.types; default_typeapplication/octet-stream; #log_formatmain$remote_addr - $remote_user [$time_local] "$request" #$status $body_bytes_sent "$http_referer" #"$http_user_agent" "$http_x_forwarded_for"; #access_loglogs/access.logmain; sendfileon; #tcp_nopushon; #keepalive_timeout0; keepalive_timeout65; #gzipon; gzip on; #server #listen80; #server_namelocalhost; #charset koi8-r; #access_loglogs/host.access.logmain; #location / #roothtml; #indexindex.html index.htm; ##error_page404/404.html; # redirect server error pages to the static page /50x.html # # error_page500 502 503 504/50x.html; #location = /50x.html #roothtml; # # proxy the php scripts to Apache listening on 127.0.0.1:80 # #location ~ \\.php$ #proxy_passhttp://127.0.0.1; ## pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \\.php$ #roothtml; #fastcgi_pass127.0.0.1:9000; #fastcgi_indexindex.php; #fastcgi_paramSCRIPT_FILENAME/scripts$fastcgi_script_name; #includefastcgi_params; ## deny access to .htaccess files, if Apaches document root # concurs with nginxs one # #location ~ /\\.ht #denyall; # ## ruoyi backend server listen 80; server_name 127.0.0.1; # 前端服务地址 location / root /srv/ruoyi/web; index index.html; # 后台服务 #location /api/访问192.168.2.13/api/captchaImage 相当于访问127.0.0.1:8080/captchaImage location /prod-api/ proxy_pass http://127.0.0.1:8080/; # another virtual host using mix of IP-, name-, and port-based configuration # #server #listen8000; #listensomename:8080; #server_namesomenamealiasanother.alias; #location / #roothtml; #indexindex.html index.htm; # ## HTTPS server # #server #listen443 ssl; #server_namelocalhost; #ssl_certificatecert.pem; #ssl_certificate_keycert.key; #ssl_session_cacheshared:SSL:1m; #ssl_session_timeout5m; #ssl_ciphersHIGH:!aNULL:!MD5; #ssl_prefer_server_cipherson; #location / #roothtml; #indexindex.html index.htm; # #

注意:后台配置location中使用的prod-api是由于前端有个base_url是/prod-api,vue nginx都不是特别熟,暂时不知道什么原因,location配置要注意/,加/不加/请求路径不一样
重启nginx
/usr/local/nginx/sbin/nginx -s reload

验证登录
ruoyi-vue前后端分类nginx配置

文章图片

ruoyi-vue前后端分类nginx配置

文章图片

【ruoyi-vue前后端分类nginx配置】postman请求
ruoyi-vue前后端分类nginx配置

文章图片

nginx请求路径
192.168.2.13/prod-api/captchaImage等同于192.168.2.13:8080/captchaImage

    推荐阅读