上傳構建好的vue前端文件

vscode構建vue項目，會生成dist目錄

npm run build

在服務器root目錄新建/projects/www目錄，把dist目錄下的所有文件，上傳到此目錄中

上傳ssl證書

上傳ssl證書到/projects目錄中

配置nginx

編輯 /etc/nginx/sites-enabled/default 配置文件

1.此配置通過http和https訪問

server {
# httplisten 80 default_server;listen [::]:80 default_server;# httpslisten 443 ssl default_server;listen [::]:443 ssl default_server;# SSL Settingsssl_certificate /projects/bdjw.work_bundle.pem;#你的證書ssl_certificate_key /projects/bdjw.work.key;#你的key# 域名    server_name bdjw.work www.bdjw.work; # 配置域名 # 代理    location / {root /projects/www; # 前端代碼文件位置index index.html;try_files $uri $uri/ /index.html; # 解決vue刷新404的問題}location /api/ {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';add_header 'Cache-Control' 'no-cache';if ($request_method = 'OPTIONS') {return 200;}proxy_pass http://127.0.0.1:8080/; # 反向代理}
}

2.此配置http自動跳轉到https

server {
# httpslisten 443 ssl default_server;listen [::]:443 ssl default_server;server_name bdjw.work www.bdjw.work; # 配置域名# SSL Settingsssl_certificate /projects/bdjw.work_bundle.pem;#你的證書ssl_certificate_key /projects/bdjw.work.key;#你的keylocation / {root /projects/www; # 前端代碼文件位置index index.html;try_files $uri $uri/ /index.html; # 解決vue刷新404的問題}location /api/ {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';add_header 'Cache-Control' 'no-cache';if ($request_method = 'OPTIONS') {return 200;}proxy_pass http://127.0.0.1:8080/; # 反向代理}
}# HTTP請求自動跳轉HTTPS
server {listen 80 default_server;listen [::]:80 default_server;server_name bdjw.work www.bdjw.work; # 配置域名return  301 https://$server_name$request_uri; # 把HTTP的域名請求轉成HTTPS
}

部署springboot項目

部署springboot項目

跨域問題

使用nginx反向代理解決跨域問題，就不需要springboot再做跨域設置，兩種方式同時使用會有沖突。