Home > Software engineering >  nginx - how to have proxy pass render a subdomain on the page?
nginx - how to have proxy pass render a subdomain on the page?

Time:09-09

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: 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?

CodePudding user response:

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

CodePudding user response:

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