본문으로 건너뛰기

배포

넥스트인증을 배포하려면 몇 가지 단계만 수행하면 됩니다.

넥스트 애플리케이션이 실행 가능한 곳은 넥스트인증도 실행 가능합니다. 따라서 (데이터베이스 없이) JWT 세션 전략만 사용하는 기본 설정에서는 추가로 다음만 설정하면 됩니다.

  1. 넥스트인증 환경 변수

    • NEXTAUTH_SECRET
    • NEXTAUTH_URL

  2. 넥스트인증 API 경로와 설정 (/pages/api/auth/[...nextauth].js)

    • OAuth 제공자의 clientId와 clientSecret

넥스트인증을 사용하여 최신 자바스크립트 앱을 배포하려면 환경 변수, 넥스트인증 API 경로, OAuth 제공자의 모든 설정(콜백 URL 등)이 올바른지 확인해야 합니다.

자세한 제공자 설정은 다음을 참고하세요.

베르셀​

  1. 프로젝트 설정에서 베르셀 시스템 환경 변수를 설정해야 합니다.

  2. 모든 환경에 대한 NEXTAUTH_SECRET 환경 변수를 생성합니다.

    a. openssl rand -base64 32 또는 https://generate-secret.vercel.app/32를 사용하여 임의의 값을 생성할 수 있습니다.

    b. 베르셀에는 NEXTAUTH_URL 환경 변수가 필요하지 않습니다.

  3. 제공자의 클라이언트 ID와 클라이언트 암호를 환경 변수에 추가합니다. (OAuth 제공자를 사용하지 않는다면 이 단계를 건너뜀)

  4. 배포!

예시 저장소는 https://github.com/nextauthjs/next-auth-example을 확인하세요.

다음은 베르셀 배포에 대한 참고 사항입니다.

환경 변수는 서버 측에서 읽히므로 NEXT_PUBLIC_ 접두사를 붙일 필요가 없습니다. 베르셀에 배포할 때는 NEXTAUTH_URL 환경 변수를 명시적으로 설정할 필요가 없습니다. 다른 제공자를 사용한다면 해당 환경 변수도 설정해야 합니다.

미리 보기 배포의 보안​

(OAuth 제공자를 사용한) 미리 보기 배포를 보호하는 데는 몇 가지 중요한 어려움이 있습니다. 대부분의 OAuth 제공자는 단일 리디렉션 또는 콜백 URL만 허용하거나, 적어도 완전한 정적 URL 집합만 허용합니다. 즉, 사이트를 게시하기 전에 값을 설정할 수 없으며 OAuth 제공자의 콜백 URL 설정에서 와일드카드 하위 도메인을 사용할 수 없습니다.

여전히 넥스트인증을 사용하여 미리 보기 배포를 보호할 수 있는 방법을 알아보겠습니다.

자격 증명 제공자 사용하기​

API 경로 /pages/api/auth/[...nextauth].js와 설정 파일에서 현재 베르셀 미리 보기 환경에 있는지 확인합니다. 그리고 사용자 이름과 암호를 의미하는 간단한 자격 증명 제공자를 활성화합니다. 베르셀은 VERCEL_ENV와 같이 확인 가능한 몇 가지 시스템 환경 변수를 제공합니다. 이를 사용하면 미리 보기 배포에서 해당 기본 인증 전략을 테스트용으로만 사용할 수 있습니다.

여기서 주의할 점은 다음과 같습니다.

  • 잠재적인 테스트 전용 사용자가 중요한 데이터에 접근하지 못해야 합니다.
  • 가능하면 미리 보기 배포를 프로덕션 데이터베이스에 연결하지 마세요.

예시:

js
import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"
import CredentialsProvider from "next-auth/providers/credentials"
export default NextAuth({
  providers: [
    process.env.VERCEL_ENV === "preview"
      ? CredentialsProvider({
          name: "Credentials",
          credentials: {
            username: {
              label: "Username",
              type: "text",
              placeholder: "jsmith",
            },
            password: { label: "Password", type: "password" },
          },
          async authorize() {
            return {
              id: 1,
              name: "J Smith",
              email: "jsmith@example.com",
              image: "https://i.pravatar.cc/150?u=jsmith@example.com",
            }
          },
        })
      : GoogleProvider({
          clientId: process.env.GOOGLE_ID,
          clientSecret: process.env.GOOGLE_SECRET,
        }),
  ],
})
js
import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"
import CredentialsProvider from "next-auth/providers/credentials"
export default NextAuth({
  providers: [
    process.env.VERCEL_ENV === "preview"
      ? CredentialsProvider({
          name: "Credentials",
          credentials: {
            username: {
              label: "Username",
              type: "text",
              placeholder: "jsmith",
            },
            password: { label: "Password", type: "password" },
          },
          async authorize() {
            return {
              id: 1,
              name: "J Smith",
              email: "jsmith@example.com",
              image: "https://i.pravatar.cc/150?u=jsmith@example.com",
            }
          },
        })
      : GoogleProvider({
          clientId: process.env.GOOGLE_ID,
          clientSecret: process.env.GOOGLE_SECRET,
        }),
  ],
})

분기 기반 미리 보기 URL 사용하기​

베르셀의 미리 보기 배포는 종종 복수의 URL로 사용할 수 있습니다. 예를 들어 PR이 master 또는 main으로 병합되면 커밋과 PR 관련 미리 보기 URL뿐만 아니라 분기별 미리 보기 URL도 사용할 수 있습니다. 이 분기별 URL은 동일한 분기에서 작업하는 한 절대로 변경되지 않습니다. 따라서 OAuth 제공자에 미리 보기 URL {project}-git-main-{user}.vercel.app을 추가할 수 있습니다. 이 URL은 해당 분기에 대해 일정하게 유지되므로 인증 관련 배포를 테스트할 때 해당 미리 보기 배포와 URL을 재사용할 수 있습니다.