🐚 La Banque des Coquillages — Hailey, Violette & Andreas
Application familiale Physique + Digitale (Site Web + API + Skill Alexa Echo Show) pour gérer les coquillages de Hailey, Violette et Andreas, leurs activités communes du mois, leur tirelire en euros (max 5 € / mois = 10 coquillages) et leur livret d'épargne bloquée avec intérêts mensuels.
📁 Structure du Projet
arrweek/
├── back/ # API REST Node.js 22 + Express + SQLite (node:sqlite) + Webhook Alexa
│ └── Dockerfile # Image Docker backend de production (Node 22 Alpine)
├── front/ # Application Web React + Vite + Tailwind CSS
│ ├── Dockerfile # Image Docker frontend multi-stage (Node 22 + Nginx Alpine)
│ └── nginx.conf # Configuration Nginx avec reverse proxy (/api/ & /uploads/)
├── skill/ # Skill Alexa officiel
│ ├── interactionModels/ # Modèle d'interaction vocal (fr-FR.json)
│ └── lambda/ # Handler ASK SDK avec écrans APL 1.8 tactiles pour Echo Show
├── docker-compose.yml # Déploiement Docker complet (backend + frontend + volumes)
└── package.json # Monorepo npm workspaces
🐳 Déploiement avec Portainer
Grâce à votre dépôt sur git.home.arrondeau.fr, vous pouvez déployer et mettre à jour la stack directement depuis l'interface Portainer :
1. Créer la Stack dans Portainer
- Dans Portainer, allez dans Stacks puis cliquez sur + Add stack.
- Nommez la stack (ex:
coquillages). - Choisissez l'option Repository :
- Repository URL :
https://git.home.arrondeau.fr/<votre-utilisateur>/<votre-depot>.git - Repository reference :
refs/heads/main - Compose path :
docker-compose.yml - Si votre dépôt Git est privé, activez Authentication et renseignez votre nom d'utilisateur et mot de passe (ou jeton d'accès personnel).
- Repository URL :
- (Optionnel) Activez Automatic updates (polling ou Webhook) pour que Portainer redéploie automatiquement l'application à chaque
git push! - Cliquez sur Deploy the stack.
💡 Persistance des données dans Portainer : La stack utilise deux volumes Docker nommés (
coquillages_dataetcoquillages_uploads). Vos données (comptes, tirelire, historique des coquillages, images) sont visibles dans l'onglet Volumes de Portainer et restent 100% préservées lors des mises à jour ou recréations de stack.
🐳 Déploiement en ligne de commande (Docker Compose classique)
# Cloner le dépôt depuis votre git perso
git clone https://git.home.arrondeau.fr/<votre-utilisateur>/<votre-depot>.git
cd <votre-depot>
# Créer les dossiers de persistance
mkdir -p data uploads
# Lancer la stack en arrière-plan
docker compose up -d --build
Services démarrés :
coquillages-frontend: port5180(sert l'application React et relaie automatiquement/api/et/uploads/vers le backend).coquillages-backend: port4050(API Node.js + base SQLite persistée dans./dataet images dans./uploads).
🌐 2. Configuration dans Nginx Proxy Manager (NPM)
Dans l'interface web de votre Nginx Proxy Manager :
Option A (Recommandée — Domaine unique tout-en-un) :
Créez un nouveau Proxy Host :
- Domain Names :
coquillages.home.arrondeau.fr(ou votre sous-domaine choisi) - Scheme :
http - Forward Hostname / IP :
IP_DE_VOTRE_SERVEUR_DOCKER(ou le nom du conteneur si NPM est sur le même réseau Docker :coquillages-frontend) - Forward Port :
5180(ou80en interne) - Options recommandées :
- Block Common Exploits
- Websockets Support
- Onglet SSL :
- Sélectionnez ou générez un certificat SSL Let's Encrypt
- Force SSL
- HTTP/2 Support
- HSTS Enabled
🎉 Résultat :
- Application Web :
https://coquillages.home.arrondeau.fr- API REST :
https://coquillages.home.arrondeau.fr/api/...- Endpoint Alexa Webhook permanent :
https://coquillages.home.arrondeau.fr/api/alexa/webhook(plus besoin de tunnel SSH ou localhost.run !)
🎙️ 3. Configuration de l'Endpoint dans la Console Alexa Developer
Une fois exposé via NPM avec votre certificat HTTPS :
- Allez sur la Console Alexa Developer.
- Ouvrez votre Skill La Banque des Coquillages.
- Dans Endpoint :
- Sélectionnez HTTPS.
- Default Region :
https://coquillages.home.arrondeau.fr/api/alexa/webhook - Sélectionnez l'option de certificat SSL : « My development endpoint has a Certificate from a trusted certificate authority » (Let's Encrypt).
- Cliquez sur Save Endpoints.
- Dans Interaction Model > JSON Editor :
- Collez le contenu de
skill/interactionModels/custom/fr-FR.json. - Cliquez sur Save Model puis Build Model.
- Collez le contenu de
📦 4. Initialisation & Push sur votre Git perso (git.home.arrondeau.fr)
Pour initialiser ce dépôt local et le pousser sur votre instance Git personnelle :
# 1. Initialiser le dépôt git localement
git init
# 2. Ajouter tous les fichiers (le .gitignore protège les node_modules et sqlite)
git add .
# 3. Premier commit
git commit -m "feat: Banque des Coquillages v1.0 avec Docker et support NPM"
# 4. Définir la branche principale
git branch -M main
# 5. Lier votre serveur Git perso
git remote add origin https://git.home.arrondeau.fr/<votre-utilisateur>/<nom-du-depot>.git
# 6. Pousser le code
git push -u origin main
💻 Développement Local (sans Docker)
# Lancer Backend + Frontend simultanément
npm run start:all
# Ou séparément :
npm run dev:back # Backend sur http://localhost:4050
npm run dev:front # Frontend Vite sur http://localhost:5180