How to run phoenix app on 127.0.0.1 instead of localhost to handle redirected domains using etc/hosts file

I have a number of domain names that all are going to be lead generation sites with just a landing page and lead capture form. So I’d like to host them all as a single app.

I saw this thread which tells me how to set up the application:
https://elixirforum.com/t/multiple-domains-on-a-single-phoenix-app/32528/5

However, I’m trying to test this solution out locally, and so I’ve used the etc/hosts file to point some domains back to “127.0.0.1”. When I ping the domains, I see that they are indeed hitting up 127.0.0.1. However, my phoenix app only works when I visit “localhost” (I’ve changed the port to execute on port 80). If I pull up “127.0.0.1” in a browser, I get a refused to connect message.

Here’s where things get weird. I can sometimes see that when I go to “dummydomain.com” that I’ve redirected to my machine on the 127.0.0.1 IP, and phoenix will throw a message stating that Plug.SSL is redirecting GET / to https://dummydomain.com with a 301 redirect . However, the application doesn’t load in the browser and I just get the refused to connect message in the browser. But when I open “localhost” everything runs as expected.

I’m guessing I’m just missing a configuration option somewhere, but I can’t figure out what it could be. Any ideas?

I use etc hosts locally as well, using hostsfile tool, so I can have dev and prod parity:

brew install kevinburke/safe/hostsfile
sudo hostsfile add
        derpycoder.site
        s3.derpycoder.site
        www.derpycoder.site
        img.derpycoder.site
        docs.derpycoder.site
        minio.derpycoder.site
        pgweb.derpycoder.site
        search.derpycoder.site
        netdata.derpycoder.site
        livebook.derpycoder.site
        cockroach.derpycoder.site
        127.0.0.1

And then I use a Reverse Proxy, i.e. Caddy to route those to respective ports:

www.derpycoder.site {
	redir https://derpycoder.site permanent
}

derpycoder.site {
	tls certs/caddy/cert.pem certs/caddy/key.pem
	encode zstd gzip

	reverse_proxy localhost:4000 {
		header_up Host {host}
		header_up Origin {host}
		header_up X-Real-IP {remote}
		header_up X-Forwarded-Host {host}
		header_up X-Forwarded-Server {host}
		header_up X-Forwarded-Port {port}
		header_up X-Forwarded-For {remote}
		header_up X-Forwarded-Proto {scheme}
		header_down Access-Control-Allow-Origin https://derpycoder.site
		header_down Access-Control-Allow-Credentials true
	}
}

s3.derpycoder.site {
	reverse_proxy localhost:9000 {
		transport http {
			tls
		}
	}
}

img.derpycoder.site {
	reverse_proxy localhost:3000
}

docs.derpycoder.site {
	encode zstd gzip

	root * doc
	file_server browse
}

minio.derpycoder.site {
	encode zstd gzip

	reverse_proxy localhost:9443 {
		transport http {
			tls
		}
	}
}

pgweb.derpycoder.site {
	encode zstd gzip

	reverse_proxy localhost:8000
}

search.derpycoder.site {
	encode zstd gzip

	reverse_proxy localhost:7700 {
		transport http {
			tls
		}
	}
	# TODO: 7443 as TLS is enabled.
}

netdata.derpycoder.site {
	encode zstd gzip

	reverse_proxy localhost:19999
	# TODO: 19443 when TLS is enabled
}

livebook.derpycoder.site {
	encode zstd gzip

	reverse_proxy localhost:49223
}

cockroach.derpycoder.site {
	encode zstd gzip

	reverse_proxy localhost:8080 {
		transport http {
			tls
		}
	}
	# TODO: 8443 as TLS is enabled.
}
2 Likes

Probably your application is listening on IPv6 for some reason, so you need to visit [::1] instead.

Thanks @derpycoder, setting up a reverse proxy was the missing link. I also deep dived into caddy, which is a pretty cool tool.

1 Like