AWS CloudFront로 Wordpress CDN 설정해서 이용하기

2018-03-21 코멘트 :
offload s3 플러그인이 wpml 플러그인과 호환이 안되는 것 같다.
만약 wpml을 사용하고있는 워드프레스 사이트라면 offload s3말고 다른 플러그인을 사용해볼것.
(아이러니하게도 wpml은 다국어 플러그인이고, 그렇다면 가장 먼저 호환되어야 하는 플러그인은 CDN관련 플러그인이어야 하는것 같은데..같은데...같은데....)

해당 이슈에 관한 포럼 :
https://wpml.org/forums/topic/wpml-bloating-offload-to-amazon/
https://wpml.org/forums/topic/i-tried-to-translate-the-product-using-woocommerce-multilingual-but-the-image-i/#post-1551666

-------------------------------------------------------
먼저 이 자습서에서 안내해주는것처럼 CloudFront와 S3을 생성한다.
필자의 경우 사용하고있던 ELB(Elastic LoadBalancer)로 CoundFront를 만들었다.

자습서에 CloudFront생성 시 새로운 SSL 만드는방법
(CloudFront전용 SSL Certification은 버지니아 북부의 리젼에서 발급받아야 한다.)
및
CloudFront를 만들고 난 후 CloudFront에 S3을 어떻게 연결하는지도 설명이 잘 나와있다.

자습서대로 다 했으면 실제로 워드프레스에서 어떻게 CloudFront를 사용해서 S3에 컨텐츠를 업로드하고 S3의 컨텐츠를 가져올 수 있는지 알아보자.
먼저 두개의 플러그인을 자신의 워드프레스에 설치한다. 
wp offroad S3 lite
Amazon Web Services

그 뒤 이 자습서를 참고하여 따라해 볼 것이다.

먼저 AWS S3에서 CloudFront와 연결되어있는 S3에 자신의 워드프레스의 wp-content, wp-includes 디렉토리 자체를 업로드해준다.
자신의 워드프레스 디렉토리들을 어떻게 다운로드 받을지는 구글에 AWS FTP 사용법을 구글링해본다.
이렇게 하는 이유는 S3에 자신의 정적 콘텐츠(사진파일들 혹은 css, js)들을 S3에 넣고 그것들을 위에서 다운로드받은 2개의 플러그인들을 이용해서 워드프레스에서 불러오기 위함이다.
한마디로 이제부터는 워드프레스 디렉토리에 존재해 있는 파일(사진들 혹은 css, js)들을 사용하여 웹에 뿌려주는것이 아니라 S3에서 파일들을 가져와서 뿌려줄것이다.
다 업로드 되었으면 업로드한 wp-content와 wp-includes를 선택하고 마우스 오른쪽을 클릭하여 퍼블릭으로 변경해준다.

자 이제 CloudFront에서 가져올 파일들도 세팅했으니 이제 플러그인을 통해서 파일들을 가져오는 일만 남았다.
위의 2개 플러그인들은 AWS의 IAM이라는 서비스를 통해 만든 계정의 key들을 필요로 한다.
IAM(AWS Identity and Access Management)이란 쉽게말하면 루트계정 대신에 사용할 일정 권한만 가지고 있는 계정을 만들어주는것이다.
이 계정을 만드는 방법은 간단하다.

현재 루트계정으로 로그인되어있다 가정하고,
먼저 AWS의 IAM으로 들어가 왼쪽탭의 사용자를 클릭한다.
그리고 사용자추가를 클릭한다.
그 다음은 사용자 이름을 기입한다.

아래엔 액세스 유형을 지정할 수 있는 체크박스가 있는데, 설명은 다음과 같다.
프로그래밍 방식 액세스 : 액세스 키 및 비밀 액세스 키를 사용하여 로그인
AWS Management Console 액세스 : 기본 로그인과 같이 AWS 사이트에 접속하여 로그인하는 방식. 다만 루트계정의 로그인과 다르게 루트계정의 ID와 IAM의 사용자이름, 비밀번호를 입력하여 로그인 하는 방식이다.
일단 위에서 설치했던 두개의 플러그인에서 IAM 계정의 액세스 키와 비밀 액세스 키를 요구하므로 무조건 프로그래밍 방식 액세스를 체크한다.
만일 자신이 이 IAM 계정에 권한을 일부 줘서 그것으로 안전하게 AWS를 사용하고싶다면 AWS Management Console 액세스도 체크해주면 된다.
(AWS Managemnet Console 계정을 선택할 경우 콘솔 비밀번호를 지정해줘야한다. 자동으로도 생성 가능하지만 필자는 사용자 지정 비밀번호를 선택했다.)

그 다음엔 IAM 계정의 권한을 설정해줘야한다.
그룹을 만들어서 그룹에 권한을 적용하고 그 그룹에 사용자를 추가함으로써 사용자에게 권한을 부여할 수 있는 방법이 있고,
사용자 자체에게 권한을 주는 방법이 있다.
아니면 AWS에서 제공하는 기존 권한 정책을 적용할 수도 있다.

필자는 간단하게
AmazonEC2FullAccess, AmazonS3FullAccess, CloudFrontFullAccess, AmazonRoute53FullAccess
이 네가지 권한을 사용자에게 부여했다.

그리고 다음으로 넘어가 사용자 만들기를 클릭하면 계정이 생성되면서 액세스 키 및 비밀 액세스 키가 발급된다.
위의 .csv 다운로드 버튼을 클릭하면 키의 정보를 엑셀 파일안에 넣어서 발급해준다. 이것은 나중을 대비하여 꼭 받아둔다.
왜냐하면 나중엔 이 키들을 다시 볼 수 없기 때문이다. 만일 잊었을 시에는 새 자격 증명을 생성해서 새로운 키들을 발급받아야 한다.

자 이제 액세스 키와 비밀 액세스 키도 발급받았겠다, 이 키들을 워드프레스로 돌아가 아까 설치한 플러그인으로 들어가서 입력해준다.
AWS - Access Keys로 들어가서 입력폼에 맞게 키값을 입력해준다.
그럼 플러그인이 활성화 되는데, AWS - S3 and CloudFront로 들어가 CloudFront or Custom Domain에 자신의 CloudFront Alternate Domain Names (CNAMEs)을 입력해준다.
그럼 위에 Preview라고 보이면서 아래에는 url이 생기는데 CloudFront에 잘 접속되는지 테스트를 하는것이니 한번 접속해본다.

그리고 Path 부분은 S3의 어떤 경로의 파일들을 가져올것인지 적어준다. 기본적으로는 워드프레스와 맞게 wp-content/uploads/ 경로일 것이다.
이 부분 때문에 아까 위에서 S3에 자신의 워드프레스의 wp-content와 wp-includes를 업로드 해줘야 한다했던것이 이것 때문이다.
그럼 이 플러그인은 S3에 이미 업로드되어있는 wp-content안의 uploads 폴더를찾아 그안의 사진이나 css,js들을 가져와 워드프레스 로컬에 있는 파일들 대신에 사용하는것이다.

하지만 예외도 있다.
필자의 경우에는 hide my wp라는 플러그인을 사용중이다. 이 플러그인은 기존 워드프레스의 디렉토리 경로와 그 이름들을 변경하는 기능을 가지고 있다.
예를들면 기존에는 wp-content/uploads/ 라는 기본적인 디렉토리를 사용했다면
hide my wp 플러그인을 활성화한 뒤에는 wpc/files/ 라는 디렉토리로 변경하여 사용할 수 있다는 말이다.

이처럼 자신의 디렉토리 경로가 정상적이지 않을 수도 있다.
이럴 때에는 Path를 자신이 사용하고있는 디렉터리 경로로 맞춰주면된다.
마찬가지로 S3에서 wp-content, wp-includes를 업로드를 해줄때에도
이름을 디렉토리 경로에 맞게 변경해주고 업로드해주면 된다.

이제 설정은 모두 끝났다.
워드프레스 관리자페이지의 미디어에 들어가서 사진파일을 업로드해보자.
업로드 후 파일의 url을 보면 CloudFront의 url경로로 세팅된것을 볼 수 있다.
이제 그 파일을 워드프레스에서 사용하면 된다! 끝!


(추가적으로, 워드프레스에서 S3에 업로드한 파일을 워드프레스내에서 지울때에는 워드프레스에서만 지워지고 S3의 파일은 그대로 남아있다. 이 부분은 직접 해줘야하는걸로...)