【AWS】S3縮圖 ImageResize 架構
※需求：需要能夠對S3圖床上的圖片進行縮圖
※AWS相關組件： S3，APIGetWay，Lambda
要達成自動縮圖，有以下二種架構機制：
(1)強制自動縮圖
文章：https://www.bypeopletechnologies.com/blog/2017/05/01/serverless-image-resizing-aws-lambda-and-aws-s3/
原理：當圖片進入S3的時候，觸發了S3的PUT事件，透過Lambda將圖片強制進行一份縮小的圖片
缺點：只要S3有圖片近來，則強制產生同樣的一份縮圖，就算沒有使用也會產生
(2)自定義縮圖
文章：https://aws.amazon.com/tw/blogs/compute/resize-images-on-the-fly-with-amazon-s3-aws-lambda-and-amazon-api-gateway/
原理：使用者使用縮圖的URI，如果找不到縮小的圖片，會直接透過s3的proxy規則重定向到Lambda，再將圖片縮小後，重新導回縮小後的URI，如果一開始就有找到，則後續的proxy的重定向則不會運行。
以上述兩種架構都試做過，
其實並無分優劣，端看需求而定而已。
只是2的方法能夠更有效率的使用資源，而不會造成多餘的浪費。
下述先以 (2)自定義縮圖 來做實作，
由於此方法彈性佳，並且也不會浪費多餘的資源。
一些 平台類似FB的縮圖都很類似此種縮圖作法。
※ ※ ※ ※ ※ ※ ※ ※ ※ ※ ※ ※ ※ ※ ※
詳細架構跟做法：(AWS規劃師)
https://aws.amazon.com/tw/blogs/compute/resize-images-on-the-fly-with-amazon-s3-aws-lambda-and-amazon-api-gateway/
由於文中已經有很清楚的作法跟流程，這裡就不在多做贅述。
照著做就可以完成。
這文章是紀錄理清楚作法流程的意義
實際效果：
S3原本的圖片的URI如下
http://YOUR_BUCKET_WEBSITE_HOSTNAME_HERE/blue_marble.jpg
http://YOUR_BUCKET_WEBSITE_HOSTNAME_HERE/300×300/blue_marble.jpg
http://YOUR_BUCKET_WEBSITE_HOSTNAME_HERE/25×25/blue_marble.jpg
只要加上對應的參數，即可動態的產生縮圖。並且不需要額外的SERVER來幫助(譬如PHP)
範例：
原始圖片
http://{YOUR_BUCKET_WEBSITE_HOSTNAME}/abc.jpg
預計縮圖(100X100)
http://{YOUR_BUCKET_WEBSITE_HOSTNAME}/100x100/abc.jpg
(一)前端呼叫圖片URI ，檔案不存在
使用者在呼叫圖片網址的時候
http://{YOUR_BUCKET_WEBSITE_HOSTNAME}/100x100/abc.jpg
由於S3的圖床上並未有這張圖，此時就會觸發了(二)S3 static website的proxy功能如果已經有這張縮圖的話，則直接顯示，並不會觸發(二)之後的流程
(二)S3 Website proxy Rule(重定向規則)
而 static website proxy的這時候會聽到404(檔案不存在)的事件
作者在website的proxy規則裡面增加了404的這條規則，
將404重定位到AWS APIGETWAY，並將圖片的位置以「?key=」將參數帶入到APIGETWAY
(這也是為什麼作者，一定要將s3開啟static website，將uri走static website uri的主要原因)
(三)API GetWay + Lambda
此時網址已經被重定到APIGETWAY
假設你創建的API如下 http://{YOUR_API_HOSTNAME}/prod/resize?key=
API此時會長這樣 http://{YOUR_API_HOSTNAME}/prod/resize?key={100x100/abc.jpg}
將圖片位置帶入，而作者在APIGetway裡，有接入lambda
此時lambda就得知圖片的位置，並且將圖片直接進行縮圖，在進行轉址。
(四)Lambda轉址
lambda縮圖完後，進行轉址，就會回到原先使用者輸入的uri
http://{YOUR_BUCKET_WEBSITE_HOSTNAME}/100x100/abc.jpg
此時就能正確的讀取到縮完圖後的圖片
事後小記：
看似不起眼的縮圖，卻發揮了Serverless的精神
並且有效及充分的利用資源，有使用到縮圖，才會產生
當然這個架構還是有很多地方可以再做升級的
像是增加aws的STS功能(TOKEN權限)
PS.仔細看FB的縮圖，後面有的都是帶有權限的
張貼留言