I have one static react website and one application that connects to the API which is the express project. The landing page does not contain any routes and I'm trying to serve it at domain.com/. The dashboard has routes and I am trying to serve it under domain.com/app/. Finally, the express app should be served from domain.com/api/. Before the separation of location blocks, the react apps were one project and the express project sent the build files to the client. Everything worked then. The previous version was served from location / using the config like this:
location / {
root /var/www/domain.com;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $http_host;
proxy_pass http://000.00.00.000:5000; # my droplet IP is normally here
}
The /var/www/ directory currently has a structure like this:
- var
--www
---domain.com
----landing
----dashboard
----server.js
----other files from the express project
I am trying to understand how I can separate these three projects under one server block. Using the configuration shown below the only one that shows up is the landing which is served from domain.com/.
server {
server_name domain.com www.domain.com;
#Configures the publicly served root directory
#Configures the index file to be served
#root /var/www/domain.com/landing/build;
#index index.html index.htm;
location app/ {
root /var/www/domain.com/dashboard/build;
try_files $uri $uri/ =404;
}
location api/ {
root /var/www/domain.com;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $http_host;
proxy_pass http://000.00.00.000:5000; # my droplet IP is normally here
}
location / {
root /var/www/domain.com/landing/build;
try_files $uri $uri/ =404;
}
# Certbot stuff
}
How can these three projects be served separately under the same domain? Thank you in advance.