React + FastAPI로 웹 게임 만들기 #4 - Render + Vercel 배포

🚀 배포

React + Python FastAPI로
웹 게임 만들기 #5

Render + Vercel로 배포해서 누구나 접속 가능하게 만들기

2026.04.23  ·  Render · Vercel · 배포

📋 목차

1. 배포가 뭔지, 왜 필요한지
2. 전체 배포 구조
3. 백엔드 배포 — Render
4. 프론트엔드 배포 — Vercel
5. 겪었던 오류들
6. 완성된 링크 모음

1 배포가 뭔지, 왜 필요한지

지금까지 만든 게임은 내 컴퓨터에서만 돌아간다. npm run dev로 켠 서버는 내 PC에만 있고, 다른 사람은 접속할 방법이 없다.

배포(Deploy)는 내 컴퓨터에 있는 코드를 인터넷 서버에 올려서 누구나 접속 가능하게 만드는 것이다.

💡

로컬 vs 배포 차이
로컬: 내 PC에서만 실행. 주소가 localhost:5173
배포: 인터넷 서버에서 실행. 주소가 https://neon-runner.vercel.app
배포하면 PC가 꺼져도 서버는 계속 돌아가고, 전 세계 누구나 접속할 수 있다.

2 전체 배포 구조

프론트엔드와 백엔드를 각각 다른 서비스에 올렸다. 둘 다 무료다.

⚛️

React

Vercel에 배포

⟷

🐍

FastAPI

Render에 배포

⟷

📄

scores.json

Render 서버에 저장

⚠️

왜 따로 올리나?
Vercel은 React 같은 정적 파일 배포에 특화되어 있고, Render는 Python 서버 실행에 특화되어 있다. 각자 잘하는 걸 맡긴 거다. 둘 다 GitHub 연동이 되어서 코드를 push하면 자동으로 배포된다.

3 백엔드 배포 — Render

FastAPI 서버를 Render에 올리는 과정이다. Render는 GitHub 저장소를 연결하면 자동으로 Python 환경을 만들어서 서버를 띄워준다.

먼저 배포에 필요한 파일 두 개를 만들었다.

backend/requirements.txt

fastapi
uvicorn

💡

requirements.txt가 뭔가?
이 프로젝트에서 필요한 Python 패키지 목록이다. Render가 서버를 만들 때 이 파일을 보고 필요한 패키지를 자동으로 설치한다. 로컬에서 pip install 로 설치한 것들을 여기에 적어두면 된다.

그 다음 Render에서 설정한 값들이다.

1

render.com → GitHub 로그인 → New Web Service

GitHub 저장소 neon-runner 선택

2

설정 입력

Name: neon-runner-backend
Language: Python 3
Root Directory: backend
Build Command: pip install -r requirements.txt
Start Command: uvicorn main:app --host 0.0.0.0 --port $PORT
Instance Type: Free

3

Create Web Service → 배포 완료

배포가 끝나면 아래 주소가 생긴다:
https://neon-runner-backend-1spw.onrender.com

백엔드 주소가 생기면 App.jsx에서 API 주소를 바꿔줬다.

frontend/src/App.jsx

// 기존 — 내 PC 주소
const API = 'http://127.0.0.1:8000'

// 변경 — Render 서버 주소
const API = 'https://neon-runner-backend-1spw.onrender.com'

⚠️

Render 무료 플랜 주의사항
무료 플랜은 15분 동안 요청이 없으면 서버가 잠든다. 잠든 상태에서 처음 요청이 오면 50초 정도 걸린다. 첫 점수 등록이 느릴 수 있는데 그냥 기다리면 된다.

4 프론트엔드 배포 — Vercel

React 프로젝트를 Vercel에 올리는 건 훨씬 간단했다. GitHub 저장소 연결하고 폴더만 지정하면 끝이다.

1

vercel.com → GitHub로 가입/로그인

GitHub 계정으로 바로 가입 가능하다.

2

Add New → Project → neon-runner 선택

GitHub 저장소 목록에서 neon-runner 찾아서 Import

3

Root Directory 설정

Root Directory: frontend 입력
Framework Preset: Vite 자동 감지됨

4

Deploy 클릭 → 완료!

1~2분 후 배포 완료. 주소 자동 생성:
https://neon-runner-taupe.vercel.app

✅

앞으로 코드 수정하면?
git push만 하면 Vercel이랑 Render 둘 다 자동으로 재배포된다. 따로 뭔가 할 필요 없다.

5 겪었던 오류들

🔴 오류 1 — requirements.txt 파일 없음

Render가 pip install -r requirements.txt 명령어를 실행했는데 파일이 없어서 빌드가 실패했다. 처음에 파일을 루트 폴더에 만들었는데 backend 폴더 안에 있어야 했다. 파일을 올바른 위치로 이동하고 다시 push해서 해결했다.

해결 — PowerShell

# 잘못된 위치의 파일을 backend 폴더로 이동
move requirements.txt backend\requirements.txt
git add .
git commit -m "fix: requirements.txt backend 폴더로 이동"
git push

🔴 오류 2 — Build Command 입력이 안 됨

Render UI에서 Root Directory에 backend를 입력하면 Build Command 앞에 backend/ $가 자동으로 붙는다. 처음엔 이게 뭔지 몰라서 계속 지우려고 했는데 Render가 자동으로 붙여주는 접두사라 건드리면 안 됐다. 그냥 명령어만 입력하면 됐다.

🔴 오류 3 — CORS 오류 (점수 저장이 안 됨)

배포 후에 점수 등록을 했는데 브라우저 콘솔에 CORS 오류가 났다. 로컬에서는 localhost:5173만 허용했는데 Vercel 주소가 달라서 막혔다. main.py에서 CORS 설정을 allow_origins=["*"]로 바꿔서 해결했다.

backend/main.py — CORS 수정

# 기존 — localhost만 허용
allow_origins=["http://localhost:5173"]

# 변경 — 모든 주소 허용
allow_origins=["*"]

6 완성된 링크 모음

배포가 끝나고 나니까 실제로 주소가 생겼다. 아래 링크들로 직접 접속해서 확인할 수 있다.

🎮 게임 플레이

https://neon-runner-taupe.vercel.app

누구나 이 주소로 접속해서 게임할 수 있어요!

🎮

Neon Runner — 게임 플레이

https://neon-runner-taupe.vercel.app

React + Vite로 만든 게임 화면. Vercel에 배포됨.

프론트엔드

🏆

리더보드 API

https://neon-runner-backend-1spw.onrender.com/leaderboard

FastAPI 서버. 점수 저장 및 리더보드 조회. Render에 배포됨.

백엔드

📄

API 문서 (자동 생성)

https://neon-runner-backend-1spw.onrender.com/docs

FastAPI가 자동으로 만들어주는 API 문서. 직접 테스트도 가능.

Swagger

🐙

GitHub 소스코드

https://github.com/jisun22/neon-runner

전체 소스코드. frontend + backend 구조.

GitHub

---

• 완료 requirements.txt 작성
• 완료 Render로 FastAPI 백엔드 배포
• 완료 App.jsx API 주소 Render로 변경
• 완료 Vercel로 React 프론트엔드 배포
• 완료 누구나 접속 가능한 주소 생성

🎉 시리즈 완성!

처음에 폴더 만드는 것부터 시작해서 배포까지 전부 했다.

React, Canvas, Python, FastAPI, Git, Render, Vercel 다 써봤다.

이 시리즈의 모든 소스코드는
github.com/jisun22/neon-runner 에서 볼 수 있어요!