Search code examples
wordpressdockersslsquidmitmproxy

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

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:

enter image description here

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 this website. I've imported the self-signed cert into OSX Keychain Access and marked it Always Trust.

This is how my docker-compose.yml 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 Squid proxy and Mitmproxy and didn't find any luck.

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

  1. Set up proxy using SquidMan
  2. Set up Mitmproxy running reverse mode
  3. Set up Mitmproxy running upstream mode
  4. Install and trust Mitmproxy cert in my phone
  5. 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

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.

Solution

  • Answer

    At first make sure your problem is only DNS. You should be able to connect to website from your phone to IP of your computer http://COMPUTER_IP. If your are not able load website, check firewall.

    Your localhost computer knows abc.dev and resolve it to localhost.

    But this is not true for anothers hosts in home network. Another Windows/Mac/Linux only need to add domain entry into hosts file. In Linux it could then looks like

    /etc/hosts

    127.0.0.1   localhost localhost.localdomain localhost4 localhost4.localdomain4
::1         localhost localhost.localdomain localhost6 localhost6.localdomain6
COMPUTER_IP abc.dev

    But for phones it is not easy to rule custom DNS records because of security reasons.

    One possible solution, use existing DNS server at home:

    If your home router can add static DNS entries. Add custom DNS entry in your home router to point abc.dev to your computer home network IP address.

    Second possible solution, use online DNS service:

    This one does not use abc.dev, but something what online services offers, for example on https://www.noip.com/ you can register something like abc1234.ddns.net, then setup COMPUTER_IP as IP for that domain. In caddy you use same domain abc1234.ddns.net.

    This way your phone will ask noip for IP of abc1234.ddns.net it answers your COMPUTER_IP and browser connect to your computer.

    Third possible solution:

    1. Deploy your DNS server with docker-compose together with wordpress.
    2. Setup your COMPUTER_IP as DNS server in your phone.

    To try this, add these files to your docker-compose project.

    dnsmasq/dnsmasq.conf is working config file, but you need to change last line:

    address=/abc.dev/COMPUTER_IP

    Put IP address of your computer instead COMPUTER_IP.

    directory structure with your docker-compose.yml:

    docker-compose.yml
dnsmasq/dockerfile
dnsmasq/dnsmasq.conf
... other files

    your docker-compose.yml

    version: '2'
services:
    wordpress:
        ...
    db:
        ...
    caddy:
        ...
    dnsmasq:
        build:
            context: .
            dockerfile: ./dnsmasq/dockerfile
        ports:
            - "53:53/udp"
        cap_add:
            - NET_ADMIN
    ...

    dnsmasq/dockerfile

    FROM andyshinn/dnsmasq

COPY dnsmasq/dnsmasq.conf /etc/dnsmasq.conf

CMD ["--log-facility", "-"]

    dnsmasq/dnsmasq.conf

    # default dnsmasq config file
# Never forward plain names (without a dot or domain part)
domain-needed
# Never forward addresses in the non-routed address spaces.
bogus-priv
# use DNS server 8.8.8.8 for all except abc.dev
# you can use IP of your home router
server=8.8.8.8
no-hosts
expand-hosts
user=dnsmasq
group=dnsmasq
cache-size=2048
neg-ttl=60
log-queries

# put IP address of your computer instead COMPUTER_IP
address=/abc.dev/COMPUTER_IP

    For more about dnsmasq config see manpage.