Static files served by Nginx shows 404

Community. I need your help with my Nginx configuration.

I have two react projects(admin and frontend)

So I want to deploy these using Nginx.

Following is my nginx configuration.

server {
    listen 80;
    server_name example.com;

    location /admin {
        alias /home/ubuntu/dwq/admin/build;
        index index.html;
    }

    location /main {
        alias /home/ubuntu/dwq/frontend/build;
        index index.html;
    }

    location /api/ {
        proxy_pass http://localhost:8000/api/;
    }
}

But when I try to visit example.com/admin, or example.com/main, the css and js files cannot be found, and it returns 404.

server {
    listen 80;
    server_name example.com;

    location /admin {
         alias /home/ubuntu/dwq/admin/build;
         index index.html;
    }

    location / {
        root /home/ubuntu/dwq/frontend/build;
        index index.html;
    }

    location /api/ {
        proxy_pass http://localhost:8000/api/;
    }
}

If I configure like above, then frontend project works well but admin still shows nothing(because of 404 for static files)

Why does this happen and how to fix this? I am so glad to hear feedbacks. Thank you.

I want to configure properly so both react projects work well under /admin and /main.

I'm assuming you are using create-react-app.

From deployment docs:

Create React App produces a build assuming your app is hosted at the server root.

Make sure both applications are build using the relative path you are planning to use in the reverse proxy.