first
This commit is contained in:
321
DEPLOY.md
Normal file
321
DEPLOY.md
Normal file
@@ -0,0 +1,321 @@
|
||||
# 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 :
|
||||
```bash
|
||||
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 :
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
2. Allez sur [netlify.com](https://www.netlify.com/)
|
||||
3. Drag & drop le dossier `dist/` sur Netlify
|
||||
4. Le jeu est déployé instantanément !
|
||||
|
||||
**Méthode 2 : CLI**
|
||||
|
||||
```bash
|
||||
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** :
|
||||
|
||||
```bash
|
||||
npm install -g vercel
|
||||
vercel
|
||||
```
|
||||
|
||||
Suivez les instructions.
|
||||
|
||||
**Méthode Git** :
|
||||
|
||||
1. Poussez sur GitHub
|
||||
2. Importez le projet sur [vercel.com](https://vercel.com)
|
||||
3. Vercel détecte Vite automatiquement
|
||||
4. Déploiement automatique
|
||||
|
||||
---
|
||||
|
||||
### 4. Self-Hosting (Serveur personnel)
|
||||
|
||||
**Avec un serveur Node.js** :
|
||||
|
||||
1. Build :
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
2. Servez le dossier `dist/` avec n'importe quel serveur web :
|
||||
|
||||
**Option A : serve (simple)** :
|
||||
```bash
|
||||
npm install -g serve
|
||||
serve -s dist -p 80
|
||||
```
|
||||
|
||||
**Option B : nginx** :
|
||||
```nginx
|
||||
server {
|
||||
listen 80;
|
||||
server_name votredomaine.com;
|
||||
root /path/to/mario-runner/dist;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Option C : Apache** :
|
||||
```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](https://www.pwabuilder.com/imageGenerator)
|
||||
- Placez dans `public/icons/`
|
||||
|
||||
### 2. Service Worker
|
||||
|
||||
Créez `public/service-worker.js` :
|
||||
|
||||
```javascript
|
||||
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é)
|
||||
|
||||
```bash
|
||||
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**
|
||||
|
||||
```bash
|
||||
npm install -g localtunnel
|
||||
npm run dev
|
||||
# Dans un autre terminal :
|
||||
lt --port 3001
|
||||
```
|
||||
|
||||
**Option 3 : Certificat SSL local**
|
||||
|
||||
Avec `mkcert` :
|
||||
|
||||
```bash
|
||||
# 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 :
|
||||
```bash
|
||||
npm install -D imagemin imagemin-pngquant
|
||||
```
|
||||
|
||||
### 2. Minification
|
||||
|
||||
Déjà géré par Vite en mode production.
|
||||
|
||||
### 3. Analyse du Bundle
|
||||
|
||||
```bash
|
||||
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` :
|
||||
```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 :
|
||||
```bash
|
||||
npm run build
|
||||
npx netlify-cli deploy --prod --dir=dist
|
||||
```
|
||||
Reference in New Issue
Block a user