next.js로 만든 토이 프로젝트 배포

next.js 예제와 강의를 보며 틈틈이 만들었던 프로젝트를 이번 주말 배포했다. 나중에 내가 볼 요량으로 배포하면서 알게 된 것들 몇 가지 간단하게 정리해본다. 

 

Vercel Postgres

vercel로 배포했고, DB도 vercel postgres를 사용했다. 무료 플랜으로 1개의 DB를 제공하고 있다. 처음 DB를 생성하고 프로젝트와 연결할 때 총 6개의 region 중에 하나를 골라야 한다. 아시아 지역은 싱가폴이 유일해서 Singapore를 선택했다. region은 한 번 선택하면 그 이후에 변경이 안 되기 때문에 유의해야 한다. 

We recommend choosing the same region as your Serverless and Edge Functions for the fastest response times. After creating a database, you cannot change its region. Check your project's region before creating your database.

출처: https://vercel.com/docs/storage/vercel-postgres#how-vercel-postgres-works

 

 

그리고 DB 리젼과 가까운 곳으로 프로젝트의 Function Regions도 맞추어서 설정해 주어야 한다. 

vercel에서 프로젝트 대시보드 > Settings 탭 > 왼쪽 사이드바의 Functions 로 들어가면 다음과 같은 설정 화면이 나온다. 

https://vercel.com/docs/functions/configuring-functions/region

Functions 설정 화면

 

여기에서 Function Region을 DB와 가까운 Singapore로 설정해줘야 한다. 처음 디폴트 설정은 미국 워싱턴이었는데, DB가 싱가폴이고, 서버리스 함수는 워싱턴에 세팅되어 있을 때는 사이트가 사용할 수 없는 수준으로 굉장히 느렸다. 

 

 

Image 컴포넌트의 src 경로 

개발 모드일 때 로컬에서는 정상적으로 보이던 png 이미지가 배포하고 난 다음에는 깨져서 보이지 않는 이슈가 있었다. 

로컬 이미지의 경로는 public 폴더 하위였다. 

 

public 폴더

 

next.js의 Image 컴포넌트에 src 경로를 문자열로 기입하고 있었다. 

 

 

이미지가 깨진 화면 스크린샷

 

 

네트워크 탭을 확인해 보니 307 Temporary Redirect 로 응답이 오고 있었다. 

 

Optimizing: Images | Next.js

 

공식 문서의 이미지 최적화 부분을 보며 src 경로를 문자열이 아닌 StaticImageData로 바꿔주었다. 

 

 

이때 HeroImage는 StaticImageData 객체이다. 

 

 

next의 Image 컴포넌트의 src prop은 string 또는 StaticImport가 올 수 있다. 

 

이미지가 정상적으로 로딩된 화면 스크린샷

 

네트워크 탭을 확인해 보면 200 OK 응답이 오고, 이미지가 정상적으로 로딩된다.

 

src에 문자열로 경로를 지정했을 때와 StaticImageData를 지정했을 때, 네트워크 탭에서 여러 가지 다른 점이 있었다.

 

먼저 request url에서 ?url= 이후의 쿼리 스트링 값에 /_next/static/media가 추가된 것을 볼 수 있다. 

 

- src 경로에 문자열을 지정했을 때: url=/hero_256x256.png&w=640&q=75

- src 경로에 StaticImageData를 지정했을 때: url=/_next/static/media/hero_256x256.0d595165.png&w=640&q=75 

 

이외에도 문자열을 지정했을 때는 Response Headers의 Content-Type이 text/plain이었고, StaticImageData를 지정했을 때는 image/webp였다. 

 

왜 이런 차이가 발생하는 것인지, vercel에 배포할 때 Image 컴포넌트의 src prop에 문자열 경로를 넣으면 왜 text/plain 컨텐츠가 내려오는 것인지.. 아직 그 이유는 잘 모르겠다. 🤔

 

 

 

아직 기본 기능만 만들었고 핵심 기능은 구현 시작도 안했지만, 그리고 현재 버전에서도 고칠 것들이 많지만 원래 배포부터 하고 시작하는 거니까! 친구들이 어떤 책을 보고 있는지 궁금해서 만들기 시작한 토이 프로젝트입니다. (아직 친구 책장 볼 수 없음 ㅋㅋㅋㅋㅋㅋ) 

아주아주 장기적으로는 swift로 리팩토링하는 것이 목표다. 그 날은 언제 올까...?

요즘뭐보니