使用阿裏雲oss對象存儲加picgo制作圖床並實現應用cdn加速、防盜鏈、https以及應用於Typora中實現高效Markdown

sunhao06 2022-01-08 00:19:54 阅读数:721

使用 oss picgo 制作 cdn

個人博客同步更新,歡迎瀏覽:鏈接
本文源網址:鏈接

1. 引言

1.1 圖床知識普及

一般的咱們在網上看到的文章裏的插圖,其實在瀏覽器上就是一個圖片鏈接,那個鏈接所指向的服務器就是所謂的“圖床”。粗暴的理解就是文章插圖所存放的地方,圖床上的圖片都可以一串地址鏈接的形式被用在網絡裏的各個地方。
截圖中簡書裏自帶的圖床的地址。可以再瀏覽器的前端各種應用樣式,但源地址始終都是那個“=”等號後面的“http://XXX/XXX/XXX.png”,那就是圖床地址。

image-20210415115129879

圖床地址還有個最簡單識別的特征,就是你複制圖片的地址,粘貼到瀏覽器裏面是可以直接打開圖片的。這個地址的前綴就是csdn的圖床服務器地址及文件絕對路徑了。

image-20210415115252285

1.2 為什麼要用圖床

最近在做自己的博客,而使用markdown編輯器Typora寫文章時會把插入文章的圖片保存在本地,然後將markdown代碼複制到博客後臺時就會出現找不到圖片需要重新上傳圖片的情况。

還有就是,我的博客服務器是海外的,在洛杉磯,如果能通過圖床將圖片保存在國內的話就會大大加快博客的訪問速速。

說搞就搞,查閱了相關資料,大家目前在用的圖床無非就是免費的和自制的,免費的的確很多但是我怕萬一哪一天他們跑路了我自己重新搞得話又是很麻煩的一件事。所以我就想搞一個自制的。而目前自制的圖床大家一般根據自己服務器或者Github或者阿裏雲這種存儲服務廠商來制作。因為我想給自己博客加速嗎,所以前兩種並不適合我。一個是自己服務器在海外不適合做圖床,另一個Github現在訪問速度也感人,所以放弃這倆選擇,選擇用阿裏雲的安全性達到99.9999999…%(多少個9我給忘了,手動狗頭)的對象存儲服務。

2. 搭建自己圖床的過程

個人博客同步更新,歡迎瀏覽:鏈接
本文源網址:鏈接

2.1 購買OSS對象存儲服務

通俗的解釋這就是一塊雲盤,只不過他可以通過接口api的形式去使用,面向的對象是開發人員而不是咱們日常客戶。主要應用場景就是在存取非結構性數據文件上,就是不是那種數據庫裏存的結構化數據(目的就是區分雲數據庫的功能)。咱們就存些文章插圖,40G足够用啦,不够到時候再昇。

image-20210415222158666

這裏我去年買了五年40G的存儲用於服務器備份,就不給大家演示購買過程了,在購買時大家記得購買標准型存儲就行了。

購買完成之後還需要點擊一下開通OSS服務功能。然後就可以進到OSS控制臺了。
對了關於流量包購買的問題,不開通流量包就是默認為按量收費,大概算了下1.2元10個G每月,還行吧不是很貴,用著再說。

2.2 創建一個bucket

這個bucket就是顧名思義的桶,你買了40G的空間可以分很多個桶,根據你對想存的東西的定義來劃分。
像咱們做圖床,訪問頻率是不會很低的,如果選低頻甚至歸檔,每次看個你的文章插圖需要1分鐘冷啟動,那黃花菜都凉了,就選擇標准存儲類型及公共讀,加密那個也不用了,都為的是讓所有人都看所以肯定選擇公共度及不加密了。

image-20210415222503796

3.3 綁定自己的域名及CDN加速

沒有自己域名,或者有域名沒備案的小夥伴可以不用看這部分。

個人博客同步更新,歡迎瀏覽:鏈接
本文源網址:鏈接

3.3.1 綁定自己的域名

首先大家創建bucket成功後會進入以下頁面

image-20210415222939931

然後大家選擇傳輸管理進入以下頁面

image-20210415223013917

選擇綁定域名

我看了一下是可以直接綁定一級域名的,但是我fatmouse.top的一級用在個人主頁了,就新解析了一個picc.fatmouse.top

image-20210415223053181

3.3.2 配置CDN及HTTPS證書

添加完成自己的域名之後發現居然還可以使用CDN加速,就點擊配置,按要求下一步到達以下頁面

image-20210415223255262

選擇“新增源站信息”

image-20210415223346953

源站信息選擇oss域名

域名選擇你創建的bucket的名稱

下一步

不要在這個cdn加速頁面了

返回oss管理控制臺

也就是畫面這個

image-20210415224007282

選擇圖中框出來的傳輸加速

點擊設置–打開—保存

image-20210415224034952

然後複制傳輸加速域名

image-20210415224130439

在域名解析中設置cname記錄到這裏

image-20210415224330727

然後完工!大功告成

【CDN小知識】把常訪問的文件放置在就近阿裏全國各地地的服務器節點上,提高用戶體驗,簡單說明就是我雖然把文件存在北京的服務器OSS上,但是海南的用戶實際訪問到的是CDN把我的常用(常被訪問圖片)臨時的放置的廣東或者深圳的CDM服務器節點了。這是一個很流行的提高用戶前端瀏覽效率的工具服務,按流量收費也要不了多少錢的(我對自己的博客很自信)。

3.3.3 配置ssl證書

首先點擊頁面中的證書托管

image-20210415224845883

然後選擇申請簽發證書

image-20210415224933295

上來直接讓我們買付費的可不太行,我們選擇左邊欄的ssl證書

選擇購買–按圖示選擇

image-20210415225108294

購買是免費的,買完進入頁面

image-20210415225152653

選擇證書申請

然後根據指示完成證書申請

將證書托管至阿裏雲oss

3.3.4 設置oss防盜鏈

OSS 是按使用量收費的服務,為了减少存儲於 OSS 的數據被其他人盜鏈而產生額外費用,OSS本身是支持設置Referer,基於 HTTP 和 HTTPS header 中錶頭字段Referer 的防盜鏈方法。

我們可以通過控制臺為自己的存儲空間設置 Referer 字段的白名單、以及是否允許 Referer 字段為空的請求訪問。

接下來返回oss控制臺

如圖選擇

image-20210415225611578

然後找到防盜鏈

image-20210415225714422

設置自己的域名,保存即可

4. 配置和使用PicGo

個人博客同步更新,歡迎瀏覽:鏈接
本文源網址:鏈接
這是個開源軟件,可以再GitHub找到源碼的,我從github上下的window安裝包。“閃電”般的速度下載了40分鐘。

keyid和keysecret 這個是阿裏賬戶專用的一個密鑰,從頭像這裏找到,沒有就創建一個,有就自己回憶回憶存哪了,或者新建一個子密鑰

image-20210415225923893

空間名就是bucket的名字

儲存區域就是你當時選的服務器地區的編碼從控制臺可以找到

image-20210415225957909

最後的自定義域名就是你在用你圖床外鏈的時候要顯示的域名,可以用默認阿裏給你分配的,也可以用自己綁定的自己的個人域名,我就用了自己的解析的picc.fatmouse.top,加上我安裝了https證書,所以前面還能加個S。

【HTTPS小貼士】盡量上個證書加一下這個不起眼的S,現在微信對不是https的域名使用都限制了訪問,支持更安全的https訪問是主流趨勢,偷一次懶之後又全得補上我都不敢想象有多麻煩。

image-20210415230121480

設置好之後再上傳區能上傳文件picgo的設置就大功告成了。

5. 設置Typora

個人博客同步更新,歡迎瀏覽:鏈接
本文源網址:鏈接
在文件菜單–找到偏好設置–然後轉到圖像

image-20210415230601932

按如圖所示操作

pigo路徑選擇你安裝picgo的目錄

致此,就完成了在Typora編輯文章時粘貼圖片會自動上傳到阿裏雲oss並生成鏈接,這樣再將markdown代碼粘貼到別處時就不會出問題!

個人博客同步更新,歡迎瀏覽:鏈接
本文源網址:鏈接

版权声明:本文为[sunhao06]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/01/202201080019543004.html