NGINX Reverse Proxy – Cache MS Graph API

cachenginxreverse-proxy

I'm building a web based company directory which has roughly 450 employees. The data source being used is the Microsoft Graph API (Azure AD). This API requires you to make a request for every employee to receive their photos, since they are sent as JPEG images (binary data).

My application is a ReactJS app hosted by ExpressJS and being reversed proxied with NGINX. I'm hoping that I can speed up the image fetching by caching the employee images with NGINX.

The API call for each employee is: https://graph.microsoft.com/v1.0/users/${ID}/photo/$value

Here is what I have so far, but I am fairly new to NGINX so I need some guidance:

My nginx.conf:

proxy_cache_path /etc/nginx/msgraph levels=1:2 keys_zone=MSGRAPH:10m inactive=48h max_size=1g;

My /sites-enabled/default:

# The endpoint for the JPEG image requires "$value", this prevents NGINX from expecting a variable.
geo $value {
    default "$value";
}

server {
    listen 443 ssl default_server;

    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers HIGH:!aNULL:!MD5;

    server_name <omit_server_name>;


    location /team {
        # Proxy express server to use the <server_name>/team URL.
        proxy_pass http://localhost:5003;
    }

    location ~* /team/photo/(.*) {
        # Use <server_name>/team/photo/<id> as endpoint for fetching Graph API images.
        proxy_cache MSGRAPH;
        proxy_cache_valid 200 1d;
        proxy_cache_lock on;
        proxy_buffering on;

        # Use below return to confirm URL is being generated correctly:
        # return 200 https://graph.microsoft.com/v1.0/users/$1/photo/$value;

        proxy_pass https://graph.microsoft.com/v1.0/users/$1/photo/$value;
    }
}

Despite the above, each time I try to fetch using the endpoint: https://<myservername>.com/team/photo/ff036b33-e41f-4a9d-9530-d6fd8ed97b1d, I am getting a 502 Gateway Error.

My NGINX error logs are outputting: [error] 1303417#1303417: *34 no resolver defined to resolve graph.microsoft.com, client: 192.168.91.224, server: <myservername>, request: "GET /team/photo/27fbd9bf-a05e-4a26-b019-544135793cdb HTTP/1.1", host: "<myservername>", referrer: "https://<myservername>/team/", however, I am not sure what I need to do to resolve this.

Thanks in advance!

Best Answer

For anyone that runs into a similar issue, I needed to add a resolver to fix the errors I was seeing in the log. Afterwards, there was no error but I was also not having anything cached. I needed to add a few directives to my location block, which now looks like:

location ~* /team/photo/(.*) {
    proxy_cache MSGRAPH;
    proxy_cache_valid 200 1d;
    proxy_cache_lock on;
    proxy_buffering on;

    resolver 8.8.8.8;  # use google dns to handle resolver issue...

    proxy_set_header X-Forwarded-Proto https;
    proxy_set_header Host $host;

    proxy_ignore-headers Cache-Control;  # overwrite API cache control headers
    add_header X-Cache $upstream_cache_status; # can see if cache HIT or MISS

    proxy_pass https://graph.microsoft.com/v1.0/users/$1/photo/$value;
}
Related Topic