Pomoc w aplikacji internetowej

Cześć wszystkim

Mam Pytanie:
Mam problem z konfiguracją aplikacji frontend i backend na jednym serwerze VPS. Moja aplikacja w całości działa u mnie komputerze tak jak chcę. Nie mniej jednak, nie mam połączenia na serwerze VPS pomiędzy frontem i backendem. Jakby w plikach konfiguracyjnych nginx brakowało jakiś ustawień do endpointów.
Aplikacja frontend działa jest w linku pniżej. Aplikacja Spring boot też "raczej" działa bo reaguje na komendy "curl" w sudo na Ubuncie.

W rzazie czego podsyłam link do aplikacji frontednowej (bo ona działa). Jest to alikacja Angular. W spring boot napisałem backend na Tomcacie, (nie wiem czy da się inaczej ;/ )
Na tym całym serwerze moim. ( PS. Nie działała mi komunikacja pomiędzy frontem i backendem. I dlatego nie wypluwa obliczeń i nie ma wykresów. )

Wygląda to mniej więcej tak... Jest to jeszcze "Wczesna dostęp". Ale powinno się odpalić, tylko część frontendowa ;)

http://51.77.59.138:4200/#

Appka dobija się do localhosta. Ustaw url po stronie frontendu.

Masz 2 najpopularniejsze opcje:

1. tak jak @szatkus1 mówi, niech frontend dobija się do http://<twoj_ip>:<port_backendu> a nie do localhosta - nic dziwnego że "u ciebie działa" :)
2. użyj nginx jako tradycyjne reverse proxy pod jakąś konkretną unikalną ścieżką, czyli np. /* uderza do frontu, a /api/* przekazuje requesty do backendu.

BTW, wspominasz:

Jakby w plikach konfiguracyjnych nginx brakowało jakiś ustawień do endpointów

Może podziel się tymi "jakimiś ustawieniami" bo wróżymy z kuli teraz, zwłaszcza że odpaliłeś nginx na :4200 a to sugeruje jakbyś chciał udawać webpack-dev-server, zamiast po ludzku odpalić na porcie 80/443.

Myślałem, że jeżeli front i back jest na tym samym serwerze i endpointy są napisane na localhoście to może tak zostać... Podsyłam kod ngixów

plik myapp
"
server {
listen 4200;

server_name 51.77.59.138;

location / {

    root /var/www/html;

index index.html;
try_files $uri $uri/ /index.html;
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-Proto $scheme;
proxy_set_header X-Forwarded-Port $server_port;

}

location /api/ {

    proxy_pass http://localhost:8080/api/;  
    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-Proto $scheme;
    proxy_set_header X-Forwarded-Port $server_port;

}

# Logowanie dostępu i błędów
access_log /var/log/nginx/myapp-access.log;
error_log /var/log/nginx/myapp-error.log;

}

plik default
"server {
listen 4200;
server_name 51.77.59.138;

# Konfiguracja dla frontendu
location / {
    root /var/www/html;
    index index.html;
    try_files $uri $uri/ /index.html;
}
 proxy_pass http://localhost:8080/api/;  # Używamy localhost zamiast [::1]
    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-Proto $scheme;
    proxy_set_header X-Forwarded-Port $server_port;

}
# Logowanie dostępu i błędów
access_log /var/log/nginx/default-access.log;
error_log /var/log/nginx/default-error.log;

}

Jak wchodzę na tę stronkę (lub też dowolną inną) od siebie to z punktu widzenia przeglądarki localhost to mój komputer. Tak że musisz dobijać się po IP.

Nie wiem jak masz pokonfigurawany ten front, ale zwykle robi się w configu zmienną typu "API_URL" i trzyma różne konfiguracje, dla dev, prod i w komercyjnych projektach zwykle też jakiś stg albo test. I jak budujesz wersję oficjalną to ustawiasz env na prod. Angular ma wszystkie potrzebne wichajstry, żeby to sobie skonfigurować.

To jest to mój pierwszy projekt w całości i sam pisałem wszystko, od że tak powiem "Hello World", Pisałem front w HTML, CSS, JavaScript (TypeScript), Angular, backa pisałem głównie w Javie, ale jest tam Spring boot, REST do endpointów, to tak mniej więcej, sam próbuję wdrożyć to a niestety nie wiem jak wyglądają komercyjne projekty, bo oczywiście jeszcze nie udało mi się zdobyć pracy jako programista.

Nie wiem czy przyczyną brako odpowiedzi nie jest to, że aplikacja angularowa działa mi na IPv4 a backend na IPv6, takie otrzymują komunikaty z sudo, aczkowliek jak wysyłam "curl" nawet na localhoście to backend odpowiada.

Myślałe, żeby jakoś utworzyć warunkowy endpoint na nginx, w momencie wejścia na stronę, żeby ruszył się spring boot. Bo u siebie w aplikacji na komputerze tak to działa.

PS 1. Myślałem, też, żeby utworzyć serwer ze swojego komputera, bo tam działa, ale mam zmienne IP i chyba trzeba by było skonfigurować jakoś DNS-a. Albo ustawić stałe IP. Do tego dochodzi to, i chyba trzeba zrobić "dziury" na portach. Co może być potencjalnym źródłem ataków.

PS 2. Mniejsza o to, wróćmy do tego "Nie wiem jak masz pokonfigurawany ten front, ale zwykle robi się w configu zmienną typu "API_URL" To na endpointach tak, rozchodzi się, żeby te endpointy miały swoje ścieżki ustawione na "zmienne" Czy źle myślę ??

Za wszystkie wskazówki będę naprawdę wdzięczny ;)

Po prawdzie to domyślnie HttpClient powinien raczej uderzać do tego adresu, z którego appka jest wczytana z przeglądarki. Wciśnij CTRL+SHIFT+F w edytorze i poszukaj, gdzie tam doklejasz tego localhosta.

Z tego, co widzę to walisz do localhost:8080, co pewnie odzwierciedla Twoje lokalne środowisko. Pewnie po drodze mocowałeś się CORSami zupełnie niepotrzebnie. W Angularze można prosto skonfigurować przelotkę do API na potrzeby developerskie https://angular.io/guide/build#proxying-to-a-backend-server

CORS-a musiałem ustawić, bo lokalnie na komputerze mi inaczej nie działało...

mój plik proxy.conf.json"
"{
"/api": {
"target": "http://localhost:8080",
"secure": false,
"changeOrigin": true
}
}
"
a co do pliku angular.json:
"
{
"$schema": "./node_modules/@Angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"MyOwnProject": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/my-own-project",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "1.6mb",
"maximumError": "2mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "40kb",
"maximumError": "50kb"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "MyOwnProject:build:production",
"proxyConfig": "src/proxy.conf.json" // Ścieżka do pliku proxy.conf.json

        },
        "development": {
          "browserTarget": "MyOwnProject:build:development",
          "port": 4200
        }
      },
      "defaultConfiguration": "development"
    },
    "extract-i18n": {
      "builder": "@angular-devkit/build-angular:extract-i18n",
      "options": {
        "browserTarget": "MyOwnProject:build"
      }
    },
    "test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        "polyfills": [
          "zone.js",
          "zone.js/testing"
        ],
        "tsConfig": "tsconfig.spec.json",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "src/styles.css"
        ],
        "scripts": []
      }
    }
  }
}

},
"cli": {
"analytics": false
}
}
"

Wydaje mi się poprawnie skonfigurowany.

Jeśli masz ustawione proxy to corsy nie powinny być problemem. Gdzieś musisz mieć shardkodowanego tego localhosta. Przeszukaj kod.

"Gdzieś musisz mieć shardkodowanego tego localhosta." Nie rozumiem tego stwierdzenia, niestety.

Albo zamiast localhostów wbije wszędzie stałe IP serwera VPS, może to coś pomoże i wrzucę nowe pliki jar backa i pliki statyczne fronta na nowym stałym IP servera.
Aczkolwiek dziwne mi się to wydaje...

Brakuje mi tylko odpowiedzi backendu na wejście na stronę (tzn aplikacji frontendu) bo mam ustawiony warunek generowania sessionID i loginu po stronie backendu i wysłania go do frontendu przy wejściu na stronę, losowego, dla każdego odwiedzającego użytkownika. Bo chciałem uniknąć zabawy w tworzenie bazy danych, bo tego w tej chwili nie potrzebuję ( i nie chcę) więc tymczasowy sessionId i login są w redis jako pliki json. Bo chciałem uniknąć nakładania się sesji i wprowadzania danych przez różnych użytkowników pracujących jednocześnie na aplikacji. Nie miałem innego pomysłu na rozwiązanie tego problemy. I tak też dla każdego użytkownika utworzyłem "osobny" endpoint. Bo każdy endpoint zależy od unikatowego IP i loginu. I wtedy pozbyłem się nachodzenia się danych pomiędzy różnymi użytkownikami bez konieczności logowania się i tworzenia bazy danych. ( to tak w skrócie)

IP na VPS mam stały.

Rozchodziło mi się, że jak zrobię serwer ze swojego komputera, żeby puścić tą aplikację to muszę sobie ustawić stałe IP. Wtedy domena będzie zewnętrzna a serwer z mojego komputera. Albo puszczę całość ze swojego komputera.

Ok, sprawdźmy w takim razie, czy faktycznie gdzieś ten localhost jest. Pokazuję ci mój tok myślenia.

$ http http://51.77.59.138:4200/
$ # przeczytać nazwę bundla
$ http http://51.77.59.138:4200/main.91b5e777c8236338.js | vim -
$ # i poszukać wystąpień localhosta

Ok, czyli w źródle na pewno mamy localhosta. Sprawdźmy teraz kontrprzykład - czy masz tam może adres serwera po IP?

Widzisz już gdzie może być problem? :)

Nie wiem, czy dobrze rozumiem, muszę pozamieniać endpointy "ścieżki" na adres IP mojego serwera VPS ??

Dziękuję wszystkim za udział w dyskusji, udało mi się rozwiązać ten problem i działa, bez was nie dałbym sobie rady, jesteście genialni, jakbym mógł to postawiłbym wam piwo ! :)

Teraz jakieś testy trzeba porobić, czy na pewno wszystko działa jak należy i można wrzucać do portfolio :)