---
tags: 網頁前端
---

# 網頁前端｜Google Drive 也可以當作 CDN 來使用

**前言：** (若你時間有限，想直接知道怎麼做就跳到第二段 哈哈)

> 在執行網頁前端的工作中，有時候我們會遇到一些需求是需要透過 CDN 的方式才能夠完成內容傳遞的工作。
>
> 例如：非第三方平台伺服器能支援上傳的檔案格式(svg、webp、mp4 等等)。

這時候 Google Drive 可以「暫時」成為你的 CDN 之用。
> 為甚麼我會說是「暫時」呢？
> 因為當網站資料越來越多且複雜時，這樣的檔案管理方式是不利於開發的。

但若只是一時需要應急使用，這樣就可以先以 Google Drive 作為檔案存放處，來達到 CDN 的目的。

---

Step01: 你必須要擁有 Google Drive 帳號 (Gmail帳戶)
Step02: 上傳檔案到你的 Google Drive、並開啟檢視權限


Step03: 提取檔案 URL（複製連結）以下為示範連結
https://drive.google.com/file/d/ABCDabcd1234567/view?usp=sharing

→ 這一串數字 `ABCDabcd1234567` 就是 id

Step04: 複製上方的 id，參照以下網址改寫：(替換 xxx... 成 id)
`https://drive.google.com/uc?id=xxxxxxxxxxxxxx`

> 改寫後：`https://drive.google.com/uc?id=ABCDabcd1234567`

然後就能自行編寫 HTML 如下：
> `<img src="https://drive.google.com/uc?id=ABCDabcd1234567" alt="your description"/>`

完成

---

參考資料：
* [Google drive as CDN](https://www.moddereducation.com/2023/06/google-drive-as-cdn.html?m=1)

---
###### tags: `CDN` `Google Drive`