How to beautify the URL with NGINX and Tomcat for Oracle APEX

I've been trying to configure my NGINX to have nicer URL with my Oracle APEX apps but I am struggling to figure out what I am missing.

My Tomcat and NGINX are in the same server, and the ORDS has been deployed and is available under http://localhost:8080/ords/.

My goal is to have two server names like below:

This is the NGINX configuration I am using but it isn't working as desired:

server {
  server_name  dev.example.com;
  listen 80;

  access_log  /var/log/nginx/access.log;
  error_log   /var/log/nginx/error.log;

  rewrite ^/$ /$1 last;

  location / {
    proxy_pass http://localhost:8080/;    
    proxy_redirect off;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-Proto  $scheme;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}

server {
  server_name example.com;
  listen 80;

  access_log  /var/log/nginx/access.log;
  error_log   /var/log/nginx/error.log;

  rewrite ^/$ /ords/f?p=my_app last;

  location / {
    proxy_pass http://localhost:8080/;
    proxy_redirect off;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-Proto  $scheme;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}