Middleware to support reverse proxying via a defined URI path.

[sohmc]

I wrote a react app that is being served from next.js and everything works as expected. I've containerized the entire app by following the instructions (more or less) and now have a container that functions as expected. However, like most apps, it needs to sit behind a reverse proxy so that I can access it using one URL.

The way I have my reverse proxy set up is a base URL of https://secure.example.com with /app paths that go to different programs.

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

location /roundcube/ {
  rewrite       /roundcube/(.*) /$1 break;
  proxy_pass    http://roundcube/;

  proxy_set_header X-Forwarded-Path "/roundcube";
  proxy_set_header Host $host;
}

location /reactjs/ {
  rewrite        /reactjs/(.*) /$1 break;
  proxy_pass     http://reactjs:3000/;
}

When setting up my next app (the reactjs location), I've run into a bit of trouble. When I go to https://secure.example.com/reactjs/, the page loads but the related CSS, javascript files, etc. don't. Upon inspection of the loading html, these files are being requested from /_next/. My browser attempts to load https://secure.example.com/_next/... but hits a 404, which is expected since nothing is being served from that location.

I would have expected others to have the same issue but did not find a functioning solution. The closest discussion I found was #32216 which would resolve my issue.

My initial solution was to add an additional nginx rule:

location /_next/ {
  proxy_pass     http://reactjs:3000/_next/;
}

While this solution works, it only allows one next app to be hosted. Ideally, I would much prefer a solution where the rendered html is properly updated to either have resource paths be relative (i.e. _next/someResource.js vs /_next/someResource.js) or at least provide an option to add a request path.

Being pretty new to reactjs and nextjs, I wasn't sure if there was a feature or configuration switch that would allow this operation. The closest discussion I've found is #32216.

So instead, I updated my middleware and basePath and was able to successfully remove the additional location context.

My nginx config:

location /reactjs/ {
  rewrite        /reactjs/(.*) /$1 break;
  proxy_pass     http://reactjs:3000/;

  proxy_set_header X-Forwarded-Host $http_host;
}

next.conf.js:

/** @type {import('next').NextConfig} */

const nextConfig = {
  basePath: '/reactjs',
};

module.exports = nextConfig;

middleware.js:

import { _NextRequest, NextResponse } from 'next/server';

export function middleware(request) {
  // If X-Forwarded-Host is not set, then don't bother with middleware.
  const forwardedHost = request.headers.get('X-Forwarded-Host');
  if (forwardedHost === null) return NextResponse.next();

  // Middleware starts here
  const requestedUrl = request.nextUrl.clone();
  const basePath = '/reactjs';

  // const requestedHost = request.headers.get('X-Forwarded-Host');
  // const forwardedPath = request.headers.get('X-Forwarded-Path');

  console.log('basePath set: ' + basePath);
  console.log('requestedUrl: ' + requestedUrl.toString());
  console.log('basePath index: ' + requestedUrl.toString().indexOf(basePath));

  if (requestedUrl.toString().indexOf(basePath) == -1) {
    console.log('basePath not detected in request.');

    const pathForward = basePath + requestedUrl.toString().split('localhost:3000').pop();
    console.log('Will offer (proxy): ' + pathForward);
    return NextResponse.rewrite(new URL(pathForward, request.url));
  }

  return NextResponse.next();
}

This allows files to be served properly and without an additional location context within nginx. The only other issue I have with this is that basePath MUST match the location URI path being used by nginx. In my case, I don't suspect this to be an issue but if I were creating an app that was going to be widely used, this may pose a bit of a challenge. I would much prefer that this path be able to be set via an environment variable but my attempts to do so were met with errors stating that basePath must either be empty or set.

Hopefully this behavior will be added out of the box in the near future.

[dbjpanda]

@sohmc Did you find a solution?

[sohmc]

My apologies for the delay. Short answer: no.

Long answer:

I noticed that a few apps that I self-host that are react apps use a different front-end engine (I think Vue and Nuxt.js) that has the ability to set this baked in.

If you want to continue to use next.js, you'll have to hard-code the URI path.

[yuan1238y]

hard-code solution example:

function resolveURL(request: NextRequest) {
  const protp = request.headers.get("X-Forwarded-Proto");
  const host = request.headers.get("X-Forwarded-Host");
  const port = request.headers.get("X-Forwarded-Port");
  const url = new URL(request.url);
  if (protp && host && port) {
    url.protocol = proto;
    url.host = host;
    url.port = port;
    url.hostname = `${host}:${port}`;
  }
  return url.toString()
}

worked at nginx-ingress-controller