{"id":423,"date":"2021-02-28T10:29:01","date_gmt":"2021-02-28T01:29:01","guid":{"rendered":"https:\/\/manvscloud.com\/?p=423"},"modified":"2021-06-06T13:52:49","modified_gmt":"2021-06-06T04:52:49","slug":"aws-cloudfront-lambdaedge%eb%a5%bc-%ed%99%9c%ec%9a%a9%ed%95%9c-image-resizing","status":"publish","type":"post","link":"https:\/\/manvscloud.com\/?p=423","title":{"rendered":"[AWS] Cloudfront + Lambda@Edge\ub97c \ud65c\uc6a9\ud55c Image Resizing"},"content":{"rendered":"\n

\uc548\ub155\ud558\uc138\uc694. ManVSCloud \uae40\uc218\ud604\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n

\uc624\ub298\uc740 CloudFront\uc640 Lambda@Edge\ub97c \ud65c\uc6a9\ud558\uc5ec \uc774\ubbf8\uc9c0 \ub9ac\uc0ac\uc774\uc9d5\uc744 \ud574\ubcf4\ub824\ud569\ub2c8\ub2e4.
\uc774\uc804\ubd80\ud130 \ud574\ubd10\uc57c\uaca0\ub2e4\uace0 \uc0dd\uac01\uc740 \ud588\uc73c\ub098 \uc800\ub294 \ubb34\uc5b8\uac00\ub97c \uc2dc\uc791\ud560 \ub54c \uc65c \uc774\uac83\uc744 \ud574\uc57c \ud558\ub294\uc9c0,
\uc774\uac83\uc744 \ud568\uc73c\ub85c\uc368 \uc5b4\ub5a4 \uc7a5\uc810\uc744 \uc5bb\uc744 \uc218 \uc788\ub294\uc9c0\ub97c \uba3c\uc800 \uc54c\uc9c0 \ubabb\ud558\uba74 \uc2dc\uc791\ud558\uc9c0 \ubabb\ud558\ub294 \ud3b8\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n

\uc774\ubbf8\uc9c0 \ub9ac\uc0ac\uc774\uc9d5\ub294 \uc65c \uc0ac\uc6a9\ud574\uc57c\ud560\uae4c\uc694?<\/p>\n\n\n\n

\ucd5c\uadfc\uc5d0 \ub098\uc624\ub294 \ud734\ub300 \uc804\ud654\uc640 \ub514\uc9c0\ud138 \uce74\uba54\ub77c\ub294 \uace0\ud654\uc9c8\ub85c \ucd2c\uc601\ud560 \uc218\uc788\ub294 \uc2a4\ud399\uc744 \uac00\uc9c0\uace0\uc788\uc5b4
\uc6f9 \uc0ac\uc774\ud2b8\uc5d0 \uc5c5\ub85c\ub4dc\ud558\uae30 \uc801\ud569\ud558\uc9c0 \uc54a\uc744 \ub54c\uac00 \uc788\uc2b5\ub2c8\ub2e4.

\ub610\ud55c \uc5ec\ub7ec \uc0ac\uc6a9\uc790\ub4e4\uc758 \ub514\ubc14\uc774\uc2a4\uc5d0\uc11c \uc694\uad6c\ud558\ub294 \ud574\uc0c1\ub3c4\uac00 \ub2ec\ub77c \uace0\uc815\ub41c \ud574\uc0c1\ub3c4\uc758 \uc774\ubbf8\uc9c0 \ud30c\uc77c \ud558\ub098\ub97c \uc5c5\ub85c\ub4dc \ud574\ub458 \uacbd\uc6b0 \ucd5c\uc801\ud654\ub41c \uc11c\ube44\uc2a4\ub97c \ud560 \uc218 \uc5c6\uac70\ub098 \uc5ec\ub7ec \ud574\uc0c1\ub3c4\ub9c8\ub2e4\uc758 \uc774\ubbf8\uc9c0\ub97c \uc2a4\ud1a0\ub9ac\uc9c0 \uc11c\ubc84\uc5d0 \uc62c\ub824\ub450\uc5b4 \uc6a9\ub7c9 \ub0ad\ube44\ub97c \ud558\uac8c \ub420 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4.

\uc774\ub7f0 \ucf00\uc774\uc2a4\ub9c8\ub2e4 \uc774\ubbf8\uc9c0\ub97c \ub9ac\uc0ac\uc774\uc9d5 \ud574\uc8fc\ub294 \uae30\ub2a5\uc774 \uc788\ub2e4\uba74 \uc88b\uc744 \uac83\uac19\uc2b5\ub2c8\ub2e4.
\uac8c\ub2e4\uac00 \uc774\ubbf8\uc9c0 \ub9ac\uc0ac\uc774\uc9d5\uc740 SEO(Search Engine Optimization)\uc5d0\ub3c4 \ud070 \ub3c4\uc6c0\uc774 \ub429\ub2c8\ub2e4.
* SEO(Search Engine Optimization) : \uac80\uc0c9 \uc5d4\uc9c4 \ucd5c\uc801\ud654<\/span>

\ud558\uc9c0\ub9cc \uc774\ubbf8\uc9c0 \ub9ac\uc0ac\uc774\uc9d5\uc740 \uc0dd\uac01\ubcf4\ub2e4 \uac04\ub2e8\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.
\uc774\ubbf8\uc9c0\uc758 \ud06c\uae30\ub97c \ubcc0\uacbd\ud55c\ub2e4\ub294 \uac83\uc740 \uc774\ubbf8\uc9c0\uc758 \ud488\uc9c8\uc774 \uc190\uc0c1 \ub420 \uc218 \uc788\uc9c0 \uc54a\uc744\uae4c\ub77c\ub294 \uace0\ubbfc\uc744 \ud558\uac8c \ub9cc\ub4e4\uae30\ub3c4 \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

\uc2e4\uc2b5\uc744 \ud1b5\ud574 \uc774\ubbf8\uc9c0 \ub9ac\uc0ac\uc774\uc9d5\uc774 \uc5b4\ub5bb\uac8c \ub418\ub294\uc9c0 \uc6d0\ub9ac\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uace0
\ud488\uc9c8\uc5d0 \uc601\ud5a5\uc774 \ud074\uc9c0 \ub4f1\uc744 \uc54c\uc544\ubcf4\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4.
(\uc2e4\uc2b5\uc758 \uacb0\ub860\ubd80\ud130 \ub9d0\ud558\uc790\uba74 \uc798 \ub418\uc9c0\uc54a\uc558\uc2b5\ub2c8\ub2e4…?)<\/p>\n\n\n\n

\n\n\n\n

Principles of Image Resizing<\/h3>\n\n\n\n
\"\"
<\uc774\ubbf8\uc9c0 \ub9ac\uc0ac\uc774\uc9d5\uc758 \uc6d0\ub9ac><\/figcaption><\/figure>\n\n\n\n

\u2460 URI\uc5d0 \uc6d0\ud558\ub294 \ud574\uc0c1\ub3c4\uc758 \uc774\ubbf8\uc9c0\ub97c \uc694\uccad\ud569\ub2c8\ub2e4.
<\/strong>ex) https:\/\/img.manvscloud.com\/image\/tom.png?w=200&h=150&f=webp&q=90

\u2461 \uce90\uc2dc \uc11c\ubc84(CloudFront\/Edge Location)\uc5d0\uc11c \uce90\uc2f1\ub41c \uc774\ubbf8\uc9c0\uac00 \uc788\uc73c\uba74 \uc774\ubbf8\uc9c0\ub97c \uc804\uc1a1\ud558\uc9c0\ub9cc \uce90\uc2dc\ub41c \uc774\ubbf8\uc9c0\uac00 \uc5c6\uc744 \uacbd\uc6b0 \uc774\ubbf8\uc9c0 \ub9ac\uc0ac\uc774\uc9d5 \uc11c\ubc84(Lambda@Edge)\uc5d0 API \ub610\ub294 SDK\ub97c \uc774\uc6a9\ud55c \ub9ac\uc0ac\uc774\uc9d5\ub41c \uc774\ubbf8\uc9c0\ub97c \uc694\uccad\ud569\ub2c8\ub2e4.

\u2462 \uc774\ubbf8\uc9c0 \ub9ac\uc0ac\uc774\uc9d5 \uc11c\ubc84(Lambda@Edge)\ub294 API\ub098 SDK\ub97c \ud1b5\ud574 \uc774\ubbf8\uc9c0\uac00 \uc874\uc7ac\ud558\ub294 \uc2a4\ud1a0\ub9ac\uc9c0 \uc11c\ubc84(S3)\uc5d0 \uc6d0\ubcf8 \uc774\ubbf8\uc9c0\ub97c \uc694\uccad\ud558\uac8c \ub429\ub2c8\ub2e4.

\u2463 \uc2a4\ud1a0\ub9ac\uc9c0 \uc11c\ubc84(S3)\uac00 \uc774\ubbf8\uc9c0 \ub9ac\uc0ac\uc774\uc9d5 \uc11c\ubc84(Lambda@Edge)\ub85c \uc774\ubbf8\uc9c0\ub97c \uc804\uc1a1\ud569\ub2c8\ub2e4.

\u2464 \uc774\ubbf8\uc9c0 \ub9ac\uc0ac\uc774\uc9d5 \uc11c\ubc84(Lambda@Edge)\ub294 \uc2a4\ud1a0\ub9ac\uc9c0 \uc11c\ubc84(S3)\uc5d0\uac8c \uc774\ubbf8\uc9c0\ub97c \ubc1b\uc740 \ud6c4 \uc694\uccad\ud55c URI\ub97c \ud574\uc11d\ud55c \ub4a4 \uc6d0\ud558\ub294 \uc774\ubbf8\uc9c0\ub85c \ub9ac\uc0ac\uc774\uc9d5\ud558\uc5ec \uce90\uc2dc \uc11c\ubc84(CloudFront\/Edge Location)\ub85c \uc804\uc1a1\ud569\ub2c8\ub2e4.

\u2465 \uc694\uccad\ud55c \ud574\uc0c1\ub3c4\uc758 \uc774\ubbf8\uc9c0\ub97c GET \ud569\ub2c8\ub2e4.<\/strong>
<\/p>\n\n\n\n

\uc6d0\ub9ac\ub294 \ub300\ub7b5 \uc774\ub7f0 \uc2dd\uc774\ub77c\uace0 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\uadf8\ub7fc \uc774\uc81c \uc2e4\uc2b5\ud558\uc5ec \uc2e4\uc81c\ub85c \uc774\ubbf8\uc9c0 \ub9ac\uc0ac\uc774\uc9d5\uc774 \uc798 \ub418\ub294\uc9c0 \ud655\uc778\ud574\ubcf4\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

\n\n\n\n

IAM – Policy & Role<\/h3>\n\n\n\n

\uc6b0\uc120 IAM\uc744 \ub9cc\ub4e4\uc5b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.
Lambda\ub97c Cloudfront \ubc30\ud3ec\ud558\uace0 \uc5f0\uacb0\ud558\uae30 \uc704\ud55c IAM \uad8c\ud55c \uc124\uc815\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

? \uc815\ucc45 \uc0dd\uc131<\/h5>\n\n\n\n

[IAM] – [\uc561\uc138\uc2a4 \uad00\ub9ac] – [\uc815\ucc45] – [\uc815\ucc45 \uc0dd\uc131]<\/strong><\/p>\n\n\n\n

{\n    \"Version\": \"2012-10-17\",\n    \"Statement\": [\n        {\n            \"Sid\": \"VisualEditor0\",\n            \"Effect\": \"Allow\",\n            \"Action\": [\n                \"iam:CreateServiceLinkedRole\",\n                \"lambda:GetFunction\",\n                \"lambda:EnableReplication\",\n                \"cloudfront:UpdateDistribution\",\n                \"s3:GetObject\",\n                \"logs:CreateLogGroup\",\n                \"logs:CreateLogStream\",\n                \"logs:PutLogEvents\",\n                \"logs:DescribeLogStreams\"\n            ],\n            \"Resource\": \"*\"\n        }\n    ]\n}<\/pre>\n\n\n\n
? \uc5ed\ud560 \uc0dd\uc131<\/h5>\n\n\n\n
[IAM] – [\uc561\uc138\uc2a4 \uad00\ub9ac] – [\uc5ed\ud560] – [\uc5ed\ud560 \ub9cc\ub4e4\uae30]<\/strong>
\u2192 \uc0ac\uc6a9\ud560 \uc11c\ube44\uc2a4 : Lambda
\u2192 \uc704\uc5d0\uc11c \uc0dd\uc131\ud55c \uc815\ucc45\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4.
\u2192 \uc5ed\ud560 \ub9cc\ub4e4\uae30<\/p>\n\n\n\n
\uc5ed\ud560 \uc0dd\uc131 \ud6c4 \uc0dd\uc131\ub41c \uc5ed\ud560\uc758 \uc2e0\ub8b0 \uad00\uacc4\uac00 \uc544\ub798 \uadf8\ub9bc\uacfc \uac19\uc774 \uc124\uc815\ub418\uc5b4 \uc788\ub294\uc9c0 \ud655\uc778\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\uc2e0\ub8b0\ud560 \uc218 \uc788\ub294 \uac1c\uccb4\uac00 \uadf8\ub9bc\uacfc \uac19\uc774 \uc124\uc815\ub418\uc5b4\uc788\uc9c0 \uc54a\ub2e4\uba74 [\uc2e0\ub8b0 \uad00\uacc4 \ud3b8\uc9d1]\uc744 \uc774\uc6a9\ud558\uc5ec 
\uc218\uc815 \ud6c4 \uc5c5\ub370\uc774\ud2b8 \ud574\uc90d\ub2c8\ub2e4.<\/p>\n\n\n\n
{\n  \"Version\": \"2012-10-17\",\n  \"Statement\": [\n    {\n      \"Effect\": \"Allow\",\n      \"Principal\": {\n        \"Service\": [\n          \"edgelambda.amazonaws.com\",\n          \"lambda.amazonaws.com\"\n        ]\n      },\n      \"Action\": \"sts:AssumeRole\"\n    }\n  ]\n}<\/pre>\n\n\n\n
\n\n\n\n
    S3 & CloudFront<\/h3>\n\n\n\n
? S3 \ubc84\ud0b7 \uc0dd\uc131<\/h5>\n\n\n\n
[Amazon S3] – [\ubc84\ud0b7 \ub9cc\ub4e4\uae30]<\/strong><\/p>\n\n\n\n
\"\"
S3 \ubc84\ud0b7 \uc0dd\uc131<\/figcaption><\/figure>\n\n\n\n
\"\"
image \ub77c\ub294 \uc774\ub984\uc758 \ud3f4\ub354\ub97c \uc0dd\uc131\ud558\uc600\uc2b5\ub2c8\ub2e4.<\/figcaption><\/figure>\n\n\n\n
\uc774\ud6c4 image\/\uc5d0 tom.png \ud30c\uc77c\uc744 \uc5c5\ub85c\ub4dc \ud574\ub450\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
? CloudFront \uc0dd\uc131<\/h5>\n\n\n\n
[CloudFront] – [Create Distribution] – [Get Started]<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
 Origin Domain Name\uc5d0 \uc704\uc5d0\uc11c \uc0dd\uc131\ud55c S3\ub97c \uc120\ud0dd\ud574\uc90d\ub2c8\ub2e4.<\/p>\n\n\n\n
Enable Origin Shield\ub294 \uc774\ubc88 \ud3ec\uc2a4\ud305\uc5d0\uc11c \ub2e4\ub8e8\uc9c0 \uc54a\uaca0\uc2b5\ub2c8\ub2e4.
\uc774\ud6c4 \ud3ec\uc2a4\ud305 \ub420 “CloudFront Cache Hit Ratio” \ub97c \ucc38\uace0\ud574\uc8fc\uc138\uc694.<\/span><\/p>\n\n\n\n
Restrict Bucket Access\ub97c “Yes”\ub85c \uccb4\ud06c\ud574\uc8fc\uac8c \ub418\uba74 \ubc84\ud0b7\uc758 \uc811\uadfc \uc81c\ud55c\uc744 \ud65c\uc131\ud654 \ud558\uaca0\ub2e4\ub294 \uc758\ubbf8\uc785\ub2c8\ub2e4.
Origin Access Identity\ub294 \uc2e0\uaddc\ub85c \uc0dd\uc131\ud558\uc5ec \uc0ac\uc6a9\ud558\uaca0\uc2b5\ub2c8\ub2e4.
Grant Read Permisstions on Bucket\uc740 \ud574\ub2f9 S3 \ubc84\ud0b7 \uc815\ucc45\uc5d0 \uc77d\uae30 \uad8c\ud55c\uc744 Update\ud560\uac70\uc57c? \ud558\uace0 \ubb3b\ub294\uac81\ub2c8\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Query String Forwading and Caching \uc124\uc815\uc774 Forward all, cache based on whitelist\uc73c\ub85c \ub418\uc5c8\ub2e4\uba74
Query String whitelist\uc5d0 \ucffc\ub9ac \uc2a4\ud2b8\ub9c1 \ud0a4\ub97c \uc9c0\uc815\ud574\uc904 \uc218 \uc788\uac8c \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n
\uc608\ub97c \ub4e4\uc5b4 \ucffc\ub9ac \uc2a4\ud2b8\ub9c1 \ud0a4\ub85c img\ub97c \uc8fc\uace0 \uc2f6\ub2e4\uba74 Query String whitelist\uc5d0 img\ub97c \uc785\ub825\ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n
\uc624\ub9ac\uc9c4 \uc11c\ubc84\uc5d0\uc11c \ud558\ub098 \uc774\uc0c1\uc758 \ucffc\ub9ac \ubb38\uc790\uc5f4 \ud30c\ub77c\ubbf8\ud130\ub97c \uae30\uc900\uc73c\ub85c \ub2e4\ub978 \ubc84\uc804\uc758 \uac1d\uccb4\ub97c \ubc18\ud658\ud560 \uacbd\uc6b0 \ud544\uc694\ud569\ub2c8\ub2e4. (\ucffc\ub9ac \ubb38\uc790\uc5f4\uc744 \uc774\uc6a9\ud558\uc5ec \uce90\uc2dc \uc6b0\ud68c \uac00\ub2a5)<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
SSL Certificate\ub97c Default\ub85c \ud558\ub294 \uacbd\uc6b0 CNAMEs \uc744 \uc0ac\uc6a9\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.
\ub610\ud55c Default\ub294 \ubcf4\uc548 TLS \ubc84\uc804\uc744 \uc120\ud0dd\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4. <\/p>\n\n\n\n
\ubc84\uc9c0\ub2c8\uc544 \ubd81\ubd80 \ub9ac\uc804\uc5d0\uc11c ACM\uc744 \uc0dd\uc131\ud558\uc5ec Cloudfront\uc758 Custom SSL Certificate\ub97c \uc120\ud0dd\ud560 \uc218 \uc788\uc73c\ub2c8 \uc774 \ubc29\ubc95\uc744 \uc801\uadf9 \uad8c\uc7a5\ub4dc\ub9bd\ub2c8\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\uc0dd\uc131\ub41c Cloudfront\uc5d0\uc11c Behaviors\ub97c \uc774\uc6a9\ud558\uba74 S3 \ubc84\ud0b7\ub0b4\uc5d0 \ub514\ub809\ud1a0\ub9ac \ubcc4\ub85c \uc635\uc158 \uc124\uc815\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\uc124\uc815 \uc774\ud6c4 cloudfront\ub97c \uc774\uc6a9\ud558\uc5ec S3 \ubc84\ucef7\uc5d0 \uc62c\ub824\ub454 \uc774\ubbf8\uc9c0 \ud30c\uc77c\uc774 \ubcf4\uc774\ub294\uc9c0 \ud655\uc778\ud574\ubcf4\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\n\n\n\n
    Lambda@Edge (with Cloud9)<\/h3>\n\n\n\n
? Create Lambda<\/h5>\n\n\n\n
[\ubc84\uc9c0\ub2c8\uc544 \ubd81\ubd80 \ub9ac\uc804] – [AWS Lambda] – [\ud568\uc218 \uc0dd\uc131] – [\uc0c8\ub85c \uc791\uc131]<\/strong>
(Lambda@Edge\ub294 \ubbf8\uad6d \ub3d9\ubd80(\ubc84\uc9c0\ub2c8\uc544 \ubd81\ubd80)(us-east-1)\ub9cc \ud5c8\uc6a9\ub429\ub2c8\ub2e4.)<\/span><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\uc704 \uadf8\ub9bc\uacfc \ub3d9\uc77c\ud558\uac8c \uc774\ub984\/\ubc84\uc804\/\uc5ed\ud560<\/strong>\uc744 \uc815\ud574\uc900 \ub4a4 [\ud568\uc218 \uc0dd\uc131]<\/strong>\uc744 \ud074\ub9ad\ud574\uc90d\uc2dc\ub2e4.
(\uc5ed\ud560\uc740 \uc704 <IAM – Policy & Role><\/span><\/strong>\uc5d0\uc11c \uc0dd\uc131\ud55c \uc5ed\ud560\ub85c \uc120\ud0dd\ud574\uc90d\ub2c8\ub2e4. )<\/p>\n\n\n\n
Entity<\/strong><\/th>\uc624\ub9ac\uc9c4 \uc694\uccad \ubc0f \uc751\ub2f5 \uc774\ubca4\ud2b8 \uc81c\ud55c<\/th>\ucd5c\uc885 \uc0ac\uc6a9\uc790 \uc694\uccad \ubc0f \uc751\ub2f5 \uc774\ubca4\ud2b8 \uc81c\ud55c<\/th><\/tr><\/thead>
\ud568\uc218 \ub9ac\uc18c\uc2a4 \ud560\ub2f9<\/td>Lambda \uc81c\ud55c\uacfc \ub3d9\uc77c<\/td>128MB<\/td><\/tr>
\ud568\uc218 \uc81c\ud55c \uc2dc\uac04<\/td>30\ucd08<\/td>5\ucd08<\/td><\/tr>
\ud5e4\ub354 \ubc0f \ubcf8\ubb38\uc744 \ud3ec\ud568\ud558\uc5ec Lambda \ud568\uc218\uc5d0\uc11c \uc0dd\uc131\ub418\ub294 \uc751\ub2f5\uc758 \ud06c\uae30<\/td>1MB<\/td>40KB<\/td><\/tr>
Lambda \ud568\uc218 \ubc0f \ud3ec\ud568\ub41c \ub77c\uc774\ube0c\ub7ec\ub9ac\uc758 \ucd5c\ub300 \uc555\ucd95 \ud06c\uae30<\/td>50MB<\/td>1MB<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
? Cloud9<\/h5>\n\n\n\n
[AWS Cloud9] – [Create environment]<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
[Next step] – [Create environment]<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\uc7a0\uc2dc \ud6c4 Cloud9\uc774 \uc0dd\uc131\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\uc88c\uce21 AWS \ub9c8\ud06c\ub97c \ub204\ub978 \ud6c4 AWS:Explorer\uc5d0\uc11c Show region in the Explorer\ub97c \ud074\ub9ad\ud558\uc5ec
Lambda\uac00 \uc788\ub294 \ub9ac\uc804\uc744 \uc120\ud0dd\ud574\uc8fc\ub3c4\ub85d \ud569\uc2dc\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Lambda \ud568\uc218\ub97c \uc0dd\uc131 \ud588\ub358 US East (N. Virginia) \ubc84\uc9c0\ub2c8\uc544 \ubd81\ubd80 \ub9ac\uc804\uc744 \uc120\ud0dd\ud574\uc90d\ub2c8\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\uc88c\uce21 \ubc84\uc9c0\ub2c8\uc544 \ubd81\ubd80 Lambda\uc5d0\uc11c \uc0dd\uc131\ud55c ImageResize \ud568\uc218\ub97c \uac00\uc838\uc635\ub2c8\ub2e4<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\uc704 \uc0ac\uc9c4\uc5d0 \uc774\uc5b4 \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud558\uc5ec npm\ucd08\uae30\ud654\uc640 \uc124\uce58\ub97c \uc9c4\ud589\ud574\uc90d\ub2c8\ub2e4.<\/p>\n\n\n\n
cd ImageResize  (\ub514\ub809\ud1a0\ub9ac \uc774\ub3d9)\nnpm init -y\nnpm install sharp \nnpm install aws-sdk<\/pre>\n\n\n\n
'use strict';\n\nconst querystring = require('querystring'); \/\/ Don't install.\nconst AWS = require('aws-sdk'); \/\/ Don't install.\n\n\/\/ http:\/\/sharp.pixelplumbing.com\/en\/stable\/api-resize\/\nconst Sharp = require('sharp');\n\nconst S3 = new AWS.S3({\n  signatureVersion: 'v4',\n  region: 'ap-northeast-2'  \/\/ \ubc84\ud0b7\uc744 \uc0dd\uc131\ud55c \ub9ac\uc804 \uc785\ub825\n});\n\nconst BUCKET = '[mybucket]' \/\/ Input your bucket\n\n\/\/ Image types that can be handled by Sharp\nconst supportImageTypes = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'tiff'];\n\nexports.handler = async(event, context, callback) => {\n  const { request, response } = event.Records[0].cf;\n  \n  \/\/ Parameters are w, h, f, q and indicate width, height, format and quality.\n  const { uri } = request;\n  const ObjectKey = decodeURIComponent(uri).substring(1);\n  const params = querystring.parse(request.querystring);\n  const { w, h, q, f } = params\n  \n  \/**\n   * ex) https:\/\/dilgv5hokpawv.cloudfront.net\/dev\/thumbnail.png?w=200&h=150&f=webp&q=90\n   * - ObjectKey: 'dev\/thumbnail.png'\n   * - w: '200'\n   * - h: '150'\n   * - f: 'webp'\n   * - q: '90'\n   *\/\n  \n  \/\/ \ud06c\uae30 \uc870\uc808\uc774 \uc5c6\ub294 \uacbd\uc6b0 \uc6d0\ubcf8 \ubc18\ud658.\n  if (!(w || h)) {\n    return callback(null, response);\n  }\n\n  \n  const extension = uri.match(\/\\\/?(.*)\\.(.*)\/)[2].toLowerCase();\n  const width = parseInt(w, 10) || null;\n  const height = parseInt(h, 10) || null;\n  const quality = parseInt(q, 10) || 100; \/\/ Sharp\ub294 \uc774\ubbf8\uc9c0 \ud3ec\ub9f7\uc5d0 \ub530\ub77c\uc11c \ud488\uc9c8(quality)\uc758 \uae30\ubcf8\uac12\uc774 \ub2e4\ub985\ub2c8\ub2e4.\n  let format = (f || extension).toLowerCase();\n  let s3Object;\n  let resizedImage;\n\n  \/\/ \ud3ec\ub9f7 \ubcc0\ud658\uc774 \uc5c6\ub294 GIF \ud3ec\ub9f7 \uc694\uccad\uc740 \uc6d0\ubcf8 \ubc18\ud658.\n  if (extension === 'gif' && !f) {\n    return callback(null, response);\n  }\n\n  \/\/ Init format.\n  format = format === 'jpg' ? 'jpeg' : format;\n\n  if (!supportImageTypes.some(type => type === extension )) {\n    responseHandler(\n      403,\n      'Forbidden',\n      'Unsupported image type', [{\n        key: 'Content-Type',\n        value: 'text\/plain'\n      }],\n    );\n\n    return callback(null, response);\n  }\n\n\n  \/\/ Verify For AWS CloudWatch.\n  console.log(`parmas: ${JSON.stringify(params)}`); \/\/ Cannot convert object to primitive value.\\\n  console.log('S3 Object key:', ObjectKey)\n\n  try {\n    s3Object = await S3.getObject({\n      Bucket: BUCKET,\n      Key: ObjectKey\n    }).promise();\n\n    console.log('S3 Object:', s3Object);\n  }\n  catch (error) {\n    responseHandler(\n      404,\n      'Not Found',\n      'The image does not exist.', [{ key: 'Content-Type', value: 'text\/plain' }],\n    );\n    return callback(null, response);\n  }\n\n  try {\n    resizedImage = await Sharp(s3Object.Body)\n      .resize(width, height)\n      .withMetadata()\n      .toFormat(format, {\n        quality\n      })\n      .toBuffer();\n  }\n  catch (error) {\n    responseHandler(\n      500,\n      'Internal Server Error',\n      'Fail to resize image.', [{\n        key: 'Content-Type',\n        value: 'text\/plain'\n      }],\n    );\n    return callback(null, response);\n  }\n  \n  \/\/ \uc751\ub2f5 \uc774\ubbf8\uc9c0 \uc6a9\ub7c9\uc774 1MB \uc774\uc0c1\uc77c \uacbd\uc6b0 \uc6d0\ubcf8 \ubc18\ud658.\n  if (Buffer.byteLength(resizedImage, 'base64') >= 1048576) {\n    return callback(null, response);\n  }\n\n  responseHandler(\n    200,\n    'OK',\n    resizedImage.toString('base64'), [{\n      key: 'Content-Type',\n      value: `image\/${format}`\n    }],\n    'base64'\n  );\n\n  \/**\n   * @summary response \uac1d\uccb4 \uc218\uc815\uc744 \uc704\ud55c wrapping \ud568\uc218\n   *\/\n  function responseHandler(status, statusDescription, body, contentHeader, bodyEncoding) {\n    response.status = status;\n    response.statusDescription = statusDescription;\n    response.body = body;\n    response.headers['content-type'] = contentHeader;\n    if (bodyEncoding) {\n      response.bodyEncoding = bodyEncoding;\n    }\n  }\n  \n  console.log('Success resizing image');\n\n  return callback(null, response);\n};<\/pre>\n\n\n\n
\ucf54\ub4dc\ub294 \uc544\ub798 github \ud398\uc774\uc9c0\ub97c \ucc38\uace0\ud558\uc600\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n
<\/a>
<\/div><\/div>
\uc774\ubbf8\uc9c0 \ub9ac\uc0ac\uc774\uc9d5 \ub78c\ub2e4 \ud568\uc218<\/div>
\uc774\ubbf8\uc9c0 \ub9ac\uc0ac\uc774\uc9d5 \ub78c\ub2e4 \ud568\uc218. GitHub Gist: instantly share code, notes, and snippets.<\/div><\/div><\/div>\n\n\n
\ub9c8\uc9c0\ub9c9\uc73c\ub85c \ucf54\ub4dc\ub97c Lambda\ub85c \uc5c5\ub85c\ub4dc\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
? Lambda@Edge<\/h5>\n\n\n\n
[AWS Lambda] – [\uc0dd\uc131\ud588\ub358 \ud568\uc218] – [\uc791\uc5c5] – [Lambda@Edge \ubc30\ud3ec]<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
https:\/\/\ub3c4\uba54\uc778\/image\/tom.png?w=200&h=150&f=webp&q=90<\/p>\n\n\n\n
\uac00\ub85c 200px, \uc138\ub85c 150px, \ud488\uc9c8 90% \uc774\ubbf8\uc9c0 \ucd9c\ub825\uc744 \uc694\uccad\ud558\uc600\uc9c0\ub9cc \ubcc0\ud558\ub294\uac8c \uc5c6\ub124\uc694…
\ubb54\uac00 \uc798 \uc548\ub41c \uac83\uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\uc774\ud6c4 \ub2e4\uc2dc \ud574\ubcf4\uace0 \uc131\uacf5\ud558\ub294\ub300\ub85c \ud574\ub2f9 \ud3ec\uc2a4\ud305\uc744 \uc131\uacf5 \ud6c4\uae30\ub97c \ucd94\uac00\ud558\uc5ec \uc218\uc815\ud560 \uc608\uc815\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
    Reference<\/h3>\n\n\n
<\/a>
<\/div><\/div>
Using Lambda Function with Amazon S3 – Tutorialspoint<\/div>
Using Lambda Function with Amazon S3 – Amazon S3 service is used for file storage, where you can upload or remove files. We can trigger AWS Lambda on S3 when there are any file uploads in S3 buckets.<\/div><\/div><\/div>\n\n\n
\uc704 \uc0ac\uc774\ud2b8\ub294 Lambda Tutorial \uc0ac\uc774\ud2b8 \uc785\ub2c8\ub2e4.
\uad1c\ucc2e\uc544\ubcf4\uc5ec\uc11c \ucd94\uac00\ud574\ub450\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\ube44\ub85d \uc624\ub298 \uc2e4\uc2b5\uc740 \uc2e4\ud328\ud558\uc600\uc9c0\ub9cc \uc774\ud6c4 \ub2e4\uc2dc \ub3c4\uc804\ud588\uc744 \ub54c \uc131\uacf5\ud558\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.
\uace7 \uc131\uacf5\ud55c \ud3ec\uc2a4\ud305\uc73c\ub85c \ubcc0\uacbd\ud558\uc5ec \ub3cc\uc544\uc624\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\uae34 \uae00 \uc77d\uc5b4\uc8fc\uc154\uc11c \uac10\uc0ac\ud569\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"
\uc548\ub155\ud558\uc138\uc694. ManVSCloud \uae40\uc218\ud604\uc785\ub2c8\ub2e4. \uc624\ub298\uc740 CloudFront\uc640 Lambda@Edge\ub97c \ud65c\uc6a9\ud558\uc5ec \uc774\ubbf8\uc9c0 \ub9ac\uc0ac\uc774\uc9d5\uc744 \ud574\ubcf4\ub824\ud569\ub2c8\ub2e4.\uc774\uc804\ubd80\ud130 \ud574\ubd10\uc57c\uaca0\ub2e4\uace0 \uc0dd\uac01\uc740 \ud588\uc73c\ub098 \uc800\ub294 \ubb34\uc5b8\uac00\ub97c \uc2dc\uc791\ud560 \ub54c \uc65c \uc774\uac83\uc744 \ud574\uc57c \ud558\ub294\uc9c0,\uc774\uac83\uc744 \ud568\uc73c\ub85c\uc368 \uc5b4\ub5a4 \uc7a5\uc810\uc744 \uc5bb\uc744 \uc218 \uc788\ub294\uc9c0\ub97c \uba3c\uc800 \uc54c\uc9c0 \ubabb\ud558\uba74 \uc2dc\uc791\ud558\uc9c0 \ubabb\ud558\ub294 \ud3b8\uc785\ub2c8\ub2e4. \uc774\ubbf8\uc9c0 \ub9ac\uc0ac\uc774\uc9d5\ub294 \uc65c \uc0ac\uc6a9\ud574\uc57c\ud560\uae4c\uc694? \ucd5c\uadfc\uc5d0 \ub098\uc624\ub294 \ud734\ub300 \uc804\ud654\uc640 \ub514\uc9c0\ud138 \uce74\uba54\ub77c\ub294 \uace0\ud654\uc9c8\ub85c \ucd2c\uc601\ud560 \uc218\uc788\ub294 \uc2a4\ud399\uc744 \uac00\uc9c0\uace0\uc788\uc5b4 \uc6f9 \uc0ac\uc774\ud2b8\uc5d0 \uc5c5\ub85c\ub4dc\ud558\uae30 \uc801\ud569\ud558\uc9c0 \uc54a\uc744 \ub54c\uac00 \uc788\uc2b5\ub2c8\ub2e4. \ub610\ud55c \uc5ec\ub7ec \uc0ac\uc6a9\uc790\ub4e4\uc758 \ub514\ubc14\uc774\uc2a4\uc5d0\uc11c \uc694\uad6c\ud558\ub294 \ud574\uc0c1\ub3c4\uac00 \ub2ec\ub77c \uace0\uc815\ub41c \ud574\uc0c1\ub3c4\uc758 \uc774\ubbf8\uc9c0 \ud30c\uc77c \ud558\ub098\ub97c \uc5c5\ub85c\ub4dc \ud574\ub458 \uacbd\uc6b0 \ucd5c\uc801\ud654\ub41c \uc11c\ube44\uc2a4\ub97c \ud560 \uc218 \uc5c6\uac70\ub098 \uc5ec\ub7ec \ud574\uc0c1\ub3c4\ub9c8\ub2e4\uc758 \uc774\ubbf8\uc9c0\ub97c \uc2a4\ud1a0\ub9ac\uc9c0 \uc11c\ubc84\uc5d0 \uc62c\ub824\ub450\uc5b4 \uc6a9\ub7c9 \ub0ad\ube44\ub97c \ud558\uac8c \ub420 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub7f0 \ucf00\uc774\uc2a4\ub9c8\ub2e4 \uc774\ubbf8\uc9c0\ub97c \ub9ac\uc0ac\uc774\uc9d5 \ud574\uc8fc\ub294 \uae30\ub2a5\uc774 \uc788\ub2e4\uba74 \uc88b\uc744 \uac83\uac19\uc2b5\ub2c8\ub2e4.\uac8c\ub2e4\uac00 \uc774\ubbf8\uc9c0 \ub9ac\uc0ac\uc774\uc9d5\uc740 SEO(Search Engine Optimization)\uc5d0\ub3c4 \ud070 \ub3c4\uc6c0\uc774 \ub429\ub2c8\ub2e4.* SEO(Search Engine Optimization) : \uac80\uc0c9 \uc5d4\uc9c4 \ucd5c\uc801\ud654 \ud558\uc9c0\ub9cc \uc774\ubbf8\uc9c0 \ub9ac\uc0ac\uc774\uc9d5\uc740 \uc0dd\uac01\ubcf4\ub2e4 \uac04\ub2e8\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.\uc774\ubbf8\uc9c0\uc758 \ud06c\uae30\ub97c \ubcc0\uacbd\ud55c\ub2e4\ub294 \uac83\uc740 \uc774\ubbf8\uc9c0\uc758 \ud488\uc9c8\uc774 \uc190\uc0c1 \ub420 \uc218 \uc788\uc9c0 \uc54a\uc744\uae4c\ub77c\ub294 \uace0\ubbfc\uc744 \ud558\uac8c \ub9cc\ub4e4\uae30\ub3c4 \ud569\ub2c8\ub2e4. \uc2e4\uc2b5\uc744 \ud1b5\ud574 \uc774\ubbf8\uc9c0 \ub9ac\uc0ac\uc774\uc9d5\uc774 \uc5b4\ub5bb\uac8c \ub418\ub294\uc9c0 \uc6d0\ub9ac\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uace0\ud488\uc9c8\uc5d0 \uc601\ud5a5\uc774 \ud074\uc9c0 \ub4f1\uc744 \uc54c\uc544\ubcf4\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4.(\uc2e4\uc2b5\uc758 \uacb0\ub860\ubd80\ud130 \ub9d0\ud558\uc790\uba74 \uc798 \ub418\uc9c0\uc54a\uc558\uc2b5\ub2c8\ub2e4…?) Principles of Image Resizing \u2460 URI\uc5d0 \uc6d0\ud558\ub294 \ud574\uc0c1\ub3c4\uc758 \uc774\ubbf8\uc9c0\ub97c \uc694\uccad\ud569\ub2c8\ub2e4.ex) https:\/\/img.manvscloud.com\/image\/tom.png?w=200&h=150&f=webp&q=90 \u2461 \uce90\uc2dc \uc11c\ubc84(CloudFront\/Edge Location)\uc5d0\uc11c \uce90\uc2f1\ub41c \uc774\ubbf8\uc9c0\uac00 \uc788\uc73c\uba74 \uc774\ubbf8\uc9c0\ub97c \uc804\uc1a1\ud558\uc9c0\ub9cc \uce90\uc2dc\ub41c \uc774\ubbf8\uc9c0\uac00 \uc5c6\uc744 \uacbd\uc6b0 \uc774\ubbf8\uc9c0 \ub9ac\uc0ac\uc774\uc9d5 \uc11c\ubc84(Lambda@Edge)\uc5d0 API \ub610\ub294 SDK\ub97c \uc774\uc6a9\ud55c \ub9ac\uc0ac\uc774\uc9d5\ub41c \uc774\ubbf8\uc9c0\ub97c \uc694\uccad\ud569\ub2c8\ub2e4. \u2462 \uc774\ubbf8\uc9c0 \ub9ac\uc0ac\uc774\uc9d5 \uc11c\ubc84(Lambda@Edge)\ub294 API\ub098 SDK\ub97c \ud1b5\ud574 \uc774\ubbf8\uc9c0\uac00 \uc874\uc7ac\ud558\ub294 \uc2a4\ud1a0\ub9ac\uc9c0 \uc11c\ubc84(S3)\uc5d0 \uc6d0\ubcf8 \uc774\ubbf8\uc9c0\ub97c \uc694\uccad\ud558\uac8c \ub429\ub2c8\ub2e4. \u2463 \uc2a4\ud1a0\ub9ac\uc9c0 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[6,149,136,147,145,143,144,32,148,146],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/manvscloud.com\/index.php?rest_route=\/wp\/v2\/posts\/423"}],"collection":[{"href":"https:\/\/manvscloud.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/manvscloud.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/manvscloud.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/manvscloud.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=423"}],"version-history":[{"count":6,"href":"https:\/\/manvscloud.com\/index.php?rest_route=\/wp\/v2\/posts\/423\/revisions"}],"predecessor-version":[{"id":504,"href":"https:\/\/manvscloud.com\/index.php?rest_route=\/wp\/v2\/posts\/423\/revisions\/504"}],"wp:attachment":[{"href":"https:\/\/manvscloud.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/manvscloud.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/manvscloud.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}