J'ai sauvé 5000 utilisateurs des frais de bande passante explosifs
Nour
0:00 / 0:00
J'ai sauvé 5000 utilisateurs des frais de bande passante explosifs
419 просмотров · 6 месяцев назад
Nour
630 подписчиков
419 просмотров · 6 месяцев назад
Vos frais de stockage cloud explosent sur vos projets web et mobiles ? Dans ce tutoriel complet, je vous montre l'architecture ultime et économique pour vos applications : combiner Supabase pour la base de données et Cloudflare R2 pour le stockage gratuit des fichiers lourds (PDF, vidéos, images haute définition).
Pourquoi cette stack ? Cloudflare R2 n'a aucun frais de transfert de données (egress fees), ce qui est parfait pour les e-commerces ou les applications qui génèrent beaucoup de trafic. Supabase va simplement stocker le nom ou le lien des fichiers, tandis que Cloudflare gère tout le poids. Je l'utilise moi-même pour mon application audio (qui gère plus de 5000 utilisateurs !) sans payer de frais de bande passante excessifs.
Dans cette Partie 1, on part de zéro : création du compte Cloudflare, configuration du Bucket R2, génération des clés API secrètes (Access Key ID & Secret Access Key), et enfin l'intégration du code dans votre projet (React Native / Node.js) via les fichiers .env et la configuration Amazon S3 / SDK.
Si vous êtes développeur et que vous voulez optimiser les coûts de vos applications, ce guide est fait pour vous. Si vous rencontrez des erreurs ou des bugs de transfert, rejoignez mon Discord ou posez vos questions en commentaire !
📌 CHAPITRES DU TUTORIEL :
00:00 - L'architecture ultime : Pourquoi utiliser Supabase + Cloudflare R2 ?
01:51 - Création du compte Cloudflare et accès au dashboard
02:49 - Activer R2 Object Storage (Pourquoi il faut lier une carte bancaire)
04:35 - Créer son premier Bucket Cloudflare R2
05:33 - Configuration du Bucket (CORS Policy JSON)
06:18 - Créer et configurer le Token API (Clés secrètes et Permissions)
08:20 - Sauvegarder l'Access Key ID et le Secret Access Key
09:22 - Intégration dans le projet (React Native / JS) : Installation SDK
10:10 - Création du fichier storageService.js (Code)
11:39 - Sécuriser les clés dans le fichier .ENV
12:59 - Démonstration en direct : Mon application audio (+5000 utilisateurs)
15:00 - Posez vos questions sur Discord si vous êtes bloqués !
💻 RESSOURCES ET CODE DE LA VIDÉO :
👉 Lien Cloudflare : https://dash.cloudflare.com/
👉 Commande d'installation (SDK AWS S3) : npm install @aws-sdk/client-s3
👉 (
JSON
[
{
"AllowedOrigins": ["*"],
"AllowedMethods": ["GET", "PUT", "POST", "DELETE", "HEAD"],
"AllowedHeaders": ["*"]
}
]
)
👉 (https://github.com/nourtd1/Supabase-e...)
🚀 MES PROJETS ET MON PORTFOLIO :
Découvrez mes applications, dont celle mentionnée dans la vidéo (cours audio) :
👉 Mon Portfolio : https://portfolio-nour-td.vercel.app/
👉 Téléchargez mon application (Chadito) : https://play.google.com/store/apps/de...
📱 REJOIGNEZ LA COMMUNAUTÉ DES DÉVELOPPEURS :
Si vous bloquez sur une ligne de code ou un bug d'API, venez en parler :
Mon Discord (Réponse rapide !) : / discord
LinkedIn : https://www.linkedin.com/in/annour-ma...
Pour des astuces de dev et de l'inspiration au quotidien :
TikTok : https://www.tiktok.com/@cllme.nour?_r...
Instagram : https://www.instagram.com/cllme.nour?...
Si cette vidéo vous a fait économiser de l'argent sur vos serveurs, n'oubliez pas de lâcher un Like et de vous abonner pour la Partie 2 ! Peace ✌️
#Supabase #CloudflareR2 #DeveloppementWeb #ReactNative #Programmation #TutorielDev #CloudStorage #AWS #Javascript #AnnourMahamatAbdoulaye #nour