记录springboot+vue多前端在NGINX上面的配置

两天的时间爬坑,做一个记录,其中的关键点:1、采用前后端分离,前端是vue+vant,后端是springboot;2、前端部署在nginx服务器,采用端口代理指向后端端口;3、前端采用HTTPS,后端采用HTTP;4、图片URL反馈到前端,前端图片不显示。
废话不多说,直接上nginx的配置代码:
nginx服务器配置:

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;

    keepalive_timeout  65;
    server {
        listen       5000 ssl; #配置HTTPS 请求
        server_name  你自己的域名或者IP;
        server_tokens  off; #隐藏nginx的版本号
        ssl_certificate D:/tt/nginx-1.18.0/ssl/xxxxxxxxxxxx.crt;#配置SSL证书crt
        ssl_certificate_key D:/tt/nginx-1.18.0/ssl/xxxxxxxxxxx.key;#配置SSLkey
        ssl_session_timeout 5m;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #按照这个协议配置
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;#按照这个套件配置
        ssl_prefer_server_ciphers on;
		#前端文件目录:第一个 D:/tt/fabu/dist;
		#第二个:D:/tt/fabu/linedata;
		#配置第一个项目指向的index.html的位置
        location / {
            root D:/tt/fabu/dist; #第一个文件的目录位置 
            try_files $uri $uri/ @router; #采用VUE自带的router路由
            index index.html index.htm; 
        }
		# 配置第一个项目的端口指向,第一个端口的URL都采用.service开头
        location /service {
             rewrite ^/service/(.*) /$1 break;
             proxy_pass  http://XXXXXXX:端口号;
        }
		#配置第二个项目index.html页面的指向
        location /linedata {
            alias D:/tt/fabu/linedata;
            try_files $uri $uri/ /linedata/index.html;
            index index.html index.htm;   
        }
        #配置第二个项目的端口代理指向,第二个项目的请求全部以/api开头
        location /api{
             rewrite ^/api/(.*) /$1 break;
             proxy_pass  h http://XXXXXXX:端口号;
        }
		#配置图片的指向端口,为了前端呈现,我把图片的url改成了前端的地址
         location ~*\.(jpg)$ {
            proxy_pass   http://XXXXXXX:端口号;
                    }
         #配置router的路由
        location @router {
            rewrite ^.*$ /index.html last;
        }
		# 配置错误页面的位置
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值