关山初度尘未洗,策马扬鞭再奋蹄!这篇文章主要讲述ruoyi-vue前后端分类nginx配置相关的知识,希望能为你提供帮助。
前置条件
- 本地安装node.js并配置环境变量(打包vue)
- 服务器安装nginx
- 服务器安装jdk并配置环境变量
- 安装mysql
- 安装redis
- 参考项目文档本地先运行一遍再部署到服务器
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配置】postman请求
文章图片
nginx请求路径
192.168.2.13/prod-api/captchaImage等同于192.168.2.13:8080/captchaImage
推荐阅读
- 适配测试项目管理质量管理的完整的产
- 为单个数据流。凭借足够的数据和规模,
- 架构师相关的工作岗位,比如解决方案架构师
- #yyds干货盘点# 数组中第K小的数字
- #yyds干货盘点# 三分查找
- 给定目标人物的图像和穿着服装的另一个人
- too few PGs per OSD#yyds干货盘点#
- ceph pg degraded#yyds干货盘点#
- 重要的事情没有头绪。 你必须用开发者的语