Provide different assets by URL path using reverse proxy

Question

I'm trying to provide different assets that are in different docker containers. I have two containers where one of these container is example.com and the other is example.com/site2 and I have another container that is a nginx container (proxy).

In this nginx container I have a config file that manage the site paths correctly to access pages, but the images, css and javascripts from site2 can not be found (404 status to all assets from site2).

This is my config file:

server {
    listen 80 default_server;
    server_name _;

    location ~ /\. {
        deny all;
    }

    # assets, media
    location ~* \.(?:css(\.map)?|js(\.map)?|jpe?g|png|gif|ico|cur|heic|webp|tiff?|mp3|m4a|aac|ogg|midi?|wav|mp4|mov|webm|mpe?g|avi|ogv|flv|wmv)$ {
        if ($request_uri ~* "site2") {
            proxy_pass "http://production-site2";
        }

        if ($request_uri !~* "site2") {
            proxy_pass "http://production-site1";
        }

        expires 7d;
        access_log off;
    }

    # svg, fonts
    location ~* \.(?:svgz?|ttf|ttc|otf|eot|woff|woff2)$ {
        if ($request_uri ~* "site2") {
            proxy_pass "http://production-site2";
        }

        if ($request_uri !~* "site2") {
            proxy_pass "http://production-site1";
        }

        add_header Access-Control-Allow-Origin "*";
        expires 7d;
        access_log off;
    }

    gzip on;
    gzip_comp_level 2;
    gzip_http_version 1.0;
    gzip_proxied any;
    gzip_min_length 256;
    gzip_buffers 16 8k;
    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;
    gzip_disable "MSIE [1-6].(?!.*SV1)";
    gzip_vary on;


    location / {
       proxy_pass          http://production-site1/;
       proxy_http_version  1.1;
       proxy_set_header    Host                $host;
       proxy_set_header    X-Real-IP           $remote_addr;
       proxy_set_header    X-Forwarded-Proto   $scheme;
       proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
    }

    location /site2 {
        proxy_pass          http://production-site2/;
        proxy_http_version  1.1;
        proxy_set_header    Host                    $host;
        proxy_set_header    X-Real-IP               $remote_addr;
        proxy_set_header    X-Forwarded-Proto       $scheme;
        proxy_set_header    X-Forwarded-For         $proxy_add_x_forwarded_for;
    }

}

If I remove the following locations all images, css and javascripts are found in both sites:

# assets, media
location ~* \.(?:css(\.map)?|js(\.map)?|jpe?g|png|gif|ico|cur|heic|webp|tiff?|mp3|m4a|aac|ogg|midi?|wav|mp4|mov|webm|mpe?g|avi|ogv|flv|wmv)$ {
    if ($request_uri ~* "site2") {
        proxy_pass "http://production-site2";
    }

    if ($request_uri !~* "site2") {
        proxy_pass "http://production-site1";
    }

    expires 7d;
    access_log off;
}

# svg, fonts
location ~* \.(?:svgz?|ttf|ttc|otf|eot|woff|woff2)$ {
    if ($request_uri ~* "site2") {
        proxy_pass "http://production-site2";
    }

    if ($request_uri !~* "site2") {
        proxy_pass "http://production-site1";
    }

    add_header Access-Control-Allow-Origin "*";
    expires 7d;
    access_log off;
}

but I want to keep these locations. There is some solution to my problem? I tried many solutions that I found at stackoverflow and other links, but none of these solutions works.

Try location ~ ^/site2 {} inside the location for the assets media and fonts. You can nest location blocks into others if they are of the same type. Like this you'll match /site2 easily. Font for the nested locations: https://serverfault.com/questions/496371/nested-locations-nginx — flaixman, Jan 30 '19 at 15:33
I replace my if statements by this location and my images, css and javascripts still aren't found, but I saw the containers logs and something different was happen: when I add the location inside on each assets location no access log was display in site2 container. If I remove this nested location, the nginx container shows the assets requests in access log with 404 status. — Pedro Alves, Jan 30 '19 at 16:14

score 1 · Accepted Answer · answered Jan 31 '19 at 19:05

This is my solution based on @flaixman answer for nested locations, this answer for rewrite URL and this answer for negated regular expression. I needed to rewrite the site2 URL because there is no folder called site2 inside site2 public folder (or site2 route). This is the reason why my assets are never found.

# assets, media
location ~* \.(?:css(\.map)?|js(\.map)?|jpe?g|png|gif|ico|cur|heic|webp|tiff?|mp3|m4a|aac|ogg|midi?|wav|mp4|mov|webm|mpe?g|avi|ogv|flv|wmv)$ {
    location ~ ^/site2 {
        rewrite ^(/site2)(.*) /$2 break;
        proxy_pass http://production-site2;
    }

    location ~ ^/(?!site2) {
        proxy_pass http://production-site1;
    }

    expires 7d;
    access_log off;
}

# svg, fonts
location ~* \.(?:svgz?|ttf|ttc|otf|eot|woff|woff2)$ {
    location ~ ^/site2 {
        rewrite ^(/site2)(.*) /$2 break;
        proxy_pass http://production-site2;
    }

    location ~ ^/(?!site2) {
        proxy_pass http://production-site1;
    }

    add_header Access-Control-Allow-Origin "*";
    expires 7d;
    access_log off;
}

Provide different assets by URL path using reverse proxy

1 Answers1