Linux下部署springboot + vue 前后端分离 + ssl访问

############# start #############

因为默认端口 80 在用做官网使用所以此处 tomcat使用8443 端口进行访问

1. SpringBoot 配置ssl 证书

1.1.阿里云下申请ssl证书

1.2 SpringBoot 配置文件中配置ssl 证书

server:
  # 服务器的HTTP端口，默认为8080
  port: 8071
  servlet:
    # 应用的访问路径
    context-path: /
  ssl: 
    # 将zx.xxxxxxxxx.com替换为自己阿里云申请的ssl证书
    key-store: classpath:zx.xxxxxxxxx.com.pfx 
   #将密码替换为证书密码
    key-store-password: xxxxxxxxx

    key-store-type: PKCS12
    key-alias: alias
  port-http: 8070

1.3 将zx.xincloudtech.com.pfx 文件放置到resources目录下

1.4 将SpringBoot项目打为Jar包放置到Linux服务器下

1.5 启动Java 项目

#后台启动jar包 并将日志输出到.txt文件
nohup java -jar project.jar >temp.txt &

netstat -tln | grep 8070

sudo lsof -i:8070

sudo kill -9

2. vue项目中配置 ssl访问 springboot

2.1 vue中配置 head头信息，避免 Mixed Content: The page at 'xxx' was loaded over HTTPS, but requested an insecure resource 'xxx'.错误信息

参考： https://blog.csdn.net/haibo0668/article/details/82947917

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

2.2 vue 中配置访问路径

VUE_APP_BASE_API = 'https://zx.xxxxxxxxx.com:8071'

2.3 将vue项目打包 webstome中执行 build

将生成的dist 目录下文件放置到tomcat 的ROOT 目录下

2.4 配置tomcat 环境设置SSL 访问

2.4.1 在tomcat目录下新建cert 目录将证书放置到cert目录中

2.4.2 将 keystoreFile 替换为你的证书名称将keystorePass 修改为你的证书密码

<Connector port="8443" protocol="HTTP/1.1" SSLEnabled="true" scheme="https" secure="true" keystoreFile="/usr/local/web/tomcat8080/cert/5403768_xxxxxxxxx.com.pfx" keystoreType="PKCS12" keystorePass="UB7G30mn" clientAuth="false" SSLProtocol="TLSv1+TLSv1.1+TLSv1.2" ciphers="TLS_RSA_WITH_AES_128_CBC_SHA,TLS_RSA_WITH_AES_256_CBC_SHA,TLS_ECDHE_RSA_WITH_AES_128_CBC_SHA,TLS_ECDHE_RSA_WITH_AES_128_CBC_SHA256,TLS_RSA_WITH_AES_128_CBC_SHA256,TLS_RSA_WITH_AES_256_CBC_SHA256" />

2.5 重新启动tomcat

./startup.sh
./shutdown.sh

即可使用https://xxxxxxxxx.com:8443 进行访问

############# end #############

#配置 nginx 使用域名进行访问官网

下载证书为nginx服务器使用的证书

编辑nginx.conf 文件

vim /etc/nginx/nginx.conf

server {
    listen 443 ssl;
    server_name localhost;
    root html;
    index index.html index.htm;
    ssl_certificate /etc/nginx/conf/cert/5384282_www.xxxxxxxxx.com.pem;   #需要将cert-file-name.pem替换成已上传的证书文件的名称。
    ssl_certificate_key /etc/nginx/conf/cert/5384282_www.xxxxxxxxx.com.key;   #需要将cert-file-name.key替换已上传的证书密钥文件的名称。
    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;
    location / {
#        index index.html index.htm;
     root         /usr/share/nginx/web3/web3; #此处路径为放置静态页面地址
    }
}

# 配置完成后重启 nginx服务

#重载nginx服务
sudo nginx -s reload
sudo service nginx restart