Dev

10분 안에 끝내는 Amplify 배포: NextJS를 Amplify로 배포하기

DC

2023년 11월 10일 • 7 min read

amplify

안녕하세요. 독자님들. 이번 아티클에서는 제가 즐겨 사용하는 NextJS 13을 Amplify에 배포하는 과정을 적어보려 합니다. 물론 NextJS 12라고 해서 크게 다를거는 없으니 천천히 따라하시면 금방 배포하실 수 있을거예요.

1) Amplify Hosting 시작하기

제일 간단한 챕터입니다. '시작하기' 버튼을 클릭해주세요.

Amplipy start hosting — Amplify 호스팅 시작하기

원하시는 형상관리 툴을 선택하고 '계속'을 눌러주세요.

레파지토리를 선택해주세요.

2) 환경변수 및 빌드 설정하기

만약, 독자님들의 제품이 nextauth를 활용한 인증 관리, 그리고 데이터베이스 통신 등의 기능이 있어서 환경 변수가 있다면 무턱대고 '다음'을 누르지 마세요. 물론 만약 '다음'을 눌렀더라도 수정은 가능합니다.

먼저 환경변수를 살펴볼게요.

a) 환경 변수 설정하기

환경 변수는 '고급 설정'을 클릭하여 확장해서 설정할 수 있습니다. 제품에 필요한 환경변수 값을 추가해주세요.

환경 변수는 추 후 빌드 설정에서 별도의 세팅이 필요합니다. 저는 다음과 같은 환경 변수를 추가했다고 가정하겠습니다:

DATABASE_URL=example-db.com
DATABASE_USER=example-user
DATABASE_PASSWORD=example-password
NEXTAUTH_URL=https://dirtycoders.net
NEXTAUTH_URL_INTERNAL=https://dirtycoders.net
NEXTAUTH_URL_SECRET=secret-dt

.env.production

자. 이제 독자님들의 .env.production 에 맞게 환경 변수 설정을 해주세요.

모두 설정이 되셨다면 빌드 설정 챕터로 넘어갑시다.

b) 빌드 설정 하기

기본적인 빌드 설정은 위와 같을거예요. 저는 npm 을 사용하기에 다음과 같이 변경해줬습니다:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci # <-- changed
    build:
      commands:
        - npm run build # <-- changed
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
      - .next/cache/**/* # <-- changed

<– changed 문구가 있는 곳이 변경되었습니다. 하단에 cache.paths 에 추가된 .next/cached 경로도 함께 추가해주세요. 이는 nextjs 캐시를 사용하기 위함입니다.

그리고 조금 더 수정할게요. 지금 상태로 빌드를 하게 되면 환경 변수를 읽을 수가 없 습니다. 환경 변수를 참조하려면 다음과 같이 설정해주세요.

💡

b) 빌드 설정하기에서 설정된 .env.production 를 기준으로 작성하겠습니다.

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - env | grep -e DATABASE_URL -e DATABASE_USER -e DATABASE_PASSWORD -e NEXTAUTH_SECRET -e NEXTAUTH_URL -e NEXTAUTH_URL_INTERNAL >> .env.production # <-- changed
        - cat .env.production # <-- changed
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
      - .next/cache/**/*

환경 변수를 읽도록 수정된 amplify.yml

npm run build - env | grep -e DATABASE_URL -e DATABASE_USER -e DATABASE_PASSWORD -e NEXTAUTH_SECRET -e NEXTAUTH_URL -e NEXTAUTH_URL_INTERNAL >> .env.production 가 추가되었습니다. 이것은 환경 변수에 설정된 값을 node가 읽을 수 있도록 .env.production 파일을 생성하고 빌드 하게 합니다.

그리고 cat .env.production 을 추가했는데요. 해당 행은 나중에 빌드에러가 발생하였을 때 환경 변수 체크 디버깅 용으로 추가한 것이니 패스해도 됩니다. 😉

이제 남은건 '다음'만 눌러주시면 됩니다. 😁