How to access website running locally with custom domain & SSL on mobile phone?

[admin]

I have a WordPress (WP) blog running locally on my machine (OSX). The WP Site URL setting is set to

https://abc.dev

and I can access the site without any problem on my machine's browser.

Visually, it looks like this:

<a href="

https://imgur.com/hMemm

" rel="nofollow noreferrer"><img src="

https://imgur.com/hMemm

" alt="enter image description here"></a>

The WP site running on port 443 and I'm using a self-signed certificate to make it work. I obtained the self-signed cert from <a href="https://zerossl.com/free-ssl/#self" rel="nofollow noreferrer">this website</a>. I've imported the self-signed cert into OSX Keychain Access and marked it

Always Trust

.

This is how my <em>docker-compose.yml</em> file for that WP looks like:

version: '2'
services:
  wordpress:
    build: .
    ports:
      - 8080:80
    volumes:
      - ./config/php.conf.uploads.ini:/usr/local/etc/php/conf.d/uploads.ini
      - ./wp-app:/var/www/html # Full wordpress project
      #- ./plugin-name/trunk/:/var/www/html/wp-content/plugins/plugin-name # Plugin development
      #- ./theme-name/trunk/:/var/www/html/wp-content/themes/theme-name # Theme development
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DB_USER: root
      WORDPRESS_DB_PASSWORD: password
    depends_on:
      - db
    networks:
      - wordpress-network
  db:
    image: mysql:latest
    ports:
      - 127.0.0.1:3306:3306
    command: [
        '--default_authentication_plugin=mysql_native_password',
        '--character-set-server=utf8mb4',
        '--collation-server=utf8mb4_unicode_ci'
    ]
    volumes:
      - ./wp-data:/docker-entrypoint-initdb.d
    environment:
      MYSQL_DATABASE: wordpress
      MYSQL_ROOT_PASSWORD: password
    networks:
      - wordpress-network
  caddy:
    image: abiosoft/caddy
    restart: always
    ports:
      - "80:80"
      - "443:443"
    links:
      - wordpress
    volumes:
      - "./Caddyfile:/etc/Caddyfile"
      - "./caddy:/var/caddy"
    networks:
      - wordpress-network
networks:
  wordpress-network:
      driver: bridge

And this is the Caddyfile:

abc.dev:443
root /var/www/html

tls /var/caddy/cert.pem /var/caddy/key.pem
proxy / wordpress {
    transparent
}

log     stdout
errors  stderr

The tree structure looks like this:

├── Caddyfile
├── caddy
│   ├── cert.pem
│   └── key.pem
└── docker-compose.yml

Opened ports by Docker Compose:

$ lsof -PiTCP -sTCP:LISTEN | grep com.dock

com.docke 497 zz   18u  IPv4 0xc97e1c7b362c847b      0t0  TCP localhost:3306 (LISTEN)
com.docke 497 zz   23u  IPv6 0xc97e1c7b3aa15d0b      0t0  TCP localhost:3306 (LISTEN)
com.docke 497 zz   24u  IPv4 0xc97e1c7b50618b83      0t0  TCP *:8080 (LISTEN)
com.docke 497 zz   25u  IPv6 0xc97e1c7b3aa1624b      0t0  TCP localhost:8080 (LISTEN)
com.docke 497 zz   27u  IPv4 0xc97e1c7b39e63b83      0t0  TCP *:443 (LISTEN)
com.docke 497 zz   28u  IPv4 0xc97e1c7b5061b85b      0t0  TCP *:80 (LISTEN)

The main reason why I open

wordpress

port at

8080

was because Caddy wanted

80

and

443

ports to be opened. So, by doing that, it helped me with port conflicts problem.

My problem right now, I want to access the WP site on my phone and I want the URL to be

https://abc.dev

as well in the phone.

For the past few days, I've been messing around with <a href="https://squidman.net/squidman/" rel="nofollow noreferrer">Squid</a> proxy and <a href="https://mitmproxy.org/" rel="nofollow noreferrer">Mitmproxy</a> and didn't find any luck.

Some of the things that I've tried in general:

<ol>
<li>Set up proxy using SquidMan</li>
<li>Set up Mitmproxy running

reverse

mode</li>
<li>Set up Mitmproxy running

upstream

mode</li>
<li>Install and trust <a href="https://docs.mitmproxy.org/stable/concepts-certificates/" rel="nofollow noreferrer">Mitmproxy cert</a> in my phone</li>
<li>Set up Ubuntu 18 Server VM on top my machine (OSX) using VirtualBox, install Mitmproxy, run Mitmproxy, configure host (OSX) and phone to use that Ubuntu 18 Server as proxy</li>
</ol>

All of the steps above didn't work for me and I'm out of idea how to make this setup works for me.

I don't want to change the WP Site URL setting to other URL i.e.

http://localhost[:port]

or

https://localhost[:port]

because it's working fine on my machine.

Plus, I want my setup to look and behave as close as my production website which is running using the same URL structure,

https://example.com

.

I found CharlesProxy but I'm not into it because it's a paid software. I'm sure Squid, Mitmproxy and some other tools out there can help me with this. I'm just not sure how to do it.

Really appreciate for all assistance and pointers.