Acceder al contenido principal

Añadir un nuevo puerto HTTP a un contenedor usando HTTP_EXPOSE en DDEV

Volver a Blog

Añadir un nuevo puerto HTTP a un contenedor usando HTTP_EXPOSE en DDEV

22 Sep 020
DDEV-Local with Browsersync
Manuel Aguilar

DDEV , Docker ,

En nuestros proyectos, a veces necesitamos integrar herramientas que nos proveen de procesos que nos facilitan la tarea de desarrollo. En el caso de Drupal nos pasa a la hora de maquetar utilizando el tema Radix el cual incluye la herramienta Browsersync, que nos permite generar un servidor de desarrollo dotado de la característica live reload, es decir, que cada vez que detecta un cambio en nuestro código lo aplica y refresca nuestro navegador.

Al estar este proceso corriendo dentro de un contenedor Docker necesitamos acceder a él desde nuestro host. Para ello vamos a ver cómo habilitar este puerto en nuestro entorno de desarrollo local utilizando DDEV-Local:

  • Nos dirigimos a la carpeta .ddev de nuestro proyecto y creamos un nuevo archivo docker-compose.browsersync.yaml en el que definimos lo siguiente:

    version: '3.6'
    services:
      web:
        ports:
        # En esta sección definimos el puerto que va a utilizar el proceso
        # dentro del contenedor web
          - "3000"
        environment:
        # En esa sección extendemos la variable de entorno HTTP_EXPOSE, que
        # utiliza el servicio ddev_router con la relación de puertos
        # PUERTO_EXTERNO:PUERTO_INTERNO.
          - HTTP_EXPOSE=${DDEV_ROUTER_HTTP_PORT}:80,${DDEV_MAILHOG_PORT}:8025,8300:3000
        # Nosotros hemos añadido al final de la lista el puerto 8300
        # relacionado con el puerto interno 3000.
    
    
  • Editamos la variable proxy del archivo webpack.mix.js de nuestro subtheme añadiendo la url de nuestro proyecto DDEV, http://miproyecto.ddev.site.

  • Reiniciamos DDEV con el comando ddev restart y accedemos al contenedor con ddev ssh.

  • Entramos en la carpeta donde se encuentra el tema y ejecutamos npm run watch. Esto nos creará un proceso en el puerto 3000.

  • Ahora solamente nos queda entrar en nuestro navegador utilizando la url miproyecto.ddev.site:8300 y voilà ya tenemos corriendo en nuestro navegador el servidor de desarrollo con live reload juanto a nuestro entorno de desarrollo DDEV.

Tenéis más información en:

Comentarios

Añadir nuevo comentario