refacto(ci): local and jenkins Lighthouse audit use common docker compose service (#3)

Co-authored-by: Lucas <lucasroyer.dev@gmail.com>
Reviewed-on: #3

.env.dist

@@ -1,2 +1,4 @@
 NODE_VERSION=24
-CADDY_VERSION=2.10.2
+CADDY_VERSION=2.10.2
+LHCI_VERSION=0.15.x
+ZENIKA_VERSION=124-with-node

.gitignore

@@ -5,6 +5,7 @@ dist/
 
 # dependencies
 node_modules/
+.pnpm-store/
 
 # logs
 npm-debug.log*
@@ -22,3 +23,9 @@ pnpm-debug.log*
 
 # jetbrains setting folder
 .idea/
+
+# vscode
+.vscode/
+
+# Lighthouse CI reports
+.lighthouseci/

.lighthouserc.cjs

@@ -0,0 +1,24 @@
+module.exports = {
+  ci: {
+    collect: {
+      staticDistDir: '/app/dist',
+      settings: {
+        chromeFlags: '--no-sandbox --disable-setuid-sandbox --headless=new --disable-gpu --disable-dev-shm-usage',
+        targets: ['filesystem'],
+      },
+      numberOfRuns: 1
+    },
+    assert: {
+      assertions: {
+        'categories:performance': ['error', {minScore: 0.9}],
+        'categories:accessibility': ['error', {minScore: 0.9}],
+        'categories:best-practices': ['error', {minScore: 0.9}],
+        'categories:seo': ['error', {minScore: 0.9}],
+      },
+    },
+    upload: {
+        target: 'filesystem',
+        outputDir: './.lighthouseci', // C'est ici que Jenkins ira chercher les fichiers
+    },
+  },
+};

.vscode/extensions.json

@@ -1,4 +0,0 @@
-{
-  "recommendations": ["astro-build.astro-vscode", "unifiedjs.vscode-mdx"],
-  "unwantedRecommendations": []
-}

.vscode/launch.json

@@ -1,11 +0,0 @@
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "command": "./node_modules/.bin/astro dev",
-      "name": "Development server",
-      "request": "launch",
-      "type": "node-terminal"
-    }
-  ]
-}

Jenkinsfile

@@ -2,6 +2,7 @@ pipeline {
     agent any
     environment {
         DOCKER_HOST = "unix:///var/run/docker.sock"
+        APP_VERSION = "${env.BRANCH_NAME}-${env.BUILD_NUMBER}"
     }
     stages {
         stage('Build') {
@@ -9,12 +10,41 @@ pipeline {
                 // Get Caddy version
                 sh "cp .env.dist .env"
                 // Push portfolio version
-                sh "echo '\nPORTFOLIO_VERSION=${env.BRANCH_NAME}-${env.BUILD_NUMBER}' >> .env"
+                sh "echo '\nPORTFOLIO_VERSION=${env.APP_VERSION}' >> .env"
 
                 echo "Building new portfolio version..."
                 sh "docker compose build"
             }
         }
+        stage('Lighthouse Audit') {
+            steps {
+
+                // Create volumes but no run with safety
+                sh "docker rm -f audit-tmp lighthouse-audit || true"
+                sh "docker compose --profile audit create --no-build --remove-orphans lighthouse-audit"
+
+                // Extract astro data from temp container to tmp-dist folder
+                sh "docker create --name audit-tmp portfolio:${env.APP_VERSION}"
+                sh "mkdir -p ./tmp-dist"
+                sh "docker cp audit-tmp:/usr/share/caddy/. ./tmp-dist"
+                sh "docker rm -f audit-tmp"
+
+                // Inject data from tmp-dist and config to audit container 
+                sh "docker cp ./tmp-dist/. lighthouse-audit:/app/dist/"
+                sh "docker cp .lighthouserc.cjs lighthouse-audit:/app/dist/audit-config.cjs"
+                sh "rm -rf ./tmp-dist"
+
+                // Now run
+                sh "docker start -a lighthouse-audit"
+
+                // Get reports
+                sh "mkdir -p ./.lighthouseci"
+                sh "docker cp lighthouse-audit:/app/.lighthouseci/. ./.lighthouseci/"
+
+                // Clean
+                sh "docker rm -f lighthouse-audit"
+            }
+        }
         stage('Deploy') {
             // Deploy only master branch
             when {
@@ -35,7 +65,16 @@ pipeline {
     }
     post {
         always { 
-            echo "Clean unused image..."
+            echo "Publish Lighthouse audit..."
+            publishHTML([
+                allowMissing: true,
+                alwaysLinkToLastBuild: true,
+                keepAll: false,
+                reportDir: '.lighthouseci',
+                reportFiles: '*.html',
+                reportName: 'Lighthouse Report'
+            ])
+            echo "Clean unused image"
             sh "docker image prune -f" 
         }
         success { echo "Success !" }

docker-compose.yml

@@ -11,6 +11,26 @@ services:
     networks:
       - reverse-proxy
 
+  lighthouse-audit:
+    profiles:
+      - audit
+    image: zenika/alpine-chrome:${ZENIKA_VERSION}
+    container_name: lighthouse-audit
+    user: "0:0"
+    volumes:
+      - audit_dist:/app/dist
+      - audit_reports:/app/.lighthouseci
+      - npm_cache:/root/.npm
+    environment:
+      - CHROME_PATH=/usr/bin/chromium-browser
+    working_dir: /app
+    command: npx --prefer-offline @lhci/cli@${LHCI_VERSION} autorun --config=/app/dist/audit-config.cjs
+
+volumes:
+  audit_dist:
+  audit_reports:
+  npm_cache:
+
 networks:
   reverse-proxy:
     external: true

local-lighthouse.sh

@@ -0,0 +1,28 @@
+#!/bin/bash
+
+# Clean old audits and containers
+rm -rf ./.lighthouseci
+docker rm -f lighthouse-audit || true
+
+# Load env file and avoid warning for unused portofolio version
+if [ -f .env.dist ]; then
+    export $(grep -v '^#' .env.dist | xargs)
+fi
+export PORTFOLIO_VERSION="local-audit"
+
+# Create container but no start
+docker compose --profile audit create --no-build --remove-orphans lighthouse-audit
+
+# Inject data and config to container 
+docker cp ./dist/. lighthouse-audit:/app/dist/
+docker cp .lighthouserc.cjs lighthouse-audit:/app/dist/audit-config.cjs
+
+# Now run
+docker start -a lighthouse-audit
+
+# Get reports
+mkdir -p ./.lighthouseci
+docker cp lighthouse-audit:/app/.lighthouseci/. ./.lighthouseci/
+
+# Clean container
+docker rm -f lighthouse-audit