两天的时间爬坑,做一个记录,其中的关键点: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;
}
}