서론
static하게 생성된 html파일들을 Amplify로 배포할 시에는 url에 맞는 html파일을 보여준다.
하지만 동적으로 설정한 경로 같은 경우 이벤트 리스너로 Link이동 시에는 정상 작동하지만, 새로고침하거나 직접 주소창에 url을 치고 들어오면 404 에러를 반환한다.
그 이유는static하게 생성된 동적 경로로 만들어진 html 파일을 보면 [id].html 이런 형식으로 만들어져 있기 때문에 실제 주소창에 적혀있는 url에 맞는 html파일을 찾지 못하기 때문이다.
Next.js의 SSG를 담당하는 함수를 호출해서 생성하면 각각에 id에 맞게 html파일을 전부 만들어준다면 동적 경로를 따로 설정할 필요가 없다.
허나 실질적으로 id가 수백, 수천 개에 달하는 게시물 같은 경우 모든 html 파일들을 만들어주는 것은 비효율적이다.
그렇다면 동적 경로로 만들어진 html파일의 경우 어떤식으로 설정을 하면 될까?
사용법
1. Amplify 콘솔로 진입 후 설정할 프로젝트로 이동
이후 다시 쓰기 및 리디렉션을 클릭한다.
▲ Amplify 프로젝트 좌측 메뉴
2. 다시 쓰기 및 리디렉션 페이지로 이동
여기서는 라우팅에 관련해서 설정한 목록들을 확인할 수 있다.
이후 편집을 누른다.
▲ 다시 쓰기 및 리디렉션 페이지
3. 다시 쓰기 및 리디렉션 설정
여기서 오늘 할 동적 경로를 설정할 것이다.
이외에도 200, 301, 302, 404등 다양한 status에 대해 설정이 가능하다.
▲ 다시 쓰기 및 리디렉션 설정 페이지
설정법
static하게 생성된 동적 경로로 이루어진 html파일 이름을 대상 주소에 그리고 파라미터 값의 이름을 그대로 가져다가 <>로 바꿔준뒤 .html을 제거해서 소스 주소에 넣는다.
형식은 200으로 설정해준다.
소스 주소가 실제로 주소창에 표기되는 형식이다.
e.g. _/theme/<id>_의 _소스 주소_의 경우 주소창에 표기될 때는 _/theme/primary_, _/theme/secondary_이런 식으로 매칭이 된다.
위와 같은 형식으로 다시 쓰기 및 리디렉션 페이지에서 설정해주면 동적경로로 이루어진 페이지로 매칭된다.
이후 저장버튼을 누르고 반영 메세지를 확인한 뒤 새로고침이나 직접 주소창에 입력해서 들어가도 정상적으로 url에 맞는 html을 보여주는 것을 확인할 수 있다.
참조
피드백은 언제나 환영입니다.