백엔드, 프론트엔드 로컬 연동 설정 및 검증 진행

2025. 4. 26. 22:51·기술블로그-Flask편

🚀 실행 방법

✅ 1. 백엔드 실행 (Flask)

cd backend/test_form-main

# 가상환경 생성
python -m venv venv
source venv/bin/activate  # 윈도우: venv\Scripts\activate

# 패키지 설치
pip install -r requirements.txt

# Flask 실행
export FLASK_APP=run.py   # 윈도우: set FLASK_APP=run.py
flask run
  • 접속: http://127.0.0.1:5000

✅ 2. 프론트엔드 실행 (React + Vite)

cd frontend/form-front-main/form

# 패키지 설치
npm install

# 개발 서버 실행
npm run dev
  • 접속: http://127.0.0.1:5173 (Vite 기본 포트)

⚡️ 연동 설정

프론트엔드에서 API 호출 시 API_BASE 설정 확인 필요!

const API_BASE = "http://127.0.0.1:5000/api";
  • 프론트 src/ApiContext.jsx 또는 환경변수(.env) 파일에서 API 주소 설정하는지 확인해보세요.

🎯 정리

구분경로실행 명령어
백엔드 backend/test_form-main/ flask run
프론트 frontend/form

'기술블로그-Flask편' 카테고리의 다른 글

Flask 백엔드 배포 & CORS 문제 해결기 (AWS EC2 + DuckDNS)  (0) 2025.04.27
백엔드 내부(admin용) 페이지(시작단계 확인)  (0) 2025.04.26
특정파일만 git push 하고싶을경우 (stash 활용)  (0) 2025.04.25
Scripts 파일 ignore됬을때 대처법 (.gitignore)  (0) 2025.04.25
Flask Static 폴더를 활용한 이미지 관리 가이드  (0) 2025.04.25
'기술블로그-Flask편' 카테고리의 다른 글
  • Flask 백엔드 배포 & CORS 문제 해결기 (AWS EC2 + DuckDNS)
  • 백엔드 내부(admin용) 페이지(시작단계 확인)
  • 특정파일만 git push 하고싶을경우 (stash 활용)
  • Scripts 파일 ignore됬을때 대처법 (.gitignore)
Chansman
Chansman
안녕하세요! 코딩을 시작한 지 얼마 되지 않은 초보 개발자 찬스맨입니다. 이 블로그는 제 학습 기록을 남기고, 다양한 코딩 실습을 통해 성장하는 과정을 공유하려고 합니다. 초보자의 눈높이에 맞춘 실습과 팁, 그리고 개발하면서 겪은 어려움과 해결 과정을 솔직하게 풀어내려 합니다. 함께 성장하는 개발자 커뮤니티가 되기를 바랍니다.
  • Chansman
    찬스맨의 프로그래밍 스토리
    Chansman
  • 전체
    오늘
    어제
    • 분류 전체보기 (798)
      • Python (32)
      • 프로젝트 (113)
      • 과제 (25)
      • Database (40)
      • 멘토링 (11)
      • 특강 (37)
      • 기술블로그 (41)
      • 기술블로그-Fastapi편 (33)
      • 기술블로그-Django편 (154)
      • 기술블로그-Flask편 (36)
      • AI 분석 (5)
      • HTML & CSS (31)
      • JavaScript (17)
      • AWS_Cloud (21)
      • 웹스크래핑과 데이터 수집 (14)
      • Flask (42)
      • Django (77)
      • Fastapi (16)
      • 연예 (14)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    college reunions
    travel ban
    homebartrend
    btsdischarge
    titaniumcase
    hotcoffeecase
    bts
    life reflection
    smartphonedurability
    youngprofessionals
    btscomeback
    americaparty
    chatgpterror
    americanlaw
    trumpmuskclash
    basalcellcarcinoma
    lawsuitculture
    self-growth
    뷔
    urbantrends
    livebroadcast
    newpoliticalparty
    classaction
    btsreunion
    RM
    gpterror
    global politics
    remittance
    btsjungkook
    chinanightlife
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
Chansman
백엔드, 프론트엔드 로컬 연동 설정 및 검증 진행
상단으로

티스토리툴바