How to set up nginx reverse proxy with multiple node apps

Question

I have two Vue.js apps that I want to run on the same domain (e.g., https://localhost:8080/app1 and https://localhost:8080/app2). Both apps run in separate docker containers, and i have set up a third docker container running nginx with a reverse proxy in order to have ssl.

I am able to visit the apps at the wanted locations, but there are some resources missing (images, fonts etc). I realize that my nginx server looks for them at https://localhost:8080/my_resource, but I can't figure out how to forward these to the correct locations (i.e., https://localhost:8080/app1/my_resource, and similar for app2).

I've tried using the "try_files" directive in nginx, like so:

location / {
   try_files $uri $uri/ http://app1:8080 http://app2:8080
}

but it does not work.

Here is my nginx config file

server {
  listen 80;
  listen [::]:80;
  server_name localhost;
  return 301 https://$server_name$request_uri;
}

# Change the default configuration to enable ssl
server {
    listen 443 ssl;
    listen [::443] ssl;

    ssl_certificate /etc/nginx/certs/my_app.crt;
    ssl_certificate_key /etc/nginx/certs/my_app.key;

    server_name localhost;
    server_tokens off;

    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

    location / {
        if ($http_referer = "https://localhost:8080/app1/") {
            proxy_pass http://app1:8080;
            break;
        }
        if ($http_referer = "https://localhost:8080/app2/") {
            proxy_pass http://app2:8080;
            break;
        }
    }


    location /app1/ {
        proxy_pass http://app1:8080/;
    }

    location /app2/ {
        proxy_pass http://app2:8080/;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

And this is my docker-compose

version: "3.6"
services:
  app1:
    image: "app1"
    expose:
      - "8080"
    command: ["serve", "-s", "/app/app1/dist", "-l", "8080"]

  app2:
    image: "app2"
    expose:
      - "8080"
    command: ["serve", "-s", "/app/app2/dist", "-l", "8080"]

  nginx:
    image: "nginx"
    ports:
      - "8080:443"
    depends_on:
      - "app1"
      - "app2"

Thanks for any input :)

How about you also prefix /app1 or /app2 to your static files? — Justin Lessard
– Justin Lessard, Commented Mar 26, 2019 at 17:15
Are your two vue apps only static files apps? Or some server side logic exists? — lifeisfoo
– lifeisfoo, Commented Mar 26, 2019 at 17:22
@JustinLessard That wouldn't really work, the main reason being that the nginx server looks for the files at e.g., localhost:8080/my_resource_app1 or localhost:8080/my_resource_app2, while it should go to localhost:8080/app1/my_resource_app1. Prefixing the static files wouldn't really fix that, would it? Or am I missing something? — OleG
– OleG, Commented Mar 26, 2019 at 17:26
@lifeisfoo They are statics. I am able to load the css in css/*.css and js in js/*.js (and index.html), but nothing in other folders on the same level (e.g., files in img for fonts). I have deployed using npm run build if it matters. — OleG
– OleG, Commented Mar 26, 2019 at 17:28

OleG · Accepted Answer · 2019-03-27 15:47:33Z

After a lot of trial and error, I found a solution. I do not think this is the optimal solution, but it's working. Here is my nginx configuration:

# Pass any http request to the https service
server {
    listen 80;
    listen [::]:80;
    server_name localhost;
    return 301 https://$server_name$request_uri;
}

# Configure the ssl service
server {
    listen 443 ssl;
    listen [::443] ssl;

    ssl_certificate /etc/nginx/certs/my_app.crt;
    ssl_certificate_key /etc/nginx/certs/my_app.key;

    server_name localhost;
    server_tokens off;

    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

    location / {
        proxy_intercept_errors on;
        error_page 404 = @second;
        proxy_pass http://app1:80;
    }

    location @second {
        proxy_pass http://app2:80;
    }


    location /app1/ {
        rewrite ^/app1(.*) /$1 break;
        proxy_pass http://app1:80;
    }

    location /app2/ {
        rewrite ^/app2(.*) /$1 break;
        proxy_pass http://app2:80;
    }

    # redirect server error pages to the static page /50x.html
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

Collectives™ on Stack Overflow

How to set up nginx reverse proxy with multiple node apps

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest