How to use ngrok tunnels correctly for best workflow with wordpress and docker compose yml

Question

I am using docker-compose.yml to run Wordpress container with a few other containers...

version: '3.7'

services:

  # here is our mysql database
  db:
    image: mysql:5.7
    volumes:
      - ./db:/var/lib/mysql:delegated
    ports:
      - "3306:3306"
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: somewordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress

  # here is our wordpress server
  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    volumes:
      # our persistent local data re routing
      - .:/var/www/html/wp-content/themes/testing:delegated
      - ./plugins:/var/www/html/wp-content/plugins
      - ./uploads:/var/www/html/wp-content/uploads
      - ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini
    ports:
      - "80:80"
    restart: always
    environment:
      # our local dev environment
      WORDPRESS_DEBUG: 1
      DEVELOPMENT: 1
      # docker wp config settings
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_AUTH_KEY: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
      WORDPRESS_SECURE_KEY: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
      WORDPRESS_LOGGED_IN_KEY: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
      WORDPRESS_NONCE_KEY: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
      WORDPRESS_SECURE_AUTH_SALT: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
      WORDPRESS_LOGGED_IN_SALT: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
      WORDPRESS_NONCE_SALT: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
      WORDPRESS_CONFIG_EXTRA: |
        /* Development parameters */
        define('WP_CACHE', false);
        define('ENVIRONMENT', 'local');
        define('WP_DEBUG', true);

  # here is our mail hog server
  mailhog:
    image: mailhog/mailhog:latest
    ports:
      - "8025:8025"

This docker-compose.yml builds my Wordpress site accessible http://localhost

For me to setup a ngrok tunnel, I have to do add a new one via the ngrok dashboard and follow these instructions...

Which adds my auth code to the .ngrok/ngrok.yml in my user root and then fires up a tunnel for https and http. This method seems a bit long winded as I have to do this every time I start a new session.

Is it possible to run this code on docker-compose up -d as part of my local environment?

---

Also every time I start a new session my tunnel URL changes. I've created a custom domain in my ngrok dashboard, this is what it looks like with no tunnel running...

Then if I start my tunnel (using the default method shown above)...

Last login: Sat Oct 17 17:17:53 on ttys005
joshmoto@Joshs-iMac ~ % unzip /Users/joshmoto/Desktop/ngrok.zip
Archive:  /Users/joshmoto/Desktop/ngrok.zip
replace ngrok? [y]es, [n]o, [A]ll, [N]one, [r]ename: y
  inflating: ngrok                   
joshmoto@Joshs-iMac ~ % 

ngrok by @inconshreveable                                                (Ctrl+C to quit)
                                                                                         
Session Status                online                                                     
Account                       joshmoto (Plan: Basic)                                     
Version                       2.3.35                                                     
Region                        United States (us)                                         
Web Interface                 http://127.0.0.1:4040                                      
Forwarding                    http://############.ngrok.io -> http://localhost:80        
Forwarding                    https://############.ngrok.io -> http://localhost:80       
                                                                                         
Connections                   ttl     opn     rt1     rt5     p50     p90                
                              0       0       0.00    0.00    0.00    0.00 

And then look back at my custom domain, it's exactly the same, 0 tunnels.

---

Also another issue with Wordpress / Docker Compose, after I have the above tunnel running.

http://############.ngrok.io ajax does not seem to work, but network assets load fine apart from fonts. See full error console log here.

I'm not too fussed as my main objective is to have a working https url for webhooks.

https://############.ngrok.io url does work, but no assets load at all. However for webhook usage it does the trick.

But these tunnel URL's change every time I restart the terminal ngrok session so getting a custom url to work would be better.

---

I've tried using docker image wernight/ngrok with these docker-compose.yml configs...

version: '3.7'

services:

  # ngrok
  ngrok:
    image: wernight/ngrok:latest
    environment:
      NGROK_AUTH: #################################################
      NGROK_LOOK_DOMAIN: localhost
      NGROK_PROTOCOL: http
      NGROK_PORT: 80
      NGROK_BINDTLS: true
      NGROK_HOSTNAME: mycustomdomain.eu.ngrok.io
      NGROK_REMOTE_ADDR: 127.0.0.1:80

    ports:
      - "4040:4040"

    ...

And then command lines docker-compose down and up -d, but the custom ngrok url page returns...

Tunnel mycustomdomain.eu.ngrok.io not found

---

What is the best way to configure ngrok with docker compose wordpress image for optimum workflow, with custom ngrok domain.

I've tried these ngrok wordpress options (see ngrok wp docs) too to fix assets...

WORDPRESS_CONFIG_EXTRA: |

  /* ngrok wp urls overrides */
  define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST']);
  define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST']);

But this returns this warning below when I docker-compose up -d and breaks localhost version and does not change anything on ngrok tunnel urls.

WARNING: The _SERVER variable is not set. Defaulting to a blank string.

Any ideas would be great thanks.

Answer 1

The value NGROK_LOOK_DOMAIN should be using the localhost of Docker, not the generic localhost,

Use this one instead

NGROK_LOOK_DOMAIN = host.docker.internal

this is working on my end

Answer 2

I managed to make it work in three steps:

1. Use this docker-compose.yaml:

version: '3.7'

volumes:
    mysite_wordpress_content:
    mysite_mysql_data:
    
services:
  mysite_mysql:
    image: mysql:5.7
    ports:
      - "3306:3306"    
    volumes:
      - mysite_mysql_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress

  mysite_wordpress:
    depends_on:
      - mysite_mysql
    image: wordpress:6.3.2
    ports:
      - "8181:80"
    volumes:
      - mysite_wordpress_content:/var/www/html/wp-content

    restart: always
    environment:
      WORDPRESS_DB_HOST: mysite_mysql:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress

2. Add the Relative URL WodPress plugin

3. Launch ngrok with the following command:

docker run -it --net=host -e NGROK_AUTHTOKEN=<myToken> ngrok/ngrok http --host-header=127.0.0.1:8181 8181

(see also my question and my answer on the WordPress stackexchange site)