Architecture C4 — Vue conteneurs

Vue Container — C4 Niveau 2

Diagramme C4 niveau 2 : les unités déployables et leurs interactions.
Version : 1.0 | Date : 2026-04-27

Le diagramme

Vue conteneurs C4

flowchart TB
subgraph SPAs["SPAs Azure App Service"]
  H[gs-hub]
  A[gs-admin]
  I[gs-inventaire]
  F[gs-fit]
end
P[api-portail<br/>SSR + API]
M[gs-mcp API]
SQL[(Azure SQL<br/>GS_Apps)]
SOFI[(SOFI VNet)]
AD[Azure AD]
SPAs --> AD
P --> AD
SPAs --> SQL
P --> SQL
M --> SOFI
classDef public fill:#fee2e2,stroke:#D92231,stroke-width:2px,color:#7f1d1d
classDef interne fill:#dbeafe,stroke:#1e40af,color:#1e40af
class P public
class H,A,I,F,M interne

Voir aussi : thème neutral / terminal

Exports D2 : docs/architecture/diagrams/rendered/neutral/containers-c4.svg et docs/architecture/diagrams/rendered/terminal/containers-c4.svg.

Source D2 sur GitHub

Les 6 conteneurs frontend / public

Container	Type	Tech	Hébergement	URL
gs-hub	SPA + API	React + Vite + MSAL.js	Azure App Service	hub.groupesignalisation.ca
gs-admin	SPA + API	React + Vite + MSAL.js	Azure App Service	admin.groupesignalisation.ca
gs-inventaire	SPA + API	React + Vite + MSAL.js	Azure App Service	inventaire.groupesignalisation.ca
gs-fit	SPA + API	React + Vite + MSAL.js	Azure App Service	fit.groupesignalisation.ca
gs-mcp	API	Node.js MCP Streamable HTTP	Azure App Service	mcp.groupesignalisation.ca
api-portail	SSR + API	Node.js Express + tedious	Azure App Service	portail.groupesignalisation.ca

Les conteneurs backend (futurs Phase 2)

Container	BC owner	Statut
api-admin	Hub + Admin frontends	Phase 2 (consolide gs-hub + gs-admin)
api-ops	Inventaire frontend	Phase 2
api-loisirs	Fit frontend	Phase 2
api-sst	Salus + Formation + Zone-sécur	Phase 2
api-portail	Portail mobile public + admin	Phase 1 (déployé)

Datastores

Datastore	Type	Rôle
`sql-gs-apps.GS_Apps`	Azure SQL Database	Données métier GS-Apps
SOFI (VNet)	SQL Server MicroAge	Source SOFI (ERP)
Azure AD tenant GS	Identity Provider	Auth + claims `groups`
1Password GS	Coffre secrets	Break-glass (compte admin SQL documenté)

Interactions clés

Protocoles entre conteneurs

flowchart LR
SPAs[SPAs React] -->|HTTPS + MSAL| AD[Azure AD]
Portail[api-portail] -->|OAuth PKCE| AD
Backends[Backends Node] -->|TDS + MI| SQL[(Azure SQL)]
MCP[gs-mcp] -->|TDS user SQL| SOFI[(SOFI)]
classDef interne fill:#dbeafe,stroke:#1e40af,color:#1e40af
class SPAs,Portail,Backends,MCP interne