Déploiement étape Par étape D'une Application Web Sur O2Switch | Conception Et Création De Sites Web

Je vais vous expliquer de façon détaillée comment déployer votre application développée localement (Laravel 11 + React 19 + Axios + MySQL + Bootstrap) sur un hébergement O2Switch. Suivez ces étapes dans l’ordre pour un déploiement réussi.

Table des matières :

1 Étape 1: Préparation de votre application locale
2 Étape 2: Accéder à votre compte O2Switch
3 Étape 3: Création de la base de données
4 Étape 4: Préparer votre package de déploiement
5 Étape 5: Téléchargement des fichiers sur O2Switch
6 Étape 6: Configuration des permissions
7 Étape 7: Configuration de la base de données
8 Étape 8: Configuration finale et test
9 Étape 9: Configuration API React-Laravel
10 Étape 10: Mise en place de la maintenance
11 Résolution des problèmes courants

Étape 1: Préparation de votre application locale

Avant de déployer, assurez-vous que votre application est prête:

Finaliser le développement local:

# Vérifier que tout fonctionne localement
php artisan serve
# Dans un autre terminal
cd frontend
npm start

Préparer votre fichier .env de production:

APP_NAME="VotreApp"
APP_ENV=production
APP_KEY=base64:votreclé
APP_DEBUG=false
APP_URL=https://votredomaine.com

LOG_CHANNEL=stack
LOG_LEVEL=error

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=votre_db_nom  # À configurer sur O2Switch
DB_USERNAME=votre_db_user # À configurer sur O2Switch
DB_PASSWORD=votre_db_pass # À configurer sur O2Switch

# Désactiver les services de développement
BROADCAST_DRIVER=log
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

Construire la version de production React:

cd frontend
# S'assurer que l'URL de l'API pointe vers la production
# Vérifier dans src/api/config.js ou équivalent

# Puis construire
npm run build

Étape 2: Accéder à votre compte O2Switch

Connectez-vous à l’espace client O2Switch:
- Allez sur https://client.o2switch.net/
- Entrez vos identifiants fournis par O2Switch
Accédez au CPanel:
- Dans le tableau de bord, cliquez sur “CPanel”
- Vous serez redirigé vers l’interface de gestion de votre hébergement

Étape 3: Création de la base de données

Créer une nouvelle base de données:
- Dans CPanel, localisez la section “Bases de données”
- Cliquez sur “MySQL Databases”
- Créez une nouvelle base de données (notez le nom)
- Créez un nouvel utilisateur de base de données
- Attribuez tous les privilèges à cet utilisateur sur votre base de données
Notez les informations:
- Nom de la base de données (généralement préfixé par votre nom d’utilisateur O2Switch)
- Nom d’utilisateur de la base de données
- Mot de passe de l’utilisateur

Étape 4: Préparer votre package de déploiement

Optimiser Laravel pour la production:

# À la racine de votre projet Laravel
composer install --no-dev --optimize-autoloader
php artisan key:generate
php artisan config:clear
php artisan cache:clear

Créer un package de déploiement:

# Créer un dossier de déploiement
mkdir deploy

# Copier les fichiers Laravel essentiels
cp -r app bootstrap config database public resources routes storage vendor composer.json artisan deploy/

# Copier le .env de production
cp .env.production deploy/.env

# Copier le build React dans le dossier public
mkdir -p deploy/public/build
cp -r frontend/build/* deploy/public/build/

# Créer une archive pour faciliter le transfert
cd deploy
zip -r ../deploy-package.zip .
cd ..

Étape 5: Téléchargement des fichiers sur O2Switch

Accéder à votre espace via FTP/SFTP:
- Dans CPanel, trouvez vos informations FTP
- Utilisez un client FTP comme FileZilla
- Entrez l’hôte (généralement ftp.votredomaine.com)
- Utilisez votre nom d’utilisateur et mot de passe O2Switch
Télécharger les fichiers:
- Connectez-vous à votre serveur
- Naviguez vers le dossier public_html (ou le sous-dossier correspondant à votre domaine)
- Téléchargez l’archive deploy-package.zip
- Décompressez l’archive directement sur le serveur ou téléchargez-la décompressée
Organisation des fichiers sur O2Switch:
- Le contenu du dossier public de Laravel doit être dans public_html
- Le reste de l’application peut être placé dans un dossier parent
Structure recommandée:

/home/votre_utilisateur/
├── public_html/           # Point d'entrée web
│   ├── index.php
│   ├── .htaccess
│   ├── build/             # Fichiers React compilés
│   ├── css/
│   ├── js/
│   └── ...
│
└── laravel/               # Code Laravel (hors web root)
    ├── app/
    ├── bootstrap/
    ├── config/
    ├── ...
    └── vendor/

Ajuster index.php:
- Modifiez le fichier public_html/index.php pour pointer vers les bons dossiers:

// Remplacer
require __DIR__.'/../vendor/autoload.php';
$app = require_once __DIR__.'/../bootstrap/app.php';

// Par
require __DIR__.'/../laravel/vendor/autoload.php';
$app = require_once __DIR__.'/../laravel/bootstrap/app.php';

Étape 6: Configuration des permissions

Définir les bonnes permissions:

# Via SSH si disponible, ou via le gestionnaire de fichiers du CPanel
chmod -R 755 public_html
chmod -R 755 laravel
chmod -R 775 laravel/storage
chmod -R 775 laravel/bootstrap/cache

Créer un fichier .htaccess dans public_html:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    
    # Forcer HTTPS
    RewriteCond %{HTTPS} off
    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
    
    # Gérer les routes Laravel
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

# Protection des fichiers sensibles
<FilesMatch "^\.env|composer\.json|package\.json|artisan$">
    Order allow,deny
    Deny from all
</FilesMatch>

# Activer la compression
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/plain text/css application/javascript text/javascript application/json
</IfModule>

Étape 7: Configuration de la base de données

Importer votre schéma de base de données:
- Accédez à phpMyAdmin via CPanel
- Sélectionnez votre base de données
- Utilisez l’onglet “Importer” pour charger une sauvegarde SQL
- Ou utilisez les migrations Laravel (voir étape suivante)
Exécuter les migrations Laravel:

# Si vous avez accès SSH
cd /home/votre_utilisateur/laravel
php artisan migrate --force

# Sinon, créez un script temporaire dans public_html
# Créez migrate.php avec ce contenu:
<?php
shell_exec('cd /home/votre_utilisateur/laravel && php artisan migrate --force');
echo "Migrations terminées";
?>

# Accédez à https://votredomaine.com/migrate.php
# Supprimez le fichier après utilisation

Étape 8: Configuration finale et test

Finalisez la configuration Laravel:

# Si accès SSH disponible
cd /home/votre_utilisateur/laravel
php artisan config:cache
php artisan route:cache
php artisan view:cache
php artisan storage:link

Testez votre application:
- Visitez https://votredomaine.com
- Testez la navigation et les fonctionnalités principales
- Vérifiez que les appels API fonctionnent correctement
- Inspectez la console du navigateur pour détecter d’éventuelles erreurs
Vérifiez les logs en cas de problème:
- Dans laravel/storage/logs/laravel.log
- Dans les logs d’erreur Apache via CPanel

Étape 9: Configuration API React-Laravel

Vérifiez la configuration Axios:
- Assurez-vous que vos requêtes Axios pointent vers les bonnes URLs:

// Dans votre code React compilé
axios.defaults.baseURL = 'https://votredomaine.com/api';

Configurez CORS sur Laravel:
- Modifiez le fichier laravel/config/cors.php:

'paths' => ['api/*'],
'allowed_origins' => ['https://votredomaine.com'],
'allowed_methods' => ['*'],
'allowed_headers' => ['*'],
'exposed_headers' => false,
'max_age' => 0,
'supports_credentials' => true,

Étape 10: Mise en place de la maintenance

Configurez des sauvegardes automatiques:
- Dans CPanel, recherchez l’outil “Backup”
- Programmez des sauvegardes régulières de votre base de données et fichiers
Configurez un monitoring basique:
- Inscrivez-vous sur UptimeRobot (gratuit)
- Ajoutez un moniteur pour vérifier que votre site est en ligne
Préparez une procédure de mise à jour:
- Pour les futures mises à jour, sauvegardez toujours avant
- Suivez un processus similaire mais en préservant les données utilisateur

Résolution des problèmes courants

Erreur 500 : Vérifiez les logs Laravel et les permissions des dossiers storage et bootstrap/cache
API inaccessible : Vérifiez la configuration CORS et les redirections HTTPS
Assets React non chargés : Vérifiez les chemins dans le build et le .htaccess
Problèmes de base de données : Vérifiez les informations de connexion dans le .env

Ce guide vous permet de déployer efficacement votre application Laravel 11 + React 19 sur O2Switch. Adaptez les étapes selon les spécificités de votre projet et de votre configuration O2Switch.

Documentation o2switch

par hassan el haouat