Join Log in
Score:0
Justin St-Amant avatar Server

How to nest two websites in the same nginx server block

br flag
Justin St-Amant

With nginx, I'm trying to setup two static websites on the same domain. The first being at example.com, and the other being a small React app at example.com/haiku. How can this be done?

I'm running into issues where the stylesheet and javascript files for example.com/haiku are being requested from the main example.com. As all page resource URIs start with a slash (ex /static/style.css), nginx is processing them as belonging to example.com rather than getting them from /haiku.

Both websites occupy separate directories on the server. example.com is at /srv/http/domain, and example.com/haiku is at /srv/http/haiku

Here's the pertinent part of my nginx's server block:

root /srv/http;
location / {
  root /srv/http/domain;
}
location /haiku {
  alias /srv/http/haiku;
}

I've done my research on these nginx modules, and I understand why this isn't working right now. Navigating to example.com/haiku/index.html serves the page, but its references to /static/css/style.css and /static/js/main.js are hitting the / location block. I need some kind of internal rewrite that will take /static/css/style.css and change it to /haiku/static/css/style.css, where the file is located. I'm not finding similar questions on Google or SE.

I know that I can easily solve this by getting another domain. I know I can also setup a sub-domain, but I specifically want to know if this can be done by nesting one static website in the request of another website with no DNS configuration needed.

I also don't want to just change the URIs for the css and js files, because I want to be able to deploy this little React app on any server-block root.

31
0 + 0
Score:1
avatar Server
us flag
Tero Kilkanen

The standard way to facilitate this is to configure the root URL of the application so that it generates correct resource URLs in the first place.

https://skryvets.com/blog/2018/09/20/an-elegant-solution-of-deploying-react-app-into-a-subdirectory/ shows one approach for React to configure application base URL.

It is not a good idea to do any rewriting of HTML on nginx side. It will consume extra resources and it can cause undesired side-effects.

0 + 0
Justin St-Amant avatar
br flag
Justin St-Amant
Yes, changing the root URL of the app was the solution for my problem. Create React App's documentation on changing the root URL was also valuable to me: https://create-react-app.dev/docs/deployment/#building-for-relative-paths
0
Reply
ธงชาติไทย
Elon Musk
I sit in a Tesla and translated this thread with Ai:

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.