skip to Main Content

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?

2

Answers


  1. Chosen as BEST ANSWER

    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;
      }
    

  2. Try it like this, with trailing slash after the location directive (/jobs/). Then take /jobs off the proxy URL. I think your location path /jobs is being handed to the proxy_pass and ending up doubling the /jobs/ part somehow. Because with no trailing slash it passes that forward. So try:

    location /jobs/ {
     proxy_set_header X-Forwarded-For $remote_addr;
     proxy_set_header Host $http_host;
     proxy_pass https://vercel.employbl.com; #removed jobs 
    }
    

    Edit: On my server I can only get it to work this way. Both location directive and proxy URL end in a slash. From what I’ve read, this should make it drop the location directive path, instead of passing it on.

    location /jobs/ {
     proxy_set_header X-Forwarded-For $remote_addr;
     proxy_set_header Host $http_host;
     proxy_pass https://vercel.employbl.com/jobs/;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search