142 lines
5.9 KiB
Markdown
142 lines
5.9 KiB
Markdown
# 🐚 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
|
|
|
|
```text
|
|
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
|
|
1. Dans Portainer, allez dans **Stacks** puis cliquez sur **+ Add stack**.
|
|
2. Nommez la stack (ex: `coquillages`).
|
|
3. 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).
|
|
4. *(Optionnel)* Activez **Automatic updates** (polling ou Webhook) pour que Portainer redéploie automatiquement l'application à chaque `git push` !
|
|
5. Cliquez sur **Deploy the stack**.
|
|
|
|
> 💡 **Persistance des données dans Portainer :**
|
|
> La stack utilise deux volumes Docker nommés (`coquillages_data` et `coquillages_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)
|
|
```bash
|
|
# 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** :
|
|
1. **Domain Names** : `coquillages.home.arrondeau.fr` (ou votre sous-domaine choisi)
|
|
2. **Scheme** : `http`
|
|
3. **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`)
|
|
4. **Forward Port** : `5180` (ou `80` en interne)
|
|
5. **Options recommandées** :
|
|
- [x] **Block Common Exploits**
|
|
- [x] **Websockets Support**
|
|
6. **Onglet SSL** :
|
|
- Sélectionnez ou générez un certificat SSL Let's Encrypt
|
|
- [x] **Force SSL**
|
|
- [x] **HTTP/2 Support**
|
|
- [x] **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 :
|
|
1. Allez sur la [Console Alexa Developer](https://developer.amazon.com/alexa/console/ask).
|
|
2. Ouvrez votre Skill **La Banque des Coquillages**.
|
|
3. 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**.
|
|
4. Dans **Interaction Model > JSON Editor** :
|
|
- Collez le contenu de [`skill/interactionModels/custom/fr-FR.json`](./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 :
|
|
|
|
```bash
|
|
# 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)
|
|
|
|
```bash
|
|
# 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
|
|
```
|