Déploiement étape par étape d’une application web sur O2Switch

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 : [Masquer]

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

Développement, Systèmes & Réseaux

Tests, Sécurité et CI/CD

Cet article présente une stratégie pour assurer la qualité, la sécurité et le déploiement continu d'une application basée sur Laravel 11 et React 18. La stratégie s'articule autour de quatre piliers fondamentaux : Tests complets et modernes : Une approche...

📍 Voir Plus ...

Développement Systèmes & Réseaux

Déploiement et Maintenance d’Application Web

Le processus de mise en production et les mesures de suivi/maintenance pour notre application web (Laravel 11 en backend / React 19 en frontend, avec Axios, Bootstrap, base MySQL, hébergement O2Switch). L’objectif est de garantir un déploiement fluide, sécurisé et...

📍 Voir Plus ...

News et actualité DIGI Référencement Optimisation Marketing & Communication

Guide pratique : – SEO Technique

Bienvenue dans cette page dédiée au SEO technique. Dans ce contenu approfondi, vous découvrirez : Le crawling et l'indexation optimisés Les sitemaps XML et leur exploitation stratégique Comment résoudre les problèmes de contenu dupliqué L'implémentation avancée des...

📍 Voir Plus ...

📍 VOIR PLUS ... 📍