/ docs

ghost-s3-compat - 以 Amazon S3 為 Ghost 的圖床

在使用 Ghost Markdown 編輯器的過程中,最喜歡的一個功能莫過於圖片上傳 (Image Upload) 的方式。整體的流暢度目前堪稱第一,完全不需要預先上傳圖片到某些圖床,然後再找連結,html 的格式貼上或是透過醜醜的上傳頁面去做,如下:

![](https://s3-ap-southeast-1.amazonaws.com/chhsu.org/2017/02blogger_upload-1486395219342.png)

來看看 Ghost Markdown 編輯器在 iPhone 上所提供上傳圖片的方式(只透過 Safari ,其實在桌機上也是一樣的方式,但是用手機可以做就是啊!)

1. 編輯

![](https://s3-ap-southeast-1.amazonaws.com/chhsu.org/2017/02IMG_6746-1486400617576.PNG)

2. 預覽

![](https://s3-ap-southeast-1.amazonaws.com/chhsu.org/2017/02IMG_6747-1486400622629.PNG)

#### 3. 上傳圖片

![](https://s3-ap-southeast-1.amazonaws.com/chhsu.org/2017/02IMG_6748-1486400627743.PNG)

#### 4. 完成上傳,直接給你看結果

![](https://s3-ap-southeast-1.amazonaws.com/chhsu.org/2017/02IMG_6749-1486400633153.PNG)

#### 5. 回到編輯頁面,就可以看到連結

![](https://s3-ap-southeast-1.amazonaws.com/chhsu.org/2017/02IMG_6750-1486400640696.PNG)

而原本 Ghost 的上傳機制,是直接上傳到 ghost/content/images 目錄下。雖然圖片占不了多少硬碟空間,不過另外一個角度它也是會佔流量的。
而另外一部分,就是備份的問題,Ghost 是有提供文章匯出匯入的機制,所以內文的備份是沒有問題的。不過圖片的備份相對是一個問題,不過如果 Ghost 是架在 VPS 上,倒是可以直接備份整台 VM 或是直接使用供應商提供的備份機制。

但是這樣的狀況下,是不是如果那天我們對現有的服務商不爽,要搬家就需要花很多時間處理?是的,所以請考慮下面個這方案,透過安裝 ghost-s3-compat 的方式,來將上傳的圖片導入進 Amazon S3。

優點:

  • 有唯一的檔案連結,即使搬家也不須重新對應圖片連結
  • 流量分散,減低主機負擔

缺點:

  • 要多付 S3 流量的費用

廢話說完,來跑一下安裝流程。不過還是建議先看看 Ghost storage modulesGhost on Heroku,然後再去看一下 ghost-s3-compat 的文件。畢竟 Ghost S3 就有很多不同的版本[1]and[2],我也沒時間去測試,只找了一個最近有人更新的就抓來用了。

安裝 ghost-s3-compat

$ npm install ghost-s3-compat
$ mkdir content/storage
$ cp -r node_modules/ghost-s3-compat content/storage/ghost-s3-compat

修改 /var/www/ghost/config.js

config = {
   production: {
   
        database: {
			...
        },

        server: {
        	...
        },

        storage: {
            active: 'ghost-s3-compat',
            'ghost-s3-compat': {
                accessKeyId: 'ASSESS_KEY', 
                secretAccessKey: 'SECRET_ACCESS_KEY',
                bucket: 'BUCKET_NAME',
                region: 'REGION'
            }
        }
    },
    ...
}

設定 Amazon IAM 並產生 accessKey/secretAccessKey

其實 Action 裡面不用包含 DeleteObject, 因為這個功能並沒有被實作[3]

{
    "Statement": [
        {
            "Sid": "GhostS3UploadImage",
            "Action": [
                "s3:GetBucketAcl",
                "s3:GetBucketLogging",
                "s3:GetObject",
                "s3:ListBucket",
                "s3:PutBucketAcl",
                "s3:PutBucketLogging",
                "s3:PutObject",
                "s3:PutObjectAcl",
                "s3:DeleteObject"
            ],
            "Effect": "Allow",
            "Resource": [
                "arn:aws:s3:::<BUCKET_NAME>/*"
            ]
        }
    ]
}

設定完成,就可以重啟 Ghost 來試試看上傳資料,如果順利,你應該會看到類似下面的連結與圖片預覽。

 ![](https://<REGION>.amazonaws.com/<BUCKET>/<FILENAME>-<TS>.PNG)


  1. https://www.npmjs.com/package/ghost-s3-storage ↩︎

  2. https://www.npmjs.com/package/ghost-s3 ↩︎

  3. https://github.com/spanishdict/ghost-s3-compat/blob/master/index.js#L133-L135 ↩︎