🦖 Portzilla

The Skinny

Proxy traffic from any URL on your domain to a service listening on another port. You can even send custom headers along with each request.

Say your hosting your docs on a server listening on port 4080, Portzilla can proxy traffic from docs.yoursite.com or www.yoursite.com/docs to your server.

You can install it for free and unlock additional features with the Plus and Pro plans.

curl https://www.yoursite.com/docs → https://yoursite.com:4080

You would normally need NGINX or something for this, but you can just use Portzilla now.

How to Install

Powered by Cloudflare

Portzilla is powered by Cloudflare. If you're already using Cloudflare, click here to install Portzilla.

TIP

Cloudflare offers DDoS protection, a global CDN, SSL certificates, and a lot more cool stuff for free. You should probably use it.

Network Policies
REQUIRED

Services that Portzilla proxies must be open to incoming network requests. You might need to adjust your network policy to ensure each proxied port is accepting traffic. Refer to your network policy documentation to learn how to open ports on your platform.

WARNING

If you open a port on your Cloudflare-enabled site, your service won't automatically respond on http://www.yoursite.com:<PORT>. Portzilla does this for you.

To test your service, install Portzilla and set up a route to the port its listening on. If you get an Error Page when your visit the Route URL, you probably need to tweak your network policy.

Getting Started

Visit our tutorials to get started with various platforms. Learn more about Portzilla and troubleshooting in the following sections:

Tutorials

Check out these tutorials to see Portzilla in action:

Configuration

Portzilla is easy to set up once you get your ports open! The instructions on the installation page are fairly self explanatory, but we'll go into a little more detail here.

The following Route Configuration is available for each route Portzilla should handle.

These Advanced Options are also available:

Route Configuration

Route Name
REQUIRED

You should name your route something to remember it by. The following is another informative table.

Route Name Result
muh route 🤮
docs to vuepress server 🎉
(blank) 🤮
swagger ui 🎉

WARNING

Don't put any sensitive information in Route Name. You should find a better place to put that.

Route URL
REQUIRED

Traffic to this URL will be proxied to Target Port below. This can be any URL on your domain and can include subdomains. It is important that a full URL is specified here. Portzilla won't like it if you supply a path like /store here. It requires a URL like yoursite.com/store to work right. Here's some more examples in an informative table.

Route URL Result
/sad/path 🤮
yoursite.com/cool-beans 🎉
blog.yoursite.com 🎉

Portzilla will automatically proxy all requests to any subfolders of Route URL. In the table above, traffic to blog.yoursite.com/topics will also go to Target Port.

Target Port
REQUIRED

All traffic from Route URL and any of its subfolders will be proxied to the service running on this port. Portzilla respects your rights as a sovereign internet citizen and allows any Target Port, but you probably shouldn't use ports like 22 and 25 for obvious reasons.

OBVIOUS REASONS

Port 22 and 25 are used by the SSH and SMTP protocols, respectively.

Target Resources
OPTIONAL

If you're proxying to a static page or framework like a React site or Ghost blog, you'll definitely want to read this section.

When a service loads, it might fetch Resources like Javascript or CSS files from a local server. You'll need to whitelist those Resources here.

For example, let's say you want to show off your brand new create-react-app project to the world. Find its Resources in the Network tab of your browser's DevTools.

Resources In DevTools

You'll notice that localhost:3000 serves a few Resources under the /static directory, a favicon.ico and a manifest.json. These Resources need to be whitelisted because we want to proxy localhost:3000 with Portzilla.

Target Resources:

www.yoursite.com/static
www.yoursite.com/favicon.ico
www.yoursite.com/manifest.json

Notice that full URL's like www.yoursite.com/static are required here. Portzilla won't work if you only specify /static.

The above configuration tells Portzilla to forward requests for favicon.ico, manifest.json and any files in /static and any subdirectory of /static.

Notice the potential for collisions here, but rest assured that Portzilla minimizes them. If you have more than one route that contains /static Resources, Portzilla will try to fetch requested resources from each one. This will normally ensure the Resource is retrieved. However, you'll need to create unique names for common files like favicon.ico because there is no way to avoid a collision between the favicons of the proxied and main pages.

WARNING

If you visit your proxied page and get 500 errors or notice it looking funny, you probably need to whitelist more Resources.

Custom Headers
OPTIONAL

You can specify any number of headers to pass along with requests sent to the service running on Target Port. Each header should be new-line separated. In other words, hit enter after each header you type. Here's what custom headers might look like in your Portzilla configuration.

X-Forwarded-From: blog
Some-Other-Header: hey lol
athirdheader: you get the point

Custom Error Page
OPTIONAL

An HTML template to show if your service on Target Port is unresponsive. If you don't add a template, Portzilla will use its default error page.

TIP

Portzilla will render it's default Error Page unless you specify your own template in Custom Error Page.

The Error Page will appear after the number of seconds configured in Fetch Timeout.

TIP

Enable Advanced Options > Debug Mode to display Portzilla's Debug Page instead. This is useful if you're having trouble connecting to your service on Target Port.

Use HTTP
OPTIONAL

If traffic to Route URL is using https, the proxied request will also use https. Enable this to use http instead.

Single Page App Mode
OPTIONAL

When routing to a Single Page App like React, Vue, Angular, etc...etc...etc., enable this to ensure that subroutes are handled appropriately.

TIP

SPAs often have a base parameter that should be set if the app is running on a subpath. For example, if you are running Vuepress on www.yoursite.com/docs, set base: '/docs' in your config.js. Refer to your SPAs documentation for specific instructions.

Disable Cache
OPTIONAL

Pages that hit Portzilla are cached by default. This disables caching of any request made to this route.

TIP

Enabling Disable Cache on a route that contains Target Resources paths that match another route will not immediately disable the cache. Requests on both routes will remain cached for some time, but new requests will not be cached. This means that the cache will eventually be cleared (usually within an hour).

Advanced Options

Fetch Timeout

This is the number of seconds Portzilla will wait for a response from the service listening on Target Port before giving up and rendering the Error Page. The default value is 5 seconds.

TIP

If your service takes a while to spin up or is otherwise slow, increase Fetch Timeout.

Disable Portzilla

If you want to temporarily disable Portzilla and all your routes, this is your option.

Disable Cache

Pages that hit Portzilla are cached by default. This disables caching on all routes, overriding any route-specific cache settings.

Debug Mode

This is useful if you're having trouble connecting to your service on Target Port. When Debug Mode is active, the Portzilla Debug Page will appear after a failed request.

TIP

In Debug Mode, Fetch Timeout is set very high so the request will complete.

Known Issues

  1. Portzilla cannot proxy from your domain root. For example, you can proxy to www.yoursite.com/service but you cannot proxy to www.yoursite.com.

FAQ

  1. Is Portzilla compatible with WordPress?

    • WordPress is not currently compatible. We're working on a solution and will have a tutorial soon!
  2. My single page app is not behaving correctly with Portzilla.

Connection Troubleshooting

  1. Help! I cannot connect to my service with Portzilla!

    • Confirm that your API is publicly exposed. You should be able to curl your service directly. If your API is on port 3000 on an EC2 instance, your api should respond to:
curl -I <your-subdomain>.amazonaws.com:3000

# If you don't get a response, open  the port its running on to allow incoming traffic.
  1. My API is publicly exposed but I still can't connect!

    • Is a DNS record pointing at your service? Ensure your CNAME or A record is correctly mapping to your origin.
  1. My DNS records are correctly set but I still can't connect!

    • Is your API HTTP only? If your domain is HTTPS, enable the Use HTTP option and try again.

SANITY CHECK

Is your service running on the machine you think it is? Is it possible the service is running on a different machine? (this happened to me 🤣)

Attributions

The Custom Error Page logo was designed by Kiranshastry at FlatIcon.