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?

rfay · Accepted Answer · 2020-10-17T14:02:37.567

2

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:

version: "3.6"
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:

version: "3.6"
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.)

edited Oct 17 '20 at 14:02

answered Oct 16 '20 at 14:04

rfay

9,963
1
47
89

1

Thanks for this. I can now access both urls. That helped. Yes, reverse proxy would be nice. I will read some documentation about that. Any hints welcome. – Mikel Wohlschlegel Oct 16 '20 at 14:33
1

I'll try to whip up the next step for you later. Unfortunately, I don't have a good way to test, but it should work fine. Basically, it means using HTTP_EXPOSE or HTTPS_EXPOSE to add port 8080. – rfay Oct 16 '20 at 14:57
I added the reverse proxy technique. – rfay Oct 17 '20 at 14:03
1

Great. That's what I need. – Mikel Wohlschlegel Oct 17 '20 at 19:52

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

1 Answers1

Linked