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?
2
Answers
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 havingresolver 8.8.8.8;
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 theproxy_pass
and ending up doubling the/jobs/
part somehow. Because with no trailing slash it passes that forward. So try: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.