Servir et déployer

Le site est un dossier de fichiers statiques. Il peut être servi par n'importe quel serveur HTTP, mais deux configurations sont versionnées : le serveur de développement serve piloté par serve.json, et une image Docker nginx décrite par le Dockerfile et le dossier docker/.

#Servir en local

Depuis le dossier du site :

cd frontend-office-tourisme
npm run dev

Le script dev de package.json lance npx --yes serve@14.2.7 . -l 4000. Il n'y a pas de npm ci à faire : npx télécharge la version exacte de serve au premier lancement, ce qui demande un accès à l'annuaire npm. Le site est alors disponible sur http://localhost:4000.

serve lit serve.json :

Servir le site avec la même politique de sécurité de contenu qu'en production permet de détecter en développement un style en ligne ou une ressource externe qui serait bloqué une fois déployé.

D'autres serveurs conviennent pour un essai rapide, sans les en-têtes : l'extension Live Server de VS Code, ou python -m http.server 4000. Ouvrir directement index.html depuis le disque ne fonctionne pas : le navigateur bloque le chargement des modules ES en file://.

#Image Docker

FROM nginxinc/nginx-unprivileged:1.30-alpine
USER root
RUN apk upgrade --no-cache
USER 101
COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
COPY docker/security-headers.conf /etc/nginx/snippets/security-headers.conf
COPY --chown=nginx:nginx *.html /usr/share/nginx/html/
COPY --chown=nginx:nginx assets /usr/share/nginx/html/assets
COPY --chown=nginx:nginx .well-known /usr/share/nginx/html/.well-known
EXPOSE 8080
HEALTHCHECK --interval=30s --timeout=3s CMD wget -q -O /dev/null http://127.0.0.1:8080/health || exit 1

Le .dockerignore écarte README.md, package.json, serve.json, le Dockerfile et les journaux : ces fichiers ne sont pas servis en production.

Construire et lancer l'image seule, depuis la racine du dépôt :

docker build -t blocklucky-tourisme frontend-office-tourisme
docker run --rm -p 4000:8080 blocklucky-tourisme

#Configuration nginx

docker/nginx.conf définit un seul serveur :

Les durées de cache dépendent du type de fichier :

#En-têtes de sécurité

Les en-têtes sont regroupés dans docker/security-headers.conf :

#Politique de sécurité de contenu

default-src 'self'; script-src 'self'; style-src 'self'; style-src-attr 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self'; object-src 'none'; base-uri 'none'; frame-ancestors 'none'; form-action 'self'

La même valeur est écrite dans security-headers.conf et dans serve.json.

Le lien « Accéder à la loterie » n'est pas concerné : une navigation vers un autre site n'est pas une ressource chargée.

#Dans Docker Compose

Le service tourisme de docker-compose.yml fait partie du profil app :

tourisme:
  profiles: ["app"]
  <<: *hardening
  build:
    context: ./frontend-office-tourisme
  ports:
    - "4000:8080"
  restart: unless-stopped

Pour ne lancer que ce service :

docker compose --profile app up -d --build tourisme

Le contexte de construction et la stack complète sont décrits dans Docker Compose et Images Docker.

#Vérifications de la CI

Le job tourisme de .github/workflows/ci.yml s'exécute quand un fichier de frontend-office-tourisme/ ou le workflow change :

Le script check-static-links.mjs ignore les liens absolus (https:, mailto:, tel:), les ancres seules et les gabarits ${...}, puis retire paramètres et ancre avant de tester l'existence du fichier. Il affiche 14 pages vérifiées, aucune ressource locale manquante quand tout va bien.

Le job docker construit ensuite l'image, puis Trivy l'analyse et échoue sur toute vulnérabilité CRITICAL ou HIGH pour laquelle un correctif existe (--ignore-unfixed). Dependabot propose chaque semaine les nouvelles versions de l'image de base (écosystème docker, voir Dépendances).

#Avant une mise en ligne

La cible prévue est tourisme.etherbay.tech, derrière le proxy Caddy de la machine de démonstration (voir Environnements et Déploiement sur etherbay.tech). Le conteneur sert du HTTP ; Caddy termine le HTTPS.