vue+springboot本地项目部署到vps上并启用https

by

本地部署

参考博客https://learner.blog.csdn.net/article/details/88926242
和https://learner.blog.csdn.net/article/details/88955387
可以在本地部署
如果链接失效，作者删除博客，
我有备份博客:https://construct.cf/blogImages/sites/vue-sprnig-boot-action-2_files.png
和https://construct.cf/blogImages/sites/vue-sprnig-boot-action-3_files.png

vps部署并开启https

项目修改

前端修改

项目里面的proxyTable和axios.defaults.baseURL 是写死的，部署到vps上当然要修改url，使其指向vps上的spring-boot监听的端口

修改wj-vue/config/index.js和wj-vue/src/main.js

diff --git a/wj-vue/config/index.js b/wj-vue/config/index.js
index 0035d33..ba3115f 100644
--- a/wj-vue/config/index.js
+++ b/wj-vue/config/index.js
@@ -12,7 +12,7 @@ module.exports = {
     assetsPublicPath: '/',
     proxyTable: {
       '/api': {
-        target: 'http://localhost:8443',
+        target: 'https://tacos.boostup.cf:8443',
         changeOrigin: true,
         pathRewrite: {
           '^/api': ''
diff --git a/wj-vue/src/main.js b/wj-vue/src/main.js
index e88c73d..f049dcf 100644
--- a/wj-vue/src/main.js
+++ b/wj-vue/src/main.js
@@ -4,10 +4,9 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
-// 设置反向代理，前端请求默认发送到 http://localhost:8443/api
 //var axios = require('axios') //这种写法导致https://github.com/axios/axios/issues/5053
 import axios from 'axios'
-axios.defaults.baseURL = 'http://localhost:8443/api'
+axios.defaults.baseURL = 'https://tacos.boostup.cf:8443/api'
 // 全局注册，之后可在其他组件中通过 this.$axios 发送数据
 Vue.prototype.$axios = axios
 Vue.config.productionTip = false

let's encrypt的pem证书转换成pkcs12证书

如何获取pem证书，可以参考博客:https://189505.xyz/?p=191

然后是转换:

cd /etc/letsencrypt/live/tacos.boostup.cf/
openssl pkcs12 -export -in fullchain.pem  -inkey privkey.pem -out keystore.p12 -name tomcat -CAfile chain.pem -caname root

转换过程中需要设置一个export密码，自行设置。这个密码要写到spring的配置中

后端修改

为了方面区别本地开发和线上部署，我们给vps部署增加一个不同的profile，新建wj/src/main/resources/application-vps.properties，内容如下，重点关注ssl相关部分。其中证书的生成在上节有讲

# 端口配置
server.port=8443
# ssl
security.require-ssl=true
server.ssl.key-store:/etc/letsencrypt/live/tacos.boostup.cf/keystore.p12
server.ssl.key-store-password: your_pass_word #
server.ssl.keyStoreType: PKCS12
server.ssl.keyAlias: tomcat
# endof ssl

nginx反向代理

server {
    listen       443 ssl;
    server_name  tacos.boostup.cf;

    charset utf-8;
    ssl_certificate /etc/letsencrypt/live/tacos.boostup.cf/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/tacos.boostup.cf/privkey.pem;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-SHA384;
    ssl_ecdh_curve secp384r1;
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;
    ssl_session_tickets off;
    keepalive_timeout 70;
    location / {
    proxy_pass   https://127.0.0.1:8443;
    }
}

部署项目

前端编译

npm  run build

生成的dist目录，dist下的index.html和static复制到后端项目的src/main/resources/static/目录下

后端编译

mvn clean package

部署到vps上

scp jar包到vps上，
重新启动nginx, java -jar wj-1.0.0.jar --spring.profiles.active=vps运行spring项目。

https://tacos.boostup.cf/#/login
输入用户名和密码就可以跳转到index页面

Leave a Comment