iT邦幫忙

2026 iThome 鐵人賽

DAY 15
0
IT Operation

從前後端踏上 AWS 雲端架構勇者之路系列 第 15 篇

圖片一定要放在 EC2 裡嗎?認識 S3、Bucket 和 Object

  • 分享至 

  • xImage
  •  

昨天我們把檔案存進 EC2 的 EBS 磁碟,也確認了關機再開,檔案也還在

不過或許你會好奇,那這些靜態儲存的檔案,都放在磁碟就好了嗎?

但在以實務上來說,其實比較常件是會放在 Amazon S3 ,這樣好處之後換 EC2 後,新的程式只要設定好權限,就能直接造訪 S3,例如會員的頭像或者是商品照片等等,就可以繼續使用這些圖片或讀取檔案

所以今天要講的是右邊紫色的 S3。EC2 負責跑程式,EBS 留著放系統與程式檔案,網站圖片則放到 S3

EC2 執行程式、EBS 保存系統與程式檔案,右側 S3 保存網站圖片;程式取得權限後才能存取 S3

前幾篇是準備主機、登入主機,今天來繼續分享「圖片放哪裡、上傳後怎麼找到它」~

S3 也要先開一台主機嗎?

不用,S3 是 AWS 提供的物件儲存服務。可以直接到 AWS 網頁上傳檔案,或讓程式透過 API 讀寫,不用先安裝 Ubuntu,也不用先選一顆多大的磁碟

除了圖片,影片、PDF、備份檔案也能放,也附上(官方介紹)

跟昨天的差別就在這裡:EBS 是接給 EC2 使用的磁碟,S3 則是另一項儲存服務。所以今天 EC2 可以繼續關著,我們直接在 S3 上傳圖片就好

上圖的 EC2 箭頭,是之後程式讀寫 S3 的方向;要另外設定程式與權限,不會建立好就自動連起來

先準備一個放圖片的 Bucket

在 S3 裡,要先建立一個 Bucket(儲存桶),才能把圖片放進去。圖片存在哪個區域、可以讓誰存取,也會在這裡設定

這次準備一張可以公開的小圖片,命名為 sample.png

提醒一下,如果登入的 IAM 身分要有建立 Bucket、列出與上傳物件等 S3 權限,當然自己練習的話也可以先用 root

到 S3 → General purpose buckets → Create bucket,設定如下:

項目 設定方式
Region Asia Pacific (Tokyo),ap-northeast-1
Bucket namespace Global namespace
Bucket name 例如 my-site-images-alex-k7m2q9,暱稱與後面六碼換成自己的
Object Ownership ACLs disabled,停用 ACL,後面用政策管理權限
Block all public access 保持勾選,先封鎖公開存取
Bucket Versioning Disabled,這次不保留多個版本
Default encryption SSE-S3,由 S3 管理金鑰、替檔案加密

確認後按 Create bucket,就有地方放圖片了 🙌

圖片上傳後,要怎麼找到它勒?

進入剛才的 Bucket,接著做以下操作:

  1. 到 Objects → Create folder,名稱填 practice。
  2. 進入 practice/,按 Upload → Add files,選擇 sample.png,再按 Upload。
  3. 上傳成功後,點進 sample.png,到 Properties 就能夠複製 Object URL。

在 S3 裡,這張圖片連同檔案類型等資訊,叫做 Object(物件)。而它在 Bucket 裡的完整名稱 practice/sample.png,就叫做 Object Key,這裡也附上(官方上傳說明)

這裡要注意的地方是,Key 包含前面的 practice/,不是只有 sample.png

同一個 Bucket 裡有兩張 sample.png,完整 Key 分別是 practice/sample.png 與 avatars/sample.png,因此是不同物件

假設 Bucket 叫 my-site-images,裡面有上圖這兩張圖片。雖然最後都是 sample.png,但完整 Key 不同,所以可以同時存在。大小寫也有差,sample.png 和 Sample.png 是不同名稱

AWS 網頁會把 practice/ 顯示成資料夾,今天用的通用型 Bucket,實際上是用整串 Key 辨認物件,practice/ 也是名稱的一部分

所以之後要讀這張圖,需要知道「哪個 Bucket」與「哪個 Key」。剛才複製的 Object URL,就包含這兩個資訊:

https://YOUR_BUCKET_NAME.s3.ap-northeast-1.amazonaws.com/practice/sample.png

YOUR_BUCKET_NAME 是自己的 Bucket 名稱,ap-northeast-1 是東京,最後的 practice/sample.png 就是 Key。實際操作直接複製 AWS 顯示的網址就好,也附上(網址格式說明)

那有網址,其他人就看得到了嗎?

還沒有哩,我們只完成上傳,還沒有允許其他網友讀取

把剛才的 Object URL 貼到新的無痕視窗,照今天的設定來說,你預期會看到 AccessDenied,意思是「拒絕存取」

自己登入 AWS 後能上傳,是因為 IAM 身分有權限;如果別人直接打開網址,S3 也要確認能不能讓他讀取。所以這裡也給你個豆知識,那就是有網址,不等於已經公開

這也是前面保留 Block Public Access(封鎖公開存取) 的原因:先讓圖片保持私有,下一篇會再設定公開讀取。有權限的 IAM 身分還是能操作,這個設定不會把帳號內所有操作都封鎖

圖片放著,也會收費嗎?

會的,圖片雖然沒公開,但還是占用儲存空間。S3 主要有以下幾種費用:

項目 怎麼產生?
儲存 圖片存了多少容量、放了多久
請求 上傳、讀取、列出物件等操作
資料流量傳輸 例如把圖片傳給網友,依傳輸方向與優惠計算

EC2 關機也不會停止 S3 計費。實際價格依區域、儲存類別與用量而定,也附上 S3 官方價格

小結

最後整理一下今天用到的名稱:

名稱 記住這句
Bucket 圖片放在哪個儲存桶
Object 上傳的圖片,連同相關資訊
Object Key 圖片在 Bucket 裡的完整名稱,例如 practice/sample.png
Object URL 圖片的網址,但能不能讀還要看權限

今天做到圖片上傳成功、取得 Object URL

Bucket 與圖片可以先保持私有,網址也留著。下一篇接著用同一張圖片、同一個網址,試試「開放後看得到 → 再封鎖就看不到」,最後移除公開規則、恢復私有,就能對 S3 有更深入的瞭解了

我們下篇見 :D


上一篇
EC2 開好了,怎麼登入?關機再開後,IP 和檔案還在嗎?
下一篇
同一張 S3 圖片,為什麼 Allow 了還是看不到?
系列文
從前後端踏上 AWS 雲端架構勇者之路 共 18 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言