Next.js는 무엇으로 배포하면 좋을까?
Next.js를 배포하기 위해 Vercel을 사용하거나 Node.js 서버, Docker 이미지, 정적 HTML 파일로도 자체적으로 호스팅할 수 있다.
나의 경우 Vercel을 사용해 배포를 진행했다.
Vercel은 Next.js를 개발한 곳에서 직접 운영하기에 Next.js와의 호환성과 최적화가 보장되기 때문이다.
Vercel의 서버리스 배포
Vercel은 서버리스 배포를 지원한다.
서버리스(Serverless)는 실제로 서버가 없다가 아닌, 서버 관리와 관련된 모든 작업을 클라우드 제공자가 대신 처리해준다는 의미이다.
즉, 서버리스는 개발자가 서버를 직접 관리하지 않고, 클라우드 제공자가 자동으로 서버를 설정하고 확장하는 방식으로 동작한다.
그렇기 때문에 개발자는 애플리케이션 코드 작성에만 집중할 수 있고, 서버 관리나 리소스 확장에 신경을 덜 쓸 수 있다.
🌐 Vercel로 배포하기
새 프로젝트 생성
GitHub 레포지토리 연결
배포
⭐️ Vercel에서 환경변수 설정 *필수
직접 env 파일을 올려도 되고 아래의 key-value칸에 직접 넣어도 된다.
Supabase를 사용하는 경우 NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY 를 꼭 추가하자.
배포 실패 시
로그 참고해서 수정하고 push 하면 자동으로 redeploy가 된다. (직접 눌러도 됨)
🚨 배포 후 발생한 문제들
OAuth 안되는 문제
해당 문제는 기존에 localhost:3000으로 URL을 설정해서 생긴 문제이다. localhost:3000으로 설정되어 있는 것을 모두 배포된 URL로 바꿔주어야 한다.
개발환경에서도 계속 진행되어야 하기 때문에, defaultUrl을 설정할 때 현재 환경이 무엇이냐에 따라 defaultUrl이 다르게 설정되도록 했다.
VERCEL_URL은 Vercel에서 배포환경에서 자동으로 설정되기 때문에 따로 환경변수에 추가하지 않아도 된다.
나의 경우 VERCEL_URL만 설정한 경우 제대로 실행이 안돼서 해당 링크의 Vercel preview URLs를 참고해 NEXT_PUBLIC_SITE_URL을 추가로 사용했다. (이 부분은 환경변수에 추가)
공식문서에 따르자면 NEXT_PUBLIC_SITE_URL이라는 환경변수 값도 설정하는 것이 좋고, 해당 값은 프로덕션 환경의 사이트 URL로 설정하여 redirect가 올바르게 작동한다고 한다.
export const defaultUrl =
process.env.NODE_ENV === "production"
? process.env.NEXT_PUBLIC_SITE_URL || `https://${process.env.VERCEL_URL}`
: "http://localhost:3000";export const signInWithOAuth = async (provider: Provider) => {
const supabase = createClient();
const { data, error } = await supabase.auth.signInWithOAuth({
provider,
options: {
queryParams: {
access_type: "offline",
prompt: "consent",
},
redirectTo: `${defaultUrl}/auth/callback`,
},
});
if (error) {
console.log("#server error: ", error);
redirect("/auth/callback");
}
redirect(data.url);
};Supabase URL Configuration 변경하기
Site URL과 Redirect URLs에 배포 링크 추가하기
- Site URL
- 프로젝트의 기본 URL
- 기본 redirect URL을 설정하는 옵션
- 지정된 redirect URL이 없거나 허용 목록에 있는 URL과 일치하지 않을 때 사용되는 URL
- 와일드카드 사용 불가능하므로 특정한 URL을 완전히 지정해야 함
- Redirect URLs
- 인증 후 인증 제공자(구글, 페이스북 등)가 사용자를 redirect할 수 있는 URL을 지정하는 설정 (OAuth 사용 시 필요한 모든 redirect 경로를 추가해야 한다)
- 와일드카드를 사용해 하위 도메인들이 포함될 수 있도록 지정이 가능함
Google cloud console에서 url 추가하기
💬 Netlify로 배포한 경험이 있는데 확실히 Vercel이 배포하는게 간단하면서 빠르다고 느껴졌다.
(예전에 작성한 Netlify 배포 관련 포스팅 https://velog.io/@easyxxu/React-netlify-배포하기)
