웹 개발 기초부터 실무까지 #7 - 풀스택 프로젝트 배포 (Netlify + Render + MongoDB Atlas)

아래 글은 “웹 개발 기초부터 실무까지” 시리즈의 일곱 번째 글입니다. 이번에는 풀스택 프로젝트를 실제 배포하는 과정을 다룹니다.
우리가 만든 React + Express + MongoDB 기반의 To-Do 리스트 웹앱을 클라우드 환경에서 서비스할 수 있도록 배포하는 방법을 알아보겠습니다.

 

1. 배포 개요

1-1. 배포란?

• 개발자가 만든 웹 애플리케이션을 실제 사용자들이 사용할 수 있도록 서버에 올리는 과정
• 프론트엔드와 백엔드, 데이터베이스를 각각 배포해야 함
• 배포 후에는 도메인 설정, HTTPS 적용, 성능 최적화 등을 고려해야 함

1-2. 배포할 서비스 개요

• 프론트엔드(React) → Netlify(Vercel) 사용
• 백엔드(Express) → Render 사용
• 데이터베이스(MongoDB) → MongoDB Atlas 사용 (클라우드 MongoDB)

---

2. MongoDB Atlas 설정 (클라우드 데이터베이스)

2-1. MongoDB Atlas 계정 생성

1. MongoDB Atlas 사이트에 접속 후 가입
2. Free Tier(무료 플랜)로 새 프로젝트 생성
3. Database Deployment에서 Shared Cluster 선택 후 Create
4. Network Access에서 0.0.0.0/0으로 설정하여 외부 접속 허용
5. Database Users에서 사용자 계정 추가 후, 비밀번호 저장해두기

2-2. MongoDB URI 확인 및 백엔드 적용

1. Clusters → Connect 클릭 → Driver 선택 → Connection String 복사

   mongodb+srv://<username>:<password>@cluster0.mongodb.net/todo-app?retryWrites=true&w=majority
   

2. 백엔드의 .env 파일 수정

   MONGO_URI=mongodb+srv://your-username:your-password@cluster0.mongodb.net/todo-app
   PORT=5000
   

3. 서버에서 MongoDB 연결 확인

   node server.js
   

---

3. 백엔드(Express) 배포 (Render)

3-1. Render 계정 생성 및 GitHub 연동

1. Render 가입 후 로그인
2. New Web Service 클릭 → GitHub와 연결
3. todo-app 백엔드 저장소 선택 후 배포 설정

3-2. Render 배포 설정

• Environment: Node
• Build Command: npm install
• Start Command: node server.js
• Environment Variables 추가:
  • MONGO_URI (MongoDB Atlas 연결 주소)
  • PORT (5000)

3-3. 배포 후 API 확인

• 배포가 완료되면, Public URL 확인 가능
• https://your-backend.onrender.com/api/todos 테스트

---

4. 프론트엔드(React) 배포 (Netlify 또는 Vercel)

4-1. Netlify로 React 배포

1. Netlify 가입 및 GitHub 연동
2. New Site → GitHub에서 프로젝트 선택
3. Build 설정:
   • Build Command: npm run build
   • Publish Directory: frontend/build

4-2. 환경 변수 설정

• Netlify → Settings → Environment Variables
  • REACT_APP_API_URL=https://your-backend.onrender.com

4-3. 로컬 .env 파일 업데이트

REACT_APP_API_URL=https://your-backend.onrender.com

4-4. React 빌드 및 로컬 테스트

npm run build
serve -s build

---

5. 최종 배포 테스트

5-1. 프론트엔드에서 API 연결 확인

• Netlify에서 배포된 URL에 접속하여 할 일 추가/삭제가 정상 작동하는지 테스트

5-2. 배포된 백엔드 API 테스트

• https://your-backend.onrender.com/api/todos 확인

5-3. HTTPS 및 성능 최적화

• Netlify에서는 자동으로 HTTPS 적용
• 이미지 최적화 및 코드 압축 (npm run build 시 자동 처리)

---

6. 마무리 및 다음 글 예고

이번 글에서는 MongoDB Atlas, Render, Netlify를 활용한 풀스택 프로젝트 배포 방법을 다뤘습니다.
배포 후에도 지속적으로 서버 로그 확인, 에러 대응, 성능 최적화 등을 진행하면서 유지보수를 해야 합니다.

다음 글에서는 웹 애플리케이션 성능 최적화 및 보안 강화 방법을 다뤄볼 예정입니다.

다음 글 예고
“웹 개발 시리즈 #8 – 웹 애플리케이션 성능 최적화 및 보안 강화 방법”

질문이나 추가로 다뤄줬으면 하는 내용이 있다면 댓글로 남겨주세요! 🚀