Natuurlijk! Hier is een stapsgewijze gids om je full-stack project met React en Node.js te containeriseren met Docker, inclusief tips voor ontwikkel- en productieomgevingen. 1. Docker installeren Zorg dat Docker op je machine geïnstalleerd is. Download en installeer het vanaf [docker.com](https://www.docker.com/). 2. Structuur van je project Stel dat je projectstructuur er zo uitziet: ``` /mijn-project |-- frontend/ | |-- package.json | |-- src/ | |-- public/ |-- backend/ | |-- package.json | |-- src/ |-- docker-compose.yml ``` 3. Dockerfiles maken a. Frontend Dockerfile (in /frontend/Dockerfile) ```dockerfile # Gebruik een officiële Node.js image voor build FROM node:18-alpine AS build WORKDIR /app COPY package.json package-lock.json ./ RUN npm install COPY . . RUN npm run build # Serve de build met een lichte webserver FROM nginx:alpine COPY --from=build /app/build /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ``` b. Backend Dockerfile (in /backend/Dockerfile) ```dockerfile FROM node:18-alpine WORKDIR /app COPY package.json package-lock.json ./ RUN npm install COPY . . EXPOSE 3001 CMD ["node", "src/index.js"] ``` 4. Docker Compose voor ontwikkeling en productie Maak een `docker-compose.yml` bestand aan in de root: ```yaml version: '3.8' services: frontend: build: ./frontend ports: - "3000:80" volumes: - ./frontend:/app - /app/node_modules environment: - NODE_ENV=development command: ["nginx", "-g", "daemon off;"] backend: build: ./backend ports: - "3001:3001" volumes: - ./backend:/app - /app/node_modules environment: - NODE_ENV=development ``` Voor productie gebruik je een aparte compose file of pas je de `docker-compose.yml` aan: ```yaml version: '3.8' services: frontend: build: ./frontend ports: - "80:80" environment: - NODE_ENV=production backend: build: ./backend ports: - "3001:3001" environment: - NODE_ENV=production ``` 5. Ontwikkel- en testprocessen - Voor ontwikkeling: ``` docker-compose up --build ``` Hiermee draait je frontend op localhost:3000 en backend op localhost:3001, met live reloads door volume-mounts. - Voor productie: Bouw de images en start de containers: ``` docker-compose -f docker-compose.prod.yml up --build -d ``` 6. Tips - Gebruik environment-variabelen voor API-URL’s. - Overweeg het gebruik van multi-stage builds om kleinere images te krijgen. - Voeg een reverse proxy zoals Nginx toe voor betere productie-setup. - Automatiseer je build- en deployproces met CI/CD tools. Met deze aanpak verpak je je volledige stack in containers, wat het testen, migreren en schalen vereenvoudigt.

Absoluut! Containerisatie met Docker is een uitstekende keuze voor een full-stack React/Node.js applicatie. Het zorgt voor consistentie, schaalbaarheid en eenvoudige deployment. Hier is een complete handleiding. ### 1. De Basis: Wat je nodig hebt * **Docker Desktop**: Installeer dit op je ontwikkelmachine ([Download voor Windows/Mac](https://www.docker.com/products/docker-desktop/)). * **Dockerfile**: Een tekstbestand met instructies om een image voor één service (bv. frontend of backend) te bouwen. * **docker-compose.yml**: Een YAML-bestand om meerdere services (frontend, backend, database) te definiëren, te configureren en samen te starten. --- ### 2. Projectstructuur Een typische projectstructuur ziet er zo uit: ``` mijn-project/ ├── frontend/ │ ├── Dockerfile │ ├── package.json │ ├── public/ │ └── src/ ├── backend/ │ ├── Dockerfile │ ├── package.json │ ├── src/ │ └── server.js └── docker-compose.yml ``` --- ### 3. De Dockerfiles Maken #### A. Dockerfile voor React (Frontend) Maak een bestand `frontend/Dockerfile` aan. **Voor ontwikkeling:** ```dockerfile # Gebruik een officieel Node.js runtime image als parent image FROM node:18-alpine # Stel de werkdirectory in de container in WORKDIR /app # Kopieer package.json en package-lock.json eerst (voor caching) COPY package*.json ./ # Installeer alle dependencies RUN npm install # Kopieer de rest van de applicatiecode COPY . . # Poort die de React dev server gebruikt EXPOSE 3000 # Start de applicatie in development mode met hot-reload CMD ["npm", "start"] ``` **Voor productie (multi-stage build):** ```dockerfile # Fase 1: "builder" om de app te builden FROM node:18-alpine AS builder WORKDIR /app COPY package*.json ./ RUN npm ci --only=production COPY . . RUN npm run build # Fase 2: Gebruik een lichte webserver om de gebouwde bestanden te serveren FROM nginx:alpine # Kopieer de gebouwde bestanden naar de nginx map COPY --from=builder /app/build /usr/share/nginx/html # Kopieer een aangepaste nginx config (optioneel, voor SPA routing) # COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ``` #### B. Dockerfile voor Node.js (Backend) Maak een bestand `backend/Dockerfile` aan. ```dockerfile FROM node:18-alpine WORKDIR /app # Kopieer package files en installeer dependencies COPY package*.json ./ RUN npm install # Kopieer de broncode COPY . . # Poort waar je Express server op draait EXPOSE 5000 # Gebruik een startscript dat geschikt is voor de omgeving CMD ["npm", "run", "dev"] # Voor ontwikkeling # CMD ["node", "server.js"] # Voor productie ``` --- ### 4. De Docker Compose File Opzetten Dit is de regiecentrale. Maak een `docker-compose.yml` en `docker-compose.prod.yml` bestand in de root van je project. #### A. Voor Ontwikkeling (`docker-compose.yml`) ```yaml version: '3.8' services: # React Frontend Service frontend: build: ./frontend # Pad naar de Dockerfile container_name: mijn-react-app ports: - "3000:3000" # Map host poort 3000 naar container poort 3000 volumes: - ./frontend:/app # Mount je lokale code voor live updates - /app/node_modules # Gebruik de node_modules van de container environment: - CHOKIDAR_USEPOLLING=true # Zorgt voor betere file watching in Docker depends_on: - backend # Start pas na de backend # Node.js Backend Service backend: build: ./backend container_name: mijn-node-api ports: - "5000:5000" volumes: - ./backend:/app - /app/node_modules # Omgeving variabelen (gebruik een .env file voor gevoelige data) environment: - NODE_ENV=development - DATABASE_URL=postgresql://db_user:db_password@db:5432/mijn_database depends_on: - db # Start pas na de database # PostgreSQL Database Service db: image: postgres:15-alpine container_name: mijn-database environment: POSTGRES_DB: mijn_database POSTGRES_USER: db_user POSTGRES_PASSWORD: db_password volumes: - postgres_data:/var/lib/postgresql/data # Persistent volume voor data ports: - "5432:5432" # Alleen nodig als je extern wilt connecten (bv. DBeaver) # Definieer volumes voor persistente data volumes: postgres_data: ``` #### B. Voor Productie (`docker-compose.prod.yml`) Dit bestand *overtrekt* de development configuratie. ```yaml version: '3.8' services: frontend: # Gebruik de productie Dockerfile (bijv. met multi-stage) build: context: ./frontend target: builder # Verwijs naar de juiste build fase ports: - "80:80" # Host op standaard HTTP poort # Geen volumes, we serveren de statisch gebouwde files backend: build: ./backend environment: - NODE_ENV=production - DATABASE_URL=postgresql://db_user:db_password@db:5432/mijn_database # Voor productie kun je process managers zoals PM2 overwegen # command: pm2-runtime server.js db: image: postgres:15-alpine environment: POSTGRES_DB: mijn_database POSTGRES_USER: db_user POSTGRES_PASSWORD: db_password volumes: - postgres_data:/var/lib/postgresql/data volumes: postgres_data: ``` --- ### 5. Workflow: Bouwen, Testen en Deployen #### Ontwikkeling: 1. **Start je omgeving**: `docker-compose up --build` * Frontend: bereikbaar op `http://localhost:3000` * Backend API: bereikbaar op `http://localhost:5000` * Wijzigingen in je code worden direct doorgegeven thanks to de `volumes`. 2. **Stop je omgeving**: `docker-compose down` #### Productie: 1. **Bouw en start**: `docker-compose -f docker-compose.yml -f docker-compose.prod.yml up --build -d` * De `-f` flags combineren bestanden. Settings in `prod.yml` overrulen die in `yml`. * `-d` draait de containers op de achtergrond (daemon mode). #### Handige Commando's: * **Logs bekijken**: `docker-compose logs [service_name]` * **Container shell openen**: `docker exec -it <container_name> sh` * **Images opruimen**: `docker system prune` --- ### 6. Essentiële Tips en Best Practices 1. **`.dockerignore`**: Maak een `.dockerignore` bestand in zowel je `frontend` als `backend` folder. Dit voorkomt dat onnodige bestanden (zoals `node_modules`, `.git`) in je image komen, wat de buildtijd en imagegrootte sterk vermindert. ``` node_modules npm-debug.log .git .dockerignore Dockerfile README.md .env ``` 2. **Omgevingsvariabelen**: Gebruik **nooit** hardcoded credentials in je Dockerfiles. Gebruik in plaats daarvan een `.env` file (voeg deze toe aan `.dockerignore` en `.gitignore`!) en verwijs ernaar in je `docker-compose.yml` met de `env_file` key of de `environment` key. 3. **Image Grootte**: Gebruik altijd `-alpine` varianten van images (zoals `node:18-alpine`). Ze zijn veel kleiner en veiliger. 4. **Networking**: Docker Compose creëert standaard één netwerk voor je applicatie. Services kunnen met elkaar communiceren via de **service name** als hostname (bijv. je backend kan verbinden met `db:5432`). 5. **Volumes**: Gebruik **named volumes** (zoals `postgres_data`) voor databasegegevens. Zo blijven je data behouden, zelfs als je de container verwijdert. 6. **CI/CD Integratie**: Je Docker setup maakt Continuous Integration/Deployment eenvoudig. Je CI-server (bijv. GitHub Actions, GitLab CI) kan simpelweg `docker-compose -f docker-compose.prod.yml up --build -d` uitvoeren om een nieuwe versie te deployen. Door deze stappen te volgen, heb je een robuuste, gecontaineriseerde ontwikkel- en productieomgeving voor je full-stack applicatie die consistent en gemakkelijk te deployen is. Succes!