사이트 마이그레이션에 유용한 S3+CloudFront의 리디렉션 요약

안녕하세요.CYBIRD 엔지니어 Advent Calendar 7일째gucchon다.졸업 4년 차, 웹 엔지니어입니다.
6일째megadreams14선생님iOS/Android의 WebView를 이용하여 SPA(Single Page Application)에서 게임 개발입니다.megadreams14의 프로젝트와 다르지만 저도 1년 동안 혼합동력 응용을 개발하여 megadreams14씨의 도움을 받았습니다.그러므로, megadreams 14씨는 제가 쓰고 싶은 내용을 완벽하게 썼기 때문에 그것과는 전혀 상관이 없습니다. 최근에 좀 빠져있는 일이라도 적어 놓으세요.

오늘의 내용

여러분을 가장 좋아합니다. AWS3의 정적 사이트 hosting입니다.저도 CYBIRD가 운용하는 몇 개의 사이트를 이용했습니다. 며칠 전에 어떤 시리즈의 내용의 각 공식 사이트를 하나의 사이트로 정리하고 싶었습니다...그래서 옮기는 작업을 진행했다.당초 방향을 바꾸면 금방 끝날 줄 알았는데 방향을 바꾸는 것이 의외로 까다롭기 때문에 이번에는 낡은 사이트를 새 사이트로 옮길 때의 방향을 바꾸는 프로그램에 주의점을 더해 정리하고자 한다.

마이그레이션 필요 조건

https://old.jp/ 아래 페이지를 아래로 이동http://new.jp/xxx/

https://old.jp S3+ CloudFront(Redirect HTTP to HTTPS 설정)에서 실행

http://new.jp S3(HTTP만 해당)에서 실행

https://old.jp/ 아래 페이지로 리디렉션하고 싶지만 일부 페이지를 지정한 페이지로 리디렉션하고 싶습니다

.

S3의 리디렉션 정보

먼저 S3의 설정 변경부터 시작합니다.
S3에서 다른 호스트 이름으로 리디렉션하는 방법에는 두 가지가 있습니다.
정적 웹 사이트 보관에서

"사이트 로딩 활성화"를 통해 리디렉션 규칙 설정

"다른 호스트 이름으로 모든 요청 리디렉션"을 통해 모든 요청을 다른 도메인 이름으로 리디렉션

이런 방법.
만약 사이트의 문서 구성에 변화가 없다면, 2의 방법은 매우 빠르다.

이만 마치겠습니다.http://new.jp/xxx/index.html방향old.jp/index.html,new.jp/xxx/index.html방향old.jp/aaa/bbb/ccc.html으로new.jp/xxx/aaa/bbb/ccc.html.
그러나 이번 경우 기본적으로new.jp/xxx/index.html 방향을 바꾸고, 일부 페이지를 지정된 페이지로 바꾸려고 하기 때문에 1가지 방법으로 방향을 바꾸는 규칙을 설정한다.

규칙 설정 리디렉션

먼저 기존 사이트의 특정 페이지에 대한 액세스를 새 사이트의 특정 페이지로 리디렉션합니다.old.jp/aaa.html 방향을 new.jp/xxx/bbb.html로 바꿨을 때 이런 느낌이에요.

<RoutingRules>
    <RoutingRule>
        <Condition>
            <KeyPrefixEquals>aaa.html</KeyPrefixEquals>
        </Condition>
        <Redirect>
            <HostName>new.jp</HostName>
            <ReplaceKeyWith>xxx/bbb.html</ReplaceKeyWith>
        </Redirect>
    </RoutingRule>
</RoutingRules>

예제에서 ") 페이지를 지정했지만 디렉토리 이름을 변환하려면 <ReplaceKeyPrefixWith>를 사용합니다.
다음은 모든 다른 요청을 새 사이트의 특정한 페이지로 바꿀 때의 설정입니다.
여기에 걸려 있지만, 정방향 조건KeyPrefixEquals을 지정하면 정규 표현식과 어댑터를 사용할 수 없을 것 같습니다.따라서 도메인 이름 바로 아래의 디렉터리와 페이지를 열거해야 합니다.
그래서 제 경우<HttpErrorCodeReturnedEquals> 요소의 상태 코드를 사용하여 방향을 바꾸는 조건을 지정했습니다.통 안의 물건을 비워 어떤 요청을 받더라도 404 오류가 발생하는 리디렉션 조건에 맞는 작전이다.
직장을 옮길 때는 용기와 각오가 필요하다. 운용 중인 사이트를 비워야 하지만 어차피 옮길 거니까 어쨌든 삭제해야 한다.
그래서 상술한 리디렉션 규칙을 결합시켜 결국 이런 느낌으로 바뀌었다.

<RoutingRules>
    <RoutingRule>
        <Condition>
            <KeyPrefixEquals>aaa.html</KeyPrefixEquals>
        </Condition>
        <Redirect>
            <HostName>new.jp</HostName>
            <ReplaceKeyWith>xxx/bbb.html</ReplaceKeyWith>
        </Redirect>
    </RoutingRule>
    <RoutingRule>
        <Condition>
            <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
        </Condition>
        <Redirect>
            <HostName>new.jp</HostName>
            <ReplaceKeyWith>xxx/index.html</ReplaceKeyWith>
        </Redirect>
    </RoutingRule>
</RoutingRules>

리디렉션 규칙은 위에서 순서대로 판정되는 것 같습니다.따라서 규칙이 반대로 바뀌면old.jp/aaa.html도 new.jp/xxx/index.html로 바뀌기 때문에 주의해야 한다.
루트 규칙의 문법 등에 관한 상세한 내용은 공식 문서를 참고하십시오.
참조: 라우팅 규칙을 지정하는 구문

HTTPS 리디렉션

기존 사이트 방문이 HTTP만 있었다면 여기까지의 설정에는 문제가 없었겠죠.하지만 클라우드 프론트를 사용하다가 HTTPS에 액세스할 경우 클라우드 프론트 측면의 설정을 확인해야 한다.
CloudFront의 Origin Domain Name 항목을 확인합니다.S3의 끝점을 지정하지 않으면 리디렉션 설정이 적용되지 않습니다.

Origin Domain 지정Name

잘못된 리디렉션 설정: old.jp.s3.amazonaws.com

리디렉션 설정이 유효합니다. old.jp.s3-website-ap-northeast-1.amazonaws.com

이 프로젝트를 설정할 때 S3통이 있으면 선택후보로 내놓을 수 있지만 그것을 선택하면 방향을 바꿀 수 없는 함정이 있다.

리디렉션 성공 여부 확인

마지막으로 의도대로 방향을 바꿨는지 확인하는 방법입니다.
우선 현금 캐시 대책을 세우지 않으면 현금이 늘 방해를 받는다.
현금 대책으로 다음과 같은 물건을 찾아갔습니다.

캐시 대책

이전이 완료되기 전에 CloudFront의 Cache Behavior는 TTL을 0

으로 설정합니다.

브라우저를 사용하는 비밀 모드 확인

검색열 추가

Chrome의 확장 기능을 통해 리디렉션이 올바른지 확인합니다.
Redirect Path라는 확장 기능이 있어서 사용해 보았지만 알기 쉽고 편리했습니다.
이것을 추가하여 비밀 창구에서도 사용할 수 있도록chrome://extensions/'비밀 창구에서 실행할 수 있도록'에서 선택하세요.
리디렉션 경로를 확인할 수 있기 때문에 의도대로 301 리디렉션을 정확하게 수행하면 성공한다.

최후

S3+CloudFront의 리디렉션을 요약했습니다.얼마나 푹 빠졌는지, 현금 때문인지 평범한 실패 때문인지...이렇게 시간을 낭비하면 고통스럽지만 서버를 준비하지 않아도 세부적으로 설정할 수 있어서 정말 기쁩니다.사이트 마이그레이션의 경우 기존 사이트의 SEO 자산을 상속하고자 하기 때문에 301은 현지에 맞게 설정하려는 방향으로 방향을 바꿨다.
그럼 내일CYBIRD 엔지니어 Advent Calendar 8일째 되는 날 담당은 저의 대선배님daisuke-senmyou입니다.3년 차 첫 등장!기대가 크네요.꼭 봐야 돼.