Vinc3nt's Life

使用 PicGo 讓上傳插入圖片變得更輕鬆

2024-03-25
tools
picgo
aws-s3
aws-iam
image-upload
automation
最後更新:2025-01-26
4分鐘
779字

上次的用 Cloudflare + AWS S3 做 HTTPS 圖床主題,我們成功搭建了自己的圖床,但是透過 AWS Console 或 AWS CLI 上傳圖片到 AWS S3 是個既麻煩又耗時的過程。更不用說,每次還得手動更換圖片連結中的域名以適配部落格。幸運的是,我找到了 PicGo 為我提供了一個更便捷的解決方案。

PicGo 是一款輕量級的工具,旨在提升上傳圖片的效率並簡化獲取圖片連結的過程。無論是透過命令行還是其直觀的圖形用戶界面(GUI),PicGo 的使用都令人驚喜地簡單。更重要的是,它能自動處理圖片連結的生成,大大優化了圖床的操作流程。

default 實際操作流程

前置條件

  • S3 Bucket: mybucket
  • mybucket 開啟了 Static website hosting,endpoint: http://mybucket.example.com.s3-website-ap-northeast-1.amazonaws.com/
  • 指向 mybucket -> endpoint 的網域: images.example.com

目標

  1. 創建 AWS IAM User 並為之配置 Access key。
  2. 授予 User 適當的權限以操作 AWS S3 Bucket。
  3. 修改 AWS S3 Bucket 設定,讓 User 可以正確的操作它。
  4. 安裝並配置 PicGo,包括 AWS 的相關設定。
  5. 確保操作遵循權限最小化的原則。

步驟

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 lines
    16
    "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 idsecret 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 lines
    16
    "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
    桶名: mybucket
    4
    地區: ap-northeast-1
    5
    自定義域名: https://images.example.com
    6
    ACL 訪問扣制列表: private
  • 到上傳區確認上傳成功,到相簿確認複製的 url 可以訪問。

What’s next

雖然上傳圖片和複製網址變得簡單了,但對於本地環境下的圖片預覽仍存在一定的限制。之後會想個辦法解決這個狀況。

參考

本文標題:使用 PicGo 讓上傳插入圖片變得更輕鬆
文章作者:Vincent Lin
發布時間:2024-03-25