Synology Container Manager

Baseline ontwikkelomgeving

Een uitrolbare WordPress ontwikkelomgeving op je Synology NAS met Visual Studio Code Server

Niet op mijn Windows-laptop

Veel ontwikkelaars beginnen op een lokale Windows-laptop. Dat werkt prima zolang je altijd hetzelfde apparaat gebruikt. Maar zodra je vanaf meerdere apparaten wilt werken, of wanneer je een nieuwe ontwikkelomgeving moet inrichten, loop je al snel tegen dezelfde uitdagingen aan: ontbrekende software, afwijkende configuraties en tijdverlies.

Mijn doel was daarom eenvoudig: een ontwikkelomgeving die ik net zo makkelijk kan uitrollen als het installeren van een app. Een omgeving waarin Visual Studio Code Server, WordPress en alle benodigde hulpmiddelen vooraf zijn ingericht. Niet afhankelijk van één laptop, maar centraal beschikbaar op mijn Synology DS723+.

Met een goede basisconfiguratie kan ik voortaan vanaf vrijwel ieder apparaat verder ontwikkelen en binnen enkele minuten een compleet nieuwe ontwikkelomgeving uitrollen.

Het uitgangspunt

De ideale situatie bestaat uit:

Hierdoor wordt de ontwikkelomgeving reproduceerbaar en eenvoudig opnieuw op te zetten.

Vereisten

Voordat je begint, zijn enkele zaken noodzakelijk:

Hardware

  • Synology DS723+
  • Voldoende opslagruimte voor containers, broncode en databasebestanden
  • Voldoende intern geheugen voor de omgeving, tenminste 4 GB

Software

  • Synology DSM
  • Container Manager geactiveerd
  • Docker Compose ondersteuning
  • Een domeinnaam of subdomein

Netwerk

  • Reverse Proxy configuratie in Synology
  • Port forwarding op de router
  • SSL-certificaat via Let’s Encrypt

Architectuur van de ontwikkelomgeving

flowchart LR
    Dev[Ontwikkelaar]
    Browser[Webbrowser]
    RP[Synology Reverse Proxy]
    VSCode[Code Server]
    WP[WordPress Container]
    DB[MariaDB Container]
    Files[Project Bestanden]

    Dev --> Browser
    Browser --> RP
    RP --> VSCode
    VSCode --> Files
    WP --> Files
    WP --> DB

OntwikkelaarWebbrowserSynology Reverse ProxyCode ServerWordPress ContainerMariaDB ContainerProject Bestanden





De broncode wordt centraal opgeslagen, terwijl zowel WordPress als Visual Studio Code toegang hebben tot dezelfde projectbestanden.





Stap voor stap opzetten





flowchart TD
    A[Container Manager activeren] --> B[Projectmap aanmaken]
    B --> C[Docker Compose bestanden maken]
    C --> D[Containers starten]
    D --> E[Reverse Proxy configureren]
    E --> F[SSL certificaat activeren]
    F --> G[Port forwarding instellen]
    G --> H[Test vanaf internet]
    H --> I[Start ontwikkelen]

Container Manager activerenProjectmap aanmakenDocker Compose bestanden makenContainers startenReverse Proxy configurerenSSL certificaat activerenPort forwarding instellenTest vanaf internetStart ontwikkelen





Voorbeeld directorystructuur





wordpress-dev/
├── .env
├── compose.yaml
├── wordpress/
├── database/
├── vscode/
└── backups/





Deze structuur houdt configuratie, data en broncode overzichtelijk gescheiden.





Voorbeeld .env bestand





# Algemene instellingen
PUID=1026
PGID=100
TZ=Europe/Amsterdam

# Code-Server instellingen
CODE_SERVER_PASSWORD=KiesHierEenSterkWachtwoord123!
DEVSTACK_DOMAIN=localhost

# MariaDB / WordPress Database instellingen
MARIADB_ROOT_PASSWORD=RootWachtwoordVeranderenAUB!
WORDPRESS_DB_NAME=wordpress_db
WORDPRESS_DB_USER=wp_user
WORDPRESS_DB_PASSWORD=WpWachtwoordVeranderenAUB!

# WordPress URL instellingen
WORDPRESS_DEV_URL=http://localhost:8092






Voorbeeld compose.yaml





version: "3.8"

services:
  codeserver:
    build:
      context: .
      dockerfile: Dockerfile.codeserver
    container_name: devstack-codeserver
    restart: unless-stopped
    environment:
      PUID: "${PUID}"
      PGID: "${PGID}"
      TZ: "${TZ}"
      PASSWORD: "${CODE_SERVER_PASSWORD}"
      PROXY_DOMAIN: "${DEVSTACK_DOMAIN}"
      DEFAULT_WORKSPACE: "/config/workspace"
    volumes:
      - /path/to/docker/devstack/code-server/config:/config
      - /path/to/docker/devstack/workspace:/config/workspace
    ports:
      - "127.0.0.1:8440:8443"
    networks:
      - devnet
    logging:
      driver: "json-file"
      options:
        max-size: "10m"
        max-file: "3"

  wordpress-db:
    image: mariadb:12.3.2
    container_name: devstack-wordpress-db
    restart: unless-stopped
    environment:
      TZ: "${TZ}"
      MARIADB_ROOT_PASSWORD: "${MARIADB_ROOT_PASSWORD}"
      MARIADB_DATABASE: "${WORDPRESS_DB_NAME}"
      MARIADB_USER: "${WORDPRESS_DB_USER}"
      MARIADB_PASSWORD: "${WORDPRESS_DB_PASSWORD}"
    volumes:
      - /path/to/docker/devstack/wordpress/db:/var/lib/mysql
    networks:
      - devnet
    logging:
      driver: "json-file"
      options:
        max-size: "10m"
        max-file: "3"

  wordpress:
    image: wordpress:7.0-php8.3-apache
    container_name: devstack-wordpress
    restart: unless-stopped
    depends_on:
      - wordpress-db
    environment:
      TZ: "${TZ}"
      WORDPRESS_DB_HOST: "wordpress-db:3306"
      WORDPRESS_DB_NAME: "${WORDPRESS_DB_NAME}"
      WORDPRESS_DB_USER: "${WORDPRESS_DB_USER}"
      WORDPRESS_DB_PASSWORD: "${WORDPRESS_DB_PASSWORD}"
      WORDPRESS_CONFIG_EXTRA: |
        define('WP_HOME', '${WORDPRESS_DEV_URL}');
        define('WP_SITEURL', '${WORDPRESS_DEV_URL}');
        define('WP_DEBUG', true);
        define('WP_DEBUG_LOG', true);
        define('WP_DEBUG_DISPLAY', false);
        define('SCRIPT_DEBUG', true);
        define('FS_METHOD', 'direct');
    volumes:
      - /path/to/docker/devstack/wordpress/html:/var/www/html

      # Development plugin mounts
      - /path/to/docker/devstack/workspace/projects/custom-plugin-1:/var/www/html/wp-content/plugins/custom-plugin-1
      - /path/to/docker/devstack/workspace/projects/custom-plugin-2:/var/www/html/wp-content/plugins/custom-plugin-2
    ports:
      - "8092:80"
    networks:
      - devnet
    logging:
      driver: "json-file"
      options:
        max-size: "10m"
        max-file: "3"

networks:
  devnet:
    driver: bridge






Voorbeeld Dockerfile





# Gebruik de officiële Linuxserver Code-Server image als basis
FROM lscr.io/linuxserver/code-server:latest

# Voorkom interactieve prompts tijdens installatie
ENV DEBIAN_FRONTEND=noninteractive

# Installeer PHP en benodigde extensies voor WordPress-ontwikkeling
RUN apt-get update && apt-get install -y \
    software-properties-common \
    curl \
    git \
    unzip \
    php-cli \
    php-curl \
    php-mbstring \
    php-xml \
    php-zip \
    php-mysql \
    php-xdebug \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*

# Installeer Composer (handig voor PHP/WordPress packages)
RUN curl -sS https://getcomposer.org | php -- --install-dir=/usr/local/bin --filename=composer

# Configureer Xdebug voor foutopsporing (optioneel, pas poorten aan indien nodig)
RUN echo "xdebug.mode=debug" >> /etc/php/*/mods-available/xdebug.ini \
    && echo "xdebug.start_with_request=yes" >> /etc/php/*/mods-available/xdebug.ini \
    && echo "xdebug.client_host=host.docker.internal" >> /etc/php/*/mods-available/xdebug.ini

# De poort waarop code-server draait (interne container poort)
EXPOSE 8443






Met een eigen Dockerfile kun je standaard extensies direct mee installeren.





Reverse Proxy configureren





Een belangrijk onderdeel van deze oplossing is de Reverse Proxy van Synology.





Hiermee kun je bijvoorbeeld:





    

  • code.jouwdomein.nl koppelen aan Code Server
    • 




  • wpdev.jouwdomein.nl koppelen aan WordPress
    • 






    




    De reverse proxy zorgt ervoor dat externe bezoekers automatisch bij de juiste container terechtkomen.
    




    Router configureren
    




    Om de omgeving vanaf internet bereikbaar te maken:
    




      

    1. Maak een port forward voor poort 80.
      2. 




    2. Maak een port forward voor poort 443.
      3. 




    3. Verwijs beide poorten naar je Synology NAS.
      4. 




    4. Controleer of het SSL-certificaat correct werkt.
      5. 

    




    Hiermee kun je vanaf vrijwel iedere locatie veilig toegang krijgen tot je ontwikkelomgeving.
    




    Een belangrijke tip over softwareversies
    




    Veel ontwikkelaars installeren automatisch altijd de nieuwste versie van alle softwarecomponenten. In de praktijk blijkt dat niet altijd de snelste route naar succes.
    




    Wanneer je tegen compatibiliteitsproblemen aanloopt tussen bijvoorbeeld WordPress, PHP, extensies of container-images, kan het juist verstandig zijn om de laatst aanbevolen stabiele versie of zelfs de op één na nieuwste stabiele versie te gebruiken.
    




    Dat vraagt soms wat experimenteren, maar kan enorm veel tijd besparen. In plaats van uren te besteden aan het oplossen van conflicten, kies je direct voor een configuratie waarvan bekend is dat deze stabiel samenwerkt.
    




    Mijn ervaring is dat deze aanpak vaak sneller resultaat oplevert dan hardnekkig proberen de allernieuwste combinatie werkend te krijgen.
    




    Wat haw je deroan?
    




    Het mooiste resultaat van deze aanpak is dat je een volledig reproduceerbare ontwikkelomgeving creëert.
    




    Wanneer je een nieuw project start of een bestaande omgeving wilt vervangen, hoef je niet opnieuw na te denken over:
    




      

    • Visual Studio Code instellingen
      • 




    • Docker configuraties
      • 




    • WordPress instellingen
      • 




    • Extensies
      • 




    • Netwerkconfiguratie
      • 

    




    Alles zit al in de baseline.
    




    Daardoor kun je snel een nieuwe ontwikkelomgeving aanmaken wanneer dat nodig is. De omgeving werkt vervolgens precies zoals je verwacht, ongeacht welk apparaat je gebruikt.
    




    Of je nu werkt vanaf een Windows-pc, MacBook, Linux-systeem of zelfs een tablet: je ontwikkelomgeving staat klaar op je Synology NAS.
    

    
    
    
    
                        
                
        

    
    
                        
                
    

    			
    

	                
    

                    baselinedevelopmentdockerVS Code ServerWordPress                
    
        
		

	
    
		By MySQL, PHP, Synology, Visual Studio Code, WordPress