Jeecg-Boot前端服務器部署詳細流程
針對問題：
1.圖片資源不能正常顯示
2.網站刷新網站報404錯誤
3.部署的操作步驟
准備工作
- 部署生產環境，修改.env.production文件中url
NODE_ENV=production
VUE_APP_API_BASE_URL=http://生產環境ip:8080/jeecg-boot
VUE_APP_CAS_BASE_URL=http://生產環境ip:8888/cas
VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview
- 若要是在本地測試，訪問后端測試環境，修改.env.development文件中的url
NODE_ENV=development
VUE_APP_API_BASE_URL=http://測試環境ip:8080/jeecg-boot
VUE_APP_CAS_BASE_URL=http://cas.example.org:8443/cas
VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview
1.打包項目
npm run build
note:
1.vue.config.js文件中這段注釋//打包app時放開改配置 //publicPath:'/'是誤導，不用修改
2.router/index.js文件的Router模式mode:'history'正常部署不用動，簡易部署方案修改成mode:'hash'
3.運行打包后的命令，會在項目內生成對應的dist文件，此文件就是要部署到服務器的文件
2.上傳
根據個人情況選擇：
1.上傳dist文件到nginx文件夾下的html文件中
2.服務器上新建一個文件來存放項目文件
3.nginx
server{
listen 81;#監聽的端口，本地訪問ip:81
server_name localhost;#有域名配置域名
#解決Router(mode: 'history')模式下，刷新路由地址不能找到頁面的問題
location / {
root /usr/gyimom/;#項目文件存放位置,可自定義或者nginx/html文件下
index index.html index.htm;
if (!-e $request_filename) {
rewrite ^(.*)$ /index.html?s=$1 last;
break;
}
}
#后台服務配置，配置了這個location便可以通過http://域名/jeecg-boot/xxxx 訪問
location ^~ /jeecg-boot {
proxy_pass http://127.0.0.1:8080/jeecg-boot/;
proxy_set_header Host 127.0.0.1;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
nginx命令
#使用前提進入到nginx目錄下的sbin目錄
#或者nginx文件絕對路徑形式
./nginx -v #查看nginx版本
./nginx #啟動nginx
./nginx -s reload #重啟（重載nginx配置）
./nginx -s stop #關閉nginx
./nginx -t #驗證nginx配置文件
nginx依賴
1.pcre
2.zlib
3.openssl
4.gcc
nginx端口號可自定義設置，但需注意端口的放行
4.linux放行端口
以上述nginx監聽的81端口為例
1.查看防火牆狀態
若是開啟狀態越過第2步，關閉順序操作
firewall-cmd --state
2.開啟防火牆
systemctl start firewalld.service
3.查看指定端口放行狀態（yes/or）
firewall-cmd --query-port=81/tcp
4.放行指定端口
firewall-cmd --zone=public --add-port=81/tcp --permanent
5.重啟防火牆
systemctl restart firewalld.service
6.重新載入配置
firewall-cmd --reload