[MEMO] 실사용 모드

1. 환경 설정 (.env) 최적화

실서비스 모드로 전환할 때 가장 먼저 할 일은 주소 설정입니다. localhost는 "내 컴퓨터"에서만 작동하므로, 외부 기기가 접속할 수 있도록 실제 IP 주소로 고정해야 합니다.

• 백엔드/AI 서버 (.env): CORS_ORIGINS를 *로 열어주거나, 접속할 기기의 IP를 명시합니다.
• 프론트엔드 (.env.local): NEXT_PUBLIC_API_BASE_URL 등을 노트북의 실제 IP로 설정합니다.

---

2. 백엔드 & AI 서버 (FastAPI/Uvicorn)

파이썬 기반 서버인 FastAPI를 실환경에서 돌릴 때는 --reload 옵션을 반드시 제거해야 합니다.

2-1 실행 명령어

uvicorn meat_backend.main:app --host 0.0.0.0 --port 8000

2-2 핵심 포인트

• --host 0.0.0.0: 이 설정이 핵심입니다. 특정 IP가 아니라 "모든 네트워크 인터페이스"를 통해 들어오는 접속을 허용하겠다는 의미입니다. 이 설정을 안 하면 외부(휴대폰)에서 접속할 수 없습니다.
• --reload 제거: 개발 모드에서는 코드를 수정하면 서버가 자동으로 꺼졌다가 켜지지만, 실서비스에서는 성능 저하와 예기치 않은 서버 중단을 막기 위해 이 기능을 끕니다.

---

3. 프론트엔드 (Next.js)

Next.js는 개발 모드(dev)와 실사용 모드(start)의 구동 방식이 완전히 다릅니다.

3-1 실행 단계

1. 빌드(Build): 작성한 코드를 최적화된 파일로 변환하는 과정입니다.

   npm run build
   

2. 서버 시작(Start): 빌드된 파일을 바탕으로 실제 서비스를 가동합니다.

   npx next start -H 0.0.0.0 -p 3000
   

3-2 핵심 포인트

• Build 과정: 개발 모드에서는 브라우저가 요청할 때마다 코드를 컴파일하지만, 실사용 모드는 미리 컴파일된 정적 파일을 서빙하므로 속도가 훨씬 빠르고 안정적입니다.
• -H 0.0.0.0: 백엔드와 마찬가지로 외부 기기 접속을 허용하기 위한 호스트 설정입니다.

---

4. 네트워크 및 보안 (배포 전 필수 체크)

컴퓨터 내부가 아닌 '네트워크'를 통해 접속할 때 발생하는 문제들을 해결해야 합니다.

• 방화벽(Firewall) 해제: 윈도우나 맥의 방화벽이 특정 포트(3000, 8000, 8001)를 막고 있으면 외부 접속이 불가능합니다. 발표 중에는 방화벽을 잠시 끄는 것이 가장 확실합니다.
• 동일 네트워크(L2 통신): 노트북과 휴대폰이 반드시 같은 와이파이에 연결되어 있어야 합니다. 유선 랜과 와이파이는 IP 대역이 다를 수 있으므로 ipconfig로 주소를 대조해봐야 합니다.
• 캐시 관리: 실사용 모드로 서버를 다시 띄웠다면, 브라우저가 이전의 잘못된 설정(localhost 등)을 기억하고 있을 수 있습니다. 시크릿 모드로 접속하거나 브라우저 캐시를 삭제 후 테스트하세요.

---

요약 테이블

구분	개발 모드 (Development)	실사용 모드 (Production)
목적	빠른 수정 및 디버깅	성능 최적화 및 안정적 서비스
호스트	localhost 또는 127.0.0.1	0.0.0.0 (외부 접속 허용)
명령어 (FE)	npm run dev	npm run build 후 npm run start
명령어 (BE)	uvicorn ... --reload	uvicorn ... (reload 옵션 제거)
특징	에러 로그 상세 출력	코드 노출 최소화 및 속도 향상