워드프레스 미디어 관리 3: WP Offload Media Lite 플러그인 사용법

지난 포스팅에서 라이트세일 S3 버킷과 CloudFront CDN 설정을 완료했다.

이제 워드프레스에서 이 시스템을 활용할 차례다.

WP Offload Media Lite가 필요한 이유

워드프레스에서 이미지를 업로드하면 기본적으로 서버 내 /wp-content/uploads 폴더에 저장된다. 하지만 우리는 이제 미디어 파일을 S3 버킷에 저장하고 CloudFront를 통해 제공하고 싶다.

WP Offload Media Lite는 이 과정을 자동화해주는 플러그인이다. 이 플러그인을 사용하면:

  1. 자동 업로드: 워드프레스에 미디어를 추가하면 자동으로 S3에 업로드된다.
  2. URL 변환: 워드프레스 내 미디어 URL이 CloudFront URL로 자동 변환된다.
  3. 공간 절약: 원한다면 로컬 서버에서 미디어 파일을 삭제하고 S3만 사용할 수도 있다.
  4. 성능 향상: 서버 부하를 줄이고 사이트 로딩 속도를 향상시킨다.

이번 포스팅에서는 WP Offload Media Lite 플러그인 설치부터 S3와 CloudFront 연동까지 모든 과정을 알아보자.

WP Offload Media Lite 플러그인 사용법


WP Offload Media Lite 설치하기

워드프레스 플러그인
워드프레스 플러그인
1. 플러그인 설치
  1. 워드프레스 관리자 페이지에 로그인
  2. 좌측 메뉴에서 플러그인 > 새로 추가를 클릭
  3. 검색창에 WP Offload Media Lite를 입력하고 검색
  4. WP Offload Media Lite for Amazon S3, DigitalOcean Spaces, and Google Cloud Storage 플러그인을 찾아 지금 설치 클릭
  5. 설치가 완료되면 활성화 버튼을 클릭
2. 플러그인 설정 페이지 접근

플러그인 활성화 후, 좌측 메뉴에서 설정 > WP Offload Media를 클릭해 설정 페이지로 이동하자.

AWS 연결 설정하기

1. AWS 액세스 키 준비

S3와 CloudFront를 사용하기 위해서는 AWS 액세스 키가 필요하다.

보안을 위해 IAM을 통해 제한된 권한을 가진 별도의 사용자를 만드는 것이 좋지만 우리는 이미 S3의 접근권한을 우리의 인스턴스에 연결해놨다.

그래서 별도로 IAM 사용자는 필요없다.

2. WP Offload Media에 AWS 자격 증명 입력
WP Offload Media 설정 페이지
WP Offload Media 설정 페이지

WP Offload Media 설정 페이지에서 다음과 같이 입력하자.

  1. 스토리지 제공 업체 섹션에서 Amazon S3 선택
  2. 내 서버가 Amazon Web Service에 있고 IAM 역할을 사용하고 싶습니다 선택(2번째 항목)
  3. 저장 및 계속 버튼 클릭

S3 버킷 연결 및 설정

1. S3 버킷 연결
S3 Bucket
S3 Bucket

여기에서 이전에 만들었던 S3 버킷을 설정해주자.

  1. 신규 또는 기존 버킷 항목에서 기존 버킷을 사용한다고 선택해주자.
  2. 그리고 만들었던 버킷의 이름(예: wdwd-bucket) 을 입력하자.
  3. 저장 및 계속 버튼 클릭
2. 보안 설정
보안 설정
  • 모든 공개 액세스 차단: 비활성 상태로 두면 된다.
  • 개체 소유권: 비활성 상태로 두면 된다.
3. S3 설정
S3 스토리지 설정1
S3 스토리지 설정1
S3 스토리지 설정2
S3 스토리지 설정2
  • 미디어 오프로드: 이걸 하기 위해서 연결했다. (활성화)
  • 로컬 미디어 제거: 인스턴스에 있는 미디어를 S3에 올리고 나서 지우겠냐는 옵션이다. (선택)
  • 버킷 경로에 접두사 추가: 경로에 접두사는 추가해두는게 좋다. (보편적으로 wp-content/uploads/ 로 설정)
  • 버킷 경로에 연도 및 월 추가: 미디어 파일을 연도, 월 별로 정리하기 좋다. (활성화 추천)
  • 버킷 경로에 오브젝트 버전 추가: (활성화 추천)

CloudFront 배포 연결 및 설정

분배(Delivery) 탭으로 이동한 후 설정을 이어가면 된다.

1. CloudFront 연결
CloudFront 배포 연결
CloudFront 배포 연결

Edit을 클릭하여 배포를 연결하자.

CloudFront 배포 프로바이더 선택
CloudFront 배포 프로바이더 선택
  1. Amazon CloudFront 선택
  2. 저장 버튼 클릭
2. CloudFront 설정
  • 오프로드된 미디어 전송: 활성화
  • 사용자 지정 도메인 이름(CNAME) 사용: 커스텀 도메인을 입력하면 된다.(예: media.yourdomain.com)
  • HTTPS 강제 적용: 이전에 모든 미디어에 대한 https 를 적용했지만, 안정성을 위해 강제 적용 하자

WP Offload Media Lite 설정 확인

S3 주소
S3 주소
CloudFront 주소
CloudFront 주소

S3와 CloundFront 주소 미리보기에 이렇게 나온다면 모두 연결이 된 것이다.

또는, 테스트로 이미지를 올려서 주소를 확인할 수도 있다.

1. 테스트 이미지 업로드
  1. 워드프레스 관리자에서 미디어 > 새로 추가로 이동
  2. 테스트 이미지 업로드
  3. 업로드 완료 후 이미지 세부 정보 확인
2. 이미지 URL 확인

이미지 세부 정보 페이지에서 파일 URL을 확인하면 CloudFront 도메인(또는 S3 도메인)이 포함되어 있어야 한다.

이제부터 업로드하는 모든 미디어 파일은 S3에 자동으로 저장 될 것이다.

만약에 이미 기존에 올린 미디어가 있다면 자동으로 옮겨주지 않는다. 기존 미디어를 직접 다시 업로드하던가, CLI 명령어를 통해 마이그레이션 할 수 있다. 모두 어렵다면 WP Offload Media 유료 버전을 통해 마이그레이션 할 수도 있다.

워드프레스 미디어 관리 시리즈를 마치며


이 시리즈를 통해 S3 버킷 생성부터 CloudFront CDN 설정, 그리고 WP Offload Media Lite 플러그인 구성까지 워드프레스 미디어 관리 시스템 구축의 전 과정을 알아봤다.

이 시스템은 다음과 같은 이점을 제공한다.

  1. 서버 부하 감소: 미디어 파일 요청이 워드프레스 서버가 아닌 CloudFront로 직접 전달된다.
  2. 로딩 속도 향상: 전 세계 엣지 서버를 통한 빠른 미디어 전송이 가능하다.
  3. 서버 공간 절약: 유료 버전을 사용하면 로컬 서버에서 미디어 파일을 제거할 수 있다.
  4. 안정성 향상: AWS의 높은 가용성으로 미디어 파일의 안정적인 제공이 가능하다.

워드프레스 미디어 관리에 더 많은 기능이 필요하다면 WP Offload Media 유료 버전으로 업그레이드하는 것도 고려해보자. 유료 버전에서는 기존 미디어 마이그레이션, 로컬 파일 제거, 개인 미디어 접근 제어 등 추가 기능을 제공한다.

이 시스템을 구축하면 워드프레스 블로그의 속도와 성능이 크게 향상될 것이다.