Node · 프론트엔드 배포

Node 프로젝트는 package.json 의 start 스크립트로 실행됩니다. 그 한 줄이 정확한지가 전부입니다.

Express

package.json

{
  "scripts": { "start": "node server.js" }
}

server.js

app.listen(process.env.PORT || 3000, '0.0.0.0');

Next.js

package.json

{
  "scripts": {
    "build": "next build",
    "start": "next start -H 0.0.0.0 -p 3000"
  }
}

-H 0.0.0.0 이 없으면 접속이 안 됩니다. 기본값이 localhost 이기 때문입니다.

React · Vue (Vite)

빌드 결과(dist/)를 서빙할 서버가 필요합니다. 개발 서버(vite)를 그대로 쓰지 마세요.

package.json

{
  "scripts": {
    "build": "vite build",
    "start": "serve -s dist -l 3000"
  },
  "dependencies": { "serve": "^14" }
}

serve 를 dependencies 에 넣어야 합니다. devDependencies 에 있으면 배포에서 빠집니다.

정적 HTML

빌드가 필요 없는 순수 HTML 이라면 이렇게 하면 됩니다.

package.json

{
  "scripts": { "start": "serve -l 3000 ." },
  "dependencies": { "serve": "^14" }
}

자주 나는 실수

증상	원인
빌드는 되는데 접속 안 됨	0.0.0.0 이 아니라 localhost 에 묶음
serve: not found	serve 가 devDependencies 에 있음
빌드 실패	node_modules 를 zip 에 넣음 (맥 바이너리는 리눅스에서 안 됨)
빈 화면	빌드 결과 폴더 이름이 다름 (dist vs build)

락파일은 넣으세요

package-lock.json 은 넣는 게 좋습니다. 버전이 고정돼 로컬과 같은 결과가 나옵니다. node_modules 와 헷갈리지 마세요 — 락파일은 넣고, node_modules 는 빼는 것입니다.

환경변수

const port = process.env.PORT || 3000;
const db = process.env.DATABASE_URL;

프론트 + 백엔드를 나눌 때

프론트를 메인에, 백엔드를 API 칸에 따로 올릴 수 있습니다. → API 서버