S3+Cloud Front로 배포하면서 발생했던 추가 오류들에 대해 정리를 하려고 한다.
정리를 하기 전에 Next.js로 정적 배포를 결정하는 건 정말 생각을 여러 번 하고 결정해야 할 것 같다고 생각이 들었다. 정적 배포를 결정하면서 Next.js의 이점을 제대로 이용하지 못하는 것들도 너무 많지만, 불필요하게 많은 오류들을 수정해야 한다. 정적 배포에서는 이용할 수 없는 기능들이 많고, 그 기능들을 구현해놓은 코드에서 다 수정해야 하고... 물론 가장 이상적인 배포 방법은 Vercel로 배포하는 것이긴 한데... 😭 Vercel의 경우 제한되는 부분이 많았다. 유료 플랜으로 사용하면 되긴하지만... 1년 이상 유지해야 하기 때문에 팀원들에게 부담이 될 수 있어 선뜻 결정하지 못했다. AWS Amplify로 배포하면 SSR이 가능하다고는 하는데 비추하는 게시글을 정말 많이봤다. 속도가 진짜 느리다고 한다. 사용성을 생각하면 속도적인 부분은 정말 중요하다고 생각했기 때문에 아쉽지만 이번 프로젝트에서는 S3로 정적 배포를 해야하지 않을까...

dynamic route 404

동적 라우팅으로된 페이지를 배포했을 때 404 오류가 발생했다. 이건 렌더링 방식에 대한 제대로 된 공부 없이 Next.js를 선택하게 돼서 발생한 오류이다.

/posts/[id].jsx와 같은 동적 페이지가 있다고 가정했을 때, 정적 배포를 하게 되면 [id]에 해당하는 값이 무엇이 될지 미리 알 수 없기 때문에 정적 HTML로 미리 생성될 수 없다.

이를 해결할 수 있는 방법은 2가지가 있는 것 같았다.

1. 동적 라우팅을 사용하지 않고 URL query로 해결
2. generateStaticParams을 사용 모든 가능한 포스트 ID를 가져와서 정적으로 생성할 경로를 정의해 해당 ID에 대한 페이지를 미리 생성

export async function generateStaticParams() {
  const postIds = await getAllPostIds(); // 모든 포스트 ID를 가져옵니다.

  return postIds.map((id) => ({
    id, // { id: '1' }, { id: '2' } 형태로 리턴
  }));
}

2번으로 해결할 경우, 동적 라우팅을 사용할 수 있긴 하지만, 모든 postId를 받는 API를 추가적으로 만들어야 했다. 동적 라우팅을 사용하는 곳이 한 곳 이었다면, 문제가 없겠지만 여러 페이지에서 동적 라우팅으로 구현해두었기 때문에 API를 여러 개 추가해야 한다는 부담도 있고... 모든 페이지를 정적으로 생성하면 빌드 결과물의 크기가 너무 커질 것 같아 좋지 않을 것 같다는 게 프론트의 의견이었다. 그래서 1번으로 해결하기로 하고 동적 라우팅을 모두 query로 변경해주었다. 동적인 값이 제한적이고 프론트가 모든 값을 알 수 있는 경우는 동적 라우팅으로 두고 2번 방법으로 해결해주었다.

build 시 static files을 찾지 못하는 에러

build한 파일들로 배포를 해주었을 때 빈 화면이 표시되고 font/css/js이 모두 오류가 나게 되었다. 이에 대해 구글링을 해보니 아래와 같은 해결 방법이 있었다.

다른 레퍼런스에서도 다음과 같이 해결했다고 해서 시도해봤으나 여전히 일부 페이지에서는 정적 파일을 찾지 못하고 있었다. 해당 문제가 절대경로/상대경로로 인한 문제였기 때문에 원인을 금방 찾을 수 있었는데, 쉽게 생각해보면 /community가 존재할 수 있고, /community/detail이 존재할 수 있기 때문에 "."으로 경로를 제대로 설정해줄 수 없는 것이다. 빌드 후에 모든 페이지의 경로를 수정해주는 건 너무... 말이 안 된다고 생각해 해당 경로를 변환해주는 라이브러리도 시도해봤지만, 제대로 동작되지 않았다.

놀랍게도 공식 문서에 해결 방법이 있었는데, assetPrefix 공식 문서에 들어가면 바로 해결책이 나온다. (삽질했다는 뜻)

다음과 같이 next.config.js에 위 내용을 추가해주면 모든 페이지에서 문제없이 정적 파일을 잘 찾을 수 있게 된다.

Image 엑박

모든 페이지가 표시가 되긴 했으나... 여전히 큰 문제가 있었는데 모든 Image가 엑박으로 표시되는 것이다. 이에 대해서도 열심히 찾아보긴 했으나 큰 소득은 못 얻었다.
NextJS images are not shown using "export" script
위 내용과 동일한 상황이었으나... 답변이 시원찮았다. 다른 게시글을 찾아보려고 했으나... 우리 상황과 같은 경우를 찾지 못했다. 😭

해당 내용은 해결이 되긴 했으나... 왜 해결됐는지는 모르는 상황이다. 일단 해결한 방법들 중 가능성 있는 걸로만 정리를 하면...

1. Image 경로 수정
   next.js에서는 asset 파일을 불러올 때 자동으로 public 폴더로부터 경로를 잡기 때문에 public 폴더부터의 절대경로를 src로 넣어줘야 한다라는 내용이 있었다.

src 에 경로 설정할 때는 public 을 / 로 표현

<Image src="/images/ldh.jpg" width={570} height={381}/>

import로 불러올 때는 public 을 넣어주어야함

import ldh from "/public/images/ldh.jpg"
* 생략 *
<Image src={ldh} width={570} height={381}/>

이 방법이 가능성이 낮은 이유는 해당 방식이 맞을까?라는 확신이 없는데 모든 이미지를 변경해줄 수는 없을 것 같아서 하나의 이미지만 경로를 위와 같이 수정해주고 배포를 했는데 모든 이미지가 제대로 표시가 되었다. 해당 부분만 수정된 다음 이미지가 표시되긴 했으나 모든 이미지가 제대로 표시되었다는 점에서 이전에 배포한 내용이 늦게 적용된 게 아닐까...

2. next.config.js에 Image domains 추가

images: {
    domains: ['https://cdn.mydomain.com'],
    unoptimized: true,
},

다만 이 방법은 아니라고 생각되는 게 내부에서 제공되는 이미지(즉, public 디렉토리에 있는 이미지나, Next.js API를 통해 제공되는 이미지)는 정상적으로 로드된다고 한다. 그래서 당연히 아니겠지... 싶은데 이거 말고는 바뀐 게 없어서 도저히 모르겠다.

이에 대해서는 추후 정답을 알게되면 추가하도록 하겠다.

URL 입력으로 페이지 이동 불가 (.html 확장자)

배포를 어째저째 성공했으나 이상한 오류가 또 발생했다. navbar로는 페이지가 잘 이동하는데 URL로 페이지에 접근하려면 404 오류가 발생했다.

이에 대해서도 구글링을 해보니 원인을 알 수 있었다. /community 라는 페이지를 이동하기 위해 /community.html으로 이동해야 한다는 것이었다. 사용성에서 정말 불편하기 때문에 이 부분은 무조건 해결을 했어야 했는데 찾아보면 되게 어렵게 해결하는 것 같았다. 정말... 현타가 왔지만, 다행히 간단하게 해결할 수 있는 방법을 찾게 되었는데 이번에도 next.config.js에 아래 내용을 추가해주면 된다.

module.exports = {
  trailingSlash: true,
}

trailingSlash은 URL 경로의 끝에 슬래시(/)를 강제로 추가하도록 지정하는 옵션이다. 즉 해당 속성을 true로 변경해 사용자가 /index라고 입력하면, 이를 /index/로 변환하고, /index/는 /index.html 페이지로 연결되게 된다. 따라서 사용자는 /index로도 index.html을 볼 수 있게 되는 것이다.

앞으로도 배포 억까가 진짜 많지 않을까... 생각이 들었다. 더 억까를 당하고 모든 오류들을 수정할 바에 그냥 빠르게 정적 배포를 포기할까... 싶기도 했지만 너무 돌이길 수 없을 정도로 많이 바꿔놔서 되돌리는 것도 그리 좋은 선택은 아닐 것 같다...ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ 다음에 Next.js 프로젝트를 한다면 무조건 Vercel에 배포할 것이다.

참고 자료

[에러 해결] Next.js : 동적 라우팅된 페이지 배포시 404 에러
Generated static files html files have wrong assets paths
assetPrefix
Next.js Image 컴포넌트 경로 설정하기 사용방법(이미지가 안나온다면..?)
정적빌드시 라우팅 질문