| 前言 |
小伙伴們，好久不見！今天記錄一個前端頁面中圖片加載失敗的問題及解決程序，
| 問題描述 |
業務系統中預覽圖片功能顯示不完整或請求超時
前端使用框架: vue
查看瀏覽器的控制臺和網路，看到的現象是 請求的圖片下載到原體積的一部分，請求就停止了（比如圖片268kb,請求去下載圖片到168kb，請求停止），部分圖片請求超時，控制臺提示資訊：
Net::ERR_CONNECTION_RESET 200
| 問題排查 |
- 查看瀏覽器控制臺的請求是否正常，請求圖片相關的介面有無報錯
- 查看網路是否不通暢，導致請求超時
- 查看被請求的圖片是否存在，是否存在不完整的情況
- 查看Nginx請求日志，分析日志
- 查看本地/開發環境是否存在相同問題
- 查看Nginx代理設定，圖片轉發是否失敗
- 查看服務器記憶體/存盤空間占用情況
根據以上排查程序進行了排查確認，最終定位到生產環境nginx的問題，發現是nginx默認的快取空間不足，導致系統剛開始運行圖片預覽功能正常，經過近幾十次的連續點擊預覽圖片后，快取空間被占滿了，再有請求過來，在瀏覽器預設的超時時間內無法很快地作出回應，導致圖片出現一部分最終顯示請求fail，
| 問題解決 |
修改相應的nginx配置如下(關注proxy_cache關鍵字相關配置 )：
user root;
worker_processes 2;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
##
# Logging Settings
##
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
error_log /var/log/nginx/error.log warn;
#添加proxy_cache模塊 /data/nginx/cache 本地快取路徑 cache_dir別名
proxy_cache_path /data/nginx/cache levels=1:2 keys_zone=cache_dir:10m inactive=1d max_size=1g;
server {
listen 80;
location / {
root /xx/static-dist;
index index.html index.htm;
}
location /xx/api/
{
proxy_pass http://backendIP:port/;
proxy_cache cache_dir; #呼叫別名為cache_dir的這個快取
proxy_cache_valid 200 302 2d;
proxy_cache_use_stale error timeout invalid_header updating http_500 http_502 http_503 http_504;
client_max_body_size 1024m;
}
}
}
| 參考資料 |
https://blog.csdn.net/weixin_46152207/article/details/111866678
https://www.cnblogs.com/zousc/p/12883961.html
| 總結 |
本次生產環境部署使用的服務器記憶體/存盤空間有限，暴露出此問題，提醒自己多去關注組件及代碼的性能，記憶體消耗，空間消耗等，這些都是程式的安全隱患，
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/293146.html
標籤：其他
上一篇：線性規劃求極值問題-系統架構設計師-最“穩準狠”解題方法
下一篇：Mac 終端 brew等相關命令