심플 리디렉션 및 다시 쓰기 단일 페이지 웹 앱(SPA)에 대한 리디렉션 역방향 프록시 다시 쓰기 후행 슬래시 및 클린 URL 자리 표시자 쿼리 문자열 및 경로 파라미터 리전 기반 리디렉션 리디렉션 및 다시 쓰기에서 와일드카드 표현식 사용

리디렉션 및 다시 쓰기 예제 참조

이 섹션에는 다양한 일반적인 리디렉션 시나리오에 대한 예제 코드가 포함되어 있습니다. 다음 예제를 사용하여 자체 리디렉션 및 다시 쓰기를 생성하기 위한 구문을 이해할 수 있습니다.

참고

일치하는 원래 주소 도메인에서는 대소문자를 구분하지 않습니다.

주제

심플 리디렉션 및 다시 쓰기
단일 페이지 웹 앱(SPA)에 대한 리디렉션
역방향 프록시 다시 쓰기
후행 슬래시 및 클린 URL
자리 표시자
쿼리 문자열 및 경로 파라미터
리전 기반 리디렉션
리디렉션 및 다시 쓰기에서 와일드카드 표현식 사용

심플 리디렉션 및 다시 쓰기

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

원본 주소	대상 주소	리디렉션 유형	국가 코드
`/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}]}

다음 예제 코드를 사용하여 경로 접두사가 있는 다른 도메인으로 리디렉션할 수 있습니다.

원본 주소	대상 주소	리디렉션 유형	국가 코드
`https://mydomain.com`	`https://www.mydomain.com/documents`	`temporary redirect (302)`

^{JSON [{"source": "https://mydomain.com", "status": "302", "target":
"https://www.mydomain.com/documents/", "condition": null}]}

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

원본 주소	대상 주소	리디렉션 유형	국가 코드
`/<*>`	`/404.html`	`not found (404)`

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

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

대부분의 SPA 프레임워크는 HTML5 history.pushState()를 지원하여 서버 요청을 시작하지 않고 브라우저 위치를 변경합니다. 이는 루트(또는 /index.html)에서 여정을 시작하지만 다른 페이지로 직접 이동하는 사용자에게는 적합하지 않습니다.

다음 예제에서는 정규식을 사용하여 정규식에 지정된 특정 파일 확장명을 제외한 모든 파일에 대해 index.html에 대한 200 다시 쓰기를 설정합니다.

원본 주소	대상 주소	리디렉션 유형	국가 코드
`</^[^.]+$\|\.(?!(css\|gif\|ico\|jpg\|js\|png\|txt\|svg\|woff\|woff2\|ttf\|map\|json\|webp)$)([^.]+$)/>`	`/index.html`	`200`

^{JSON [{"source":
"</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>",
"status": "200", "target": "/index.html", "condition":
null}]}

역방향 프록시 다시 쓰기

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

원본 주소	대상 주소	리디렉션 유형	국가 코드
`/images/<*>`	`https://images.otherdomain.com/<*>`	`rewrite (200)`

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

후행 슬래시 및 클린 URL

Hugo와 같은 정적 사이트 생성기는 about.html 대신 about과 같은 깔끔한 URL 구조를 만들기 위해 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 [{"source": "/docs?id=<my-blog-id-value>", "status": "301",
"target": "/documents/<my-blog-id-value>", "condition":
null}]}

참고

Amplify는 301 및 302 리디렉션에 대한 대상 경로로 모든 쿼리 문자열 파라미터를 전달합니다. 그러나 이 예제에서 볼 수 있듯이 특정 값으로 설정된 쿼리 문자열이 원본 주소에 포함된 경우, Amplify는 쿼리 파라미터를 전달하지 않습니다. 이 경우, 리디렉션은 지정된 쿼리 값 id을(를) 가진 대상 주소로 보내는 요청에만 적용됩니다.

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

원본 주소	대상 주소	리디렉션 유형	국가 코드
`/documents/<folder>/<child-folder>/<grand-child-folder>`	`/documents/index.html`	`not found (404)`

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

리전 기반 리디렉션

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

원본 주소	대상 주소	리디렉션 유형	국가 코드
`/documents`	`/documents/us/`	`temporary redirect (302)`	`<US>`

^{JSON [{"source": "/documents", "status": "302", "target":
"/documents/us/", "condition": "<US>"}]}

리디렉션 및 다시 쓰기에서 와일드카드 표현식 사용

리디렉션 또는 다시 쓰기를 위해 원본 주소에 와일드카드 표현식 <*>를 사용할 수 있습니다. 이 표현식은 원본 주소 끝에 배치해야 하며 고유해야 합니다. Amplify는 둘 이상의 와일드카드 표현식을 포함하는 원본 주소를 무시하거나 다른 배치에 사용합니다.

다음은 와일드카드 표현식이 포함된 유효한 리디렉션의 예입니다.

원본 주소	대상 주소	리디렉션 유형	국가 코드
`/docs/<*>`	`/documents/<*>`	`permanent redirect (301)`

다음 두 예제는 와일드카드 표현식을 사용한 잘못된 리디렉션을 보여줍니다.

원본 주소	대상 주소	리디렉션 유형	국가 코드
`/docs/<*>/content`	`/documents/<*>/content`	`permanent redirect (301)`
`/docs/<>/content/<>`	`/documents/<>/content/<>`	`permanent redirect (301)`

javascript가 브라우저에서 비활성화되거나 사용이 불가합니다.

AWS 설명서를 사용하려면 Javascript가 활성화되어야 합니다. 지침을 보려면 브라우저의 도움말 페이지를 참조하십시오.

문서 규칙

리디렉션 생성 및 편집

앱에 대한 액세스 제한