Azure BootCamp 2017 (Kaohsiung K.NET) Session Azure Blob Storage introduction & Azure Storage JavaScript Client Library

1. Azure Blob Storage
+
Azure Storage JavaScript client library

2. Codeian.idv.tw
• Microsoft MVP Visual Studio and
Development Technologies (2012 ~ 目前)
• TechDays Taiwan 2014 / 2015 講師
• K.NET 社群講師兼共同創辦人
https://www.facebook.com/k.net.io/

3. Agenda
Azure Blob Storage
Azure Storage JavaScript
Client Library
Azure CDN 加速你的網站
Azure Storage Explorer

4. Azure Blob Storage
儲存非結構化物件資料
透過 HTTP 或 HTTPS 存取
適合做為Web網路文件或檔案的儲存體
每個資料都有自已的URL

5. Azure Blob Storage

6. Azure Blob Storage
帳戶 容器 Blob
唯一命名空間 任何類型和大小的檔案類似於資料夾目錄
容器名稱必須是英數字小寫
不能建立子容器
https://codeian.blob.core.windows.net/userfiles/abc.pdf

7. Azure Blob Storage
mydata/abc.txt
mydata/img/xyz.jpg
利用 Blob Name 規劃子目錄架構

8. Azure Blob Storage

9. Azure Storage Explorer
http://storageexplorer.com/

10. Azure Storage Explorer

11. Azure Storage JavaScript Client Library
The JavaScript Client Library for Azure Storage enables
many web development scenarios using storage services
like Blob, Table, Queue, and File, and is compatible
with modern browsers.
https://github.com/Azure/azure-storage-
node#azure-storage-javascript-client-library-for-
browsers

12. Azure Storage JavaScript Client Library
azure-storage.common.js
common part for other 4 JavaScript files
azure-storage.table.js
Azure Storage table service operation logic
azure-storage.blob.js
Azure Storage blob service operation logic
azure-storage.queue.js
Azure Storage queue service operation logic
azure-storage.file.js
Azure Storage file service operation logic

13. Azure Storage JavaScript Client Library
Setting CORS rules for Azure-Storage account blob
global variable **AzureStorage** is the start point
var blobService = AzureStorage.createBlobServiceWithSas

14. Setting CORS rules

15. Azure Storage JavaScript Client Library
<script src="JS/azure-storage.common.js"></script>
<script src="JS/azure-storage.blob.js"></script>

16. Blob Operations

17. Azure CDN 加速你的網站
內容傳遞網路
Content delivery network

18. Azure CDN 加速你的網站

19. Azure CDN 加速你的網站

20. Azure CDN 加速你的網站

21. Summary
儲存任何類型的文字或二進位資料,可
透過 HTTP 或 HTTPS 存取
Eg: Web site 靜態檔案、共享檔案
Azure Blob Storage
支援前端開發的 Azure Storage JS Library，直接由
前端JavaScript程式操控Azure Storage
Azure Storage JavaScript
Client Library
透過儲存於Azure Blob Storage的Web靜
態檔案，搭配Azure CDN服務 , 加速你
的 Web
Azure CDN
本地端管理操控 Azure Storage Tool
Azure Storage Explorer

22. Q&A
THANK
YOU

23. Ref
• https://github.com/Azure/azure-storage-node#azure-
storage-javascript-client-library-for-browsers
• https://github.com/Azure/azure-storage-
node/blob/master/browser/README.md
• https://azure.microsoft.com/zh-
tw/services/storage/blobs/