nginxnginx-configvercelnginx-locationproxypass

nginx - how to have proxy pass render a subdomain on the page?


We have a PHP server with Nginx running. On a separate server hosted by Vercel we have a Next.js app running. We've deployed the Vercel app to a subdomain of our main domain: https://vercel.employbl.com/ Our domain is hosted by Cloudflare and we linked it to Vercel by adding a CNAME record like so:

cname record cloudflare vercel

What I'm trying to do is have our main jobs page instead Render the jobs page of the Vercel app. So user enters https://www.employbl.com/jobs but the Next.js app with the matching path https://vercel.employbl.com/jobs renders instead while keeping "employbl.com/jobs" as the URL.

This is the Nginx config we have currently using proxy_pass. Unfortunately I'm getting a 404 error from Vercel when I navigate to "employbl.com/jobs" using this Nginx config:

  location / {
      try_files $uri $uri/ /index.php?$query_string;
  }
  location /jobs {
     proxy_set_header X-Forwarded-For $remote_addr;
     proxy_set_header Host $http_host;
     proxy_pass https://vercel.employbl.com/jobs;
  }

This renders the page from Vercel: 404 - Code: DEPLOYMENT_NOT_FOUND but the site is working at the URL provided in the nginx config.

How can I configure Nginx so that when the user navigates to "employbl.com/jobs" the https://vercel.employbl.com/jobs page renders?


Solution

  • We ended up getting it working like this. Needed a separate entry to point to files for the _next directory that holds our assets. I think the primary fix was having resolver 8.8.8.8;

      location / {
          try_files $uri $uri/ /index.php?$query_string;
      }
      location /jobs {
         resolver 8.8.8.8;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_pass https://vercel.employbl.com/jobs;
      }
      location ~ ^/_next/(.*)$ {
        resolver 8.8.8.8;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass https://vercel.employbl.com/_next/$1;
      }