mario/DEPLOY.md

Guide de Déploiement

Options de Déploiement

1. GitHub Pages (Gratuit)

Prérequis : Compte GitHub

Étapes :

1. Créez un repo GitHub et poussez le code :

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/VOTRE_USERNAME/mario-runner.git
git push -u origin main

2. Activez GitHub Pages :

   • Allez dans Settings → Pages
   • Source : GitHub Actions
   • Le workflow .github/workflows/deploy.yml est déjà configuré

3. Le jeu sera disponible sur : https://VOTRE_USERNAME.github.io/mario-runner/

Note : GitHub Pages utilise HTTPS automatiquement, donc le gyroscope iOS fonctionnera !

---

2. Netlify (Gratuit, recommandé)

Prérequis : Compte Netlify

Méthode 1 : Drag & Drop

1. Build le projet :

npm run build

2. Allez sur netlify.com
3. Drag & drop le dossier dist/ sur Netlify
4. Le jeu est déployé instantanément !

Méthode 2 : CLI

npm install -g netlify-cli
npm run build
netlify deploy --prod

Méthode 3 : Git Integration

1. Poussez sur GitHub
2. Connectez Netlify à votre repo
3. Configuration :
   • Build command: npm run build
   • Publish directory: dist
4. Déploiement automatique à chaque push

---

3. Vercel (Gratuit)

Prérequis : Compte Vercel

Méthode CLI :

npm install -g vercel
vercel

Suivez les instructions.

Méthode Git :

1. Poussez sur GitHub
2. Importez le projet sur vercel.com
3. Vercel détecte Vite automatiquement
4. Déploiement automatique

---

4. Self-Hosting (Serveur personnel)

Avec un serveur Node.js :

1. Build :

npm run build

2. Servez le dossier dist/ avec n'importe quel serveur web :

Option A : serve (simple) :

npm install -g serve
serve -s dist -p 80

Option B : nginx :

server {
    listen 80;
    server_name votredomaine.com;
    root /path/to/mario-runner/dist;

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

Option C : Apache :

<VirtualHost *:80>
    DocumentRoot /path/to/mario-runner/dist
    <Directory /path/to/mario-runner/dist>
        Options -Indexes +FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

---

Configuration PWA

Pour que le jeu fonctionne en mode PWA (installable) :

1. Créez les icônes

Générez les icônes 192x192 et 512x512 :

• Utilisez pwabuilder.com/imageGenerator
• Placez dans public/icons/

2. Service Worker

Créez public/service-worker.js :

const CACHE_NAME = 'mario-runner-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/assets/index.js',
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

3. Testez l'installation

1. Déployez sur HTTPS (GitHub Pages, Netlify, etc.)
2. Sur mobile :
   • iOS Safari : Partager → Sur l'écran d'accueil
   • Android Chrome : Menu → Installer l'application

---

Test sur Mobile en Local

Avec HTTPS (requis pour gyroscope iOS)

Option 1 : ngrok (recommandé)

npm install -g ngrok
npm run dev
# Dans un autre terminal :
ngrok http 3001

Vous obtiendrez une URL HTTPS : https://xyz123.ngrok.io

Option 2 : localtunel

npm install -g localtunnel
npm run dev
# Dans un autre terminal :
lt --port 3001

Option 3 : Certificat SSL local

Avec mkcert :

# Installation
brew install mkcert  # macOS
# ou apt install mkcert  # Linux

# Créer certificat
mkcert -install
mkcert localhost 127.0.0.1 ::1

# Modifier vite.config.ts
import { defineConfig } from 'vite';
import fs from 'fs';

export default defineConfig({
    server: {
        https: {
            key: fs.readFileSync('./localhost-key.pem'),
            cert: fs.readFileSync('./localhost.pem'),
        },
        host: true,
        port: 3000,
    },
});

---

Optimisations Pré-Déploiement

1. Compression des Assets

Compressez les images :

npm install -D imagemin imagemin-pngquant

2. Minification

Déjà géré par Vite en mode production.

3. Analyse du Bundle

npm run build
npx vite-bundle-visualizer

---

Vérification Post-Déploiement

Checklist :

• Le jeu se charge correctement
• Les contrôles clavier fonctionnent (PC)
• Le gyroscope fonctionne (mobile HTTPS)
• Le bouton de saut fonctionne (mobile)
• Les collisions fonctionnent
• Le timer compte correctement
• L'orientation paysage est forcée
• La PWA est installable (optionnel)

Outils de Test :

• Chrome DevTools : Device Mode pour simuler mobile
• Lighthouse : Auditer performance et PWA
• WebPageTest : Tester vitesse de chargement

---

Problèmes Courants

Le jeu ne se charge pas

• Vérifiez la console pour erreurs
• Vérifiez que tous les assets sont dans public/
• Vérifiez que le build a réussi : npm run build

Le gyroscope ne fonctionne pas

• iOS : Nécessite HTTPS obligatoirement
• Vérifiez que la permission a été accordée
• Testez sur un vrai appareil (pas simulateur)

Erreur 404 sur les routes

Configurez le serveur pour servir index.html pour toutes les routes.

Netlify : Créez public/_redirects :

/*    /index.html   200

Vercel : Créez vercel.json :

{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}

---

Recommandation

Pour ce projet, je recommande Netlify :

• Gratuit
• HTTPS automatique
• Déploiement en drag & drop
• Bon support PWA
• Facile à utiliser

Commande rapide :

npm run build
npx netlify-cli deploy --prod --dir=dist