Jenkins behind nginx reverse proxy in subdirectory

Question

I am struggling setting up Jenkins in a subdirectory behind nginx. There are 2 apps running on localhost. One of those is jenkins, which should be accessible by visiting foo.com/jenkins. The other app is on foo.com/.

The requests to jenkins must not have a the /jenkins/ prefix, thus I rewrite (remove) it. But although the initial page of jenkins loads, all resources (js, css, ...) are missing and the website looks ugly. Reaons seems to be that the requests do not have a jenkins prefix and get redirected to the other app (see link in screenshot).

How can I route the request from the jenkins page to the correct handler?

server {
    listen 80;
    server_name foo.com;  

    # jenkins server in subdir:      
    location ^~ /jenkins/ {
       rewrite ^/jenkins(.*) /$1 break;
       proxy_pass http://127.0.0.1:9500/;
    }
    # main app:
    location / {
        proxy_pass http://127.0.0.1:8081;
    }
}

Solution

Copy&paste from the documentation:

In addition, you must ensure that Jenkins is configured to listen for requests to the /jenkins/ folder (e.g. http://10.0.0.100:8080/jenkins/ instead of http://10.0.0.100:8080/). Do that by adding the parameter --prefix=/jenkins to the Jenkins default start-up configuration file. On my system (Ubuntu 12.04 LTS) the configuration file is /etc/default/jenkins. For example, here's the full JENKINS_ARG parameter list (the only part I added was --prefix=/jenkins):

JENKINS_ARGS="--webroot=/var/cache/jenkins/war --httpPort=$HTTP_PORT --ajp13Port=$AJP_PORT --prefix=/jenkins"

Once configured, you should also set the URL used by the Jenkins UI at Jenkins > Manage Jenkins > Jenkins Location > Jenkins URL to something like: "https://domain.tld/jenkins/.