Page d'accueil welcome¶

La page welcome est la porte d'entrée visuelle de la stack PerfShop. Affichée au démarrage du conteneur sur son propre port, elle liste les services exposés avec leur URL et leurs identifiants éventuels. C'est un atterrissage pédagogique pour les étudiants et formateurs qui arrivent sur un environnement fraîchement déployé.

Sources

welcome/index.html, welcome/welcome.js, welcome/welcome.css, welcome/entrypoint.sh, welcome/nginx.conf, welcome/Dockerfile, welcome/i18n/{fr,en}.json

Architecture¶

Le conteneur perfshop-welcome est une image Nginx statique minimaliste :

welcome/
├── Dockerfile        ← nginx:1.27-alpine + copies + ENTRYPOINT
├── entrypoint.sh     ← injection des URLs et de l'i18n au démarrage
├── nginx.conf        ← serveur statique port 3011
├── index.html        ← structure de la page
├── welcome.css       ← styles
├── welcome.js        ← construction du tableau des services
└── i18n/
    ├── fr.json
    └── en.json

Au démarrage, entrypoint.sh remplace des marqueurs dans index.html et welcome.js par les valeurs des variables d'environnement (HOST_IP, PUBLIC_*_URL), puis charge le dictionnaire i18n depuis i18n/<lang>.json et l'injecte comme window.__I18N__ = {...} en tête de welcome.js.

Ce modèle permet de construire une seule image et de la déployer sur plusieurs cibles sans rebuild.

Port¶

Le service écoute sur le port 3011 (déclaré dans nginx.conf et exposé par le Dockerfile). Ce port est dédié à l'accueil et ne sert rien d'autre.

Les deux modes : `ip` et `dns`¶

La variable WELCOME_MODE contrôle la stratégie de construction des URLs :

Mode	Quand l'utiliser	Comportement
`ip` (défaut)	Docker Desktop, VPS, Unix local	Toutes les URLs sont construites depuis `HOST_IP` et les ports numériques (ex: `http://${HOST_IP}:9091`)
`dns`	NAS / production avec domaines	Chaque URL est injectée individuellement depuis les variables `PUBLIC_*_URL` (ex: `https://perfshop-frontend.perfshop.io`)

Mode IP¶

En mode ip, entrypoint.sh effectue une série de sed -i qui remplacent les marqueurs __URL_FRONTEND__, __URL_API__, __URL_GRAFANA__, etc. par des URLs construites dynamiquement :

sed -i \
  -e "s|__HOST_IP__|${HOST_IP}|g" \
  -e "s|__URL_FRONTEND__|http://${HOST_IP}:9091|g" \
  -e "s|__URL_API__|http://${HOST_IP}:9080|g" \
  ...

Les étudiants en salle de classe utilisent ce mode : un seul HOST_IP (par exemple l'IP du poste formateur, ou localhost sur Docker Desktop) suffit à générer toutes les URLs.

Mode DNS¶

En mode dns, chaque URL doit être fournie individuellement via une variable d'environnement dédiée. Le script lit :

PUBLIC_FRONTEND_URL
PUBLIC_API_URL
PUBLIC_MONITORING_URL
PUBLIC_GRAFANA_URL
PUBLIC_CHAOS_URL
PUBLIC_ADMIN_URL
PUBLIC_DOCS_URL
PUBLIC_SQUASH_URL
PUBLIC_SELENIUM_VNC_URL
PUBLIC_FORGEJO_URL
PUBLIC_SCRIPTS_URL
PUBLIC_JMETER_URL
PUBLIC_OPENSEARCH_URL

C'est le mode utilisé en production sur un NAS avec un reverse-proxy HTTPS et des sous-domaines dédiés à chaque service.

Internationalisation¶

La variable PERFSHOP_LANG contrôle la langue. entrypoint.sh lit /usr/share/nginx/html/i18n/<lang>.json ; si le fichier n'existe pas, il log un warning et fallback sur fr. Le contenu du JSON est injecté comme window.__I18N__ = {...} en tête de welcome.js :

printf '// i18n — injecté par entrypoint.sh\nwindow.__I18N__ = %s;\n\n' "${I18N_JSON}" > "${TMPFILE}"
cat "${WEBROOT}/welcome.js" >> "${TMPFILE}"
mv "${TMPFILE}" "${WEBROOT}/welcome.js"

La clé __lang__ est ajoutée au JSON avant injection pour que le JS sache quelle langue est active. Le chmod 644 final garantit que nginx peut lire le fichier généré en runtime (sinon mktemp crée en 600, root-only → nginx worker renvoie 403).

L'attribut lang de la balise <html> est lui aussi injecté via sed sur le marqueur __LANG__ dans index.html.

Structure de la page¶

En-tête¶

Un bandeau simple avec le logo PerfShop (éclair ⚡ + titre), une tagline localisée (« Pedagogical Chaos Engineering Platform ») et un badge vert « Stack déployée » qui signifie visuellement que tous les services attendus répondent.

Hero¶

Une section centrale qui contient :

Un titre accrocheur (« Bienvenue sur PerfShop ! »)
Un sous-titre (« Votre environnement complet de tests de performance, chaos engineering et QA est prêt. »)
Une pill grise indiquant l'IP serveur (🖥️ Serveur : <HOST_IP>)

Tableau des services¶

Le cœur de la page : un tableau HTML rempli dynamiquement par welcome.js à partir de window.__I18N__ et des URLs injectées par entrypoint.sh. Chaque ligne suit le même format :

Service	URL	Description	Compte(s)
Frontend shop	Lien cliquable	Vitrine e-commerce PerfShop, cible des chaos	—
API Spring Boot	Lien cliquable	Backend + /actuator/prometheus	—
Monitoring HTML	Lien cliquable	Dashboard temps réel conteneurs + JVM	—
Grafana	Lien cliquable	Observabilité : dashboards livrés	admin / perfshop
Chaos Admin	Lien cliquable	Panneau formateur + page étudiant	admin@perfshop.fr / perfshop
Documentation	Lien cliquable	MkDocs — cette doc elle-même	—
Squash TM	Lien cliquable	Gestion des cas de test	admin / admin
Selenium VNC	Lien cliquable	Vue VNC des navigateurs Selenium	—
Forgejo	Lien cliquable	Git auto-hébergé	forgejo-admin / perfshop
Scripts UI	Lien cliquable	Éditeur web de scripts Robot / pytest	admin@perfshop.fr / perfshop
JMeter UI	Lien cliquable	Lanceur de tests JMeter	admin@perfshop.fr / perfshop
OpenSearch	Lien cliquable	Dashboards / puits de logs	admin / perfshop

Les libellés et descriptions sont traduits depuis le dictionnaire i18n. La colonne « Compte(s) » affiche les identifiants par défaut du déploiement — c'est volontairement explicite pour un environnement pédagogique isolé ; ces valeurs doivent être changées pour toute exposition publique.

Certains services annexes du projet ne sont pas listés dans cette documentation. La page peut également lister d'autres entrées ajoutées par le déploiement local — elle affiche simplement ce que welcome.js lui fournit à partir des variables d'environnement disponibles.

Pied de page¶

Un footer minimaliste avec la mention de licence (AGPL-3.0), le lien vers perfshop.io et le contact auteur.

Variables d'environnement consommées¶

Variable	Mode	Défaut
`WELCOME_MODE`	Les deux	`ip`
`HOST_IP`	`ip`	`localhost`
`PERFSHOP_LANG`	Les deux	`fr`
`PUBLIC_FRONTEND_URL`	`dns`	`http://localhost:9091`
`PUBLIC_API_URL`	`dns`	`http://localhost:9080`
`PUBLIC_MONITORING_URL`	`dns`	`http://localhost:3001`
`PUBLIC_GRAFANA_URL`	`dns`	`http://localhost:3002`
`PUBLIC_CHAOS_URL`	`dns`	`http://localhost:3003`
`PUBLIC_ADMIN_URL`	`dns`	`http://localhost:3004`
`PUBLIC_DOCS_URL`	`dns`	`http://localhost:9087`
`PUBLIC_SQUASH_URL`	`dns`	`http://localhost:9086/squash`
`PUBLIC_SELENIUM_VNC_URL`	`dns`	`http://localhost:7900`
`PUBLIC_FORGEJO_URL`	`dns`	`http://localhost:3009`
`PUBLIC_SCRIPTS_URL`	`dns`	`http://localhost:3008`
`PUBLIC_JMETER_URL`	`dns`	`http://localhost:3005`
`PUBLIC_OPENSEARCH_URL`	`dns`	`http://localhost:5601`

Voir la référence des variables d'environnement pour le détail complet.