[Docker] React Docker 빌드 및 실행 방법

1. React 앱 빌드 및 Flask에서 제공하기

Flask는 React 앱을 정적 파일로 서빙할 수 있습니다. 이를 위해 React 앱을 먼저 빌드해야 합니다.

React 앱 빌드

cd frontend  # React 프로젝트 디렉토리
npm install
npm run build

결과물은 frontend/build 디렉토리에 생성됩니다.

---

2. Flask에서 React 앱 서빙

Flask에서는 React의 build 폴더를 정적(static) 및 템플릿(html)으로 서빙하도록 설정합니다.

예시로 3005번 포트를 사용하겠습니다.

예시: app.py

 

from flask import Flask, send_from_directory
import os

app = Flask(__name__, static_folder="frontend/build", static_url_path='')

@app.route('/')
def serve():
    return send_from_directory(app.static_folder, 'index.html')

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=3005)

이 구조는 Flask가 React 정적 파일을 프론트엔드로 제공하고, 필요한 경우 백엔드 API도 같은 서버 내에서 처리하는 방식입니다.

---

3. Dockerfile 통합 (Flask + React)

Flask와 React를 하나의 Dockerfile로 통합하려면 React 앱 빌드와 정적 파일 복사를 포함해야 합니다.

예시: 프로젝트 루트의 Dockerfile

# 1단계: React 빌드
FROM node:18 AS build-stage

WORKDIR /app
COPY frontend ./frontend
WORKDIR /app/frontend
RUN npm install
RUN npm run build

# 2단계: Flask 백엔드
FROM python:3.11-slim

WORKDIR /app

# Python 의존성 설치
COPY requirements.txt ./
RUN pip install --no-cache-dir -r requirements.txt

# Flask 코드 복사
COPY . .

# React 빌드 결과 복사
COPY --from=build-stage /app/frontend/build ./frontend/build

# Flask 실행
EXPOSE 3005
CMD [ "python", "app.py" ]

 

---

4. requirements.txt 예시

Flask 및 필요 라이브러리를 정의해야 합니다

 

Flask
gunicorn

---

5. Docker 빌드 및 실행

docker build -t flask-react-app .
docker run -d -p 3005:3005 flask-react-app

 

---

요약 체크리스트

항목	설명
React 빌드	npm run build 후 build/ 생성
Flask 정적 파일 경로 설정	static_folder="frontend/build" 지정
Dockerfile 구성	multi-stage: Node → Python
포트 설정	Flask는 3005번(예시)에서 실행
실행 명령어	docker run -p 3005:3005

---

선택적 개선

• nginx를 별도 컨테이너로 구성하여 정적 파일만 서빙하고 Flask는 API만 담당하도록 분리할 수도 있음.
• 도커 컴포즈(docker-compose) 를 사용하면 React와 Flask를 각각의 서비스로 분리 관리 가능.