Linux部署vue前端+Springboot後端專案
阿新 • • 發佈:2020-11-30
簡介
記錄手動部署前端,後端的過程和一些坑。
前端部署
前端專案使用Umi打包
部署參考了: Ant Design
選擇了前後端分離部署,即使用nginx伺服器。
安裝nginx
yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel wget -c https://nginx.org/download/nginx-1.11.6.tar.gz tar -zxvf nginx-1.11.6.tar.gz cd nginx-1.11.6 ./configure --prefix=/work/nginx make && make install
Nginx配置檔案
#user nobody; worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; server { listen 8000; server_name 172.168.122.1; # gzip config gzip on; gzip_min_length 1k; gzip_comp_level 9; 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; gzip_disable "MSIE [1-6]\."; #charset koi8-r; #root目錄 (前端專案編譯好的dist檔案放置目錄) root /work/deploy/dist1; #index index.html; # 用於配合 browserHistory 使用,配置路由,使所有uri重定向到index.html location / { try_files $uri $uri/ @fallback; #try_files $uri $uri/ /index.html; # 該配置適合 hashHistory 使用 index index.html; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } # 重定向路由 location @fallback { # 因為前端配置了 contextPath=logs 正確寫法如下 rewrite ^.*$ /logs/index.html break; #rewrite ^.*$ /index.html break; # 報錯500,因為專案中設定上下文路徑是 /logs } # 精確匹配 http://172.168.122.1:8000/ 的情況,使其能重定向路由 location =/ { rewrite ^.*$ /logs/ui/index.html break; } # 後端專案部署的介面api代理 location /api { proxy_pass http://172.168.122.1:8088/logs; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header X-Real-IP $remote_addr; } } }
前端Dist檔案部署
要把前端編譯好的dist檔案放到nginx配置檔案中,指定的代理位置
前端編譯好的程式碼:/work/deploy/dist.zip
前端Nginx部署目錄:/work/deploy/dist1
自定義的替換dist部署指令碼
dist.sh
rm -rf /work/deploy/dist1
unzip /work/deploy/dist.zip
mkdir -p /work/deploy/dist1/logs/ui
cp /work/deploy/dist/* /work/deploy/dist1/logs/ui
rm -rf /work/deploy/dist
最後啟動nginx前端即部署完畢。
此時前端訪問連結: http://172.168.122.1:8000/logs/index.html
後續要重新部署前端新編譯的程式碼,直接執行dist.sh替換新的dist檔案即可。
問題:訪問頁面出現404
比如訪問:http://172.168.122.1:8000/logs/detail.html
原因可能是:
前端配置了上下文路徑 contextPath=logs
但是,Nginx沒有配置重定向路由 @fallback,或者@fallback的rewrite中漏加上 logs 的上下文路徑
還有一種方式能解決,使用Hash
這種方式可以不配置重定向路由 @fallback
但是,此時訪問的url地址會變成這個樣子:
http://172.168.122.1:8000/logs/index.html#/logs/detail.html
後端部署
Springboot打的logs.jar包上傳到伺服器
上傳目錄:/work/deploy
執行自定義部署指令碼startup.sh
startup.sh
#!/bin/bash
#設定Java包名稱,部署路徑
NAME=logs.jar
DIR=/work/deploy/
echo $DIR$NAME
pkill -f $DIR$NAME
cd $DIR
pwd
nohup java -jar $DIR$NAME > msg.log 2>&1 &
echo "start success!"