Browsing Tag

iam

AWS

[AWS] image resizing failure, trouble shooting

안녕하세요. ManVSCloud 김수현입니다.

오늘은 이전에 실패했던 image resizing 실패 원인을 확인 후
정상적으로 resizing 성공 후기를 남겨보려고 합니다.


First Cause

첫번째 원인을 찾았습니다.
CloudFront 트리거 구성 시 Origin Response가 되어야하는데 Request로 설정을 해두었던 것!

Lambda에서 변경 시 위에서 오리진 응답으로 변경하면 됩니다.

만약 Cloudfront에서 변경을 하실 경우 연결된 cloudfront에서 [Behaviors]-[경로 선택 및 Edit] 후 아래 CloudFront Event에서 Origin Response로 변경해줄 수 있습니다.

이 부분은 리눅서님의 도움을 받았습니다.
해당 부분이 Response가 되어야하는 이유는 인지하고 있었는데 다시 한번 포인트를 잡아주시고 놓치고 지나친 부분 찾아주신 리눅서님에게 감사의 인사 올립니다.


Find hints

위 첫번째 원인을 해결하고도 정상적으로 이미지 리사이징이 되지 않았습니다.
그래서 현재 이미지 리사이징이 어떻게 동작하고있고 특정 오류가 발생하는가 확인해보기로 했습니다.


우선 CloudFront의 Cache statistics와 Monitoring을 체크해보았고
각 오류 코드 및 Header값을 확인해보았습니다.

3xx의 정체는 301, 2xx는 200, 4xx는 403으로 보입니다.

http://주소/경로/tom.png?w=110&h=60&f=webp&q=90 [Viewer Request]
Status Code 로301 Move Permanently를 받으며 리다이렉트 되었습니다.
X-Cache : Redirect from cloudfront

https로 리다이렉트 되고 Status Code로 200을 받았습니다.
x-cache : Miss from cloudfront 엣지 로케이션 캐시에 tom.png?w=110&h=60&f=webp&q=90가 없어 Origin에 요청합니다. 여기서 Origin은 tom.png 이미지가 있는 S3 버킷!
이미지도 잘 데려왔습니다.

그런데 이미지 리사이징이 되지않은 상태로 넘어왔습니다.
User가 Cloudfront로 “Viewer request” 했고 (1. User → Cloudfront)
Miss from cloudfront라 Cloudfront가 Origin에게 “Origin request” 하고 (2. Cloudfront → Origin)
Origin으로부터 “Origin reponse” 후 (3. Origin → Cloudfront)
Cloudfront가 다시 User에게 “Viewer response” (4. Cloudfront → User) 되어
이미지를 받았다라고 했을 때 [1], [2], [4] 과정은 문제가 없었을 것이라 생각됩니다.

[1],[4] 요청과 응답에 대한 통신은 정상적으로 되었으며 Miss from cloudfront 응답에
[2] CloudFront는 Origin에게 요청을 했을 것입니다.

그렇다면 [3] 과정에서 정상적으로 동작하지 않는 것이 있다는 것인데?

Cloudfront 설정은 몇번을 반복하여 보아도 더 이상 잘못 설정한 것이 없었습니다.
그래서 Lambda 설정을 조금 더 검토해보기로 했습니다.

Second Cause

원인을 전혀 못찾다가 사내 상사의 도움으로 “Node.js 버전에 맞는 소스 코드를 사용했는가? 소스 코드가 버전에 맞지않아서 그럴 수 있다”라는 힌트를 얻게 되었습니다.

그런데 아무리 생각해봐도 다른 설정은 잘 되어있고 정말 소스 코드쪽이 크게 의심되어 바로 버전과 소스 코드 변경을 진행하였습니다.

Node.js 버전은 12.x 버전으로 변경하였고 소스 코드는 아래와 같이 수정하였습니다.

'use strict';

const querystring = require('querystring'); // Don't install.
const AWS = require('aws-sdk'); // Don't install.
const Sharp = require('sharp');

const S3 = new AWS.S3({
  region: 'ap-northeast-2'
});
const BUCKET = 'mybucket';

exports.handler = async (event, context, callback) => {
  const { request, response } = event.Records[0].cf;
  // Parameters are w, h, f, q and indicate width, height, format and quality.
  const params = querystring.parse(request.querystring);

  // Required width or height value.
  if (!params.w && !params.h) {
    return callback(null, response);
  }

  // Extract name and format.
  const { uri } = request;
  const [, imageName, extension] = uri.match(/\/?(.*)\.(.*)/);

  // Init variables
  let width;
  let height;
  let format;
  let quality; // Sharp는 이미지 포맷에 따라서 품질(quality)의 기본값이 다릅니다.
  let s3Object;
  let resizedImage;

  // Init sizes.
  width = parseInt(params.w, 10) ? parseInt(params.w, 10) : null;
  height = parseInt(params.h, 10) ? parseInt(params.h, 10) : null;

  // Init quality.
  if (parseInt(params.q, 10)) {
    quality = parseInt(params.q, 10);
  }

  // Init format.
  format = params.f ? params.f : extension;
  format = format === 'jpg' ? 'jpeg' : format;

  // For AWS CloudWatch.
  console.log(`parmas: ${JSON.stringify(params)}`); // Cannot convert object to primitive value.
  console.log(`name: ${imageName}.${extension}`); // Favicon error, if name is `favicon.ico`.

  try {
    s3Object = await S3.getObject({
      Bucket: BUCKET,
      Key: decodeURI(imageName + '.' + extension)
    }).promise();
  } catch (error) {
    console.log('S3.getObject: ', error);
    return callback(error);
  }

  try {
    resizedImage = await Sharp(s3Object.Body)
      .resize(width, height)
      .toFormat(format, {
        quality
      })
      .toBuffer();
  } catch (error) {
    console.log('Sharp: ', error);
    return callback(error);
  }

  const resizedImageByteLength = Buffer.byteLength(resizedImage, 'base64');
  console.log('byteLength: ', resizedImageByteLength);

  // `response.body`가 변경된 경우 1MB까지만 허용됩니다.
  if (resizedImageByteLength >= 1 * 1024 * 1024) {
    return callback(null, response);
  }

  response.status = 200;
  response.body = resizedImage.toString('base64');
  response.bodyEncoding = 'base64';
  response.headers['content-type'] = [
    {
      key: 'Content-Type',
      value: `image/${format}`
    }
  ];
  return callback(null, response);
};

개발쪽은 아직 미숙하여 소스 코드는 아래 링크를 참고하였습니다.

소스 코드 변환 후 lambda 재배포하여 다시 한 번 리사이징 테스트를 해보았습니다.


Success

이미지 리사이징이 정상적으로 완료되었습니다!
Node.js 버전과 소스 코드 변경 후 정상적으로 리사이징이 되네요

이번 이미지 리사이징을 계기로 개발쪽 공부도 해야겠다는 생각이 드는데 바쁜 일정으로 올해는 무리입니다…

그래도 이미지 리사이징 성공할 수 있어서 뿌듯합니다.

긴 글 읽어주셔서 감사합니다.

AWS

[AWS] Cloudfront + Lambda@Edge를 활용한 Image Resizing

안녕하세요. ManVSCloud 김수현입니다.

오늘은 CloudFront와 Lambda@Edge를 활용하여 이미지 리사이징을 해보려합니다.
이전부터 해봐야겠다고 생각은 했으나 저는 무언가를 시작할 때 왜 이것을 해야 하는지,
이것을 함으로써 어떤 장점을 얻을 수 있는지를 먼저 알지 못하면 시작하지 못하는 편입니다.

이미지 리사이징는 왜 사용해야할까요?

최근에 나오는 휴대 전화와 디지털 카메라는 고화질로 촬영할 수있는 스펙을 가지고있어
웹 사이트에 업로드하기 적합하지 않을 때가 있습니다.

또한 여러 사용자들의 디바이스에서 요구하는 해상도가 달라 고정된 해상도의 이미지 파일 하나를 업로드 해둘 경우 최적화된 서비스를 할 수 없거나 여러 해상도마다의 이미지를 스토리지 서버에 올려두어 용량 낭비를 하게 될 수도 있습니다.

이런 케이스마다 이미지를 리사이징 해주는 기능이 있다면 좋을 것같습니다.
게다가 이미지 리사이징은 SEO(Search Engine Optimization)에도 큰 도움이 됩니다.
* SEO(Search Engine Optimization) : 검색 엔진 최적화

하지만 이미지 리사이징은 생각보다 간단하지 않습니다.
이미지의 크기를 변경한다는 것은 이미지의 품질이 손상 될 수 있지 않을까라는 고민을 하게 만들기도 합니다.

실습을 통해 이미지 리사이징이 어떻게 되는지 원리에 대해 알아보고
품질에 영향이 클지 등을 알아보도록 하겠습니다.
(실습의 결론부터 말하자면 잘 되지않았습니다…😥)


Principles of Image Resizing

<이미지 리사이징의 원리>

① URI에 원하는 해상도의 이미지를 요청합니다.
ex) https://img.manvscloud.com/image/tom.png?w=200&h=150&f=webp&q=90

② 캐시 서버(CloudFront/Edge Location)에서 캐싱된 이미지가 있으면 이미지를 전송하지만 캐시된 이미지가 없을 경우 이미지 리사이징 서버(Lambda@Edge)에 API 또는 SDK를 이용한 리사이징된 이미지를 요청합니다.

③ 이미지 리사이징 서버(Lambda@Edge)는 API나 SDK를 통해 이미지가 존재하는 스토리지 서버(S3)에 원본 이미지를 요청하게 됩니다.

④ 스토리지 서버(S3)가 이미지 리사이징 서버(Lambda@Edge)로 이미지를 전송합니다.

⑤ 이미지 리사이징 서버(Lambda@Edge)는 스토리지 서버(S3)에게 이미지를 받은 후 요청한 URI를 해석한 뒤 원하는 이미지로 리사이징하여 캐시 서버(CloudFront/Edge Location)로 전송합니다.

⑥ 요청한 해상도의 이미지를 GET 합니다.

원리는 대략 이런 식이라고 볼 수 있습니다.
그럼 이제 실습하여 실제로 이미지 리사이징이 잘 되는지 확인해보도록 하겠습니다.


IAM – Policy & Role

우선 IAM을 만들어보겠습니다.
Lambda를 Cloudfront 배포하고 연결하기 위한 IAM 권한 설정이 필요합니다.

💡 정책 생성

[IAM] – [액세스 관리] – [정책] – [정책 생성]

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "iam:CreateServiceLinkedRole",
                "lambda:GetFunction",
                "lambda:EnableReplication",
                "cloudfront:UpdateDistribution",
                "s3:GetObject",
                "logs:CreateLogGroup",
                "logs:CreateLogStream",
                "logs:PutLogEvents",
                "logs:DescribeLogStreams"
            ],
            "Resource": "*"
        }
    ]
}
💡 역할 생성

[IAM] – [액세스 관리] – [역할] – [역할 만들기]
→ 사용할 서비스 : Lambda
→ 위에서 생성한 정책을 추가합니다.
→ 역할 만들기

역할 생성 후 생성된 역할의 신뢰 관계가 아래 그림과 같이 설정되어 있는지 확인합니다.

신뢰할 수 있는 개체가 그림과 같이 설정되어있지 않다면 [신뢰 관계 편집]을 이용하여
수정 후 업데이트 해줍니다.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": {
        "Service": [
          "edgelambda.amazonaws.com",
          "lambda.amazonaws.com"
        ]
      },
      "Action": "sts:AssumeRole"
    }
  ]
}

S3 & CloudFront

💡 S3 버킷 생성

[Amazon S3] – [버킷 만들기]

S3 버킷 생성
image 라는 이름의 폴더를 생성하였습니다.

이후 image/에 tom.png 파일을 업로드 해두도록 하겠습니다.

💡 CloudFront 생성

[CloudFront] – [Create Distribution] – [Get Started]

Origin Domain Name에 위에서 생성한 S3를 선택해줍니다.

Enable Origin Shield는 이번 포스팅에서 다루지 않겠습니다.
이후 포스팅 될 “CloudFront Cache Hit Ratio” 를 참고해주세요.

Restrict Bucket Access를 “Yes”로 체크해주게 되면 버킷의 접근 제한을 활성화 하겠다는 의미입니다.
Origin Access Identity는 신규로 생성하여 사용하겠습니다.
Grant Read Permisstions on Bucket은 해당 S3 버킷 정책에 읽기 권한을 Update할거야? 하고 묻는겁니다.

Query String Forwading and Caching 설정이 Forward all, cache based on whitelist으로 되었다면
Query String whitelist에 쿼리 스트링 키를 지정해줄 수 있게 됩니다.

예를 들어 쿼리 스트링 키로 img를 주고 싶다면 Query String whitelist에 img를 입력하시면 됩니다.

오리진 서버에서 하나 이상의 쿼리 문자열 파라미터를 기준으로 다른 버전의 객체를 반환할 경우 필요합니다. (쿼리 문자열을 이용하여 캐시 우회 가능)

SSL Certificate를 Default로 하는 경우 CNAMEs 을 사용할 수 없습니다.
또한 Default는 보안 TLS 버전을 선택할 수 없습니다.

버지니아 북부 리전에서 ACM을 생성하여 Cloudfront의 Custom SSL Certificate를 선택할 수 있으니 이 방법을 적극 권장드립니다.

생성된 Cloudfront에서 Behaviors를 이용하면 S3 버킷내에 디렉토리 별로 옵션 설정이 가능합니다.

설정 이후 cloudfront를 이용하여 S3 버컷에 올려둔 이미지 파일이 보이는지 확인해보도록 하겠습니다.


Lambda@Edge (with Cloud9)

💡 Create Lambda

[버지니아 북부 리전] – [AWS Lambda] – [함수 생성] – [새로 작성]
(Lambda@Edge는 미국 동부(버지니아 북부)(us-east-1)만 허용됩니다.)

위 그림과 동일하게 이름/버전/역할을 정해준 뒤 [함수 생성]을 클릭해줍시다.
(역할은 위 <IAM – Policy & Role>에서 생성한 역할로 선택해줍니다. )

Entity오리진 요청 및 응답 이벤트 제한최종 사용자 요청 및 응답 이벤트 제한
함수 리소스 할당Lambda 제한과 동일128MB
함수 제한 시간30초5초
헤더 및 본문을 포함하여 Lambda 함수에서 생성되는 응답의 크기1MB40KB
Lambda 함수 및 포함된 라이브러리의 최대 압축 크기50MB1MB
💡 Cloud9

[AWS Cloud9] – [Create environment]

[Next step] – [Create environment]

잠시 후 Cloud9이 생성됩니다.

좌측 AWS 마크를 누른 후 AWS:Explorer에서 Show region in the Explorer를 클릭하여
Lambda가 있는 리전을 선택해주도록 합시다.

Lambda 함수를 생성 했던 US East (N. Virginia) 버지니아 북부 리전을 선택해줍니다.

좌측 버지니아 북부 Lambda에서 생성한 ImageResize 함수를 가져옵니다

위 사진에 이어 명령어를 입력하여 npm초기화와 설치를 진행해줍니다.

cd ImageResize  (디렉토리 이동)
npm init -y
npm install sharp 
npm install aws-sdk
'use strict';

const querystring = require('querystring'); // Don't install.
const AWS = require('aws-sdk'); // Don't install.

// http://sharp.pixelplumbing.com/en/stable/api-resize/
const Sharp = require('sharp');

const S3 = new AWS.S3({
  signatureVersion: 'v4',
  region: 'ap-northeast-2'  // 버킷을 생성한 리전 입력
});

const BUCKET = '[mybucket]' // Input your bucket

// Image types that can be handled by Sharp
const supportImageTypes = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'tiff'];

exports.handler = async(event, context, callback) => {
  const { request, response } = event.Records[0].cf;
  
  // Parameters are w, h, f, q and indicate width, height, format and quality.
  const { uri } = request;
  const ObjectKey = decodeURIComponent(uri).substring(1);
  const params = querystring.parse(request.querystring);
  const { w, h, q, f } = params
  
  /**
   * ex) https://dilgv5hokpawv.cloudfront.net/dev/thumbnail.png?w=200&h=150&f=webp&q=90
   * - ObjectKey: 'dev/thumbnail.png'
   * - w: '200'
   * - h: '150'
   * - f: 'webp'
   * - q: '90'
   */
  
  // 크기 조절이 없는 경우 원본 반환.
  if (!(w || h)) {
    return callback(null, response);
  }

  
  const extension = uri.match(/\/?(.*)\.(.*)/)[2].toLowerCase();
  const width = parseInt(w, 10) || null;
  const height = parseInt(h, 10) || null;
  const quality = parseInt(q, 10) || 100; // Sharp는 이미지 포맷에 따라서 품질(quality)의 기본값이 다릅니다.
  let format = (f || extension).toLowerCase();
  let s3Object;
  let resizedImage;

  // 포맷 변환이 없는 GIF 포맷 요청은 원본 반환.
  if (extension === 'gif' && !f) {
    return callback(null, response);
  }

  // Init format.
  format = format === 'jpg' ? 'jpeg' : format;

  if (!supportImageTypes.some(type => type === extension )) {
    responseHandler(
      403,
      'Forbidden',
      'Unsupported image type', [{
        key: 'Content-Type',
        value: 'text/plain'
      }],
    );

    return callback(null, response);
  }


  // Verify For AWS CloudWatch.
  console.log(`parmas: ${JSON.stringify(params)}`); // Cannot convert object to primitive value.\
  console.log('S3 Object key:', ObjectKey)

  try {
    s3Object = await S3.getObject({
      Bucket: BUCKET,
      Key: ObjectKey
    }).promise();

    console.log('S3 Object:', s3Object);
  }
  catch (error) {
    responseHandler(
      404,
      'Not Found',
      'The image does not exist.', [{ key: 'Content-Type', value: 'text/plain' }],
    );
    return callback(null, response);
  }

  try {
    resizedImage = await Sharp(s3Object.Body)
      .resize(width, height)
      .withMetadata()
      .toFormat(format, {
        quality
      })
      .toBuffer();
  }
  catch (error) {
    responseHandler(
      500,
      'Internal Server Error',
      'Fail to resize image.', [{
        key: 'Content-Type',
        value: 'text/plain'
      }],
    );
    return callback(null, response);
  }
  
  // 응답 이미지 용량이 1MB 이상일 경우 원본 반환.
  if (Buffer.byteLength(resizedImage, 'base64') >= 1048576) {
    return callback(null, response);
  }

  responseHandler(
    200,
    'OK',
    resizedImage.toString('base64'), [{
      key: 'Content-Type',
      value: `image/${format}`
    }],
    'base64'
  );

  /**
   * @summary response 객체 수정을 위한 wrapping 함수
   */
  function responseHandler(status, statusDescription, body, contentHeader, bodyEncoding) {
    response.status = status;
    response.statusDescription = statusDescription;
    response.body = body;
    response.headers['content-type'] = contentHeader;
    if (bodyEncoding) {
      response.bodyEncoding = bodyEncoding;
    }
  }
  
  console.log('Success resizing image');

  return callback(null, response);
};

코드는 아래 github 페이지를 참고하였습니다.

마지막으로 코드를 Lambda로 업로드합니다.

💡 Lambda@Edge

[AWS Lambda] – [생성했던 함수] – [작업] – [Lambda@Edge 배포]

https://도메인/image/tom.png?w=200&h=150&f=webp&q=90

가로 200px, 세로 150px, 품질 90% 이미지 출력을 요청하였지만 변하는게 없네요…
뭔가 잘 안된 것같습니다.

이후 다시 해보고 성공하는대로 해당 포스팅을 성공 후기를 추가하여 수정할 예정입니다.


Reference

위 사이트는 Lambda Tutorial 사이트 입니다.
괜찮아보여서 추가해두었습니다.

비록 오늘 실습은 실패하였지만 이후 다시 도전했을 때 성공하기를 바랍니다.
곧 성공한 포스팅으로 변경하여 돌아오겠습니다.

긴 글 읽어주셔서 감사합니다.