[Next.js (SSG) /cloudFront] 배포 이후 reload시에 dynamic route를 못 할 때 해결

 

문제상황

NextJS로 빌드한 이후에 브라우저에서 reload를 하면 페이지 경로를 제대로 찾지 못 하고 초기화면으로 보내버리는 오류가 생겼다. 최종 서비스를 앞두고 이 문제로 꽤나 골머리를 썩고 있었다.

 

원인

브라우저에서 요청한 주소와 실제 리소스의 주소(URL)이 달라서 생긴 일인데, 이게 로컬에서는 잘 돌아가기 때문에 처음에 정말 무슨 일인지 알수가 없었다. static을 S3에 올리면서 생기는 문제로 nextjs는 디렉토리를 기반으로 라우팅을 하는데, 이걸 static이 생성된다. 

이대로 배포하면 기본 url 에서는 문제가 없지만 뒤에 디렉토리가 붙는 경우에 문제가 생긴다. 

 

 

해결

1. next.config에 trailingSlash 옵션 넣어주기 

// next.config.js
module.exports = {
	...
	trailingSlash: true,
};

next export 를 하면 /page/user/index.tsx 파일이 /user.html 로 빌드 된다.  이 때 trailingSlash를 true 로 설정해주면 /user/index.html로 빌드되게 해준다. 

 

 

 

 

 

2. CloudFront 설정

여기서 잠깐, CloudFront란? 

AWS에서 제공하는 CDN서비스로 캐싱을 통해 사용자에게 조금 더 빠른 전송 속도를 제공함을 목적으로 합니다. 
클라우드 프론트는 전 세계 곳곳에 edge server(location)을 두고 client에 가장 가까운 edge server를 
찾아 latency를 최소화시켜 빠른 데이터를 제공합니다.

 

이미 cloudFront가 설정이 되어있고, 배포도 완료된 상황이여서 cloudFront 함수라는 것을 설정해주기만 하면 되는 상황이였다. 

배포된 도메인 중에 상세로 들어가면 '오류페이지' 라는 부분이 있는데, 새로고침시에 경로를 못 찾아서 403 오류가 발생을 하면 redirection을 index.html로 해주라는 설정을 한 부분이다. 그리고 여기에 추가로 함수를 하나 만들어서 연결시켜주면 된다. 

 

 

 

함수를 생성해서 아래와 같이 넣어주고, 저장하고 해당 도메인과 연결해서 게시하면 된다. 

unction handler(event) {
    var request = event.request;
    var uri = request.uri;
    
    // Check whether the URI is missing a file name.
    if (uri.endsWith('/')) {
        request.uri += 'index.html';
    } 
    // Check whether the URI is missing a file extension.
    else if (!uri.includes('.')) {
        request.uri += '/index.html';
    }
    return request;
}

 

그러면 페이지 새로고침시에도 경로를 잘 찾아간다!!! 👏🏻👏🏻👏🏻

이걸 해결하고 싶어서 얼마나 고생했는지 모른다. 업무를 하면서 aws에 접근할 권한도 없었고 신경도 안 쓰고 있던 부분이였는데 이렇게 해결을 하게 되다니!!! 감격!!! 또 감격!!!!

 

 

 

 

 

 

 

 

 

 

 

참고자료 ( 나의 은인님들...)

👉🏻 https://www.juicylog.com/nextjs-ssg-cloudfront-s3-cloudfront-function

👉🏻 https://velog.io/@hoooons/Next.js-S3-CloudFront-git-action-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0