targeting dev sites with vhost setup using ngrok

Question

I'm trying to tunnel a clients site in my sites directory with "ngrok http -host-header = client1.dev 80", I get a 404 when accessing the url. After some experimenting, if I put an index.html file in the home directory, it will display that file. Not sure why a file in the home directory works while files in sites directory do not. I must be missing something here..Any ideas?

directory structure :

www
  |home
  |sites
    | client1
    | client2
      ... 

vhost.conf :

<Directory "/www">
Options Indexes MultiViews FollowSymLinks
AllowOverride All
Order allow,deny
Allow from all
</Directory>

<Virtualhost *:80>
VirtualDocumentRoot "/Users/myname/www/home/wwwroot"
ServerName home.dev
UseCanonicalName Off
</Virtualhost>

<Virtualhost *:80>
VirtualDocumentRoot "/Users/myname/www/sites/%1/wwwroot"
ServerName sites.dev
ServerAlias *.dev
UseCanonicalName Off
</Virtualhost>

Randyranee

Answer 1

Cool All your config is good, You just have to exec command

ngrok http -host-header=rewrite home.dev:80

ngrok http -host-header=rewrite sites.dev:80

New Command (8-30-22 edit):

ngrok http --host-header=rewrite sites.dev:80

Evangelista

what you do ? do you config your host file ? In first you have to config your virtual host from apache server than you config your host file to resole [YOUR_SITE_NAME : hove.dev] at 127.0.0.1 – Evangelista

Answer 2

For me it only worked with:

ngrok http -host-header=sites.dev 80

Change sites.dev to you virtual host name

Source: Virtual hosts (MAMP, WAMP, etc)

Circumvallate

Thanks! When I have a chance I will try this out and get back to you. I left it alone for a while bc it wasn't working obv. the way I wanted it to. – Randyranee

This worked for me, I have seen the other way that @AbdourahmaneFALL mentioned but I think this is if you are running ngrok from the host machine – Gallinaceous

I believe this is the way to go for Ngrok2, their latest version. @AbdourahmaneFALL would work for the older version of Ngrok I guess. – Homologate

Answer 3

If you want a more permanent configuration, you can edit your ~/.ngrok2/ngrok.yml config file.

tunnels:
  test: # the name of your tunnel to call from the command line
    addr: 80 # Your localhost port
    proto: http
    host_header: test.localhost # Your localhost virtualhost

And then you can run from your command line

ngrok start test

Humpy

Just a comment to say, if you need to use the syntax in @Abdourahmane FALL's answer, in host_header set the value to rewrite, then in addr set this to your vhost, including the port (for example my.vhost.com:80) – Ruebenrueda

Answer 4

Not sure if the command got changed from the previous versions.

From the help doc of Ngrok,

ngrok http --host-header=ex.com 80          # rewrite the Host header to 'ex.com'

Notice the double hyphens(--).

Damiandamiani

Thanks, this seems to be the way in October 2022 as well – Aubreyaubrie