# Azure Blob - 存放圖片的好選擇
###### tags: `Azure` `圖片`

## 前言
以前寫網頁時，除了常常要更新的圖片會存在資料庫中，用api呼叫之外，基本上都是存在image的資料夾中，不過最近在開發時卻遇到一些問題，因為網站上有教學步驟，圖片量變大，再加上圖片是由美術人員繪製，所以檔案大小很大，導致部屬時，不同的裝置顯示圖片的時間不同，使用者體驗不佳，只好另闢蹊徑，就發現了Azure blob這個新世界!

今天就來教大家，如何建立一個blob，上傳圖片並且放在網頁中呼叫!

## 什麼是Azure blob storage

### Blob 物件
說了這麼多，這個blob(Binary large Object)到底是什麼?他是一個二進位類型的大物件，簡單來說就是一個**放存放大量零散資料**的地方（圖片、影片等等）

前端常會用<input type="file">的語法讓使用者上傳檔案，而儲存的邏輯就是將檔案拆解成二進位的方式儲存。

### 儲存資料
Azure雲端儲存服務，依照資料儲存類型大致可以分成三類
- 結構化資料(Structure Data):Azure Database,SQL,MySQL,PostgreSQL ...
- 結構化、關聯式的資料表
- 非結構化資料(UnStructure Data):Azure Blob Storage
- 圖像、視頻、音頻、文檔、日誌、備份
- 半結構化資料(Semi-Structure Data):Azure CosmosDB
- JSON 文檔

### 內容架構
Blob 儲存體提供三種類型資源：

- 儲存體帳戶: 從帳戶中設定相關權限
- 儲存體帳戶中的容器 : 像資料夾一樣可以分門別類
- 容器中的 Blob : 上傳的單位

下圖顯示資源之間的關係。

## 教學
### 創建儲存體帳戶
1. 進入Azure portal並且選擇儲存體帳戶(Azure blob)，並且按下建立

2. 設定完名稱後按下檢閱等待一下後就可以按下建立了

3. 建立完成的畫面，接這按下前往資源

### 建立儲存體中的容器(Container)
4. 現在要建立container，選擇左側容器，按下建立，輸入名稱並將層級改成容器(這樣才能從其他地方呼叫)，最後按下建立

### 建立與查看容器中的Blob
5. 建立完成後就可以點進去容器，並且按下上傳，可以一次上傳多張圖片，最後按下右側的上傳後就可以看到結果了

6. 點擊剛剛上傳的圖片，右側就有url可以複製，輸入這行url後就可以直接看到剛剛上傳的圖片了!!!

7. 最後只要將下列產生的URL寫進網頁中的src裡面就大功告成了~
URL : https://k2website.blob.core.windows.net/banner/test.jpg

## 效果
以我正在開發的網站範例，有一個頁面一打開要載入近50張圖片

:-1: 下圖是將圖片全部存在image的資料夾裡面，然後部屬到線上環境的結果，從Network可以發先花費的時間很長，嚴重影響使用者體驗

:+1: 下圖是將50張圖片全部存上傳到Azure Blob並且用url的方式呼叫圖片的結果，可以發現時間縮短了將近一倍!!!

## 總結
Blob不僅可以用來存放圖片，影片、檔案等等也可以一起存，網頁有功能之後就要開始思考如何讓效能變得更好，現在的雲端時代其實提高了開發的效率，不用再從頭刻劃一些套件，有時候只要花一點點的錢，就可以大大降低學習的成本，很多東西不是看影片就可以學會的，還是要實際操作一次，才能真正學會!

## 參考資料
[Azure Blob 儲存體簡介](https://learn.microsoft.com/zh-tw/azure/storage/blobs/storage-blobs-introduction)

[什麼是Azure Blob Storage？](https://accord-tec.com.tw/%E4%BB%80%E9%BA%BC%E6%98%AFazure-blob-storage%EF%BC%9F/)

[Azure Storage accounts container public access level has dissabled](https://stackoverflow.com/questions/62799702/azure-storage-accounts-container-public-access-level-has-dissabled)

[DAY12 - 檔案類的物件關係釐清(1) - File, FileList, Blob](https://ithelp.ithome.com.tw/articles/10271735)