Ddev

DDEV permite levantar entornos locales reproducibles usando contenedores. Es especialmente útil en proyectos PHP, WordPress, Bedrock y stacks mixtos con Node/Vite.

WordPress con DDEV

Bedrock

ddev config --project-type=wordpress --docroot=web --create-docroot
ddev composer create roots/bedrock

Variables habituales en .env:

DB_NAME="db"
DB_USER="db"
DB_PASSWORD="db"
DB_HOST="db"
WP_HOME="${DDEV_PRIMARY_URL}"

Después:

ddev start
ddev ssh
yarn && yarn build
composer install

WordPress clásico con WP-CLI

mkdir my-wp-site
cd my-wp-site
 
ddev config --project-type=wordpress
ddev start
ddev wp core download
ddev launch

Instalación desde CLI:

ddev wp core install \
  --url='$DDEV_PRIMARY_URL' \
  --title='New WordPress' \
  --admin_user=admin \
  [email protected] \
  --prompt=admin_password

XDebug con VSCode

Instala la extensión PHP Debug y añade una configuración como esta en .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Listen for Xdebug",
      "type": "php",
      "request": "launch",
      "hostname": "0.0.0.0",
      "port": 9003,
      "pathMappings": {
        "/var/www/html": "${workspaceFolder}"
      }
    }
  ]
}

Flujo básico:

1. Crea un breakpoint.
2. Selecciona Listen for Xdebug en VSCode.
3. Activa XDebug:

ddev xdebug on

4. Abre la web y comprueba que el breakpoint se detiene.

Si el IDE corre dentro del contenedor:

ddev config global --xdebug-ide-location="container"

Para volver al valor por defecto:

ddev config global --xdebug-ide-location=""

Problemas con archivos con tildes o ñ

Si Mutagen da problemas con uploads, excluye el directorio:

upload_dirs:
  - content/uploads

Después:

ddev mutagen reset

Proyectos Node dentro de DDEV

Puedes exponer un puerto interno de Node desde .ddev/config.yml:

web_extra_exposed_ports:
  - name: nodejs
    container_port: 1337
    http_port: 1336
    https_port: 1337

Para ejecutar una tarea al iniciar el contenedor:

hooks:
  post-start:
    - exec: "npm run dev"

Browsersync

Instalación:

ddev get ddev/ddev-browsersync

En algunos proyectos Roots puede ser necesario renombrar browser-sync.js a browser-sync.cjs y ajustar .ddev/commands/web/browsersync:

#!/bin/bash
 
#ddev-generated
## Description: Run browser-sync in the web container
## Usage: browsersync
## Example: "ddev browsersync"
## ExecRaw: true
 
echo "Proxying browsersync on ${DDEV_PRIMARY_URL}:3000"
browser-sync start -c /var/www/html/.ddev/browser-sync.cjs | grep -v "Access URLs\|--------------------\|Local: http\|External: http"

Daemons al iniciar

Para ejecutar tareas automáticamente al lanzar DDEV:

web_extra_daemons:
  - name: "yarn"
    command: "yarn dev"
    directory: /var/www/html
  - name: "browsersync"
    command: "browser-sync start -c /var/www/html/.ddev/browser-sync.cjs"
    directory: /var/www/html

Acceso remoto dentro de la LAN

ddev config global --router-bind-all-interfaces --omit-containers=ddev-ssh-agent

Permisos

Si necesitas ajustar permisos generados por DDEV, puedes añadir:

permissions:
  defaultFileMode: 0644
  defaultDirectoryMode: 0755

Después:

ddev mutagen reset

Vite dentro de DDEV

Configuración típica para vite.config.js:

export default defineConfig({
  server: {
    host: "0.0.0.0",
    port: 5173,
    strictPort: true,
    origin: `${process.env.DDEV_PRIMARY_URL.replace(/:\d+$/, "")}:5173`,
    cors: {
      origin: /https?:\/\/([A-Za-z0-9\-\.]+)?(\.dvl\.to)(?::\d+)?$/,
    },
  },
});

Relacionado

• Wordpress
• Bedrock
• Vite
• XDebug
• Ddev Rsync