Nginx with Angular and Spring boot-CodePudding

i am new to this field and try to "publish" my own backend frontend.

I have rented a Linux V-Server with Ubuntu 20.04 and installed Nginx "nginx/1.18.0 (Ubuntu)".

The Angular(Version 13)-Frontend-Files are copied from dist-folder (after ng build) to the destination on the server. I only copied the files, i do not have installed angular on the server as the angular-documentation stated it would be sufficient in this way, could this be a problem?

It is like /home/FrontEnd (AngularFiles) /home/Backend (Springboot.jar)

The Springboot-Backend (Version 2.6.2) is a "fat JAR" listening to port 8080. Java is installed and home-variable is configured (if i use

curl -I 127.0.0.1/api/EXAMPLE

I get the expected response) I also tried "localhost" instead of "127.0.0.1".

Unfortunately I am not able to call the backend-functions from the frontend, becuase of CORS.

Here is my NginX config-file:

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events 
{
     worker_connections 768;
     # multi_accept on;
}

http 
{
include    /etc/nginx/mime.types;
    upstream springboot
    {
        server 127.0.0.1:8080  max_conns=10;
    }

    server
    {
        listen 80;
        listen [::]:80;
        server_name my_server;

        location /
        {
        root /home/DogCommando_Frontend;
        try_files $uri $uri/ /index.html;
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Port $server_port;
        }
        
       location /api
        {
          proxy_pass    http://springboot;
          proxy_set_header    Host               $host;
          proxy_set_header    X-Real-IP          $remote_addr;
          proxy_set_header    X-Forwarded-For    $proxy_add_x_forwarded_for;
          proxy_set_header    X-Forwarded-Host   $host;
          proxy_set_header    X-Forwarded-Server $host;
          proxy_set_header    X-Forwarded-Port   $server_port;
          proxy_set_header    X-Forwarded-Proto  $scheme;        
        }
    }


  include /etc/nginx/mime.types;
        ##
        # Logging Settings
        ##

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

        ##
        # Gzip Settings
        ##

        gzip on;
}

I get to call the Spring-Application if i put the

proxy_pass    http://springboot;

into the first "location/"-section but my Angular-Frontend will not be displayed in this case, even though the rest of the file looks like the one, i posted above.

I also tried different kinds of

add_header Access-Control-Allow-Origin *;

but the problem persists.

I assume there is some kind of fundamental problem i can´t see.

Because i am very inexperienced in this field every help is appreciated and if i missed to post something, please let me know.

Thank you all in advance!

CodePudding user response：

I finally got it.

My problem was i read a lot of guides and they always talked about "localhost". I assumed (maybe i've overread the important part) that the Spring-Application once it started can be adressed by "localhost" or "127.0.0.1", but that is wrong.

I had to modify my API-Calls to use my Server-adress instead of "localhost". So from "localhost:8080/api/EXAMPLE" i rewrite it as "myserveradress.net/api/EXAMPLE" and the nginx-config i posted in my question works and redirects the "/api/" call to the spring-application.

I hope it is understandable what i have written and someone can save some time if he reads this.