node.jsreactjsreverse-proxyvirtualmin

Reverse proxy to serve local reactjs application on a static url with virtualmin


I've got a locally running reactJS app that I'd like to run as a subdomain on a domain hosted on virtualmin, so that the app can be hosted locally but seen publicly.

ngrok.io allows you to serve a locally running reactjs application (or a lot of other things) through a publicly visible subdomain.

(My intention is to answer my own question, because when I searched, I ran into a lot of dead ends. I tried to use as many keywords as I used while searching out the answer.)


Solution

    1. On Virtualmin, click on 'Create Virtual Server'

    2. For the domain name, use "subdomain.x.com"

    3. Enabled Features: Setup DNS Zone (if necessary), apache website enabled, and apache ssl website enabled.

    4. Click on Server Configuration -> Edit Proxy Website

    5. Set "Proxy enabled?" to "Yes". Proxy to url: http://localhost:12809/

    6. Run your reactjs app on your localhost. We're assuming it is running on port 8301.

    7. On your localhost, establish an ssh tunnel to your server; do:

      ssh -N -T -R 12809:localhost:8301 user@x.com

    7a) use the flag -vv on ssh for testing. You should see this line in the output:

    `debug1: remote forward success for: listen 12809, connect localhost:8301`
    

    7b) then on the server, you can do this to test if there is a connection:

    `telnet 127.0.0.1 12809`
    

    if you are connected to telnet on the server, than you will see in the messages on your localhost from the ssh command:

    `debug1: channel 1: connected to localhost port 8301`
    

    7c) If that works, then you can also try to wget from within your virtualmin server:

    `wget 127.0.0.1:12809`
    

    7d) If that works, you should NOT be able to telnet/wget from OUTSIDE of your virtualmin server. It is only available from within your server, and apache will proxy the traffic from the subdomain to the service at 127.0.0.1. You can try netstat -ntlp | grep 12809 to make sure that port 12809 is listening.

    1. reload "subdomain.x.com" and your locally running reactjs app will be seen publicly there.

    2. If you need websockets enabled, make sure to add this to your apache configuration file at Services->Configure Website->Edit Directives.

    RewriteCond %{HTTP:UPGRADE} ^WebSocket$ [NC]
    RewriteCond %{HTTP:CONNECTION} ^Upgrade$ [NC]
    RewriteRule .* ws://localhost:12809%{REQUEST_URI} [P]
    

    in the RewriteEngine On section

    edit: this was an unnecessary step when i originally wrote this, but i'm leaving it here to show how you can route through yet another server if you want/need:

    ) Download 'caddy' to your virtualmin user home directory: https://caddyserver.com/download

    ) Then run a reverse proxy on caddy from the port that will connect to your localhost (9000, in this case) to the port that is served from subdomain.x.com:

    `./caddy reverse-proxy --from :12809 --to 127.0.0.1:9000`
    

    ) in this case you'd run your ssh on your localhost like 9000:localhost:8301