Deploy a Full-Stack FastAPI + React App with Stripe and MongoDB on VPS [Complete Guide]

In this guide, we’ll walk through deploying a modern web application built using FastAPI and React. We’ll configure and secure MongoDB, connect Stripe for payments and webhooks, deploy with Docker, serve the frontend using Nginx, and manage processes with PM2.

✈ VPS Setup and Essentials

Update and install basic tools:

sudo apt update && sudo apt upgrade -y
sudo apt install nginx unzip curl git ufw -y

Install Python, Node.js, and Docker:

sudo apt install python3-pip python3-venv -y
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs
curl -fsSL https://get.docker.com -o get-docker.sh
sh get-docker.sh
sudo usermod -aG docker $USER

Install PM2 globally:

sudo npm install -g pm2 serve

🚀 FastAPI Backend Deployment (Dockerized)

Setup `.env` with secrets:

OPENAI_API_KEY=sk-...
STRIPE_ID=acct_...
STRIPE_PUBLISH_KEY=pk_live...
STRIPE_SECRET_KEY=sk_live...
STRIPE_WEBHOOK_SECRET=whsec_...
JWT_SECRET_KEY=demo-secret-key-bot
RESEND_API_KEY=re_...
PINECONE_API_KEY=pcsk_...
MONGODB_CONNECTION=mongodb://appuser:password@localhost:27017/demodb?authSource=demodb
RESEND_SENDER_EMAIL=example@resend.dev

Run FastAPI in Docker:

# Dockerfile example should be ready
sudo docker compose up -d --build

To verify:

docker logs <container_id>

🧰 MongoDB Setup and Configuration

Install MongoDB:

wget -qO - https://www.mongodb.org/static/pgp/server-6.0.asc | sudo apt-key add -
echo "deb [ arch=amd64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/6.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-6.0.list
sudo apt update && sudo apt install -y mongodb-org

Configure MongoDB to allow external connections:

sudo nano /etc/mongod.conf
# change bindIp from 127.0.0.1 to 0.0.0.0

Restart Mongo:

sudo systemctl restart mongod

Create user:

mongosh
use unclematt
db.createUser({ user: "appuser", pwd: "appuser_vps_srv827495", roles: ["readWrite"] })

🚀 Stripe Webhook Setup

Create webhook endpoint:

@app.post("/webhooks/stripe")
def stripe_webhook(request: Request):
    payload = await request.body()
    sig_header = request.headers.get('stripe-signature')
    try:
        event = stripe.Webhook.construct_event(payload, sig_header, STRIPE_WEBHOOK_SECRET)
    except stripe.error.SignatureVerificationError:
        raise HTTPException(status_code=400, detail="Invalid signature")
    # handle events here

Configure Stripe Dashboard:

Go to Stripe Dashboard > Developers > Webhooks > Add endpoint: http://<your-ip>:8000/webhooks/stripe

🚀 React Frontend with Nginx

Upload dist files:

scp -r dist/ deploy@<ip>:/var/www/react-app

Ensure correct permissions:

sudo chown -R www-data:www-data /var/www/react-app

Configure Nginx:

sudo nano /etc/nginx/sites-available/react-app

server {
    listen 80;
    server_name your_domain_or_ip;
    root /var/www/react-app;
    index index.html;

    location / {
        try_files $uri /index.html;
    }
}

sudo ln -s /etc/nginx/sites-available/react-app /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

🚀 Fixing CORS in FastAPI

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://157.173.212.100"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

⌛ PM2 for React if Needed

cd /var/www/react-app
pm install -g serve
pm2 start "serve -s . -l 3000" --name react-app
pm2 save
pm2 startup

✅ Conclusion

You’ve successfully deployed a production-ready FastAPI + React stack with Stripe payments, MongoDB, and Nginx on a VPS. This setup is scalable, secure, and suitable for SaaS, portfolio projects, or commercial platforms.