S3 + CloudFront 접근 안됨 해결

S3 + CloudFront로 배포한 프론트엔드의 화면(페이지)가 보이지 않고 이런 오류가 해결되지 않았다.

도메인 문제도 해결했고, 파일 자체의 문제도 없어서 초반에 조금 삽질을 했다.

나중에 알게된 진짜 원인은 경로에 맞게 html 파일을 주지 않은 것이었다.

지금 클라이언트는 Nextjs를 깃허브 액션으로 빌드하여 CICD로 S3에 업로드하는 식으로 배포하는 구조이다.

그래서 Nextjs 코드가 전부 html, js, css로 바뀌는데, 이때 도메인에 접근한 사용자의 경로에 맞게 html을 줘야한다. 근데 지금 그걸 못하고 있는거였다.

모든 경로에 대해서 index.html만 준다고 설정을 해놔서 이 문제가 해결되지 않은 것이다.

그래서 CloudFront에 함수를 달아줬다.

function handler(event) {
  var request = event.request;
  var uri = request.uri;

  if (uri === "/") {
    return {
      statusCode: 301,
      statusDescription: 'Moved Permanently',
      headers: {
        location: {
          value: '/home'
        }
      }
    };
  }

  if (!uri.includes('.') && !uri.endsWith('/')) {
    request.uri += ".html";
  }

  return request;
}

내가 개발한 애플리케이션은 "/"에 접근하면 "/home"으로 이동하게 해놔서 저런 코드가 추가되었다.

문제 해결의 핵심은 사용자의 경로에 맞는 html 파일을 주는 것.

nextjs의 앱라우터 덕분인지 "/a"면 a.html, "/b"면 b.html 이렇게 빌드본이 구성되어 있다. 그래서 경로이름과 동일한 html을 주도록 설정했다.

함수 publish하고 배포로 다시 이동해서 동작-편집-함수 추가했다.

그렇게 하니까 클라이언트 페이지가 잘 보인다.