Using Docker Compose to expose DDEV web container ports to host machine

Question

I have configured a DDEV Drupal environment in which I need to run Pattern Lab for my theme. This environment will be used by students of mine who may not be well-versed in installing Node or Node dependencies tools on their local computers (Pattern Lab requires Node). As a workaround, I am setting Pattern Lab to run in the DDEV's web container. The problem I am having is that since Pattern Lab is running in a DDEV container, I can't access it on my host computer. Has anyone done something similar to expose Docker ports to the host machine?

Herbalist

Answer 1

Under the hood, DDEV uses docker-compose to define and run the multiple containers that make up the local environment for a project. docker-compose supports defining multiple compose files to facilitate sharing Compose configurations between files and projects, and DDEV is designed to leverage this ability. Here are the steps I took to solve this issue:

Creating a new docker-compose*.yaml file:

• Inside .ddev/ I created a file called docker-compose.patternlab.yaml. The second part of the file name (patternlab), can be anything you want. It makes sense to use a name that is related to the action, app, or service you are trying to implement.
• I added the code below to expose the web container's port 3000 to the host's port 3000 (https), and 3001(http):

# Override the web container's standard HTTP_EXPOSE and HTTPS_EXPOSE services
# to expose port 3000 of DDEV's web container.
version: '3.6'
services:
  web:
    # ports are a list of exposed *container* ports
    ports:
      - "3000"
    environment:
      - HTTP_EXPOSE=${DDEV_ROUTER_HTTP_PORT}:80,${DDEV_MAILHOG_PORT}:8025,3001:3000
      - HTTPS_EXPOSE=${DDEV_ROUTER_HTTPS_PORT}:80,${DDEV_MAILHOG_HTTPS_PORT}:8025,3000:3000

• After this file is updated, save your changes and restart DDEV.

Now I can access Pattern Lab in my host computer by going to my site's url and appending port 3000 or 3001 depending on the protocol I am using. Like this: https://mysite.ddev.site:3000 or http://mysite.ddev.site:3001.

For more information on defining new services with docker compose, read the DDEV docs.

I hope this helps.

Herbalist