S3+CloudFront 정적 배포의 억까에서 거의 해방이 되었지만... 아무래도 정적 배포를 하는 것은 이래저래 불편한 것도 많고, 나중에도 후회할 수 있을 법해서 팀원을 진지하게 설득하고... 고민하고 해서 Vercel로 배포를 다시 하기로 결정했다.

정적배포를 위해 참 많은 수정을 거쳤기 때문에 복구하는 것이 힘들지 않을까? 싶었는데 정말 배포는 말도 안 되게 쉬웠기 때문에 진작 Vercel로 배포할 걸하고 후회를 엄청했다. 뒤늦게라도 배포를 바꾸기를 잘한 것 같다.

Vercel 배포는 S3+CloudFront에 비하면 배포가 정말정말 쉽고 직관적이다. 배포를 하는 방법을 크게 설명할 것도 거의 없고, 구글링을 하면 좋은 글이 많이 나오기 때문에 이번에도 배포 시에 발생했던 에러들에 대해서만 정리를 해보고자 한다. 추가로 백엔드와 API 통신을 위해 도메인을 연결하는 과정까지 정리하겠다.

무료 플랜으로 배포를 해야했기 때문에 팀 프로젝트에서는 배포가 불가능했다. 팀 프로젝트 배포는 유료 플랜이라고 하니 참고하자. 하지만, 무료로도 충분히 배포가 가능한데 개인 리포지토리에 팀 리포지토리를 fork 해주면 된다. 어차피 프로젝트가 끝난 뒤에 fork 해야 하니 미리 해준다 생각하고, 내 github로 fork해 배포해주었다.

No Next.js version could be detected in your project.

root directory를 ./로 설정해서 발생한 오류이다. 현재 리포지토리는 root directory에 프로젝트 파일이 존재하는 게 아닌 root directory에 'dutchiepay' 폴더에 존재하기 때문에 ./dutchiepay로 root directory를 변경해 해결했다.

assetPrefix

이전 정적 배포에서 정적 파일들을 찾지 못해서 해당 방법을 사용해서 해결해주었던 코드이다.

const isProd = process.env.NODE_ENV === 'production'
 
module.exports = {
  assetPrefix: isProd ? 'https://cdn.mydomain.com' : undefined,
}

해당 오류는 공식 문서에서 다음과 같이 적혀있다.

Vercel에 배포하면 Next.js 프로젝트에 대한 글로벌 CDN이 자동으로 구성됩니다. 자산 프리픽스를 수동으로 설정할 필요가 없습니다.

해당 설정 때문에 Vercel에서 오히려 경로 오류가 났다. 지워주면 된다.

정적배포때와는 다르게 이렇게 두 개의 오류가 발생했다. 배포 방식 너무 마음에 든다.

Route53을 이용해 도메인 연결

도메인에서 생각보다 시간이 많이 걸렸는데 이 부분 또한 지식의 부족이라고 생각한다. 그리고 단순히 구글링해서 나오는 결과로 시도하는 게 정답이 아니라고 느꼈다. 내 프로젝트의 환경과 다른 프로젝트의 환경이 확실히 다르다는 걸 느꼈다.

일단 도메인은 가비아에서 구매해서 연결해주었다. 연결과정은 쉽게 이해할 수 있는 그림이 있어 해당 그림으로 생각하면 쉽다.

백엔드는 https://api.domainname.site로 도메인을 설정할 것이고 프론트엔드는 https://www.domainname.site로 도메인을 설정할 것이다. 이를 위해 AWS의 Route53을 이용해주었다. Vercel은 프론트용 호스팅일 뿐이고 다양한 레코드 생성 등은 불가능하기 때문이다. HTTPS 트래픽 적용이나, 서브 도메인 분기 등을 사용하려면 Route53을 사용해야 한다.
프론트엔드용 CNAME 레코드와 벡엔드용 A 레코드를 만들어주면 된다. CNAME 레코드를 sub도메인을 www로 하고, value를 vercel 도메인 주소를 넣어준 다음 가비아의 내가 구매한 도메인의 네임서버를 Route53에 표시된 NS 레코드를 전부 추가해주면 된다.

참고 자료

assetPrefix
vercel 에러 : No Next.js version could be detected in your project.
AWS ACM & Route53로 가비아 도메인 네임-Route53-Vercel 프론트엔드-EC2 백엔드 연결하기