Déploiement vers d'autres plateformes d'hébergement¶

Publiez des sites web Silex sur Netlify, Vercel, AWS ou tout hébergeur statique.

Aperçu¶

Bien que Silex inclue des connecteurs pour GitLab Pages et le FTP, vous pouvez publier sur n'importe quelle plateforme d'hébergement statique en téléchargeant le site web compilé et en le déployant manuellement, ou en configurant des pipelines CI/CD personnalisés.

Trois approches :

Télécharger le ZIP et déployer manuellement — Universel, fonctionne partout
Intégration CI/CD personnalisée — Automatiser avec les outils spécifiques à la plateforme
Connecteur d'hébergement personnalisé — Écrire un plugin pour votre plateforme

Prérequis¶

Compréhension des transformateurs de publication
Connaissance du processus de déploiement de votre plateforme d'hébergement
Familiarité de base avec Git et CI/CD

Approche 1 : Téléchargement et déploiement manuel¶

L'approche la plus simple : les utilisateurs téléchargent et déploient eux-mêmes.

Installation¶

Activez le connecteur de téléchargement :

HOSTING_CONNECTORS=download

Flux utilisateur¶

Dans Silex, cliquez sur Publish
Sélectionnez Download comme hébergement
Cliquez sur Download website
Extrayez le fichier ZIP
Envoyez le contenu vers votre hébergeur

Déploiement vers Netlify¶

Après le téléchargement :

Allez sur netlify.com
Créez un nouveau site : Add new site → Deploy manually
Glissez-déposez le dossier extrait, ou :

npm install -g netlify-cli
cd my-silex-website
netlify deploy --prod

Déploiement vers Vercel¶

Après le téléchargement :

npm install -g vercel
cd my-silex-website
vercel --prod

Ou poussez sur GitHub et connectez le dépôt à Vercel.

Déploiement vers AWS S3¶

Après le téléchargement :

# Install AWS CLI
npm install -g aws-cli

# Configure credentials
aws configure

# Upload to S3
aws s3 sync . s3://my-bucket-name --delete

Activez l'hébergement de site web dans S3 :

Bucket → Properties → Static website hosting → Enable
Index document : index.html
Error document : 404.html (si disponible)

Approche 2 : Intégration CI/CD personnalisée¶

Automatisez le déploiement en configurant un pipeline CI/CD sur votre plateforme.

Netlify via intégration Git¶

Connectez votre dépôt Silex à Netlify :

Poussez le code source du site web sur GitHub/GitLab
Allez sur netlify.com
Add new site → Import an existing project
Connectez votre fournisseur Git
Configurez les paramètres de construction :
Build command : npm run build
Publish directory : _site ou public

Ou créez un netlify.toml :

[build]
  command = "npm run build"
  publish = "_site"

[build.environment]
  NODE_VERSION = "18"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Déploiement Vercel¶

Poussez sur GitHub et connectez Vercel :

Poussez le site web sur GitHub
Allez sur vercel.com
Import Project → Sélectionnez le dépôt
Configurez :
Build command : npm run build
Output directory : _site
Déployez

Ou utilisez la CLI Vercel :

vercel --prod

GitHub Pages¶

Publiez depuis un dépôt GitHub :

Poussez le site web sur GitHub (branche main ou dossier /docs)
Allez dans Settings → Pages
Sélectionnez la source : GitHub Actions ou main branch /docs folder
Ajoutez éventuellement un domaine personnalisé

Si vous utilisez GitHub Actions, créez .github/workflows/deploy.yml :

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm ci
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./_site

Cloudflare Pages¶

Déployez via Git ou la CLI Wrangler.

Via Git :

Poussez sur GitHub/GitLab
Allez dans Cloudflare Pages → Create a project
Connectez le dépôt Git
Configurez :
Build command : npm run build
Build output directory : _site
Déployez

Via CLI :

npm install -g wrangler
wrangler pages publish _site

AWS Amplify¶

Déployez depuis Git :

Poussez sur GitHub/CodeCommit/GitLab
Allez dans AWS Amplify → New app → Host web app
Connectez le dépôt Git
Configurez les paramètres de construction :

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: _site
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Approche 3 : Connecteur d'hébergement personnalisé¶

Pour les plateformes sans support intégré, écrivez un plugin de connecteur personnalisé.

Structure de base¶

// plugins/my-hosting-connector.js
const { HostingConnector, Connector } = require('@silexlabs/silex-plugins')

class MyHostingConnector extends HostingConnector {
  connectorId = 'my-hosting'
  displayName = 'My Hosting'
  color = '#0066cc'
  background = '#e6f2ff'
  icon = 'data:image/svg+xml,...'

  async isLoggedIn(session) {
    return !!session.myHostingToken
  }

  async getOAuthUrl(session) {
    return `https://my-platform.com/oauth?client_id=${this.options.clientId}`
  }

  async setToken(session, token) {
    session.myHostingToken = token.access_token
  }

  async publish(session, websiteId, files, jobManager) {
    try {
      // Upload files to your platform
      for (const file of files) {
        await this.uploadFile(session, websiteId, file)
        jobManager.setJobData(websiteId, {
          status: 'uploading',
          message: `Uploaded ${file.name}`,
        })
      }

      // Return job data with public URL
      return {
        id: Date.now().toString(),
        status: 'success',
        message: 'Website published',
      }
    } catch (error) {
      return {
        id: Date.now().toString(),
        status: 'error',
        message: error.message,
      }
    }
  }

  async getUrl(session, websiteId) {
    return `https://my-platform.com/${websiteId}`
  }

  async uploadFile(session, websiteId, file) {
    const formData = new FormData()
    formData.append('file', file.content)
    formData.append('path', file.path)

    const response = await fetch(
      `https://api.my-platform.com/upload/${websiteId}`,
      {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${session.myHostingToken}`,
        },
        body: formData,
      }
    )

    if (!response.ok) {
      throw new Error(`Upload failed: ${response.statusText}`)
    }
  }

  async getLoginForm(session, redirectTo) {
    return `
      <form action="https://my-platform.com/auth" method="POST">
        <input type="hidden" name="redirect" value="${redirectTo}">
        <input type="text" name="username" placeholder="Username" required>
        <input type="password" name="password" placeholder="Password" required>
        <button type="submit">Log in</button>
      </form>
    `
  }

  getOptions(formData) {
    return {
      username: formData.username,
    }
  }
}

module.exports = {
  name: 'MyHostingConnectorPlugin',
  async init(config, options) {
    config.addHostingConnector(
      new MyHostingConnector(config, options)
    )
  },
}

Enregistrer le plugin¶

Dans votre configuration serveur (.silex.js) :

const myHostingConnector = require('./plugins/my-hosting-connector')

module.exports = async function (config) {
  await config.addPlugin(myHostingConnector, {
    clientId: process.env.MY_HOSTING_CLIENT_ID,
    clientSecret: process.env.MY_HOSTING_CLIENT_SECRET,
  })
}

Redirections et réécritures¶

De nombreuses plateformes nécessitent des règles de redirection personnalisées. Exemples :

Redirections Netlify¶

Créez un fichier _redirects :

# Redirect /old-page to /new-page
/old-page /new-page 301

# SPA: redirect 404s to index.html
/*  /index.html  200

Ou utilisez netlify.toml :

[[redirects]]
  from = "/old-page"
  to = "/new-page"
  status = 301

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Redirections Vercel¶

Créez vercel.json :

{
  "redirects": [
    { "source": "/old/:path*", "destination": "/new/:path*" }
  ],
  "rewrites": [
    { "source": "/:path*", "destination": "/index.html" }
  ]
}

Configuration de domaine personnalisé¶

Toutes les plateformes prennent en charge les domaines personnalisés. Étapes générales :

Pointez l'enregistrement DNS A de votre domaine vers l'IP de la plateforme
Dans les paramètres de la plateforme, ajoutez le domaine
Attendez la propagation DNS (5 à 24 heures)
Activez le HTTPS (automatique sur la plupart des plateformes)

Variables d'environnement¶

Passez des secrets aux processus de construction :

Netlify : 1. Site settings → Build & deploy → Environment 2. Ajoutez des variables (par ex. API_KEY=...)

Vercel : 1. Settings → Environment Variables 2. Ajoutez des variables

GitHub Actions : 1. Settings → Secrets and variables → Actions 2. Ajoutez des secrets de dépôt 3. Utilisez dans le workflow : ${{ secrets.MY_SECRET }}

Optimisation des performances¶

La plupart des plateformes offrent : - Optimisation des images - Compression automatique - En-têtes de cache - Distribution via CDN

Configurez dans votre construction :

// Add cache-busting to asset names
config.cmsConfig.cacheBuster = true

// Set cache headers in netlify.toml
[[headers]]
  for = "/assets/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

[[headers]]
  for = "/*.html"
  [headers.values]
    Cache-Control = "public, max-age=0, must-revalidate"

Comparaison des plateformes¶

Plateforme	Facilité	Offre gratuite	Domaine personnalisé	Analytics	CDN
Netlify	Très facile	Oui	Oui	Oui	Oui
Vercel	Très facile	Oui	Oui	Oui	Oui
GitHub Pages	Facile	Oui	Oui (avec Pro)	Via tiers	Oui
Cloudflare Pages	Facile	Oui	Oui	Via Analytics	Oui
AWS Amplify	Moyen	Offre gratuite	Oui	Via CloudWatch	Oui
AWS S3 + CloudFront	Moyen	Non	Oui	Via CloudTrail	Oui

Voir aussi¶

Transformateurs de publication — Hooks de publication personnalisés
Personnalisation de GitLab CI/CD — Pipeline GitLab CI/CD
Connecteurs d'hébergement — Interface des connecteurs d'hébergement
Netlify docs
Vercel docs
Cloudflare Pages docs

Éditer cette page sur GitLab