Connecteurs d'hébergement¶

Configurez l'emplacement de publication des sites web construits par Silex.

Aperçu¶

Les connecteurs d'hébergement gèrent la publication : ils reçoivent le HTML, le CSS et les ressources compilés et les déploient vers une URL accessible. Silex inclut quatre connecteurs intégrés :

Système de fichiers — Écriture sur le disque local (pour le service de fichiers statiques)
Téléchargement — Génération d'un fichier ZIP pour un déploiement manuel
GitLab Pages — Publication automatique sur GitLab Pages via CI/CD
FTP — Envoi direct vers un serveur FTP

Contrairement aux connecteurs de stockage, l'hébergement est généralement une opération unidirectionnelle : Silex publie vers le connecteur mais ne télécharge pas depuis celui-ci.

Prérequis¶

Compréhension de la configuration serveur
Compréhension des connecteurs de stockage
Pour GitLab Pages : un compte GitLab avec CI/CD activé

Interface HostingConnector¶

Tous les connecteurs d'hébergement implémentent cette interface :

export interface HostingConnector extends Connector {
  publish(
    session,
    websiteId,
    files,
    jobManager
  ): Promise<JobData>

  getUrl(session, websiteId): Promise<string>

  // Plus standard auth methods (isLoggedIn, setToken, etc.)
}

Hébergement par système de fichiers¶

Écrivez les sites publiés dans un répertoire local pour l'intégration avec un serveur web.

Installation¶

HOSTING_CONNECTORS=fs
SILEX_FS_HOSTING_ROOT=./silex/hosting

Ou dans Docker :

environment:
  HOSTING_CONNECTORS: fs
  SILEX_FS_HOSTING_ROOT: /silex/hosting
volumes:
  - ./silex-hosting:/silex/hosting

Fonctionnement¶

Lorsqu'un utilisateur publie :

Silex compile le site web (build awesome (propulsé par Eleventy))
Les fichiers sont écrits dans {SILEX_FS_HOSTING_ROOT}/{websiteId}/
Un serveur web (Nginx, Apache) peut servir ce répertoire publiquement

Structure des répertoires :

silex/hosting/
├── my-site-1/
│   ├── index.html
│   ├── about.html
│   ├── css/
│   │   └── style.css
│   └── assets/
│       ├── logo.png
│       └── hero.jpg
├── my-site-2/
│   ├── index.html
│   └── ...

Servir les sites publiés¶

Avec Nginx¶

Créez un bloc serveur dans /etc/nginx/sites-available/silex-sites :

server {
  listen 80;
  server_name *.example.com;

  # Route each subdomain to a published site directory
  set $site_name $host;
  set $site_name ${}; # Extract subdomain

  root /silex/hosting;
  try_files /$site_name$uri /$site_name/index.html =404;
}

Ou ajoutez manuellement des domaines :

server {
  listen 80;
  server_name my-site-1.example.com;
  root /silex/hosting/my-site-1;
  try_files $uri $uri/ /index.html =404;
}

server {
  listen 80;
  server_name my-site-2.example.com;
  root /silex/hosting/my-site-2;
  try_files $uri $uri/ /index.html =404;
}

Rechargez Nginx :

sudo systemctl reload nginx

Avec Apache¶

Créez un fichier de virtual host :

<VirtualHost *:80>
  ServerName my-site.example.com
  DocumentRoot /silex/hosting/my-site

  <Directory /silex/hosting/my-site>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
  </Directory>
</VirtualHost>

Activez le site :

sudo a2ensite my-site.example.com
sudo systemctl reload apache2

Configuration en code¶

const FsHosting = require('@silexlabs/silex/dist/server/connectors/FsHosting').FsHosting

module.exports = async function (config) {
  config.setHostingConnectors([
    new FsHosting(config, {
      path: process.env.SILEX_FS_HOSTING_ROOT || './silex/hosting',
    }),
  ])
}

Connecteur de téléchargement¶

Générez un fichier ZIP que les utilisateurs peuvent télécharger et déployer manuellement.

Installation¶

HOSTING_CONNECTORS=download

Fonctionnement¶

Lorsqu'un utilisateur publie :

Silex compile le site web (build awesome)
Les fichiers sont compressés en ZIP
Un lien de téléchargement est fourni dans l'interface
L'utilisateur télécharge et extrait vers son hébergement

Aucune configuration spéciale n'est nécessaire. Le connecteur de téléchargement est intégré.

Cas d'utilisation¶

Déploiement vers Netlify, Vercel ou d'autres hébergeurs statiques
Déploiement vers un hébergement traditionnel avec FTP/SFTP
Développement local et tests

Consultez Deploiement vers d'autres plateformes d'hebergement pour les instructions de déploiement manuel.

Hébergement GitLab Pages¶

Publication automatique sur GitLab Pages via CI/CD.

Prérequis¶

Dépôt GitLab dans votre connecteur de stockage
Pipeline CI/CD qui exécute build awesome et construit le site
GitLab Pages activé pour votre projet

Installation¶

HOSTING_CONNECTORS=gitlab
GITLAB_CLIENT_ID=your-app-id
GITLAB_CLIENT_SECRET=your-app-secret
GITLAB_DOMAIN=gitlab.com

Même application OAuth que le connecteur de stockage GitLab.

Fonctionnement¶

L'utilisateur se connecte avec GitLab (OAuth)
Le site web est stocké dans un dépôt GitLab
Lorsque l'utilisateur publie, Silex :
Commite le code source du site dans le dépôt
Déclenche le pipeline CI/CD (.gitlab-ci.yml)
Le pipeline exécute npm run build (compilation build awesome)
Le pipeline déploie sur GitLab Pages
Le site est accessible à https://username.gitlab.io/project-name

.gitlab-ci.yml¶

Silex fournit une configuration CI/CD par défaut. Vous pouvez la personnaliser. Consultez Personnalisation de GitLab CI/CD.

Domaine personnalisé¶

Dans les paramètres de votre projet GitLab :

Allez dans Deployments → Pages
Cliquez sur New domain
Saisissez votre domaine (par ex. my-site.com)
Suivez les instructions de configuration DNS

Configuration en code¶

const GitlabHostingConnector = require('@silexlabs/silex-plugins').GitlabHostingConnector

module.exports = async function (config) {
  config.addHostingConnector(
    new GitlabHostingConnector(config, {
      clientId: process.env.GITLAB_CLIENT_ID,
      clientSecret: process.env.GITLAB_CLIENT_SECRET,
      domain: process.env.GITLAB_DOMAIN || 'gitlab.com',
    })
  )
}

Hébergement FTP¶

Envoyez directement vers un serveur FTP.

Prérequis¶

Serveur FTP avec identifiants et espace disque

Installation¶

HOSTING_CONNECTORS=ftp
FTP_HOSTING_PATH=/public_html

Ou dans Docker :

environment:
  HOSTING_CONNECTORS: ftp
  FTP_HOSTING_PATH: /public_html

Fonctionnement¶

L'utilisateur se connecte avec ses identifiants FTP (hôte, port, nom d'utilisateur, mot de passe)
Lorsque l'utilisateur publie :
Silex compile le site web (build awesome)
Les fichiers sont envoyés via FTP vers {FTP_HOSTING_PATH}/{websiteId}/
Le site est immédiatement en ligne (si le serveur web est configuré)

Configuration FTP typique¶

public_html/
├── my-site-1/
│   ├── index.html
│   ├── css/style.css
│   └── assets/
├── my-site-2/
│   ├── index.html
│   └── ...

Avec le DNS pointant my-site-1.com vers votre serveur FTP, le site est accessible à my-site-1.com/my-site-1/.

Configuration en code¶

const FtpConnector = require('@silexlabs/silex-plugins').FtpConnector
const { ConnectorType } = require('@silexlabs/silex/dist/server/types')

module.exports = async function (config) {
  config.addHostingConnector(
    new FtpConnector(config, {
      type: ConnectorType.HOSTING,
      path: process.env.FTP_HOSTING_PATH || '/public_html',
    })
  )
}

Tableau comparatif¶

Fonctionnalité	Système de fichiers	Téléchargement	GitLab Pages	FTP
Installation	Simple	Intégré	Moyenne (OAuth)	Simple
Automatisation	Manuelle	Manuelle	Automatique (CI/CD)	Automatique
Coût	Votre serveur	Gratuit	Gratuit	Votre FTP
Domaine personnalisé	DNS manuel	Manuel	Interface GitLab	DNS manuel
Mise à l'échelle	Serveur unique	Téléchargement de fichier	Infrastructure GitLab	Votre serveur
Idéal pour	Auto-hébergement	Tests	Équipes + GitHub	Hébergement traditionnel

Combiner stockage et hébergement¶

Combinez les connecteurs pour plus de flexibilité :

STORAGE_CONNECTORS=fs,gitlab
HOSTING_CONNECTORS=fs,download,gitlab,ftp

Les utilisateurs peuvent stocker sur GitLab et publier en FTP, ou stocker localement et télécharger en ZIP.

Gestion des tâches¶

Les connecteurs d'hébergement reçoivent un jobManager pour suivre la progression de la publication :

interface JobManager {
  addJob(data: JobData): string
  setJobData(jobId: string, data: JobData): void
  getJobData(jobId: string): JobData | null
}

Le connecteur met à jour l'état de la tâche au fur et à mesure de la publication. Consultez les événements du serveur pour écouter le cycle de vie de la publication.

Dépannage¶

GitLab Pages non déployé¶

Vérifiez : - .gitlab-ci.yml existe dans le dépôt - CI/CD est activé dans les paramètres du projet GitLab - Le pipeline a réussi (vérifiez CI/CD → Pipelines) - Pages est activé (Deployments → Pages)

L'envoi FTP échoue¶

Vérifiez : - Le serveur FTP est accessible : telnet ftp.example.com 21 - Les identifiants sont corrects - L'espace disque est disponible sur le serveur FTP - Le chemin existe : cd /public_html dans le client FTP

L'hébergement par système de fichiers n'est pas accessible¶

Si les sites sont écrits mais non visibles :

Vérifiez les permissions : ls -la ./silex/hosting/
Vérifiez que le serveur web fonctionne et est configuré pour servir le répertoire
Consultez les journaux du serveur web pour les erreurs

Voir aussi¶

Configuration des connecteurs de stockage
Configuration serveur
Personnalisation de GitLab CI/CD — Personnalisation de GitLab CI
Deploiement vers d'autres plateformes d'hebergement — Déploiement vers d'autres plateformes

Éditer cette page sur GitLab