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