Next.js AWS EC2에 배포하기(1)

들어가기

이번 사이트 프로젝트를 Next.js를 사용하고 있는데 이제는 프로젝트가 절반 이상 진행 되었고, 배포할 필요성을 느껴 배포를 하려 한다. Vercel에 배포하면 편한데 굳이 EC2에 배포를 하는 이유는 두 가지이다.

1. Vercel에 팀 프로젝트는 유료이고 개인 hobby 프로젝트는 이미 한 개 배포중이라서 무료로 사용할 수가 없다.

2. 상황에 따라 실무 할 때에도 인프라에 따라 Vercel을 사용하지 못할 수도 있는데 다른 배포 방식도 알 고 있어야 하지 않을까?

사실 1번 적 측면이 가장 크다..(돈 아껴야지..)

 

그래서! 개인적으로 가지고 있는 EC2에 배포를 해보려한다.

일단 이 글은 EC2 인스턴스 생성 및 접속에 대한 부분은 글의 논점과 다르다 생각하여 다루지 않을 것이다.

 

 

EC2를 생성하여 SSH로 접속하면 다음과 같은 화면이 보이게 된다!

나는 Amazon Linux2로 생성되었기 때문에 yum 명령어로 패키지 관리가 가능하다.

 

이제부터 패키지를 설치해 보자.

 

초기설정

nginx 설치

amazon-linux는 yum을 통해 nginx 설치가 지원되지 않는다. 그렇기에 amazon-linux-extras 라는 명령어로 설치가 가능한데 먼저 설치할 nginx를 찾아보자.

amazon-linux-extras list | grep nginx

위와 같이 nginx1이라는 패키지가 나와있는데  이 패키지를 설치해 보자.

 

sudo amazon-linux-extras install -y nginx1

nginx 설치 결과

설치가 잘 된 것 같으니 정말 설치가 잘 되었는지 확인해 보자.

 

nginx 버전 확인

이제 nginx를 실행해서 정상적으로 실행되는지 확인해 보자.

EC2의 방화벽에서 80 포트가 열려있어야 접속 테스트가 가능한 점 참고하자!

 

sudo service nginx start

 

서비스가 시작되었다면 EC2 퍼블릭 IP를 입력해서 확인해 보자.

해당 화면이 나온다면 nginx 설치는 정상적으로 되었다!

 

 

NVM 및 node.js 설치

AWS 공식문서를 따라 하며 Node.js를 설치해 보자.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

 

설치는 정상적으로 된 것 같다. 

분명 공식문서대로 설치했는데 정상적으로 설치가 되었다!

이 부분에서 설치가 안 되는 경우도 있는데 EC2의 버전이 Amazon Linux2인지 확인해 보자.

이 글에서 Amazon Linux2에서는 nvm이 지원되지 않는다는 것을 확인 가능하다.(본인은 Amazon Linux 2023 버전 이상이다)

 

Git 설치

이제 기초적인 준비는 끝났다!

이제 프로젝트를 우리의 EC2로 가져와보자.

git clone 레포지토리Url

초기 Git Clone

우리의 프로젝트 이름이 ping이기 때문에 편의상 폴더를 생성하고 SSH로 clone을 진행했지만 git이 없다는 에러가 발생했다.

 

당황하지 말고 Git을 다운로드하자

sudo yum install git

안전하게 다운로드가 되었다.

 

이제 다시 clone을 해보면...

우리랑 항상 친숙한 Permission denied...

SSH로 pull 했는데 key가 없으니 당연하기도 하다.

 

Github SSH 생성

SSH key를 생성해보자.

cd ~/.ssh
ssh-keygen -t rsa -C example@github.com

위 명령어를 치고 나오는 대로 입력해 주면 다음과 같이 ssh key가 생성되는데 .ssh 경로에서 ls 명령어를 치면 id_rsa.pub 파일이 생성된 것을 확인할 수 있다.

 

cat id_rsa.pub

명령어를 입력하면 ssh-rsa~~~~로 시작하는 긴 글이 나오는데 이거를 복사 후 깃 허브 키 등록 페이지로 가서 New SSH Key를 눌러 복사 후 등록하면 된다.

그 후 다시 clone을 실행하면 정상 실행되는 것을 확인할 수 있다!

 

프로젝트 빌드

이제 프로젝트도 받아졌으니 본격적으로 빌드를 해보자

cd 프로젝트 폴더
npm i -g yarn
yarn
yarn build

나의 프로젝트는 yarn으로 되어 있기 때문에 yarn을 먼저 받아준다.

그 후 yarn build를 통해서 프로젝트를 빌드를 하면 성공하는 것을 볼 수 있다.

 

 

Nignx 설정

빌드한 파일을 yarn start로 실행해 보면 localhost:3000으로 실행되는 것을 볼 수 있는데 이제 nginx로 우리의 웹 사이트 IP로 접속했을 때 켜진 localhost:3000으로 포워딩시키도록 설정할 것이다.

 

nginx의 /etc/nginx/sites-available 폴더가 있는지 확인해 보자. 이 폴더는 이름 그대로 사이트로 사용될만한 설정을 담고 있는 파일이다. 이 폴더 안에 있는 파일들은 /etc/nginx/sites-enabled와 링크하여 사용가능하다.

 

해당 폴더 안에 파일명을 하나 만들고 다음과 같이 작성해 주자. 본인 같은 경우는 default라는 파일 명으로 만들었다.

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;
    }
}

 

그 후 아래의 명령어를 통해서 설정이 잘 되었는지 체크해 보자. -t 명령어는 설정 파일이 정상인지 확인하는 옵션이다.

sudo nginx -t

 

위와 같이 설정할 경우 3000번 포트로 접근할 필요 없이 80 포트로 접근하면 바로 우리의 프로젝트를 띄울 수 있다.

 

 

pm2 설치

이제 pm2를 설치해 보자. pm2는 애플리케이션을 계속 실행시키고, 만약 애플리케이션이 중단되면 자동으로 다시 시작해준다고 한다. 이로 인해 서버가 중단 없이 안정적으로 실행될 수 있는 프로그램이다.

 

npm install pm2 -g

 

이제 설치된 pm2로 우리의 프로젝트를 실행시켜 보자.

pm2 start npm --name <프로젝트 명> -- start

 

이렇게 해놓으면 EC2의 터미널이 꺼져도 백그라운드로 실행시킬 수 있다.!!

 

터미널을 끄고 배포가 잘 되었는지 확인해 보면...

배포가 잘 된 것을 확인할 수 있다!!

 

후기

항상 Vercel로만 배포를 해봤지만 이렇게 직접 EC2로 SPA React가 아닌 SSR을 사용하는 Next.js를 배포해 보니 감회가 새롭다. SSR은 node 서버가 Running 되어야 실행할 수 있기 때문에 기존 S3에 정적파일을 배포하던 React와는 너무도 달랐다. 그렇기에 혼란도 많았고 어려움도 많았다.

그런데 역시 개발자가 체질인지 하다 보니 재미가 있었다ㅎㅎ

이 글은 내가 까먹지 않기 위해 작성한 글이고, 이 글과 경험을 토대로 더 발전하는 프런트엔드 개발자가 되고 싶다.

 

 

※ 2편에서는 배포 자동화까지 구축한 글을 작성해보도록 하겠다!