Déployer son application (Vercel/Render)

Section 11.1.19 : Déployer son application (Vercel/Render)

🎯 Objectif pédagogique

Déployer une application web sur internet pour qu'elle soit accessible au monde entier. Vous serez capable de déployer un frontend sur Vercel et un backend sur Render, avec un domaine personnalisé optionnel.

De localhost à internet

Marc a un site qui tourne sur localhost:3000. Problème : il est le seul à le voir. Pour qu'un recruteur, un ami, ou un client puisse y accéder, il faut déployer — mettre le code sur un serveur accessible depuis internet.

Vercel — Le roi du frontend

Vercel est la plateforme de déploiement frontend la plus populaire. Créée par les fondateurs de Next.js.

Caractéristiques :

• →Gratuit (plan Hobby suffisant pour les projets perso)
• →Déploiement automatique à chaque push Git
• →HTTPS automatique
• →CDN mondial (votre site est rapide partout)
• →Preview deployments (chaque branche a sa propre URL)

Déployer sur Vercel

1. →Poussez votre code sur GitHub
2. →Allez sur vercel.com → Sign up avec GitHub
3. →Cliquez "New Project" → sélectionnez votre dépôt
4. →Vercel détecte automatiquement le framework (HTML pur, React, Next.js)
5. →Cliquez "Deploy"
6. →En 30 secondes, votre site est en ligne !

https://mon-portfolio-marc.vercel.app  ← Votre URL gratuite

Déploiement automatique

Chaque git push sur main déclenche un nouveau déploiement automatiquement :

# Modifier le site
echo "<p>Version 2 !</p>" >> index.html
git add . && git commit -m "feat: version 2"
git push origin main
# → Vercel redéploie automatiquement en ~20 secondes

Render — Le roi du backend

Render déploie des backends (APIs, serveurs, bases de données).

Caractéristiques :

• →Gratuit (plan free avec limitations : sleep après 15min d'inactivité)
• →Support : Node.js, Python, Go, Rust, Docker
• →Base de données PostgreSQL gratuite (90 jours)
• →Variables d'environnement sécurisées

Déployer un backend API sur Render

# app.py — API Flask basique
from flask import Flask, jsonify

app = Flask(__name__)

@app.route("/")
def home():
    return jsonify(\{"message": "API de Marc — en ligne !"\})

@app.route("/api/profile")
def profile():
    return jsonify(\{
        "name": "Marc Dupont",
        "status": "Bootcamp Tech & IA — Semaine 1",
        "skills": ["HTML", "CSS", "JavaScript", "Python"]
    \})

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=10000)

# requirements.txt
flask==3.0.0
gunicorn==21.2.0

1. →Poussez sur GitHub
2. →Sur render.com → New → Web Service
3. →Connectez votre dépôt GitHub
4. →Configuration :
   • →Build command : pip install -r requirements.txt
   • →Start command : gunicorn app:app
5. →Deploy → Votre API est en ligne !

Alternatives de déploiement

Variables d'environnement en production

# Sur Vercel / Render : panneau Settings → Environment Variables
OPENAI_API_KEY = sk-proj-...
DATABASE_URL = postgresql://user:pass@host/dbname
NODE_ENV = production

🏋️ Exercice pratique (20 minutes)

Déployez votre portfolio sur Vercel :

1. →Vérifiez que votre code est sur GitHub
2. →Connectez-vous à Vercel avec GitHub
3. →Importez votre dépôt
4. →Déployez
5. →Partagez l'URL dans vos notes de bootcamp

Marc : "Mon portfolio est en ligne. Avec une vraie URL. Que je peux envoyer à un recruteur. En 2 minutes. La technologie est incroyable."