Voor een efficiënte multi-stage build van Docker voor een project met React en Vue, volgt u deze beste praktijken en configuraties: 1. Gebruik meerdere build-stages: - **Build-stage:** Compileer en optimaliseer uw frontend-applicaties. - **Productie-stage:** Kopieer alleen de benodigde bestanden naar de uiteindelijke image, zonder build-tools en bronbestanden. 2. Dockerfile-voorbeeld voor React en Vue: ```dockerfile # Stap 1: Build React FROM node:18-alpine AS react-build WORKDIR /app COPY react/ . RUN npm install RUN npm run build # Stap 2: Build Vue FROM node:18-alpine AS vue-build WORKDIR /app COPY vue/ . RUN npm install RUN npm run build # Stap 3: Finale image FROM nginx:stable-alpine AS production # Verwijder standaard Nginx inhoud RUN rm -rf /usr/share/nginx/html/* # Kopieer React build COPY --from=react-build /app/build /usr/share/nginx/html/react # Kopieer Vue build COPY --from=vue-build /app/dist /usr/share/nginx/html/vue # Optioneel: pas Nginx-config aan voor meerdere apps ``` 3. Optimalisaties: - Gebruik `alpine` basisimages om grootte te verkleinen. - Maak gebruik van cache door afhankelijkheden vooraf te installeren (`COPY package.json` en `RUN npm install`). - Verwijder ongebruikte bestanden en caches na build (`npm cache clean --force`). - Minimaliseer het aantal lagen door meerdere commando's te combineren. 4. Afbeeldingsgrootte verminderen: - Gebruik `--production` of `NODE_ENV=production` voor productie builds. - Schakel source maps uit in productie. - Overweeg het gebruik van tools zoals `docker-slim` voor verdere optimalisatie. 5. Overweeg het gebruik van `.dockerignore` om onnodige bestanden uit te sluiten en build-tijd te verkorten. 6. Gebruik Docker Compose voor het beheren van meerdere services en netwerken indien nodig. Door deze praktijken te volgen, vermindert u de afbeeldingsgrootte en verbetert u de build-efficiëntie voor uw React en Vue applicaties binnen Docker Desktop.

Hier zijn de beste praktijken en configuratie-instellingen voor efficiënte multi-stage builds met React en Vue in Docker Desktop: ## 1. Multi-stage Dockerfile Structuur ### Voor React project: ```dockerfile # Build stage FROM node:18-alpine AS builder WORKDIR /app COPY package*.json ./ RUN npm ci --only=production COPY . . RUN npm run build # Production stage FROM nginx:alpine COPY --from=builder /app/build /usr/share/nginx/html COPY nginx.conf /etc/nginx/nginx.conf EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ``` ### Voor Vue project: ```dockerfile # Build stage FROM node:18-alpine AS builder WORKDIR /app COPY package*.json ./ RUN npm ci COPY . . RUN npm run build # Production stage FROM nginx:alpine COPY --from=builder /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/nginx.conf EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ``` ## 2. Docker Desktop Optimalisaties ### Resources configuratie: - **CPU**: Minimaal 4 cores toewijzen - **Geheugen**: 8GB+ RAM voor betere build prestaties - **Swap**: 1GB instellen - **Disk image size**: Voldoende ruimte voor cache (minimaal 64GB) ### Daemon-instellingen (docker-desktop): ```json { "builder": { "gc": { "enabled": true, "defaultKeepStorage": "20GB" } }, "experimental": false, "features": { "buildkit": true } } ``` ## 3. Build Optimalisatie Technieken ### .dockerignore bestand: ``` node_modules npm-debug.log .git .gitignore README.md .env .nyc_output coverage .dockerignore **/__tests__ **/*.test.js **/*.spec.js ``` ### Build arguments optimaliseren: ```dockerfile # Gebruik build args voor variabelen ARG NODE_ENV=production ENV NODE_ENV=${NODE_ENV} ``` ## 4. Cache Optimalisatie ### Gelaagde caching strategie: ```dockerfile FROM node:18-alpine AS builder WORKDIR /app # Cache dependencies laag COPY package*.json ./ RUN npm ci --only=production && npm cache clean --force # Source code laag COPY . . RUN npm run build ``` ## 5. Image Size Reduction Technieken ### Alpine base images: - Gebruik `node:18-alpine` i.p.v. `node:18` - Gebruik `nginx:alpine` i.p.v. `nginx` ### Multi-arch builds: ```bash docker buildx build --platform linux/amd64,linux/arm64 -t your-image:latest . ``` ### Image pruning: ```bash # Oude images opruimen docker image prune -f # Build cache beheren docker builder prune -f ``` ## 6. Docker Compose Optimalisatie ```yaml version: '3.8' services: react-app: build: context: . dockerfile: Dockerfile.react target: builder profiles: ["build"] vue-app: build: context: . dockerfile: Dockerfile.vue target: builder profiles: ["build"] ``` ## 7. Prestatie Monitoring ### Build metrics bijhouden: ```bash # Build tijd meten time docker build -t your-app . # Image size controleren docker images | grep your-app # Layer inspectie docker history your-app:latest ``` ## 8. Aanvullende Tips - **Parallel builds**: Gebruik `docker buildx` voor parallelle builds - **Cache mounts**: Gebruik `--cache-from` voor CI/CD pipelines - **Security scanning**: Voeg `docker scan` toe aan je build proces - **Health checks**: Implementeer health checks in productie images Deze configuraties zullen je build tijden significant verminderen en resulteren in kleinere, efficiëntere container images voor zowel React als Vue projecten.