💪온핏(on-fit) 첫 CI/CD 배포기 1편

EC2에 Next.js 올리기 (수동 배포)

온핏 프로젝트에서 기능이 어느 정도 완성되자마자 가장 먼저 떠오른 건 딱 하나였다.

“이제… 진짜 서비스처럼 주소 찍고 접속해보고 싶다.”

이번 글은 Next.js + Supabase 기반 온핏(on-fit) 프로젝트를 AWS EC2에 처음 배포한 과정을 정리한 기록이다.

특히 프리티어 한도 안에서 어떻게 설정했는지, 그리고 GitHub Actions로 CI/CD까지 연결하면서 어떤 삽질을 했는지 단계별로 적어본다.

---

1. 전체 아키텍처 그림

이번 배포의 목표 아키텍처는 아주 심플했다.

• 클라이언트/서버: Next.js 16 (App Router, Turbopack)
• DB/Auth: Supabase (PostgreSQL + Auth)
• 인프라: AWS EC2 (Ubuntu, t2.micro / 프리티어)
• 프로세스 관리: PM2
• Reverse Proxy + HTTPS: Nginx + Certbot
• CI/CD: GitHub Actions → EC2 SSH → git pull + build + pm2 restart

즉, 그림으로 그리면:

GitHub(dev/main) ──▶ GitHub Actions ──SSH──▶ EC2
                                     │
                                     ├─ pm2: onfit (Next.js)
사용자 브라우저 ──▶ onfit.today ──DNS──▶ EC2 ──Nginx──▶ localhost:3000 (Next)

---

2. EC2 인스턴스 생성

프리티어만 쓸 수 있어서 가장 기본적인 세팅으로 시작했다.

• 리전: ap-northeast-1 (도쿄) – 한국이랑 가까운 리전
• 인스턴스 타입: t2.micro (프리티어 가능)
• AMI: Ubuntu Server 22.04 LTS
• 키페어: onfit.pem (추후 GitHub Actions에서 사용할 핵심)

보안 그룹은 처음에 이렇게 열어뒀다.

• 22번 포트(SSH): 내 IP만 허용
• 80번 포트(HTTP): 0.0.0.0/0
• 3000번 포트: 0.0.0.0/0 (처음엔 직접 접속 테스트 위해, 나중에 Nginx 붙인 후엔 안 써도 됨)

인스턴스가 뜨고 나면 퍼블릭 IP를 하나 받게 된다.

예를 들어:

EC2 Public IP: 35.74.238.231  (예시)

---

3. SSH 접속: pem 파일로 서버에 들어가기

맥에서 pem 파일 권한을 먼저 조정한다.

chmod 400 ~/Downloads/onfit.pem

그리고 아래처럼 접속:

ssh -i ~/Downloads/onfit.pem ubuntu@35.74.238.231

처음 접속할 때는 이런 메시지가 뜬다.

The authenticity of host '35.74.238.231 (...)' can't be established.
Are you sure you want to continue connecting (yes/no/[fingerprint])?

여기서 yes 치면 된다.

---

4. 서버 기본 세팅 (Node, git, nginx, pm2)

4-1. 패키지 업데이트

sudo apt update
sudo apt upgrade -y

4-2. Node.js 20 설치

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs
node -v   # v20.x 확인
npm -v

4-3. git & nginx & certbot 설치

sudo apt install -y git nginx
sudo apt install -y certbot python3-certbot-nginx

4-4. pm2 글로벌 설치

sudo npm install -g pm2
pm2 -v

---

5. 프로젝트 코드 가져오기

이제 EC2 안에서 GitHub 레포를 클론했다.

cd ~
git clone https://github.com/Jojunhyeong/on-fit.git
cd on-fit/on-fit-next

온핏 레포 구조가 대략 이런 느낌이다.

on-fit/
  ├─ on-fit-next/   # Next.js 프론트 + 서버
  └─ ... (기타)

---

6. 서버에서 .env 세팅

중요한 건 환경변수는 절대 GitHub에 올리지 않는다는 점.

그래서 EC2 안에서 직접 .env 파일을 만들었다.

cd ~/on-fit/on-fit-next
nano .env

그리고 로컬에서 사용하던 값들을 그대로 넣어줬다. 예시:

NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=...
SUPABASE_SERVICE_ROLE_KEY=...
NEXT_PUBLIC_SITE_URL=https://onfit.today
...

저장(Ctrl+O) 후 nano 종료(Ctrl+X).

---

7. 수동 빌드 & 실행 테스트

먼저 의존성 설치:

npm install --omit=dev

빌드:

npm run build

에러 없이 잘 끝나면, 일단 바로 실행해본다.

npm start   # 또는 package.json의 start 스크립트

서버에서 바로 확인:

curl -I http://127.0.0.1:3000

200 OK가 떨어지면, 브라우저에서 http://EC2_PUBLIC_IP:3000 으로 접속해서 확인했다.

여기까지가 “수동 배포”의 첫 단계였다.

---

8. pm2로 프로세스 데몬화

npm start를 터미널에서 직접 돌리면 세션 종료 시 서버도 같이 죽는다.

그래서 pm2로 Next.js를 데몬으로 띄웠다.

cd ~/on-fit/on-fit-next

pm2 start npm --name "onfit" -- start
pm2 status

이렇게 뜨면 성공:

┌─────┬───────┬────────┬─────┬────────┬────────┬────────┐
│ id  │ name  │ mode   │ ... │ status │ cpu    │ memory │
├─────┼───────┼────────┼─────┼────────┼────────┼────────┤
│ 0   │ onfit │ fork   │ ... │ online │ 0.1%   │ 80MB   │
└─────┴───────┴────────┴─────┴────────┴────────┴────────┘

서버 재부팅 후에도 자동으로 뜨게 하려면:

pm2 save
pm2 startup
# 출력되는 명령 한 줄을 sudo로 실행

이제 이걸 정식 도메인(onfit.today) + HTTPS로 묶고,

그 위에 GitHub Actions로 CI/CD 자동화를 올려야 한다.