📚 Week 1 후반 ~ Week 2 전체 복습용
한눈에 보는 핵심 정리
Day 5: 개발 서버 vs 프로덕션 서버
dev = 개발 모드, start = 프로덕션 모드 (둘 다 어디서든 실행 가능!)
yarn dev | yarn start | |
|---|---|---|
| 빌드 필요? | ❌ 바로 실행 | ✅ yarn build 먼저 |
| 코드 수정 반영 | 즉시 반영 (HMR) | 다시 빌드해야 반영 |
| 에러 메시지 | 친절하고 자세함 | 간략함 |
| 용도 | 개발할 때 | 사용자에게 보여줄 때 |
⚠️ "dev는 로컬, start는 서버"가 아니다!
dev는 개발 모드, start는 프로덕션 모드가 정확한 표현.
Day 6: 서버란 무엇인가?
서버 = 24시간 켜져 있으면서 요청에 응답하는 컴퓨터 (주방 건물)
| 유형 | 비유 | 특징 |
|---|---|---|
| 자체 서버 | 건물 사서 주방 직접 만듦 | 완전 제어, 관리 부담 큼 |
| AWS (클라우드) | 공유 주방 월세 | 빌려 쓰기, 스케일링 가능, 설정은 직접 |
| Vercel (서버리스) | 배달 전문 클라우드 키친 | 코드만 넘기면 끝, 자동 스케일링 |
트래픽 폭증 시 가장 빠른 대응: Vercel (자동 스케일링)
배포와 실행은 다른 단계!
| 개념 | 의미 | 비유 |
|---|---|---|
| 배포 | 빌드된 파일을 서버로 옮김 | 재료를 주방에 갖다 놓음 |
| 실행 (yarn start) | 앱 프로그램을 켬 | 가스레인지 불 켜고 영업 시작 |
Day 7: SSH란?
SSH = 멀리 있는 서버에 안전하게 접속해서 명령어를 입력하는 방법 (전화선)
접속 명령어
ssh -i my-key.pem ubuntu@13.125.200.50| 부분 | 의미 |
|---|---|
ssh | SSH 프로그램 실행 (전화기를 든다) |
-i my-key.pem | 개인 키 파일로 인증 (열쇠) |
ubuntu | 계정 이름 (서버 이름 아님!) |
@13.125.200.50 | 서버 IP 주소 (전화번호) |
인증 방식
| 위치 | 역할 | |
|---|---|---|
| 공개 키 (Public Key) | 서버에 설치 | 자물쇠 |
| 개인 키 (Private Key) | 내 컴퓨터에만 보관 | 열쇠 |
⚠️ 개인 키는 절대 Git에 올리면 안 된다!
자주 쓰는 명령어
pwd # 현재 위치
ls -la # 폴더 내용 보기
cd 경로 # 폴더 이동
cat 파일명 # 파일 내용 보기
exit # 접속 종료Day 8: pm2 / 프로세스 매니저
pm2 = 프로세스를 감시하고, 죽으면 살려주는 주방 매니저
비유 구조
| 레스토랑 | 서버 |
|---|---|
| 셰프 | 프로세스 (yarn start) |
| 음식 | 사이트 |
| 주방 매니저 | pm2 |
| 셰프가 쓰러짐 | 크래시 (에러로 프로세스 죽음) |
| 음식이 안 나옴 | 사이트 접속 불가 |
💡 "프로세스가 죽는다" = 개발자 관점
💡 "사이트가 죽는다" = 사용자 관점
→ 같은 현상을 다른 관점에서 보는 것!
pm2 없으면 생기는 문제 3가지
| 문제 | pm2 있으면 |
|---|---|
| SSH 끊으면 앱도 죽음 | ✅ 계속 살아있음 |
| 에러로 크래시 | ✅ 자동 재시작 |
| 서버 재부팅하면 날아감 | ✅ 자동으로 다시 켜짐 |
핵심 명령어
pm2 start yarn --name "prod-app" -- start -p 5008 # 앱 시작
pm2 list # 프로세스 목록
pm2 logs prod-app # 로그 보기
pm2 restart prod-app # 재시작
pm2 stop prod-app # 멈추기
pm2 delete prod-app # 삭제
pm2 startup # 서버 켜지면 pm2 자동 실행 설정
pm2 save # 현재 프로세스 명단 저장
pm2 startup= 주방 매니저 자동 출근 알람
pm2 save= 셰프 출근 명단표 저장
Day 9: Nginx / 리버스 프록시
Nginx = 요청을 받아서 알맞은 앱으로 전달해주는 홀 매니저
Nginx가 하는 일
사용자: https://my-site.com (자동으로 443번 포트)
↓
Nginx: 443번에서 대기하다가 받음
↓
localhost:5008로 전달 (포트 번호를 사용자에게 숨김)여러 앱 분배
| 사용자가 접속하는 주소 | Nginx가 보내는 곳 |
|---|---|
my-site.com | localhost:5008 (프론트엔드) |
api.my-site.com | localhost:3000 (백엔드) |
admin.my-site.com | localhost:4000 (어드민) |
리버스 프록시란?
서버를 대신해서 요청을 받아주는 대리인 (서버 내부 구조를 숨긴다)
포트 안 쳐도 되는 이유
- HTTP 기본 포트 = 80
- HTTPS 기본 포트 = 443
- 브라우저가 자동으로 기본 포트로 요청 → Nginx가 받아서 내부 포트로 전달
⚠️ Nginx는 주소를 만들어주는 게 아니다!
도메인 주소는 DNS가 만들어주고, Nginx는 들어온 요청을 알맞은 곳으로 전달하는 역할.
Day 10: 로그 확인하기
로그 = 서버에서 일어난 일의 기록 (CCTV)
꼭 기억할 것 3가지
| 핵심 | 정리 |
|---|---|
| 로그가 뭔지 | 서버에서 일어난 일의 시간순 기록 |
| 뭘 먼저 볼지 | pm2 logs (이것만 기억해도 OK) |
| 로그가 많을 때 | pm2 logs \| grep "ERROR" |
로그 확인 순서
1단계: pm2 logs → 코드 에러 확인 (대부분 여기서 해결!)
↓
2단계: Nginx error.log → 요청 전달 문제 확인
↓
3단계: 시스템 로그 → 서버 컴퓨터 자체 문제 확인| (파이프)
"왼쪽 결과에서 오른쪽 조건에 맞는 것만 골라줘"
pm2 logs | grep "ERROR" # ERROR만 보기
pm2 logs | grep "products" # 특정 페이지 관련 로그만 보기🗺️ Day 5~10 전체 구조 한눈에 보기
사용자가 my-site.com 접속
↓
[ Nginx ] (홀 매니저) — 80/443번 포트에서 대기
↓
proxy_pass → localhost:5008
↓
[ pm2 ] (주방 매니저) — 프로세스 감시·관리
↓
[ Node.js / Next.js ] (셰프) — 실제 응답 생성
↓
HTML, CSS, JS 응답
↓
사용자 화면에 사이트 표시!| 역할 | 담당 | 비유 | Day |
|---|---|---|---|
| 개발/프로덕션 모드 | dev / start | 연습 vs 본 영업 | Day 5 |
| 서버 | 컴퓨터 | 주방 건물 | Day 6 |
| 원격 접속 | SSH | 전화선 | Day 7 |
| 프로세스 관리 | pm2 | 주방 매니저 | Day 8 |
| 요청 분배 | Nginx | 홀 매니저 | Day 9 |
| 기록 확인 | 로그 | CCTV | Day 10 |
한 문장 정리:
서버(Day 6)에 SSH(Day 7)로 접속해서, pm2(Day 8)로 앱을 관리하고, Nginx(Day 9)로 요청을 분배하고, 문제가 생기면 로그(Day 10)로 원인을 찾는다.
