WordPress.org에 AWS S3 + Cloudfront 적용하기

들어가며...

WordPress.org에서 홈페이지를 만들면 Latency가 커서 홈페이지의 로딩 속도가 많이 느려짐을 알게 되었습니다.

따라서 AWS의 CloudFront CDN을 사용해서 Latency를 줄이도록 설정해 봤습니다.

 

1. AWS CloudFront?

Amazon CloudFront는 html, css, js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠를 사용자에게 더 빨리 배포하도록 지원하는 웹 서비스입니다. CloudFront는 엣지 로케이션이라고 하는 데이터 센터의 전 세계 네트워크를 통해 콘텐츠를 제공합니다.

 

따라서, 사용자가 서버에 요청하면 지연 시간이 가장 낮은 엣지 로케이션으로 요청이 라우팅되므로 최적의 성능으로 콘텐츠가 제공될 수 있습니다.

 

2. S3 버킷 생성

1) AWS S3 콘솔로 이동

https://s3.console.aws.amazon.com/s3/get-started?region=us-east-1 

 

2) 버킷 만들기 클릭

버킷 메뉴 > 버킷 만들기

 

3) 버킷 설정 후 만들기

버킷 이름 입력

퍼블릭 액세스 차단 해제

 

4) 버킷에 Assets 업로드

파일 또는 폴더를 S3에 추가

업로드 버튼을 클릭해 완료

 

5) 버킷의 정적 호스팅 활성화

생성한 버킷 선택

속성 탭 클릭

정적 웹 사이트 호스팅 편집

활성화 클릭 > 인덱스 문서 설정

 

6) 버킷 정책 편집

권한 탭 클릭

버킷 정책 편집 클릭

 

기존의 정책을 아래와 같이 수정합니다.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PermGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*"
    }
  ]
}

 

이렇게 업로드하면, 정적 호스팅 URL로 s3 파일들에 접근이 가능해집니다.

폴더로 업로드했다면, 해당 경로를 추가로 입력해야 합니다.

URL은 아까 편집했던 "정적 웹 사이트 호스팅"란에서 확인할 수 있습니다.

 

 

이제 브라우저에서 접속을 테스트 해봅니다.

- 폴더X : http://your-bucket-name.s3-website.ap-northeast-2.amazonaws.com/image-file-name.png

- 폴더O : http://your-bucket-name.s3-website.ap-northeast-2.amazonaws.com/folder-name/image-file-name.png

 

3. cloudfront연동

1) cloudfront 콘솔로 이동

https://us-east-1.console.aws.amazon.com/cloudfront/v3/home?region=us-east-1#/distributions

 

2) 배포 생성

배포 메뉴 > 배포 생성 클릭

원본 도메인 선택 > 생성했던 버킷 선택

새 OAI 생성 후 입력 완료

 

이제 배포 도메인 이름을 사용해 cloudfront가 적용된 S3에 접근할 수 있습니다.

(배포 활성화에 약간의 시간이 걸리므로, 3분 정도 기다렸다가 시도해보시면 좋습니다.)

배포 도메인 이름을 확인해보자

예시) ialkdflkfj.cloudfront.net/images/your-image-name.png

 

이제 이 링크를 HTML 이미지 src에 사용하면 됩니다.

 

마치며...

개인적으로 기존 워드프레스에선 이미지 로딩이 너무 느려서, cloudfront를 사용하게 되었고,

전체 로딩 속도가 대략 12초 > 3초로 줄어드는 큰 속도 향상을 가져올 수 있었습니다.

 

절차가 다소 복잡한 면이 있지만, 그 만큼 속도 향상이 컸기 때문에 만족하고 있습니다.