SpringBoot、Vue、Nginx 配置
这边只对后端和nginx 做了配置,发现前端似乎不需要
nginx
# 一定要将 nobody 改为当前用户,比如我当前用户为 root
user root;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
# 配置 http
server {
listen 80;
# 写你的域名,比如百度
server_name www.baidu.com;
# 重定向到 https
rewrite ^(.*)$ https://${server_name}$1 permanent;
}
# 配置 HTTPS server
server {
listen 443 ssl;
# 依旧是写你的域名
server_name www.baidu.com;
# 证书和key
ssl_certificate /root/project/cert/xxx.pem;
ssl_certificate_key /root/project/cert/xxx.key;
# 下面几个复制粘贴
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
# 要将前后端分离开来,不然请求直接打到后端不走前端
# 在前端中,我的 baseUrl 为 axios.defaults.baseURL = '/api';也就是说,前端我写 /login,实际打到后端的是 /api/login
# 后端也需要设置好 server.servlet.context-path : /api
# 这里 location 请求直接打到前端
location / {
# npm run build 后的 dist 文件的路径
root /root/project/frontend/dist/;
# history 模式,一定要写这个,不然在刷新后页面会变为空白页,index.html 前面有 /
# 关于这个可参考 https://www.hi-linux.com/posts/53878.html 此文
try_files $uri $uri/ /index.html;
index index.html;
}
# 转发请求到后端,由于我们的前端是用了 /api 的方式,因此需要将前端有请求后端的部分直接打过去
# 通过指定路径将前后端分离开来
location /api/ {
# 打到后端 8081 端口,这里使用 https 是因为我的后端加了证书
proxy_pass https://127.0.0.1:8081;
# 下面几个复制粘贴
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
}
前端 vue vite
配置
如果只想看前端配置,看这一部分就好了
在 axios 中指定路径前缀即可,OVER!
axios.defaults.baseURL = '/api';
本来到这里就结束了,再写点什么
之前看了好多文章要去 vite.config.js
中的 server 配置 proxy,这个是不需要的,这个是在开发过程需需要用到的,比如
server: {
// 配置开发环境代理
proxy: {
'/api': {
target: 'https://127.0.0.1:8081',
changeOrigin: true,
// 这个是将/api替换,比如后端没有/api,那就可以替换为 ''
rewrite: (path) => path.replace(/^\/api/, '/api')
},
}
},
另外,需要在 router 中配置 history 模式
const routes=[...]
const router = createRouter({
history: createWebHistory(), // 历史模式
routes: routes
})
在部署好后,我在前端 router-link
配置的路径中刷新,发现一刷新就是空白页,但刷新 /index、/login
这种页面是没有问题的,最后在Vue项目打包部署总结中找到了原因,是我在vite.config.js
中配置了 base:'./'
,这个是不需要的。
非域名根路径发布
比如 http://a.com/test1
和 http://a.com/test2
,同一域名两个目录,在配置nginx时就要指定好文件名称和访问路径
location /test1{
}
location /test2{
}
location / {
}
这里要将 /test1、/test2
放在 /
之前,让路由在进入时优先匹配前者而不是先访问 /
路径下的子路由。
这也和 vue 中配置 base 有关,如果 base 配置为 ./
,这意味着打包后自愿引用为相对路径,如果为 /test1
,就代表资源相对路径为域名根目录开始的绝对路径(见文章)
重点来了,history 模式部署
在vue-router路由选项中配置mode选项和base选项,mode配置为’history’;如果部署到非域名根目录,还需要配置base选项为前文配置的publicPath值(注意:此情况下,publicPath必须使用绝对路径/test的配置形式,而不能用相对路径./)
history模式部署到非域名根路径下
非域名根目录下部署,首先肯定要配置publicPath。需要注意的点前面其实已经提过了,就是这种情况下不能使用相对路径./或者空串配置publicPath。为什么呢?原因是它会导致router-link等的表现错乱,publicPath配置为相对路径的router-link打包后地址变成了相对根域名下地址,很明显是错误的,所以非域名根路径部署应该将publicPath配置为完整的前缀路径。
后端
application.yml
,证书部分
spring:
profiles:
active: test
server:
port: 8081
servlet:
context-path: /api
# 证书
ssl:
key-store: classpath:你的证书.jks
key-store-password: 123456
key-store-type: JKS
enabled: true
通过转换方式,将 pem 证书转换为 jsk 证书,
- 在此如果对证书不了解,可参考 SSL 证书格式普及,PEM、CER、JKS、PKCS12
- pem 证书转 jks可参考 如何将PEM证书转换成JKS证书
在转换时需要设定密码,比如 123456
至此,第一步就已经完成了。
另,之前有说是后端配置 http自动转 https,也不需要配置,nginx 中已经配置了。
开启远程调试部署
nohup java -agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=5005 -jar iek-1.0-SNAPSHOT.jar > 1.log 2>&1 &