How to run behind a reverse proxy

[Sikander]

What would it take to run this behind a nginx reverse proxy?
I tried this at first, but I guess there is a problem with translating the address between the layers, so all i get is the base html-template.

location /btc {
    proxy_pass http://localhost:3000;
}

Do i have to edit something in the code, or do you know of some other parametres i can use in the nginx-config?
I'm running the app in a docker container, built from the dockerfile in the source code.

[Anders Brownworth]

If you want to host the site behind some sub-path (such as /btc in your example) you would need to address several things. You need to catch all URLs that start with /btc so you need to use a regex match and then capture the sub-path (everything beyond /btc) and send it to the proxy server like this:

location ~ ^/btc(?<subpath>.*) {
  proxy_pass http://127.0.0.1:3000$subpath;
}

And then you are going to have to prop up all URLs in views/layout.pug so the links work.

diff --git a/views/layout.pug b/views/layout.pug
index 27a3acb..d012cde 100644
--- a/views/layout.pug
+++ b/views/layout.pug
@@ -10,20 +10,20 @@ html
 
     title Blockchain Demo
 
-    link(rel='stylesheet', href='/stylesheets/lib/bootstrap.min.css')
-    link(rel='stylesheet', href='/stylesheets/lib/bootstrap-theme.min.css')
-    link(rel='stylesheet', href='/stylesheets/lib/bootstrap-horizon.css')
-    link(rel='stylesheet', href='/stylesheets/lib/ladda-themeless.min.css')
-    link(rel='stylesheet', href='/stylesheets/lib/ie10-viewport-bug-workaround.css')
-    link(rel='stylesheet', href='/stylesheets/blockchain.css')
+    link(rel='stylesheet', href='/btc/stylesheets/lib/bootstrap.min.css')
+    link(rel='stylesheet', href='/btc/stylesheets/lib/bootstrap-theme.min.css')
+    link(rel='stylesheet', href='/btc/stylesheets/lib/bootstrap-horizon.css')
+    link(rel='stylesheet', href='/btc/stylesheets/lib/ladda-themeless.min.css')
+    link(rel='stylesheet', href='/btc/stylesheets/lib/ie10-viewport-bug-workaround.css')
+    link(rel='stylesheet', href='/btc/stylesheets/blockchain.css')
 
-    script(src='/javascripts/lib/jquery.min.js')
-    script(src='/javascripts/lib/bootstrap.min.js')
-    script(src='/javascripts/lib/spin.min.js')
-    script(src='/javascripts/lib/ladda.min.js')
-    script(src='/javascripts/lib/ie10-viewport-bug-workaround.js')
-    script(src='/javascripts/lib/sha256.js')
-    script(src='/javascripts/blockchain.js')
+    script(src='/btc/javascripts/lib/jquery.min.js')
+    script(src='/btc/javascripts/lib/bootstrap.min.js')
+    script(src='/btc/javascripts/lib/spin.min.js')
+    script(src='/btc/javascripts/lib/ladda.min.js')
+    script(src='/btc/javascripts/lib/ie10-viewport-bug-workaround.js')
+    script(src='/btc/javascripts/lib/sha256.js')
+    script(src='/btc/javascripts/blockchain.js')
 
   body
     nav.navbar.navbar-inverse.navbar-fixed-top
@@ -34,20 +34,20 @@ html
             span.icon-bar
             span.icon-bar
             span.icon-bar
-          a.navbar-brand(href='/') #{__('Blockchain Demo')}
+          a.navbar-brand(href='/btc/') #{__('Blockchain Demo')}
         #navbar.collapse.navbar-collapse
           ul.nav.navbar-nav.navbar-right
             li(class={active: page === 'hash'})
-              a(href='/hash') #{__('Hash')}
+              a(href='/btc/hash') #{__('Hash')}
             li(class={active: page === 'block'})
-              a(href='/block') #{__('Block')}
+              a(href='/btc/block') #{__('Block')}
             li(class={active: page === 'blockchain'})
-              a(href='/blockchain') #{__('Blockchain')}
+              a(href='/btc/blockchain') #{__('Blockchain')}
             li(class={active: page === 'distributed'})
-              a(href='/distributed') #{__('Distributed')}
+              a(href='/btc/distributed') #{__('Distributed')}
             li(class={active: page === 'tokens'})
-              a(href='/tokens') #{__('Tokens')}
+              a(href='/btc/tokens') #{__('Tokens')}
             li(class={active: page === 'coinbase'})
-              a(href='/coinbase') #{__('Coinbase')}
+              a(href='/btc/coinbase') #{__('Coinbase')}
 
     block content

Hope that helps.

[Sikander]

Wow. amazing. that worked! thank you for your help!

There's only one small bug in the nginx-rule.
if you go to http://address/btc you get this error:

i tried to fix it with an extra / in the proxy_pass, and it fixed it for the landing page but not for the other pages.

location ~ ^/btc(?<subpath>.*) {
  proxy_pass http://127.0.0.1:3000/$subpath;
}

but it works as long as i go to http://address/btc/ so i'm fine with this