Accessing webpack dev server output with specific port in ddev / docker container

Question

On native Debian, I develop the following way:

Webpack dev server:

devServer: {
  host: "192.168.XX.XX",
  port: 8080,
  disableHostCheck: true,
  inline: true
}

Starting the webpack dev server manually by running npm run dev Files are now accessible by 192.168.XX.XX:8080/path/to/file

In my Apache configuration, I have defined a reverse proxy to make the files accessible by clean paths: my-host.dev/node/path/to/file

Apache config:

 ProxyPass /node/ http://192.168.XX.XX:8080/ retry=0 timeout=5
 ProxyPassReverse /node/ http://192.168.XX.XX:8080/

If I want the same basic behaviour in my ddev container, do I need to define a new service? Or how can I route that port that webpack generated files are accessible by mysitename.ddev.site/path/to/file or at least mysitename.ddev.site:8080/path/to/file?

Answer 1

What I would do for starters would be to expose the port. The simplest technique is to add a .ddev/docker-compose.webpack.yaml that exposes your port 8080:

services:
  web:
    ports:
      - 8080:8080

ddev start, and then use this as you always have. It should work with http://<yourproject>.ddev.site:8080 or http://localhost:8080

A more elegant technique is to use ddev's built-in reverse proxy, so .ddev/docker-compose.webpack.yaml would have:

services:
  web:
    expose:
      - 8080
    environment:
    - HTTP_EXPOSE=${DDEV_ROUTER_HTTP_PORT}:80,${DDEV_MAILHOG_PORT}:8025,8080:8080
    - HTTPS_EXPOSE=${DDEV_ROUTER_HTTPS_PORT}:80,${DDEV_MAILHOG_HTTPS_PORT}:8025,8081:8080

With this setup you'll use http://projectname.ddev.site:8080 or https://projectname.ddev.site:8081 to access webpack. And since the whole thing is managed via the reverse proxy, you can have multiple projects running at the same time with this same configuration. (And you don't have to switch back and forth from http to https.)