🐚 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 Docker & Nginx Proxy Manager (NPM)

1. Démarrer avec Docker Compose

Sur votre serveur Docker :

# 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 : port 5180 (sert l'application React et relaie automatiquement /api/ et /uploads/ vers le backend).
coquillages-backend : port 4050 (API Node.js + base SQLite persistée dans ./data et 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 (ou 80 en 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.

📦 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

4.7 KiB Raw Blame History