I have a Wordpress site running Nginx that exists on https://www.exampleurl.com
I have an app running on Vercel - https://github.com/cwackerfuss/react-wordle - that I want to run under https://www.exampleurl.com/wordle/ of my website (not a sub-domain, that would of course make this all a lot easier).
So, I have setup a reverse proxy in Nginx:
location /wordle/ {
proxy_pass https://wordleexample.vercel.app/;
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
It "works" but the .js and .css files it tries to load are not hard-coded back to the versions hosted on Vercel.
<script defer="defer" src="/static/js/main.e185fe80.js"></script>
<link href="/static/css/main.8376a7a5.css" rel="stylesheet">
So, the browser tries to look for those files under www.domain.com/wordle/ where of course they don't exist. So, the app doesn't load/work.
How can I get the App to run properly as I want? I based the above off this post which I found.
I know I could set things up as a custom domain within Vercel, but that opens up other issues to do with DNS settings I can't really change, AWS, CDN, hosting and etc.