How to deploy under NGINX subpath

[d4rth-v4d3r]

Currently I have this configuration in my nginx.conf file

#configuration for my-domain
location /company {
            location ~ /traduora {
			rewrite                                /traduora/(.*)$ /$1 break;
			proxy_pass                             http://traduora:8080;
			proxy_redirect                         http://traduora:8080/ $scheme://$host/traduora/;
			proxy_set_header Host $host;
			proxy_set_header Upgrade			$http_upgrade;
			proxy_set_header Connection 		"upgrade";
			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;
			proxy_set_header X-Forwarded-Host	$host;
			proxy_set_header X-Forwarded-Port	$server_port;
			proxy_http_version 1.1;
			proxy_cache_bypass $http_upgrade;
			client_max_body_size 20M;
		}
}

I deployed standard docker image, using this configuration:

mysqldb:
    image: mysql:5.7
    container_name: "mysqldb"
    ports:
      - "3306:3306"
    environment:
      - MYSQL_DATABASE=tr_dev
      - MYSQL_USER=root
      - MYSQL_ALLOW_EMPTY_PASSWORD=true
    volumes:
      - "/storage/mysql/traduora:/var/lib/mysql"
    networks:
      - apps
      - platforms
  traduora:
    image: traduora/traduora:latest
    container_name: "traduora"
    ports:
      - "8080:8080"
    environment:
      - TR_VIRTUAL_HOST=http://my-domain:10443/company/traduora/
      - TR_DB_HOST=mysqldb
    networks:
      - apps
      - platforms
    depends_on:
      - mysqldb

But I can't make it work. It gives me 404 while trying to load .js resources from app. What can I do?

Should I need to build a custom image from source? What changes do I need to do to make this work?

I tried to edit webapp/src/index.html to add base href and built a custom image, but api did not work (returned 404)

[anthonynsimon]

Hi @d4rth-v4d3r the issue is that the asset urls for the webapp need to have a different base href tag. Basically the webapp is requesting the assets at /{asset}.js when nginx is serving them at /company/traduora/{asset}.js

This is easily configurable via a custom build, but unfortunately you will then find that the angular router cannot handle the path prefixes when using the webapp (i.e. the webapp router will look at your current path in the browser /company/traduora/projects/my-project and consider it a 404).

Is serving the app via a subdomain like traduora.company.com possible for you? This would work out of the box.

Other than that, for the time being we won't be supporting custom path prefixes unless we can find a simple solution on the webapp.

[d4rth-v4d3r]

@anthonynsimon I was able to make it work. I made some changes and create a custom image.

[anthonynsimon]

@d4rth-v4d3r That's cool! Would you mind sharing what did you have to do in case someone else would be interested in a similar setup?

[d4rth-v4d3r]

Of course, I would write a post to explain what I did, maybe it can be done easier.

[d4rth-v4d3r]

@anthonynsimon here it is what I did.