[250807 TIL] CF Function + Next static build

Next.js static build + s3 조합에서 라우팅이 안된다?

그렇습니다. 아래처럼 next.config 설정하고

const nextConfig: NextConfig = {
    output: "export", // 정적 파일만
    trailingSlash: true,
    images: { unoptimized: true },
};

빌드하여 s3 에 올리고 CF 붙이면
메인 index.html 은 잘 나오는데 라우팅이 안됩니다.
클로드쌤과 함께 해결했습니다.

CloudFront Functions

Lambda@Edge보다 비용이 저렴한 CloudFront Functions를 사용해 보았습니다.

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

    // 파일 확장자가 없으면 index.html 추가
    if (!uri.includes('.')) {
        request.uri = uri.endsWith('/') 
            ? uri + 'index.html' 
            : uri + '/index.html';
    }

    return request;
}

요런 간단한 핸들러 함수를

1. 함수 생성

1. CloudFront 콘솔 → 왼쪽 메뉴에서 Functions 클릭
2. Create function 버튼 클릭
3. 함수 이름 입력 (예: redirect-to-index)
4. Create function 클릭

2. 코드 작성

생성된 함수 페이지에서:

1. Build 탭 선택
2. 위 코드 붙여넣기
3. Save changes 클릭
   
   

3. 테스트 (선택사항)

1. Test 탭 클릭
2. Event type: Viewer Request 선택
3. URL path에 /about 입력
4. Test function 클릭
5. 결과에서 /about/index.html로 변환되는지 확인
   
   

4. 배포 (Publish)

1. 테스트 완료 후 Publish 탭 클릭
2. Publish function 버튼 클릭
   
   

5. CloudFront 배포에 연결

1. Associate 탭 클릭 또는 CloudFront 배포 설정으로 이동
2. CloudFront 배포 → Behaviors → Default (*) 선택 → Edit
3. Function associations 섹션에서:
   • Event type: Viewer Request
   • Function type: CloudFront Functions
   • Function ARN/Name: 방금 만든 함수 선택
4. Save changes
   
   

6. 배포 대기

• CloudFront 배포가 업데이트되는데 5-10분 정도 걸려요
• Status가 Deployed가 되면 완료!

끝~!