Gestion des avatars utilisateurs avec AWS S3

Dans toute application de chat temps réel, personnaliser l’expérience utilisateur est essentiel.
Permettre à chaque utilisateur d’uploader et d’afficher un avatar rend l’interface plus humaine et favorise l’engagement.
Ce module « Gestion des avatars utilisateurs avec AWS S3 » s’intègre à notre stack basée sur Remix et NestJS pour gérer le stockage, la récupération et la suppression des images d’avatar dans un bucket AWS S3.

Pourquoi AWS S3 ?

• Haute disponibilité et scalabilité pour héberger des fichiers statiques.
• Génération d’URL pré-signées pour un accès sécurisé et contrôlé.
• Politique de cache à long terme (CacheControl) pour optimiser la distribution via CDN.

Rôle de chaque couche

• Frontend Remix : formulaire d’upload multipart, validation avec Zod, affichage de l’aperçu de l’avatar.
• Backend NestJS : service AwsS3Service pour effectuer les opérations S3, logique métier de mise à jour d’avatar dans la base de données via Prisma.
• Base de données Prisma : champ avatarFileKey stocke la référence au fichier dans S3.
• Stripe (optionnel) : gestion du statut canReceiveMoney si vous proposez des paiements P2P.

Objectifs du module

À l’issue de cette section, vous saurez :

• Configurer un bucket S3 et vos variables d’environnement AWS.
• Implémenter un uploadFile et un getFileUrl avec le SDK AWS v3.
• Construire un service NestJS injectable (AwsS3Service) pour encapsuler les commandes S3.
• Mettre à jour l’avatar d’un utilisateur dans la base via Prisma, en supprimant l’ancien fichier.
• Gérer le formulaire Remix en multipart/form-data avec validation Zod et feedback utilisateur.

Prérequis

• Avoir suivi le module d’authentification et de routing Remix
• Compte AWS avec un bucket S3 et clés IAM
• Projet NestJS avec Prisma déjà configuré
• Connaissances de base en TypeScript et React Hooks
• Notions sur les URL pré-signées et permissions S3

Aperçu de la solution

1
--- app/routes/settings.tsx
2
// Composant Remix pour l’upload et l’affichage de l’avatar
3
--- src/aws/aws-s3.service.ts
4
// Service NestJS utilisant @aws-sdk/client-s3 et getSignedUrl
5
--- src/user/user.service.ts
6
// Logique Prisma pour mettre à jour et supprimer les avatars

Nous découvrirons en détail chaque brique, du formulaire Remix aux commandes PutObjectCommand et DeleteObjectCommand de l’AWS SDK, en passant par la validation de fichier avec Zod.