Skip to content

Méthode d'hébergement des fichiers

Jump to bottom
Johan le stickman edited this page Jun 2, 2022 · 1 revision

Firebase

Avantages :

  • 5 GB de stockage gratuit, puis 0.026 $ par GB utilisé.
  • Aucune limite de taille maximum par fichier.
  • Aucune carte de crédit requise.
  • Statistiques sur le stockage utilisé, le nombre de fichiers, de bande-passante envoyée et de requêtes effectués.

Préparer un projet :

Créer un nouveau projet Firebase

Si vous souhaiter utiliser un projet déjà existant, vous pouvez ignorer cette partie.

  1. Rendez-vous sur la console Firebase. Page d'accueil

  2. Cliquer sur "Ajouter un projet" et donner à votre projet le nom que vous souhaiter. Donner un nom au projet

  3. Cliquer sur Continuer et patienter pendant que votre projet se créer.

Obtenir les informations d'identifications

  1. Vous aurez maintenant besoin de configurer votre projet pour l'ajouter à une "application", celle-ci vous donnera accès aux informations d'identifications de votre projet.

  2. Cliquer sur le logo </> pour configurer Firebase pour le web. Ajouter le SDK Firebase

  3. Ajouter un nom à votre application et cliquer sur "Enregistrer l'application". Entrer un nom

  4. Noter les informations d'identification commençant par "apiKey: ", "authDomain: ", "projectId: " et "storageBucket: ", vous en aurez besoin plus tard Récupérer les informations

Modifier les règles de sécurité :

Rendez vous dans l'onglet "Storage" puis dans "Rules", copier coller le code suivant :

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read;
    }
  }
}

Modifier les règles de sécurité

Régler les CORS :

Modifer les CORS permettra à n'importe quel site (y compris le votre) de pouvoir intégrer et accéder à vos fichiers en utilisant leur URL.

  1. Dans la partie "Storage", copier le nom du bucket (la partie après gs://), vous en aurez besoin dans les prochaines étapes. Copier l'URL du "bucket"

  2. Rendez-vous sur la console Google Cloud.

  3. Vous verrez un terminal dans la partie en bas de l'écran, cliquer sur le "+" et sélectionner votre projet Firebase dans la liste. Ouvrer un terminal

  4. Dans la partie contenant le terminal, copier coller la commande suivante : echo "[ { \"origin\": [\"*\"], \"method\": [\"GET\"], \"maxAgeSeconds\": 3600 } ]" > cors.json

  5. Pour finir, utiliser la commande gsutil cors set cors.json <l'url du bucket, trouvé dans la première étape>

Configurer StickStorage :

Noter qu'après une modification des fichiers .env ou config.jsonc, un redémarrage du serveur est requis pour appliquer les changements.

Dans votre dossier contenant tous les fichiers du serveur web, créer un fichier .env et remplissez les informations d'identification que vous avez obtenu il y a quelques étapes

FIREBASE_API_KEY=<apiKey>
FIREBASE_AUTH_DOMAIN=<authDomain>
FIREBASE_PROJECT_ID=<projectId>
FIREBASE_STORAGE_BUCKET=<storageBucket>

Ensuite, installer le SDK Firebase pour NodeJS avec npm : npm i firebase. Si vous n'avez pas accès à un terminal, modifier simplement le fichier package.json pour y ajouter la dépendance Firebase manuellement. Ouvrer un terminal

Pour finir, modifier le fichier config.jsonc de votre serveur web afin d'utiliser le type de stockage approprié, plus d'informations sur la partie Configuration du wiki.

Supabase

Avantages :

  • 1 GB gratuit, ou alors 25$ par mois pour 100 GB.
  • Aucune carte de crédit requise.

Inconvénients :

  • Limite de taille maximum de 50 MB par fichier sur le plan gratuit, jusqu'à 5 GB sur le plan Pro.
  • Limite de 2 projets gratuit par compte.
  • Les projets gratuits se mettent en pause automatiquement après 1 semaine d'inactivité. Source

Préparer un projet :

Les instructions pour créer un projet et un bucket arriveront plus tard...

Modifier les règles de sécurité :

La modification suivante permettra à toutes personnes de visionner et télécharger tout les fichiers via leur URL

  1. Rendez vous dans l'onglet "Storage" puis dans "Policies".

  2. À côté de "Other polices under storage.objects", cliquer sur "New policy" pour créer une nouvelle règle. Créer une nouvelle règle

  3. Cliquer sur "Get started quickly" pour choisir un template. Créer une nouvelle règle

  4. Sélectionner le premier template : "Enable read access to everyone" Créer une nouvelle règle

  5. Modifier le titre si vous le souhaiter puis cliquer sur "Review" Créer une nouvelle règle

  6. Enregistrer la règle de sécurité en cliquant sur "Save policy" Créer une nouvelle règle

Obtenir les informations d'identification :

  1. Rendez-vous dans les paramètres de votre projet depuis l'interface Supabase.
  2. Dans les paramètres du projet, allez dans la partie "API".
  3. Noter que seul l'URL du projet (SUPABASE_LINK) et la clé anon (SUPABASE_ANON_KEY) sont utiles pour la configuration de StickStorage. Récupérer les informations

Configurer StickStorage :

Noter qu'après une modification des fichiers .env ou config.jsonc, un redémarrage du serveur est requis pour appliquer les changements.

Dans votre dossier contenant tous les fichiers du serveur web, créer un fichier .env et remplissez les informations suivantes (suivez l'étape juste au-dessus pour les obtenir).

SUPABASE_LINK=<URL finissant par supabase.co>
SUPABASE_ANON_KEY=<clé anon>
SUPABASE_STORAGE_BUCKET=<nom du bucket utilisé pour le stockage>

Ensuite, installer le SDK Supabase pour NodeJS avec npm : npm i @supabase/supabase-js. Si vous n'avez pas accès à un terminal, modifier simplement le fichier package.json pour y ajouter la dépendance manuellement. Installer la dépendance

Pour finir, modifier le fichier config.jsonc de votre serveur web afin d'utiliser le type de stockage approprié, plus d'informations sur la partie Configuration du wiki.

Clone this wiki locally