AWS App Runner에 Next.js 배포해보기

Next.js를 AWS App Runner에 올려봅시다.
2023.03.03

Next.js를 AWS App Runner에 올려보겠습니다.

본 블로그 전체 코드는 아래 레포에서 확인해주세요.

https://github.com/Tolluset/nextjs-app-runner

프로젝트 생성

아래 커맨드로 프로젝트를 생성해 줍시다.

npx create-next-app@latest

일단 잘 생성되었는지 확인합시다.

yarn dev

잘 작동된다면 배포용 컨테이너 이미지를 만들어 봅시다.

이미지 생성

작성해 봅시다.

touch Dockerfile

버셀에서 제공해주는 예시를 참고합니다.

https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile

중간에 패키지 매니저는 변경해줍시다.

FROM node:18-alpine AS base

FROM base AS deps
RUN apk add --no-cache libc6-compat
RUN corepack enable && corepack prepare pnpm@latest --activate 
WORKDIR /app

COPY package.json pnpm-lock.yaml ./
RUN pnpm i

FROM base AS builder
WORKDIR /app

COPY --from=deps /app/node_modules ./node_modules
COPY . .

RUN pnpm build

FROM base AS runner
WORKDIR /app

ENV NODE_ENV production

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT 3000

CMD ["node", "server.js"]

컨테이너를 빌드하고 띄워 봅시다.

docker build -t nextjs-app-runner .
docker run -p 3000:3000 nextjs-app-runner

잘 생성되는 것을 확인했으면 AWS App Runner를 띄우러 가봅시다.

AWS App Runner에 배포

그런데 AWS App Runner가 무엇일까요. 서버리스 컨테이너 서비스입니다. 그러면 AWS Fargate가 떠오르는데요, Amazon ECS같이 컨트롤 플레인을 사용하는 것이 아니라, 완전 관리형 서비스처럼 작동합니다. 직접 배포하면서 그 차이를 느껴봅시다.

참고로 아직 서울 리전은 지원을 안하지만 도쿄리전은 지원하기 때문에 도쿄리전으로 배포해보겠습니다.

Amazon ECR 컨테이너 이미지 올리기

Dockerfile은 작성했으니 이미지를 Amazon ECR에 올려서 사용해 봅시다.

Amazon ECR로 이동해서 레포지토리를 생성해 줍시다.

프라이벳으로 하고 이름 설정을 하여 생성해 줍니다.

생성하고 목록에서 만든 레포지토리로 들어오면 우측 상단에 푸시 명령 보기가 있습니다. 클릭해서 커맨드를 봅시다.

커맨드가 하라는대로 해줍시다.

aws cli를 설정해야합니다.

https://docs.aws.amazon.com/ko_kr/cli/latest/userguide/getting-started-install.html

설치하고 커맨드를 입력해나갑시다.

잘 해내셨다면 콘솔에서 이미지가 보이게 됩니다.

다시 AWS App Runner로 돌아갑시다.

진짜 AWS App Runner에 올리기

아까 보았던 화면에서 새로고침하고 찾아보기를 누르면 아래처럼 등록한 이미지를 찾을 수 있습니다.

배포는 각자 편한방법으로 설정해 봅시다. 역할은 만들어주는 역할을 사용하겠습니다.

포트를 3000으로 설정했기 때문에 3000으로 바꾸어주세요. 다른 설정은 그대로 해서 생성해 봅시다.

몇 분 기다려 줍시다.

까먹을 때 쯤 되면 잘 작동하고 있는 것을 확인할 수 있습니다. 🎉🎉🎉

마무리

더 이상 사용하지 않는다면 서비스를 삭제해 줍시다. 하나의 인스턴스는 계속 켜져있는 서버리스 서비스라 요금이 나오기 때문에 잘 껏는지 확인합시다.

끝으로

컨테이너 서버리스 서비스를 이렇고 쉽고 빠르게 배포할 수 있는 것이 매우 큰 장점 인것 같습니다. 새로운 프로젝트를 빠르게 배포하고 적용해보고 싶을 때 시도해봐도 좋을 것 같습니다.

본 블로그 게시글을 보시고 문의 사항이 있으신 분들은 클래스메소드코리아 (info@classmethod.kr)로 연락 주시면 빠른 시일 내 담당자가 회신 드릴 수 있도록 하겠습니다 !