AWS EC2에 Next.js 프로젝트 배포

내가 만든 foliohub 서비스 프론트는 현재 vercel에 배포되어 있다.

왜 vercel에 배포했는가?하면

배포가 간단하고 무료 플랜정도면 충분히 내 서비스를 운영할 수 있었기 때문이다.

Next.js의 SSR, 이미지 최적화 등 다양한 기능을 지원하고 있었기 때문에 vercel에 배포했다. 

 

아래와 같은 말을 듣게 되어 의문이 들었다...

vercel은 서버리스 방식으로 cold start가 있어 EC2에 비해 5배 정도 느리다.

 

배포 방식만 다른 게 아니라 실행 방식도 달랐던 거야?!

cold start 때문에 EC2에 비해 느리다고?!

 

이 의문을 해결하기 위해 같은 프로젝트를 vercel과 EC2에 각각 배포해서 비교해 보기로 했다.

이번 글에서는 Next.js 프로젝트를 EC2에 배포하는 과정을 담았다.

 

테스트를 위해 간단하게 Next.js프로젝트에서 api 요청을 통해 리스트 데이터를 받아와서 보여주는 SSR 페이지를 만들었다. 
이 프로젝트를 배포해보겠다! 🚀

1. EC2 인스턴스 생성하기

EC2는 클라우드 기반 가상 컴퓨터 서비스로, 원하는 컴퓨터 용량, CPU, 메모리 등을 구성할 수 있다. 

즉, AWS에서 컴퓨터 하나 빌려서 사용하는 것이다.

 

지역은 서울로 가까운 서울로 설정해 줬다.

이름은 원하는 이름으로 작성해 주고

OS는 Ubuntu로 설정해 줬다.

키 페어는 새로 생성해 준다.

(나중에 인스턴스 연결할 때 필요하다! 잘 보관하기!)

네트워크 설정을 해주면

완성! 🎉

 

2. 인스턴스에 연결

1. pem 키가 있는 경로로 이동한다. 

2. 파일의 권한 변경

chmod 400 "next_app_key.pem"

3. 인스턴스 접속

ssh -i "next_app_key.pem" ubuntu@퍼블릭 IPv4 DNS

 

3. 인스턴스 세팅

1. apt 업데이트

sudo apt-get update
sudo apt-get upgrade

update는 패키지 목록을 업데이트한다. 패키지 관리자가 사용하는 소프트웨어 저장소의 최신 정보를 다운받아 어떤 패키지가 업데이트되었는지 또는 새로운 패키지가 추가되었는지 확인한다. 이 과정에서 실제로 설치된 소프트웨어가 업데이트되거나 변경되지는 않는다.

upgrade는 업데이트된 패키지 목록을 바탕으로 설치된 패키지들을 최신 버전으로 업그레이드한다. sudo apt-get update로 업데이트된 목록을 통해 어떤 패키지가 새 버전으로 업데이트할 수 있는지 확인 후 실제 시스템에 적용하는 과정이다.

즉, sudo apt-get update는 패키지 목록을 갱신하고 sudo apt-get upgrade는 그 목록을 바탕으로 실제 패키지를 업그레이드하는 데 사용한다.

 

2. Nginx 설치

Nginx란?

sudo apt-get install nginx

퍼블릭 IPv4 DNS로 접속하면 아래 페이지가 나타난다.

 

 

3. nvm 설치 및 최신 node 설치

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
exit # 종료 후 다시 연결해야 적용 가능 혹은 source ~/.bashrc
nvm
nvm install --lts

node와 npm 설치 확인 

 

4. git repository에서 clone해오기

git clone https://github.com/~~
cd 프로젝트

 

5. 프로젝트 설치 및 빌드

npm i
npm run build

 

6. Nginx 설정

sudo nano /etc/nginx/sites-available/원하는 파일명

/etc/nginx/sites-available 폴더는 Nignx에서 여러 웹 사이트의 설정 파일을 저장하는 곳이다. 이 폴더 내 파일들은 각 웹 사이트에 대한 설정을 담고 있고 실제로 Nignx에서 직접 사용하기 전에 /etc/nginx/sites-enabled 폴더로 링크되어야 활성화된다.

 

해당 파일에 아래 내용을 작성해 준다.

server {
    listen 80;
    server_name 퍼블릭 IPv4 주소;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

sudo ln -s /etc/nginx/sites-available/파일명 /etc/nginx/sites-enabled/

/etc/nginx/sites-available 디렉터리에 있는 설정 파일을 /etc/nginx/sites-enabled 디렉터리로 심볼릭 링크(바로가기와 유사)를 생성한다. 이 과정은 Nginx가 특정 웹 사이트 설정을 활성화하도록 한다.

sudo nginx -t

Nginx 설정에 문제가 있는지 확인

 

Nginx 재시작

sudo systemctl restart nginx

 

7. pm2 설치

npm install pm2 -g

 

8. pm2로 백그라운드에서 실행

pm2 start npm --name "next-app" -- start

 

퍼블릭 IPv4 주소로 접속하면 잘 배포된 것을 확인할 수 있다!! 🎉

 

다음에는

Vercel과 AWS EC2에 배포했을 때 차이점을 비교하는 이야기로 찾아오겠다~ 👋