[NextJs] Vercel로 SSG 프로젝트 배포하기

Vercel로 프로젝트 배포하기

 

일정 조건 이내에서 무료로 프로젝트를 배포할 수 있는 Vercel로 이번에 만든 SSG 블로그 프로젝트를 배포해보기로 했다.

 

Vercle 배포 사이트

Develop. Preview. Ship. For the best frontend teams – Vercel

 

우선은 vercel을 사용하기 위해 github 계정을 연결해서 회원가입을 했다.

 

Project 만들기

1. Add New에서 Project를 선택

 

 

2. GitHub 프로젝트를 연결해서 가져오기

 

3. 프로젝트의 이름을 변경하고, Deploy 버튼을 클릭해서 배포

 

 

오류 발생

하지만.... 쉽게 될리 없지 ㅎ

정말 많은 오류들을 만났다. 나를 괴롭힌 오류들은 더보기로 숨겨놓았는데...

사실 더보기로 빼놓은 이유는 따로있다.

여러가지 시도해보던 도중 만났던 오류들이라. 사실은 시도했던 것들과 상관있는 문제가 아니었던 거였음..

근데 그것도 한참헤맸던 이유가 오류메세지에서 dynamic url 들에서 오류가 난다며

자꾸 read more라고 하면서 링크주는게 export-path-mismatch나 pre-rendering 관련한 링크들이었다...

그래서 꼴보기 싫음

 

 

해결의 실마리를 찾다

이 문서 (https://vercel.com/docs/concepts/deployments/troubleshoot-a-build#troubleshoot-build-failures) 에 나와 있는 내용을 가져와 보자면,

It is recommended to build your project on your local machine first (the build command varies per project) before deploying on Vercel. This will catch issues specific to your code or to your project's dependencies. In the example above, when the command npm run build (that runs next build) is run in the local console for a Next.js project, the error happens after building locally.

Vercel에 배포하기 전에 먼저 로컬 컴퓨터에 프로젝트를 빌드하는 것이 좋습니다(빌드 명령은 프로젝트마다 다릅니다). 이렇게 하면 코드 또는 프로젝트 종속성 관련 문제가 탐지됩니다. 위의 예에서 Next.js 프로젝트의 로컬 콘솔에서 npm run build(다음 빌드를 실행하는) 명령을 실행하면 로컬에서 빌드한 후 오류가 발생합니다.

 

 

일단 이 얘기에서 힌트를 얻어 로컬에서 빌드하고 배포해야한다고 생각했다.

그래서 vercel cli로 배포를 시도하기에 이르렀는데..

 

사실 위 문서는 이런 얘기가 아닌 것 같다.. 왜냐하면 내 로컬에서는 build가 제대로 되었었고 아무런 문제가 없었는데, vercel에서 build만 하면 문제가 생겼던 것, 하지만 여기서 힌트를 얻은 것도 사실!

 

왜냐하면 vercel 에서 배포할 때 아래와 같이 로그가 떴는데, 여기서 vercel build가 실행되는 것을 확인할 수 있었고,

이게 내 로컬이랑 다른 점이라고 생각했기 때문이다.

 

 

 

 

vercel cli로 빌드 및 배포 과정

vercel 설치

$ npm i -g vercel

 

vercel 빌드

$ vercel build

 

vercel 배포

$ vercel deploy --prebuilt

 

이 세가지 명령어를 통해 빌드하고 업로드하면 되는데, 이 과정에서도 순탄하지 만은 않았다.

 

빌드는 생각보다 문제없이 되어 기뻤는데,

배포하는 과정에서 https://github.com/vercel/next.js/issues/40970 이런 이슈가 발생했다.

이런 에러였는데. 해당 경로에 들어가면 정상적으로 파일도 있었다...😢

ENOENT: no such file or directory, stat '/vercel/path0/.vercel/output/functions/_next/data/4btXsoRTcvcyFLza13g3H/index.json.func'

 

그러다 저 이슈에 달린 댓글에서. 유일하게 해결했다고 하는 글을 찾았다!

I found a solution that worked for me. I just copied the folder inside data so that's 4btXsoRTcvcyFLza13g3H (the whole folder), then I deleted the folder and pasted it back in. This worked for me...

해당 폴더를 삭제했고, 다시 시도하니 정상적으로 일했다는 희망적인 문구..!

 

그래서 나도 시도해보니 바로 됐다!! :)!!

 

하지만 이후... 해당 프로젝트의 url에 접근하니 왠걸 vercel의 404 error 가....

 

찾아보니 framework preset을 안해준 탓이었다.

아마 프레임워크마다 프로젝트 실행 경로가 다르기 때문이지 않을까하고 생각이 든다.

 

그래서 vercel cli로 framework를 preset하는 방법을 공식문서에서 검색해보았다.

 

생각보다 방법은 간단하다.

vercel.json 파일을 만들어서 설정내용을 작성하고, vercel을 실행할 때 config를 연결해주면 된다.

(참고 : https://vercel.com/docs/cli/global-options)

 

/vercel.json

{
  "framework": "nextjs"
}

 

프로젝트 최상위 경로에서 아래 명령어 실행하니 정상적으로 배포 되었다.

$ vercel --local-config ./vercel.json

 

 

 

사실, 완전히 끝난게 아니었지만...

nextjs의 api기능을 사용했더니 데이터 요청 url이 바뀌어서.. 수정을 해서 재배포했다..

 

기나긴 우여곡절 끝에 완성!!!!

 

 

 

배포한 프로젝트와 코드 보러가기

https://next-app-gaeundev.vercel.app/

직접 만드는 블로그💪

 

https://github.com/gaeundev/wanted-pre-onboarding-challenge-3-day2

GitHub - gaeundev/wanted-pre-onboarding-challenge-3-day2