Full Stack React 애플리케이션 🚀 배포 (Firebase + 렌더) — 전체 배포 가이드 (2026)

DEV Community · codeek · 2026-07-19 개발(SW)

Deploying your application is one of the most exciting parts of web development. After spending hours building features, authentication, payments, and dashboards, it’s finally time to make your application accessible to everyone.

In this guide, you’ll learn how to deploy a modern full-stack application where:

⚛️ React (Vite) is hosted on Firebase Hosting
🚀 Express.js backend is deployed on Render
🗄️ PostgreSQL (Neon/Supabase or any hosted database) remains online
🔒 Environment variables stay secure
🌍 Your frontend communicates with your backend in production

By the end of this tutorial, you’ll have a production-ready deployment pipeline suitable for portfolios, personal projects, and even startup MVPs.

🏗️ Final Architecture

Users
   │
   ▼
Firebase Hosting (React)
   │
HTTPS API Requests
   │
   ▼
Render (Express API)
   │
   ▼
Database (Neon/PostgreSQL)

Enter fullscreen mode Exit fullscreen mode

Separating the frontend and backend makes your application easier to scale, maintain, and deploy independently.

📋 Prerequisites

Before starting, make sure you have:

Node.js installed
Firebase account
Render account
GitHub repository
Production database (Neon, Supabase, PostgreSQL, etc.)
React frontend
Express backend

Example project structure:

Ecommerce/
│
├── client/
│   ├── src/
│   ├── public/
│   └── package.json
│
└── server/
    ├── controllers/
    ├── routes/
    ├── middleware/
    ├── app.js
    └── package.json

Enter fullscreen mode Exit fullscreen mode

🤔 Why Firebase + Render?

This combination is perfect for modern React applications.

🔥 Firebase Hosting

Global CDN
HTTPS by default
Extremely fast
Easy deployment
Excellent for React/Vite projects

🚀 Render

Free starter tier
Automatic GitHub deployments
Environment variable support
SSL included
Great Express support

Step 1 — Prepare Your Backend

Before deployment, make sure your backend works locally.

npm install
npm run dev

Enter fullscreen mode Exit fullscreen mode

Visit:

http://localhost:5000

Enter fullscreen mode Exit fullscreen mode

Ensure your API responds correctly.

Step 2 — Configure Environment Variables

Never hardcode secrets.

Create a .env file:

PORT=5000
DATABASE_URL=your_database_url
JWT_SECRET=your_secret
STRIPE_SECRET_KEY=your_key
CLIENT_URL=http://localhost:5173

Enter fullscreen mode Exit fullscreen mode

Never commit this file.

Instead, add it to .gitignore.

.env

Enter fullscreen mode Exit fullscreen mode

Step 3 — Configure CORS

When the frontend is hosted on Firebase, Express must allow requests from that domain.

app.use(
  cors({
    origin: [
      "http://localhost:5173",
      "https://your-app.web.app",
      "https://your-app.firebaseapp.com",
    ],
    credentials: true,
  })
);

Enter fullscreen mode Exit fullscreen mode

Later you’ll replace these URLs with your production Firebase domain.

Step 4 — Push Your Backend to GitHub

Initialize Git if necessary.

git init

Enter fullscreen mode Exit fullscreen mode

Commit your project.

git add .
git commit -m "Initial deployment"

Enter fullscreen mode Exit fullscreen mode

Push to GitHub.

git push origin main

Enter fullscreen mode Exit fullscreen mode

Step 5 — Deploy Express Backend to Render

Create:

New +

Enter fullscreen mode Exit fullscreen mode

Choose:

Web Service

Enter fullscreen mode Exit fullscreen mode

Connect your GitHub repository.

Select your backend repository.

Build Command

npm install

Enter fullscreen mode Exit fullscreen mode

Start Command

npm start

Enter fullscreen mode Exit fullscreen mode

node app.js

Enter fullscreen mode Exit fullscreen mode

depending on your project.

Root Directory

If your backend lives inside:

server

Enter fullscreen mode Exit fullscreen mode

Set:

Root Directory = server

Enter fullscreen mode Exit fullscreen mode

Environment Variables

Add every variable from your .env.

Example:

DATABASE_URL
JWT_SECRET
STRIPE_SECRET_KEY
CLIENT_URL

Enter fullscreen mode Exit fullscreen mode

Render securely stores these values, so they are never committed to Git.

Step 6 — Wait for Deployment

Render will:

Clone your repository
Install dependencies
Build the application
Start the server

Eventually you’ll receive:

https://your-api.onrender.com

Enter fullscreen mode Exit fullscreen mode

Test it.

Example:

https://your-api.onrender.com/api/products

Enter fullscreen mode Exit fullscreen mode

If you receive JSON…

🎉 Congratulations! Your backend is live.

Step 7 — Update Frontend API URL

Instead of:

axios.get("http://localhost:5000/api/products");

Enter fullscreen mode Exit fullscreen mode

Use environment variables.

VITE_API_URL=https://your-api.onrender.com

Enter fullscreen mode Exit fullscreen mode

Create an Axios instance.

import axios from "axios";

export default axios.create({
  baseURL: import.meta.env.VITE_API_URL,
});

Enter fullscreen mode Exit fullscreen mode

Now your frontend automatically switches between development and production.

Step 8 — Prepare React for Production

Install Firebase CLI.

npm install -g firebase-tools

Enter fullscreen mode Exit fullscreen mode

firebase login

Enter fullscreen mode Exit fullscreen mode

Initialize hosting.

firebase init hosting

Enter fullscreen mode Exit fullscreen mode

Choose:

Existing Firebase Project
Hosting

Enter fullscreen mode Exit fullscreen mode

For the public directory enter:

dist

Enter fullscreen mode Exit fullscreen mode

When prompted:

Single Page Application?

Enter fullscreen mode Exit fullscreen mode

Choose:

Yes

Enter fullscreen mode Exit fullscreen mode

Do not overwrite index.html.

Step 9 — Build React

npm run build

Enter fullscreen mode Exit fullscreen mode

This generates:

dist/

Enter fullscreen mode Exit fullscreen mode

Your production build is ready.

Step 10 — Deploy to Firebase

firebase deploy

Enter fullscreen mode Exit fullscreen mode

Firebase provides:

https://your-project.web.app

Enter fullscreen mode Exit fullscreen mode

and

https://your-project.firebaseapp.com

Enter fullscreen mode Exit fullscreen mode

Your React application is now served globally over HTTPS.

Step 11 — Update Backend CORS

Replace:

origin: ["http://localhost:5173"];

Enter fullscreen mode Exit fullscreen mode

with:

origin: [
  "http://localhost:5173",
  "https://your-project.web.app",
  "https://your-project.firebaseapp.com",
];

Enter fullscreen mode Exit fullscreen mode

Redeploy your backend.

Step 12 — Test Everything

Visit your Firebase URL and verify:

✅ Home page
✅ Authentication
✅ Login
✅ Register
✅ Products
✅ Categories
✅ Cart
✅ Orders
✅ Stripe Checkout
✅ Protected routes
✅ Logout

Open Developer Tools.

There should be:

✅ No CORS errors
✅ No 404 errors
✅ Successful API requests

💡 Production Tips

🔒 Use HTTPS Everywhere

Both Firebase and Render provide HTTPS by default.

Never mix HTTP and HTTPS.

🔐 Keep Secrets Secure

Never expose:

JWT Secret
Stripe Secret Key
Database URL

Only variables beginning with:

VITE_

Enter fullscreen mode Exit fullscreen mode

should be exposed to the frontend.

🔄 Enable Automatic Deployments

Every push to GitHub can automatically trigger a deployment on Render, making continuous delivery effortless.

❌ Common Deployment Errors

CORS Error

Access-Control-Allow-Origin

Enter fullscreen mode Exit fullscreen mode

Fix

Add your Firebase domain to Express CORS.

API Not Found

Enter fullscreen mode Exit fullscreen mode

Check your Axios baseURL.

Blank React Screen

Usually:

npm run build

Enter fullscreen mode Exit fullscreen mode

failed.

Always build locally first.

Environment Variables Missing

Restart your Render service after updating environment variables.

Wrong Build Folder

For Vite, use:

dist

Enter fullscreen mode Exit fullscreen mode

not

build

Enter fullscreen mode Exit fullscreen mode

✅ Deployment Checklist

✅ Backend deployed
✅ Database connected
✅ Environment variables added
✅ Firebase Hosting configured
✅ React built
✅ Axios uses production URL
✅ CORS updated
✅ HTTPS enabled
✅ Everything tested

🎉 Conclusion

Congratulations!

You now have a fully deployed modern full-stack application with:

⚛️ React hosted on Firebase Hosting
🚀 Express running on Render
🗄️ PostgreSQL hosted online
🔒 Secure environment variables
🌍 Production-ready frontend/backend communication

This architecture is simple, scalable, and perfect for portfolios, personal projects, and startup MVPs.

As your application grows, you can further improve it by adding:

Custom domains
CI/CD pipelines
Monitoring
Logging
Docker
Automated testing

Happy coding! 🚀

🎥 Prefer Watching Instead?

This article accompanies Part 18 of my Modern React E-Commerce Series, where I walk through the complete deployment process step by step.

In the video you’ll learn:

🚀 Deploy an Express backend to Render
🔥 Host a React (Vite) frontend on Firebase Hosting
🌍 Configure production environment variables
🔐 Handle CORS correctly
🔄 Connect frontend and backend
✅ Deploy a real-world full-stack application from start to finish

If you’re building along with the series, this lesson completes the journey by taking your application from local development to a live production deployment.

👉 Watch Part 18

https://www.youtube.com/watch?v=3LMJjIwZDx0&list=PL_02r0p8Ku_6tR8L-n-yj7MW8rrMtswwk&index=18

📚 Continue Learning — Complete React E-Commerce Playlist

If you’re interested in building a production-ready e-commerce application from scratch, check out the complete playlist on my YouTube channel Codeek.

The series covers:

⚛️ Modern React
🎨 Chakra UI
🔄 React Query
📦 Zustand
💳 Stripe Payments
🗄️ Express.js Backend
🐘 PostgreSQL
🚀 Firebase Hosting
☁️ Render Deployment
📁 Project Architecture
🛒 Complete E-Commerce Development

Whether you’re preparing for interviews, building your portfolio, or creating your next startup, this series walks you through every step with practical, real-world examples.

⭐ If you find the tutorials helpful, consider subscribing to Codeek and sharing the playlist with fellow developers.

Happy coding! 🚀

원문에서 계속 ↗

추출 본문 · 출처: dev.to · https://dev.to/codeek/deploy-a-full-stack-react-application-firebase-render-complete-deployment-guide-2026-c0l

Full Stack React 애플리케이션 🚀 배포 (Firebase + 렌더) — 전체 배포 가이드 (2026)

🏗️ Final Architecture

📋 Prerequisites

🤔 Why Firebase + Render?

🔥 Firebase Hosting

🚀 Render

Step 1 — Prepare Your Backend

Step 2 — Configure Environment Variables

Step 3 — Configure CORS

Step 4 — Push Your Backend to GitHub

Step 5 — Deploy Express Backend to Render

Build Command

Start Command

Root Directory

Environment Variables

Step 6 — Wait for Deployment

Step 7 — Update Frontend API URL

Step 8 — Prepare React for Production

Step 9 — Build React

Step 10 — Deploy to Firebase

Step 11 — Update Backend CORS

Step 12 — Test Everything

💡 Production Tips

🔒 Use HTTPS Everywhere

🔐 Keep Secrets Secure

🔄 Enable Automatic Deployments

❌ Common Deployment Errors

CORS Error

API Not Found

Blank React Screen

Environment Variables Missing

Wrong Build Folder

✅ Deployment Checklist

🎉 Conclusion

🎥 Prefer Watching Instead?

📚 Continue Learning — Complete React E-Commerce Playlist

코멘트

답글 남기기 응답 취소

더 많은 게시물

에피소드 1: “세상에 나타난 작은 점”