上次的用 Cloudflare + AWS S3 做 HTTPS 圖床主題,我們成功搭建了自己的圖床,但是透過 AWS Console 或 AWS CLI 上傳圖片到 AWS S3 是個既麻煩又耗時的過程。更不用說,每次還得手動更換圖片連結中的域名以適配部落格。幸運的是,我找到了 PicGo 為我提供了一個更便捷的解決方案。
PicGo 是一款輕量級的工具,旨在提升上傳圖片的效率並簡化獲取圖片連結的過程。無論是透過命令行還是其直觀的圖形用戶界面(GUI),PicGo 的使用都令人驚喜地簡單。更重要的是,它能自動處理圖片連結的生成,大大優化了圖床的操作流程。
實際操作流程
前置條件
- S3 Bucket:
mybucket
- mybucket 開啟了 Static website hosting,endpoint:
http://mybucket.example.com.s3-website-ap-northeast-1.amazonaws.com/
- 指向 mybucket -> endpoint 的網域:
images.example.com
目標
- 創建 AWS IAM User 並為之配置 Access key。
- 授予 User 適當的權限以操作 AWS S3 Bucket。
- 修改 AWS S3 Bucket 設定,讓 User 可以正確的操作它。
- 安裝並配置 PicGo,包括 AWS 的相關設定。
- 確保操作遵循權限最小化的原則。
步驟
IAM
- 到 IAM -> Users 新增
PicGo
User,此時先不分配 Policies。 - 點選
Picgo
使用者,在分頁 Permissions 創建 inline policy。利用 JSON 定義需要的權限:1{2"Version": "2012-10-17",3"Statement": [4{5"Sid": "access-s3-mybucket",6"Effect": "Allow",7"Action": [8"s3:PutObject",9"s3:GetObject",10"s3:ListBucketMultipartUploads",11"s3:AbortMultipartUpload",12"s3:GetBucketCORS",13"s3:ListBucket",14"s3:InitiateReplication",15"s3:PutBucketCORS",9 collapsed lines16"s3:DeleteObject"17],18"Resource": [19"arn:aws:s3:::mybucket/*",20"arn:aws:s3:::mybucket"21]22}23]24} - 在
Security credentials
->Access keys
創建新的 Access key,記錄下access key id
和secret access key
。請絕對要把這組金鑰記下來,忘了只能再產生一把。
S3
進入 mybucket -> 分頁 Permissions:
- 到 Bucket policy 面板,確認加入以下 policy:
1{2"Version": "2012-10-17",3"Id": "restrict-s3-bucket",4"Statement": [5{6"Sid": "AllowRequestsOnlyFromCloudFlare",7"Effect": "Allow",8"Principal": "*",9"Action": "s3:GetObject",10"Resource": "arn:aws:s3:::mybucket/*",11"Condition": {12"IpAddress": {13"aws:SourceIp": [14"103.21.244.0/22",15"103.22.200.0/22",47 collapsed lines16"103.31.4.0/22",17"104.16.0.0/13",18"104.24.0.0/14",19"108.162.192.0/18",20"131.0.72.0/22",21"141.101.64.0/18",22"162.158.0.0/15",23"172.64.0.0/13",24"173.245.48.0/20",25"188.114.96.0/20",26"190.93.240.0/20",27"197.234.240.0/22",28"198.41.128.0/17"29]30}31}32},33{34"Sid": "ExplicitDeny",35"Effect": "Deny",36"Principal": "*",37"Action": "s3:GetObject",38"Resource": "arn:aws:s3:::mybucket/*",39"Condition": {40"NotIpAddress": {41"aws:SourceIp": [42"103.21.244.0/22",43"103.22.200.0/22",44"103.31.4.0/22",45"104.16.0.0/13",46"104.24.0.0/14",47"108.162.192.0/18",48"131.0.72.0/22",49"141.101.64.0/18",50"162.158.0.0/15",51"172.64.0.0/13",52"173.245.48.0/20",53"188.114.96.0/20",54"190.93.240.0/20",55"197.234.240.0/22",56"198.41.128.0/17"57]58}59}60}61]62}
- 到 Block public access (bucket settings) 面板,確認關閉所有選項。
- 到 Object Ownership 面板開啟 ACLs。
- 到 access control list (ACL) 面板確認 Bucket owner 的 Objects 和 Bucket ACL 都開啟了 Read, Write 權限。
我們已經完成了給第三方軟體授權的使用者以及 S3 Bucket 必要的設定,接下來讓我們進入正題。
PicGo
- 下載並安裝 PicGo。
- 到分頁
插件設定
安裝 picgo-plugin-s3 插件。 - 到分頁
圖床設定
-> Amazon S3 新增配置,下面列出重要的幾個欄位:1應用密鑰 ID: {access key id}2應用密鑰: {secret access key}3桶名: mybucket4地區: ap-northeast-15自定義域名: https://images.example.com6ACL 訪問扣制列表: private - 到上傳區確認上傳成功,到相簿確認複製的 url 可以訪問。
What’s next
雖然上傳圖片和複製網址變得簡單了,但對於本地環境下的圖片預覽仍存在一定的限制。之後會想個辦法解決這個狀況。