SpringBoot、Vue、Nginx配置 https 并部署发布

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 &