Next.js App 배포 - 1. EC2에 배포하기

Flutter Web 코드를 Next.js로 마이그레이션 하는 작업을 진행중입니다.

 

어느 정도 작업이 끝나서 Next.js App을 배포하는 과정을 기록합니다. 

 

이번 프로젝트는 AWS EC2에 배포하기로 했습니다.

 

 기본세팅

1. 인스턴스 스펙 설정

Ubuntu 최신버전(24.04 LTS)을 사용하였습니다.

t2.micro 인스턴스로 생성합니다. (나중에 스펙이 좀 더 필요하면 올리면 됩니다.)

 

2. key pair 설정

key pair를 생성하거나, 기존에 있는 것을 사용하면 됩니다. 이 key는 이후 ec2 인스턴스에 접속할 때 사용합니다.

 

3. 보안그룹 설정

보안 그룹의 경우 어떤 경로에 대해 접근을 허용할지 선택합니다. 

저같은 경우 80(HTTP), 443(HTTPS), 22(SSH)에 대해 접근을 허용하였습니다. 

처음에는 모든 ip에 대하여 열어놓고 ec2 인스턴스를 만들었지만, 보안을 위해 특정 ip에 대해서만 접근할 수 있도록 설정하는것이 좋습니다.

 

다른 세부사항은 기본값으로 하여 인스턴스를 생성하였습니다.

 

터미널로 EC2 인스턴스에 접속하기

인스턴스를 오른쪽 우클릭해서 연결로 들어가면 다음과 같은 화면을 볼 수 있습니다.

 

이전에 생성한 key가 있는 폴더 내에서 ssh -i ~~~ 커맨드를 입력하면 터미널에서 ec2 인스턴스에 접속할 수 있습니다.

 

 

EC2 인스턴스 세팅

처음에는 ec2 인스턴스에는 아무것도 없는 상태입니다.

Next.js App을 실행하기 위해 필요한 파일들을 설치합니다.

저같은 경우 node.js, nvm, nginx를 설치하였습니다.

# 패키지 매니저 업데이트
sudo apt update

# nginx 설치
sudo apt install nginx

# nvm 설치
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
source ~/.bashrc
nvm install 22.13.0

 

nvm install 에서 자신이 원하는 node.js 버전을 설치하면 됩니다.

 

Git project clone

이제 Github에 있는 Next.js 코드를 clone해와야 합니다.

https를 통해 clone해도 되지만, 저는 ssh 세팅을 통해 clone 했습니다.

ssh-key를 생성하고 

ssh-keygen

cat ~/.ssh/id_[~~~].pub

 

생성된 key를 Github에 등록하면 됩니다.

Github 의 Settings - SSH and GPG keys 탭에 등록합니다.

 

이후 ec2 인스턴스 터미널에 git clone ~~~ 을 입력합니다.

npm install or yarn으로 필수 패키지를 설치합니다.

 

메모리 스왑

저같은 경우 Next.js App을 build하는 과정에서 계속 ec2 인스턴스가 멈추는 현상이 발생하였습니다.

찾아보니 메모리 부족때문에 발생하는 현상이었습니다.

 

메모리 부족을 해결하는 방법은 2가지가 있는데,

첫번째는 메모리스왑을 사용하여 일시적으로 메모리를 늘리는 방법이고,

두번째는 ec2 인스턴스 사이즈를 변경해 실제 메모리를 늘리는 방법입니다.

 

build할 때만 메모리 부족현상이 발생한다고 판단되어 인스턴스 사이즈를 변경하는 것 보다는 일시적으로 메모리를 늘리는 메모리 스왑을 사용하기로 했습니다.

 

사용법 자체는 터미널에 명령어 몇 번만 입력하면 되기 때문에 간단합니다.

sudo dd if=/dev/zero of=/swapfile bs=128M count=16
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile

 

메모리 스왑 이후 빌드에 성공해 .next 파일을 생성하였습니다.

 

스왑을 해제하는 방법은 다음과 같습니다.

sudo swapoff -v /mnt/swapfile

sudo rm /mnt/swapfile

 

Nginx 세팅 

build된 파일을 start하기 전에 nginx 세팅이 필요합니다.

구글링을 통해 여러가지 방법으로 세팅을 시도 했는데( 찾아보니 제각각의 방법으로 세팅을 하신 것 같았습니다..) 제가 선택한 세팅은 다음과 같습니다.

 

 /etc/nginx/sited-enabled 폴더에 default 파일을 다음과 같이 작성합니다.

server {
  listen 80 default;
  listen [::]:80 default;
  server_name 서버이름;

  location / {
    proxy_pass http://127.0.0.1:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-for $proxy_add_x_forwarded_for;
  }
}

 

80포트로 들어오는 요청들을 localhost(http://127.0.0.1) 3000번 포트로 이동시킵니다.

 

nginx 세팅 변경 후 nginx를 다시시작합니다.

sudo service nginx restart

 

 

PM2

원할한 프로세스 관리를 위하여 pm2를 사용하였습니다.

npm install -g pm2

 

자세한 세팅은 CI/CD 구축 이후 구현할 계획입니다.

 

지금은 일단 pm2 로 이전에 build한 Next.js App을 실행합니다.

pm2 --name 어플리케이션이름 start npm -- start

 

 

그럼 이제 ec2의 public ip주소나 dns 주소를 통하여 Nextj.s App에 접근할 수 있습니다!