Score:0

Nginx reverse proxy + Vercel hosted app not working together

in flag

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.

mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.