nextjs 프론트엔드 사이드 프로젝트 aws ec2 배포과정 정리

1. ubuntu 22.04 node 18버전 설치 (2023년 1월 30일 기준 Lts 버전)

첫번째 삽질

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install nodejs

위 명령어로 진행하였으나 계속 12버전으로 설치되었다.
해결책: nvm으로 node설치

nvm 설치

wget https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh

bash install.sh
    
source ~/.bashrc

nvm -v #nvm 설치확인 및 버전확인

node lts 설치

nvm list-remote #버전목록중 lts버전 확인

nvm install v18 #2023년 1월 30일 기준 Lts 버전

node -v #node 설치확인 및 버전확인

2. ubuntu 22.04 nginx 설치

nginx 설치

sudo apt update

sudo apt install nginx

nginx는 설치될 때 ufw에 자신을 서비스로서 등록한다.

sudo ufw app list

sudo ufw allow 'Nginx HTTP'			#일단 80포트만 여는 설정

sudo ufw status

inactive라고 뜨면

sudo ufw enable

Nginx Full : 80, 443
Nginx HTTP : 80
Nginx HTTPS : 443

nginx status 확인

systemctl status nginx

내 ip 주소 확인 후 브라우저 열어서 확인해보기.

curl -4 icanhazip.com			#내 ip주소 확인

서버 블럭 세팅

sudo vim /etc/nginx/sites-available/내도메인입력			#해당 경로내 설정파일생성

생성된 파일에 아래내용 입력

server {
	listen 80;
	listen [::]:80;
    server_name 내도메인입력 www.내도메인입력;
	location / {
		proxy_pass http://127.0.0.1:3000;
  	}
}

/etc/nginx/sites-enabled/ 경로에 심볼릭링크 생성

sudo ln -s /etc/nginx/sites-available/내도메인입력 /etc/nginx/sites-enabled/

두번째 삽질 (nextjs 소스 배포 후)
위에까지 적용하면 /etc/nginx/sites-available/, /etc/nginx/sites-enabled/ 이 두 경로에 [내도메인입력] 설정파일이 존재하게된다.
nginx는 /etc/nginx/sites-enabled/에 있는 설정파일을 불러온다.
/etc/nginx/sites-enabled/ 이 경로에 port 80을 listen하는 default설정이 존재했었고, 이를 모른채로 새로 생성한 설정파일도 port 80을 port 3000으로 바꿔주는 설정을 해놓았다. 그래서 ip로 브라우저 접속 시 내 프로젝트의 메인화면이 아닌 nginx root 메인화면만 노출되는 문제가 있었다.
해결책: /etc/nginx/sites-enabled/ 경로 내 default 설정파일 삭제

rm -rf default			# '/etc/nginx/sites-enabled/' 이 경로에서 입력

3. ubuntu 22.04 pm2 설치

npm install pm2 -g

4. nextjs 프로젝트 내 pm2 설정

ecosystem.config.js

module.exports = {
  apps: [
    {
      name: "project",
      script: "npm",
      args: "run start",
      instances: 2,
      autorestart: true,
      watch: false,
      env: {
        PORT: 3000,
        NODE_ENV: "development",
      },
      env_production: {
        PORT: 3000,
        NODE_ENV: "production",
      },
      output: "./logs/console.log",
      error: "./logs/consoleError.log",
    },
  ],
};

구글링을 통해 얻은 여러 설정값들을 시도해 보았지만 실패했었다. 위의 설정값 빼고..

nextjs 프로젝트 내 root에 위 파일을 생성한다.
그리고 ec2 인스턴스에 nextjs 프로젝트 배포 후

pm2 start ecosystem.config.js

명령어를 입력하면 드디어 내 프로젝트가 배포된 것을 브라우저에서 확인 할 수 있다.

5. nextjs 프로젝트 배포(github actions - code deploy) 후

ec2 인스턴스 내에서 npm install 시 인스턴스가 그냥 뻗어버렸다..
인스턴스 사양은 프리티어 사양이였고 많이 모자라서 생긴 문제였다.
결국 과금을 통해 사양을 올려 해결하였고 node module install할땐 npm 말고 yarn을 쓰도록하자. 훨씬 빠르고 리소스를 적게 잡아먹는다.