리디렉션 사용 - AWS Amplify호스팅

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

리디렉션 사용

리디렉션을 사용하면 웹 서버가 하나의 URL에서 다른 URL로 경로를 다시 라우팅할 수 있습니다. 리디렉션을 사용하는 일반적인 이유는 다음과 같습니다. URL의 모양을 사용자 지정하고 링크가 끊어지지 않도록 하며 주소를 변경하지 않고 앱이나 사이트의 호스팅 위치를 이동하고 요청된 URL을 웹 앱에 필요한 형식으로 변경합니다.

리디렉션 유형

특정 시나리오를 지원하는 여러 유형의 리디렉션이 있습니다.

영구적 리디렉션(301)

301 리디렉션은 웹 주소의 대상 주소를 지속적으로 변경하려는 것입니다. 원본 주소의 검색 엔진 순위 기록이 새 대상 주소에 적용됩니다. 리디렉션은 클라이언트 측에서 발생하므로 리디렉션 후에 브라우저 탐색 모음에 대상 주소가 표시됩니다.

301 리디렉션을 사용하는 일반적인 이유는 다음과 같습니다.

  • 페이지 주소가 바뀔 때 링크가 끊어지지 않도록 합니다.

  • 사용자가 주소에 흔히 하는 오타를 낼 때 링크가 끊어지지 않도록 합니다.

임시 리디렉션(302)

302 리디렉션은 웹 주소의 대상 주소를 임시로 변경하려는 것입니다. 원본 주소의 검색 엔진 순위 기록이 새 대상 주소에 적용되지 않습니다. 리디렉션은 클라이언트 측에서 발생하므로 리디렉션 후에 브라우저 탐색 모음에 대상 주소가 표시됩니다.

302 리디렉션을 사용하는 일반적인 이유는 다음과 같습니다.

  • 원본 주소로 복구하는 동안 우회합니다.

  • 사용자 인터페이스의 A/B 비교를 위한 테스트 페이지를 제공합니다.

다시 쓰기(200)

200 리디렉션(다시 쓰기)은 원본 주소에서 제공된 것처럼 대상 주소의 콘텐츠를 표시하기 위한 것입니다. 검색 엔진 순위 기록이 원본 주소에 계속 적용됩니다. 리디렉션은 서버 측에서 발생하므로 리디렉션 후에 브라우저 탐색 모음에 원래 주소가 표시됩니다. 200 리디렉션을 사용하는 일반적인 이유는 다음과 같습니다.

  • 사이트의 주소를 변경하지 않고 전체 사이트를 새 호스팅 위치로 리디렉션합니다.

  • 모든 트래픽을 단일 페이지 웹 앱(SPA)의 index.html 페이지로 리디렉션하여 클라이언트 측 라우터 기능으로 처리합니다.

찾을 수 없음(404)

404 리디렉션은 요청이 존재하지 않는 주소를 가리킬 때 발생합니다. 요청된 페이지 대신 404의 대상 주소 페이지가 표시됩니다. 404 리디렉션이 발생하는 일반적인 이유는 다음과 같습니다.

  • 사용자가 잘못된 URL을 입력할 때 메시지 링크가 끊어지지 않도록 방지합니다.

  • 웹 앱의 존재하지 않는 페이지에 대한 요청이 index.html 페이지를 향하도록 하여 클라이언트 측 라우터 기능으로 처리합니다.

리디렉션의 일부

리디렉션의 구성 요소는 다음과 같습니다.

  • 원본 주소 - 사용자가 요청한 주소.

  • 대상 주소 - 사용자가 보는 콘텐츠를 실제로 제공하는 주소.

  • 리디렉션 유형 - 유형에는 영구 리디렉션(301), 임시 리디렉션(302), 다시 쓰기(200) 또는 찾을 수 없음(404)이 포함됩니다.

  • 두 자로 된 국가 코드 (선택 사항) - 리전별로 앱의 사용자 경험을 분류하는 데 포함할 수 있는 값입니다.

리디렉션을 생성하고 편집하려면 왼쪽 탐색 창에서 다시 쓰기 및 리디렉션 설정을 선택합니다.

JSON 편집기에서 리디렉션을 일괄 수정하려면 텍스트 편집기 열기를 선택합니다.

리디렉션 순서

리디렉션은 목록의 맨 위에서 아래로 실행됩니다. 이러한 순서가 의도한 효과를 발휘하는지 확인합니다. 예를 들어 다음과 같은 리디렉션 순서를 통해 /docs/ 아래의 특정 경로에 대한 모든 요청이 /documents/ 아래의 동일한 경로로 리디렉션합니다(단, /docs/specific-filename.html/documents/different-filename.html로 리디렉션합니다.

/docs/specific-filename.html /documents/different-filename.html 301 /docs/<*> /documents/<*>

다음 순서로 리디렉션하면 specific-filename.htmldifferent-filename.html로 리디렉션이 무시됩니다.

/docs/<*> /documents/<*> /docs/specific-filename.html /documents/different-filename.html 301

쿼리 파라미터

URL 일치를 보다 세부적으로 제어할 수 있도록 쿼리 파라미터를 사용할 수 있습니다. Amplify 다음 예외를 제외하고 모든 쿼리 매개 변수를 301 및 302 리디렉션의 대상 경로로 전달합니다.

  • 원래 주소에 특정 값으로 설정된 쿼리 문자열이 포함되어 있으면 Amplify 쿼리 매개 변수를 전달하지 않습니다. 이 경우 리디렉션은 지정된 쿼리 값을 가진 대상 URL에 대한 요청에만 적용됩니다.

  • 일치 규칙의 대상 주소에 쿼리 매개 변수가 있으면 쿼리 매개 변수가 전달되지 않습니다. 예를 들어 리디렉션의 대상 주소가 다음과 같은 경우https://example-target.com?q=someParam쿼리 파라미터가 전달되지 않습니다.

간단한 리디렉션 및 재작성

이 섹션에는 일반적인 리디렉션 시나리오에 대한 예제 코드가 포함되어 있습니다.

다음 예제 코드를 사용하여 특정 페이지를 새 주소로 영구적으로 리디렉션할 수 있습니다.

원본 주소 대상 주소 리디렉션 유형 국가 코드

/original.html

/destination.html

permanent redirect (301)

JSON: [{"source": "/original.html", "status": "301", "target": "/destination.html", "condition": null}]

다음 예제 코드를 사용하여 폴더 아래의 경로를 다른 폴더 아래의 동일한 경로로 리디렉션할 수 있습니다.

원본 주소 대상 주소 리디렉션 유형 국가 코드

docs/<*>

/documents/<*>

permanent redirect (301)

JSON [{"source": "/docs/<*>", "status": "301", "target": "/documents/<*>", "condition": null}]

다음 예제 코드를 사용하여 다시 쓰기로 모든 트래픽을 index.html로 리디렉션할 수 있습니다. 이 시나리오에서는 다시 쓰기를 통해 원본 주소에 도착했음을 사용자에게 알립니다.

원본 주소 대상 주소 리디렉션 유형 국가 코드

/<*>

/index.html

rewrite (200)

JSON [{"source": "/<*>", "status": "200", "target": "/index.html", "condition": null}]

다음 예제 코드를 사용하여 사용자에게 표시되는 하위 도메인을 변경하는 데 다시 쓰기를 사용할 수 있습니다.

원본 주소 대상 주소 리디렉션 유형 국가 코드

https://mydomain.com

https://www.mydomain.com

rewrite (200)

JSON

[{"source": "https://mydomain.com", "status": "200", "target": "https://www.mydomain.com", "condition": null}]

다음 예제 코드를 사용하여 찾을 수 없는 폴더 아래의 경로를 사용자 지정 404 페이지로 리디렉션할 수 있습니다.

원본 주소 대상 주소 리디렉션 유형 국가 코드

/<*>

/404.html

not found (404)

JSON [{"source": "/<*>", "status": "404", "target": "/404.html", "condition": null}]

단일 페이지 웹 앱 (SPA) 에 대한 리디렉션

대부분의 SPA 프레임워크는 HTML5 history.pushState()를 지원하여 서버 요청을 트리거하지 않고 브라우저 위치를 변경합니다. 이는 루트(또는 /index.html)에서 여정을 시작하지만 다른 페이지로 직접 이동하는 사용자에게는 적합하지 않습니다. 다음 예제에서는 정규식을 사용하여 정규식에 지정된 특정 파일 확장명을 제외한 모든 파일에 대해 200개의 다시 쓰기를 설정합니다. index.html

원본 주소 대상 주소 리디렉션 유형 국가 코드

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>

/index.html

200

JSON [{"소스”: “</^ [^.] +$|\. (?! (CSS|gif|ico|jpg|JS|PNG|png|txt|svg|woff2|ttf|map|JSO|webp) $) />”, “status”: "index.html “, “condition”: "“, “condition”: null}]

역방향 프록시 다시 쓰기

다음 예제에서는 다른 위치의 프록시 콘텐츠에 대해 다시 쓰기를 사용하여 사용자에게 도메인이 변경되지 않은 것처럼 표시합니다.

원본 주소 대상 주소 리디렉션 유형 국가 코드

/images/<*>

https://images.otherdomain.com/<*>

rewrite (200)

JSON

[{"source": "/images/<*>", "status": "200", "target": "https://images.otherdomain.com/<*>", "condition": null}]

후행 슬래시 및 클린 URL

다음과 같은 깨끗한 URL 구조를 만들려면그 대신about.htmlHugo와 같은 정적 사이트 생성기는 index.html (/about/index.html). Amplify 필요한 경우 후행 슬래시를 추가하여 자동으로 클린 URL을 생성합니다. 아래 표는 다양한 시나리오를 하이라이트합니다.

브라우저의 사용자 입력 검색 주소창의 URL 제공된 문서

/about

/about

/about.html

/about (when about.html returns 404)

/about/

/about/index.html

/about/

/about/

/about/index.html

자리 표시자

다음 예제 코드를 사용하여 폴더 구조의 경로를 다른 폴더의 일치하는 구조로 리디렉션할 수 있습니다.

원본 주소 대상 주소 리디렉션 유형 국가 코드

/docs/<year>/<month>/<date>/<itemid>

/documents/<year>/<month>/<date>/<itemid>

permanent redirect (301)

JSON [{"source": "/docs/<year>/<month>/<date>/<itemid>", "status": "301", "target": "/documents/<year>/<month>/<date>/<itemid>", "condition": null}]

쿼리 문자열 및 경로 매개 변수

다음 예제 코드를 사용하여 원본 주소의 쿼리 문자열 요소 값과 이름이 일치하는 폴더로 경로를 리디렉션할 수 있습니다.

원본 주소 대상 주소 리디렉션 유형 국가 코드

/docs?id=<my-blog-id-value

/documents/<my-blog-post-id-value>

permanent redirect (301)

JSON [{"소스”: “/문서? id=<my-blog-id-value>”, “status”: “301", “target”: “/documents/<my-blog-id-value>”, “조건”: null}]

참고

증폭은 모든 쿼리 문자열 매개 변수를 301 및 302 리디렉션에 대한 대상 경로로 전달합니다. 그러나 이 예제에서 설명한 것처럼 원래 주소에 특정 값으로 설정된 쿼리 문자열이 포함되어 있으면 Amplify 쿼리 매개 변수를 전달하지 않습니다. 이 경우 리디렉션은 지정된 쿼리 값을 가진 대상 주소에 대한 요청에만 적용됩니다.id.

다음 예제 코드를 사용하여 폴더 구조의 특정 수준에서 찾을 수 없는 모든 경로를 지정된 폴더의 index.html 로 리디렉션할 수 있습니다.

원본 주소 대상 주소 리디렉션 유형 국가 코드

/documents/<folder>/<child-folder>/<grand-child-folder>

/documents/index.html

404

JSON [{"source": "/documents/<x>/<y>/<z>", "status": "404", "target": "/documents/index.html", "condition": null}]

리전 기반 리디렉션

다음 예제 코드를 사용하여 리전을 기반으로 요청을 리디렉션할 수 있습니다.

원본 주소 대상 주소 리디렉션 유형 국가 코드

/documents

/documents/us/

302

<US>

JSON [{"source”: “/documents”, “status”: “302", “target”: “target”: “302", “target”: “302", “target”: “302" “<US>“}]