Nextjs 를 AWS ElasticBeanstalk CI/CD 구축하기 + Parameter Store 사용하기

현재 사용하는 대부분의 서비스는 EKS, ECS 기반으로 운영되고 있습니다. 하지만 간단한 프로젝트를 진행할 때는 컨테이너 기반 설정보다 빠른 환경 세팅이 중요한 경우가 많습니다. 이럴 때는 Elastic Beanstalk(EB) 을 활용하는 편이 훨씬 간단하고 효율적입니다.

특히, CI/CD를 구축할 때 ECS보다 EB가 훨씬 빠르게 배포 파이프라인을 구성할 수 있습니다.

이번 프로젝트의 목표가 간단한 프로젝트 진행 후, 빠르게 배포하는 것이었기 때문에 EB를 선택했습니다.

따라서 비슷한 상황이라면 EB + GitHub Actions 조합을 추천드립니다.

 

우선, ASW ElasticBeanstalk 에 가서 애플리케이션을 생성해줍니다.

 

다음과 같이 셋팅하고 애플리케이션 코드는 올려도 되고 올리지 않아도 됩니다.

글쓴이는 샘플 애플리케이션을 선택해서 진행하겠습니다.

 

다음에는 서비스 액세스 구성입니다.

IAM 에서 만든게 있으면 그대로 사용하면 되고 없으면, 역할 생성을 눌러서 만들어줍시다.

 

대충되었으면 검토 단계로 건너뛰어줍니다. 짜잘한 설정은 따로 진행하지 않아도 되고, 필요한 부분은 추후 수정도 가능합니다.

아! 주의해야할 점은 4단계에서 인스턴스 유형을 t3.medium 정도로 해주는 것을 추천드립니다. (기본값으로는 t3.micro, t3small 로 되어있다면!)

 

이제 만들어졌다면, CI/CD 를 구성하러 가봅시다.

 

루트에서 .ebextensions 폴더를 만들어줍시다.

그리고 아래 코드를 넣어줍니다.

container_commands:
  01_npm_install:
    command: "npm install --production"
  02_npm_build:
    command: "npm run build"

 

해당 명령은 로컬에서 빌드하지 않고 EB 에서 직접 노드 모듈을 설치하고 빌드하라는 것입니다. (.next, node_modules 를 포함하지 않음.) -> 안정성을 위해 EB 에서 직접 설치/빌드 발생. 로컬에서는 zip 만 생성해서 업로드하면 EB 가 자동으로 진행.

 

 

Nextjs 에서 설정이 필요합니다.

package.json 으로 가서 scripts 에 start 에 포트를 8080 으로 바꿔줍시다.

  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build --turbopack",
    "start": "next start -p 8080",
  },

 

자, 이제 github actions 를 만들러 가봅시다.

 

depoly.yml 을 만들고 아래와 같이 로직을 넣어줍시다.

name: Build and Deploy to AWS Elastic Beanstalk

on:
  push:
    branches: [main]
    paths-ignore:
      - "README.md"
      - ".github/**"

permissions:
  contents: read

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    timeout-minutes: 10

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "22.18.0"

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Zip deployment package
        run: |
          zip -r deploy.zip . \
            -x "./node_modules/*" \
            -x "./.git/*" \
            -x "./.gitignore" \
            -x "./.gitattributes" \
            -x "./.env" \
            -x "./.env.*" \
            -x "./.example.env" \
            -x "./.next/*"

      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-2

      - name: Deploy to Elastic Beanstalk
        uses: einaregilsson/beanstalk-deploy@v22
        with:
          aws_access_key: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws_secret_key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          application_name: test-eb
          environment_name: test-eb-env
          region: ap-northeast-2
          version_label: v-${{ github.run_number }}
          deployment_package: deploy.zip
          use_existing_version_if_available: true

 

application_name, environment_name 은 EB 꺼를 입력하시면 됩니다.

 

이렇게 해서 이제 실행을 하면, 실제 소스가 배포가 될 것이고 EB 에 가서 애플리케이션 코드를 보면 배포된 것을 버전별로 확인할 수 있음.

이렇게 쉽게 애플리케이션에 형상관리를 진행할 수 있는 것이 EB에 장점입니다.

 

+ eb 에서 환경변수 사용하기

프로젝트 환경변수는 보통 .env 파일을 통해 관리하지만, 최근에는 보안 문제로 인해 .env 파일을 그대로 배포하는 방식은 잘 쓰이지 않는다. (Next.js의 경우 NEXT_PUBLIC_ prefix를 사용해서 클라이언트로 노출할 값을 구분할 수 있다.)

조금 더 안전하게 관리하려면 AWS Parameter Store를 사용하는 방법을 추천한다.
초기 세팅만 해두면 런타임에서 process.env로 바로 매핑할 수 있어, 보안성과 편의성을 동시에 챙길 수 있다.

 

EB 로 가서 구성 편집을 눌러서 플랫폼 소프트웨어 아래 환경 속성 섹션에서 추가해주면 된다.

 

Parameter Store 를 선택해서 환경변수로 사용할 키와 ARN 을 입력해주면 된다.

 

어 그러면, ARN 은 어디서 가져오냐~ -> Parameter Store 에 가서 변수를 등록해주면 해당 값을 제공해주니 넣어주면 그대로 사용이 가능하다.

 

이렇게 해준 다음에 배포가 완료되고 확인해보면 정상 동작하고 있을 것이다.

이제 여기에 필요하신 분들은 CDN, Route53 을 셋팅해서 붙여주면, 우리가 원하는 간단한 서비스를 배포할 수 있습니다.