TripMingle [NextJs14, Typescript, vanilla-extract] : NextJs14 배포하기, EC2, Amazon Linux, pm2, nginx, 가비아 + Route 53 이용해서 도메인 등록하기

1. EC2 인스턴스 생성

AWS에서 EC2 인스턴스 생성이 필요한데, 이 과정은 인터넷에 매우 잘 나와있어서 생략하겠습니다.
저같은 경우는 다음 블로그를 참고했습니다.
https://velog.io/@kyj311/AWS-EC2-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

 

저는 Amazon Linux기반의 EC2로 생성해줬습니다!

 

2. 인바운드 규칙 설정

HTTP 80포트와 HTTPS 443포트를 열어주고, NextJS프로젝트를 올리기 위해 3000포트도 열어주었습니다.

80이나 443포트로 들어오는 요청을 3000포트로 포워딩해주면 브라우저로 NextJs프로젝트를 볼 수 있습니다.

 

3. SSH로 EC2 컴퓨터에 접속해서 nodejs, pnpm 설치

SSH로 EC2 연결하는 과정은 AWS에서 EC2연결 -> SSH 클라이언트 방법 참고

 

원격으로 접속하는 것에 성공했으면, nodejs웹사이트 -> download -> nvm 다운로드 코드

// nvm 설치하는 코드
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash

// nvm 실행하는 코드
. ~/.nvm/nvm.sh

// nodejs 설치
nvm install 20.11.0

// pnpm 설치
npm install -g pnpm

 

nodejs버전 같은 경우는 프로젝트 가서 node --version하면 현재 버전 확인 가능

그 버전으로 다운로드 받아줬고, 이건 각자 버전대로 다운받으면 됩니다.

 

저는 현재 프로젝트에서 pnpm사용중이기 때문에 pnpm 설치 했습니다.

 

4. 프로젝트 설치

// git 설치
sudo yum install git -y

// 프로젝트 클론 받기
git clone 프로젝트 github 주소

// 프로젝트 폴더로 이동
cd 레포지토리 이름

// 의존성 설치
pnpm install

결과화면 !

 

5. 프로젝트 빌드

// build
pnpm build

 

 

저는 이때, 빌드 과정에서 멈춰서 확인해보니 CPU 사용량이 이미 100%였기 때문에, 인스턴스 유형을 t2.micro->t2.small로 업그레이드 해줬습니다. :)

 

 

5분도 안걸려서 빌드성공!

 

6. pm2를 설치하고, pm2에서 next를 실행

// pm2추가
pnpm add pm2 -g

// pm2에서 nextjs실행
pm2 start pnpm --name "nextjs-app" -- start

 

이때 pnpmp add pm2 -g에서

The configured global bin directory "~/.local/share/pnpm/global" is not in PATH

이런 오류가 뜬다면 home 디렉토리로 가서 PATH 설정해줘야 합니다.

// vi .npmrc 밑에 내용 넣고 :wq
global-bin-dir = ~/.local/share/pnpm/global

// 홈디렉토리에서
echo 'export PATH=$PATH:~/.local/share/pnpm/global' >> ~/.bashrc
source ~/.bashrc

// pm2 설치
pnpm add pm2 -g

// 이걸로도 안되면, ~/.local/share/pnpm/global들어가서 pm2디렉토리 위치찾아서, PATH경로 다시 재설정하고 실행하시면 됩니다.
// 저같은 경우
// export PATH=$PATH:~/.local/share/pnpm/global/5/node_modules/bin 로 설정해야 가능했습니다.

// pm2 -v 를 통해 설치 확인!

 

pm2에서 실행되면 이런 화면이 뜹니다!

 

7. nginx 설치하고, 포트포워딩

// nginx 설치
sudo yum install nginx

// nginx.conf 파일 수정
// 80포트로 들어왔을 때 3000포트로 포트포워딩 해줘야 함
sudo vi /etc/nginx/nginx.conf

 

이때 원래 nginx.conf 파일 내용은 그냥 모두 지우면 된다.

(만약, 모두 지우기 좀 찝찝하다면 cp nginx.conf nginxOrigin.conf 해서 복사해놓는거 추천)

 

그리고 nginx.conf파일을 다음과 같이 설정한다.

events {
        worker_connections 1024;
}

http {
        server {
                listen 80;

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

 

코드 보면 80 포트로 들어오면, 3000으로 리워딩 해주는 걸 볼 수 있다.

 

이후

sudo systemctl restart nginx

 

를 통해 재시작 해주면 끝!

 

배포완료 :)

 

+) 추가로 환경변수 설정하는 법 (수정)

// 프로젝트 폴더로 이동 후
pm2 ecosystem

// ecosystem.config.js 파일이 생성 된 후, 파일 내용 삭제 후 다음과 같이 수정

module.exports = {
  apps: [
    {
      name: 'nextjs-app',  // pm2에서 실행하는 프로젝트 이름
      script: 'npm',  // Next.js 실행 명령어 (pnpm 사용 시 'pnpm'으로 변경)
      args: 'start',  // start 명령어로 실행 (Next.js 배포용 명령어)
      env: {
        NODE_ENV: 'production',
        API_URL: 'https://your-api.com',  // 예시 환경 변수
        SECRET_KEY: 'your-secret-key',    // 예시 환경 변수
      },
    },
  ],
};

 

ecosystem을 이용해서 환경변수 적용하려고 몇시간동안 해보았지만 ..

계속 적용 안돼서 방법을 바꿔줬습니다.

 

프로젝트 폴더에 vi .env로 환경변수 파일 만들고, 기존 프로젝트 환경변수 넣듯이

NEXT_PUBLIC_API_URL = 'http://example.com'

 

이렇게 넣고, pnpm 빌드 후 start 해줬더니 성공!

 

+) 가비아에서 도메인 사고, AWS의 Route 53이용해서 도메인 연결완료!

도메인 사고 연결하는 과정은 인터넷에 많이 나와있어서 따로 과정을 올리진 않겠습니다 :)

< 참고한 블로그 >

https://velog.io/@ssssujini99/Web-AWS-Route53%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-%EB%8F%84%EB%A9%94%EC%9D%B8-%EC%97%B0%EA%B2%B0%ED%95%98%EA%B8%B0

[Web/AWS] AWS Route53을 이용하여 도메인 연결