說明

• 本記錄操作方法vue.js項目使用nginx代理部署，后端springboot正常部署
• 前端使用443端口，后端使用8080端口
• 全部接口使用https

vue.js前端部署

• vue.js配置axios相對路徑，好處：請求代理再nginx.conf中配置，無需重新修改代碼

vue.js項目axios請求配置

• request和response 攔截器根據具體項目要求進行配置

import axios from 'axios';
import router from "@/router";const request = axios.create({baseURL: '/api', // 使用相對路徑，Nginx代理請求到后端timeout: 10000
})
// request 攔截器
request.interceptors.request.use(config => {config.headers['Content-Type'] = 'application/json;charset=utf-8';let user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : null//如果user存在就在請求頭中設置tokenif (user) {config.headers['token'] = user.token;}return config
}, error => {return Promise.reject(error)
});// response 攔截器
request.interceptors.response.use(response => {let res = response.data;// 如果是返回的文件if (response.config.responseType === 'blob') {return res}// 兼容服務端返回的字符串數據if (typeof res === 'string') {res = res ? JSON.parse(res) : res}//當權限驗證不通過時直接彈出if (res.code === '401') {localStorage.removeItem('user')router.push('/login')}return res;},error => {console.log('err' + error) return Promise.reject(error)}
)export default request

本地創建日志文件

touch /usr/front/logs/nginx_access.log
chmod 666 /usr/front/logs/nginx_access.log
touch /usr/front/logs/nginx_error.log
chmod 666 /usr/front/logs/nginx_error.log

創建Dockerfile文件

• 在/usr/front/vue下創建Dockerfile文件

# 使用NGINX官方鏡像作為基礎鏡像
FROM nginx:latest# 設置作者信息
LABEL maintainer="作者名 <郵箱>"# 創建日志目錄并設置權限
RUN mkdir -p /var/log/nginx && \touch /var/log/nginx/nginx_access.log && \touch /var/log/nginx/nginx_error.log && \chown -R nginx:nginx /var/log/nginx && \chmod 755 /var/log/nginx && \chmod 644 /var/log/nginx/nginx_access.log && \chmod 644 /var/log/nginx/nginx_error.log# 創建 Vue 項目目錄
RUN mkdir -p /usr/share/nginx/html# 復制項目文件到NGINX默認的網站目錄
COPY ./front_vue /usr/share/nginx/html# 復制自定義NGINX配置文件
COPY nginx.conf /etc/nginx/nginx.conf# 暴露NGINX的HTTP端口（默認為80）
EXPOSE 80# 啟動NGINX
CMD ["nginx", "-g", "daemon off;"]

配置ssl證書

• 在云服務相關平臺申請ssl證書，并下載，然后解壓找到xx.crt、xx.key 重名為server.crt、server.key后，上傳到服務器/usr/front/vue/cert，

  sudo mkdir -p /usr/front/vue/cert
  

nginx.conf

• 在/usr/front/vue下創建nginx.conf

events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;client_max_body_size     50m;client_body_buffer_size  10m; client_header_timeout    1m;client_body_timeout      1m;gzip on;gzip_min_length  1k;gzip_buffers     4 16k;gzip_comp_level  4;gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;gzip_vary on;server {listen  443 ssl;server_name  服務器域名;ssl_certificate /etc/nginx/cert/server.crt; ssl_certificate_key /etc/nginx/cert/server.key; ssl_session_timeout 5m;ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES128-SHA:ECDHE-RSA-AES256-SHA';ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;ssl_prefer_server_ciphers off;# 配置 Nginx 記錄訪問日志和錯誤日志access_log /var/log/nginx/nginx_access.log;error_log /var/log/nginx/nginx_error.log;location / {		root   /usr/share/nginx/html/front_vue;index  index.html index.htm; try_files $uri $uri/ /index.html;	}location ^~ /api/ {		proxy_pass https://服務器IP:8080/; proxy_set_header   Host             $host;proxy_set_header   X-Real-IP        $remote_addr;						proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;}}server {listen       80;server_name  服務器域名;rewrite ^(.*)$	https://$host$1	permanent;}}

vue項目打包上傳

• 打包后臺vue項目，修改dist目錄名稱為front_vue，上傳到/usr/fron/vue目錄下

創建容器部署

# 1進入目錄
cd /usr/front/vue
# 2構建鏡像
docker build -t front_vue .
# 3運行容器
docker run --name front_nginx --restart=always -p 80:80 -p 443:443 -d \
-v /usr/front/vue/nginx.conf:/etc/nginx/nginx.conf \
-v /usr/front/vue/front_vue:/usr/share/nginx/html/front_vue \
-v /usr/front/logs/nginx_access.log:/var/log/nginx/nginx_access.log \
-v /usr/front/logs/nginx_error.log:/var/log/nginx/nginx_error.log \
-v /usr/front/vue/cert:/etc/nginx/cert \

后端springboot項目部署

• 記得客戶端請求的接口前綴修改為https://serverIP:8080

配置ssl證書

• 使用下載的證書文件，找到需要配置的xxx.pfx/xxx.jks和keystorePass.txt文件
• 將xxx.pfx/xxx.jks放到resource目錄下

server:port: 8080ssl:enabled: true# 證書類型一key-store: classpath:xxx.pfxkey-store-password: xxx # 填寫keystorePass.txt文件內容key-store-type: PKCS12# 證書類型二key-store: classpath:xxx.jkskey-store-password: xxx # 填寫keystorePass.txt文件內容key-store-type: jks

打包部署

• 然后正常打包上傳部署即可！

補充：jsk證書和pfx證書

• springboot配置https接口使用的ssl整數是使用jks的還是pfx的？

• 在Spring Boot中，可以使用Java KeyStore（JKS）或PKCS#12文件（PFX）來配置應用程序的HTTPS。這兩者都是用于存儲加密密鑰和證書的流行格式。

1. Java KeyStore（JKS）：
   • 文件擴展名： 通常，JKS文件的擴展名為".jks"。
   • 格式： JKS是一種專有格式，特定于Java，通常在基于Java的應用程序中使用。
     用途： JKS文件配置Spring Boot應用程序的SSL/TLS。

• 在application.yml中的示例配置：

server:port: 8080 # 配置https接口ssl:enabled: truekey-store: classpath:keystore.jkskey-store-password: 密鑰庫密碼key-store-type: jks

2. PKCS#12（PFX）：
   • 文件擴展名： PFX文件通常具有".pfx"或".p12"擴展名。
   • 格式： PFX是一種標準格式，可以在不同平臺和編程語言中使用。
   • 用途： PFX文件配置Spring Boot應用程序的SSL/TLS。

• 在application.yml中的配置：

server:port: 8080 # 配置https接口ssl:enabled: truekey-store: classpath:keystore.pfxkey-store-password: xxxkey-store-type: PKCS12

補充：兩種證書的轉化

JKS轉PFX

• 使用 keytool（Java自帶的工具）
• 在keystore.jks(修改證書文件)證書目錄下，使用終端輸入如下命令：

keytool -importkeystore -srckeystore keystore.jks -destkeystore keystore.pfx -srcstoretype JKS -deststoretype PKCS12

• 輸入源密鑰庫（JKS）的密碼，以及為目標密鑰庫（PFX）設置一個新的密碼
  

PFX 轉 JKS

• 使用 keytool
• 在keystore.jks(修改證書文件)證書目錄下，使用終端輸入如下命令：

keytool -importkeystore -srckeystore keystore.pfx -destkeystore keystore.jks -srcstoretype PKCS12 -deststoretype JKS

• 輸入源密鑰庫（PFX）的密碼，并為目標密鑰庫（JKS）設置一個新的密碼