티스토리 뷰

develop

S3 Shortener

yogae 2020. 6. 3. 23:20

사용자에게 보여지는 url이 길다는 요구사항과 QR code를 생성하는 요구사항이 생겨서 shorten 서비스를 구현하게 되었다. shorten 서비스를 DB에 연결하여 구현할 수 있지만 최대한 관리의 부담을 줄이는 설계를 구성하고자 S3를 사용한 shortener를 구현했다. 

리다이렉션 방법

  • HTTP 리다이렉트: header location을 사용하는 방법

  • HTML 리다이렉션: <meta> tag를 사용하는 방법

  • 자바스크립트 리다이렉션: 자바스크립트 내에서 window.location 프로퍼티를 사용하는 방법

리다이렉션 우선 순위는 아래와 같다.

 

  1. 페이지가 읽힌 적도 없고 전송된 적도 없는 경우, HTTP 리다이렉트가 항상 먼저 실행됩니다.

  2. 어떤 HTTP 리다이렉트로 없는 경우에, HTML 리다이렉트가 실행됩니다.

  3. 자바스크립트 리다이렉트는 최후의 순단으로써 사용되며, 클라이언트 측에서 자바스크립트를 활성화시킨 경우에만 사용할 수 있습니다.

S3 shortener 설정

S3 metadata 사용(HTTP 리다이렉트)

S3에서 object를 생성할 때 Website-Redirect-Location Metadata를 설정한다.

const AWS = require('aws-sdk');
const S3 = new AWS.S3();

async function saveRedirect(path, longUrl) {
  let redirect = {
    Bucket: BUCKET,
    Key: path
  }
  redirect['WebsiteRedirectLocation'] = longUrl
  return S3.putObject(redirect).promise()
}

위의 설정은 S3를 정적 웹 사이트 호스팅용으로 설정한 경우에만 리다이렉트 된다. S3를 정적 웹 사이트 호스팅 설정하지 않고 CloudFront를 사용하는 경우 리다이렉트 되지 않는다. S3 object 존재 여부 확인을 위해서는 headObject 사용한다.

const res = await this.s3.headObject({
  Bucket: this.bucketName,
  Key: key
})
  .promise()
  .then(() => false)
  .catch(err => {
    if (err.code === 'NotFound') return true;
    throw err;
  });

HTML meta tag 사용(HTML 리다이렉션)

object를 html file로 생성하는 방법도 있다. index.html file을 object로 생성하고 html file에 meta tag를 사용하는 것이다.

<html>
  <meta http-equiv="refresh" content="0; url=https://yogae.tistory.com"></meta>
</html>

이 방식을 사용하면 html file을 render된 이후 redirect가 된다. Redirect가 되기 전 기다리는 시간을 설정할 수 있다. 구현 시 HTTP 리다이렉트를 사용했다. meta tag를 사용하는 것 보다 header를 사용하는 것이 조금 더 빠를 것이라고 생각 되었고 서버관리 측면에서 html을 사용하는 것 보다 header를 이용하는 것이 효율적이라고 생각되었다.

리다이렉트 og:image와 destination 주소의 og:image 중 봇이 사용하는 og:image

리다이렉션 구현할 때 test를 진행한 사항은 HTTP 리다이렉트를 사용하면서 리다이렉트 html에 og:image tag를 사용하는 것이었다. Destination 주소의 html에도 og:image tag를 넣어 놓았다. 봇이 들어와 확인하는 og:image tag는 Destination 주소의 html od:image tag 이었다.

추가 고려사항

리다이렉트 기능 외 추가 정보(예를 들어 url 호출 횟수, shortener 이름 등…)를 저장하기 위해서는 추가 infra가 필요하다. 구현할 때 추가 정보를 저장해야 했고 listing이나 shortener S3를 관리하기 위한 API구현이 필요했다. 실제 shortener 서비스가 동작에 있어 S3만 사용하기 때문에 API server에 장애 발생과는 상관없이 서비스를 동작 시킬 수 있다. 또한 S3를 사용하여 server scale 문제를 신경쓸 필요가 없었다.

 

CloudFront cache를 invalidation하는 경우이다. CloudFront를 사용하는 경우 client에서 한번 request를 보내면 CloudFront에 cache가 남게 된다. Redirect 정보를 변경하려면 S3 Website-Redirect-Location Metadata를 변경하고 Cache invalidation을 구현해야 한다. 하지만 Cache invalidation의 비용이 비싸다.

# CloudFront 무효화 요청 요금

매달 추가 비용 없이 초기 1,000개의 경로에 대한 무효화 요청을 할 수 있습니다. 
이후로 무효화 요청 경로당 0.005 USD가 청구됩니다.

invalidation을 요청이 들어올 때마다 실행하는 경우 비용이 많이 발생할 수 있다. 주기적으로 여러 cache를 한번에 invalidation을 하면 비용 절감 효과가 있지만 진행중인 project의 요구사항이 즉시 invalidation이 필요하여 주기적인 invalidation으로 구현하지 못 했다.

Reference

'develop' 카테고리의 다른 글

commit message 관리 - conventional commit  (0) 2020.07.20
AWS ElasticSearch Service 운영 및 장애발생 해결  (0) 2020.07.09
자연어 전처리  (0) 2020.05.24
stream 사용(Node.js와 web client 간 통신)  (0) 2020.05.16
MongoDB Index  (0) 2020.04.13
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함