백엔드(Python) + 프로트엔드(Next.js) 폴더구조

✅ gpt 추천 폴더 구조

/my-app
├── /backend        # Python 백엔드 (FastAPI, Django, Flask 등)
│   ├── /app       # 주요 애플리케이션 코드
│   ├── /models    # 데이터베이스 모델
│   ├── /routes    # API 엔드포인트
│   ├── /services  # 비즈니스 로직
│   ├── main.py    # 앱 실행 파일 (FastAPI 기준)
│   ├── requirements.txt  # Python 패키지 목록
│   └── Dockerfile # 백엔드용 도커 파일 (선택 사항)
│
├── /frontend       # Next.js 프론트엔드
│   ├── /components # 재사용 가능한 컴포넌트
│   ├── /pages      # Next.js 페이지
│   ├── /public     # 정적 파일
│   ├── /styles     # 스타일 관련 파일
│   ├── /utils      # 유틸리티 함수
│   ├── package.json  # 프론트엔드 패키지 설정
│   ├── next.config.js # Next.js 설정 파일
│   ├── yarn.lock   # Yarn 종속성 파일
│   └── Dockerfile  # 프론트엔드용 도커 파일 (선택 사항)
│
├── /nginx          # Nginx 리버스 프록시 설정 (선택 사항)
│   ├── default.conf
│   └── Dockerfile
│
├── docker-compose.yml # 전체 애플리케이션을 도커로 구성할 경우
└── README.md      # 프로젝트 설명 파일

 

• backend 폴더에서 Python 기반 백엔드를 개발하고 API를 제공
• frontend 폴더에서 Next.js 기반의 프론트엔드를 개발
• 필요한 경우 nginx를 사용하여 리버스 프록시 설정
• docker-compose.yml을 이용해 백엔드와 프론트엔드를 함께 실행 가능

 

 

 

📍 Nginx 리버스 프록시 설정이란?

• Next.js (프론트엔드) → http://localhost:3000
• FastAPI (백엔드) → http://localhost:8000
• Nginx를 통해 → http://myapp.com 에서 접근 가능하게 설정
  ( 프론트엔드와 백엔드가 각각 다른 포트에서 실행되더라도 하나의 도메인으로 접근 가능 )

장점
⚠ 브라우저는 보안 정책상 프론트엔드와 백엔드가 다른 도메인/포트를 사용할 경우 →  요청 차단!
1. CORS 문제 해결
Nginx가 리버스 프록시 역할을 하면 같은 도메인에서 요청하는 것처럼 처리하여 문제 해결!

2. 로드 밸런싱 (부하 분산)
여러 개의 백엔드 서버에 요청을 분산시켜 성능을 향상

3. 보안 강화
직접 백엔드에 접근하지 못하도록 보호SSL(HTTPS) 적용 가능

 

 

 

 

 

 

설정방법

1️⃣ 백엔드 (FastAPI) 설정: backend/Dockerfile

# Python 기반의 FastAPI 백엔드 이미지 생성
FROM python:3.10

WORKDIR /app

COPY requirements.txt .

RUN pip install --no-cache-dir -r requirements.txt

COPY . .

CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000", "--reload"]

 

🔹 FastAPI 실행 코드 (backend/main.py)

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def read_root():
    return {"message": "Hello from FastAPI!"}

 

🔹 backend/requirements.txt 생성

fastapi      # 웹 프레임워크
uvicorn      # FastAPI 서버 실행
SQLAlchemy   # ORM (Object Relational Mapping)
asyncmy	     # MySQL 비동기 드라이버
alembic	     # 데이터베이스 마이그레이션 도구
pymysql	     # (선택적) MySQL 동기 드라이버

* 비동기 방식만 사용할 거라면 pymysql 필요 없음

  alembic을 실행할 때 오류가 난다면 pymysql 설치 (SQLAlchemy가 동기 드라이버를 요구할 수도 있음)

 

 

터미널에서 설치 명령어 

pip install fastapi uvicorn sqlalchemy asyncmy alembic

 

 

 

 

 

2️⃣ 프론트엔드 (Next.js) 설정: frontend/Dockerfile

# Node.js 기반의 Next.js 프론트엔드 이미지 생성
FROM node:18

WORKDIR /app

COPY package.json yarn.lock ./

RUN yarn install

COPY . .

RUN yarn build

CMD ["yarn", "start"]

 

 

 

 

 

3️⃣ Nginx 설정: nginx/default.conf 파일

server {
    listen 80;

    server_name myapp.com;

    location / {
        proxy_pass http://frontend:3000;  # Next.js 프론트엔드
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location /api/ {
        proxy_pass http://backend:8000;  # FastAPI 백엔드
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

 

 

 

 

 

4️⃣ Docker 환경에서 실행:  Dockerfile

FROM nginx:latest
COPY default.conf /etc/nginx/conf.d/default.conf

 

 

 

 

 

5️⃣ docker-compose.yml 추가

version: '3.8'

services:
  backend:
    build: ./backend
    container_name: backend
    ports:
      - "8000:8000"
    volumes:
      - ./backend:/app
    networks:
      - app-network

  frontend:
    build: ./frontend
    container_name: frontend
    ports:
      - "3000:3000"
    depends_on:
      - backend
    networks:
      - app-network

  nginx:
    build: ./nginx
    container_name: nginx
    ports:
      - "80:80"
    depends_on:
      - frontend
      - backend
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

 

Nginx가 프록시 역할을 하여,

• 프론트엔드 요청 (http://myapp.com/) → Next.js (http://frontend:3000)로 전달
• API 요청 (http://myapp.com/api/) → FastAPI (http://backend:8000)로 전달

 

 

 

 

✅ 실행방법

 

도커 컴포즈 실행

Docker를 통해 배포

docker-compose up --build

 

실행 확인

docker ps

 

브라우저에서 접속

예시: http://myapp.com/