Zapytanie do serwera wywołuje klienta

Cześć,
nie wiem, jak ten wątek opisać w jednym zdaniu, więc tytuł może nie być zbyt dobry. Chodzi o to, że mam stronkę hostowaną na firebase pod adresem załóżmy https://www.adres.pl. Oraz serwer (Node.js) też hostowany na tym adresie. I teraz kiedy użyję fetch na https://www.adres.pl/get to skrypt próbuje pobrać HTML mojej strony, zamiast porać dane z API app.get('/get/). Nie wiem, gdzie leży błąd i to mój pierwszy kontakt z firebase. Jeśli podałem za mało informacji to mogę opowiedzieć więcej, ale jak już mówiłem zupełnie nie wiem co może być przyczyną. Używam React Routers

<Routes>
  <Route exact path="/" element={<MapContainer/>}></Route>
  <Route exact path="/preview/:id" element={<Preview/>}></Route>
  <Route exact path="/preview/:id/:title" element={<Preview/>}></Route>
</Routes>

Dodam jeszcze, że kiedy wchodzę na https://www.adres.pl/get bezpośrednio z przeglądarki to przekierowuje mnie na stronę, a nie wyświetla dane z API. Dodanie portu do url nic nie daje

Gouda105 napisał(a):

Oraz serwer (Node.js) też hostowany na tym adresie.

W jaki sposób dokładnie jest to rozwiązane technicznie? Firebase zapewnia takie usługi? W jaki sposób to skonfigurowałeś?

Dodam jeszcze, że kiedy wchodzę na https://www.adres.pl/get bezpośrednio z przeglądarki to przekierowuje mnie na stronę, a nie wyświetla dane z API. Dodanie portu do url nic nie daje

A na którym porcie nasłuchujesz w Node.js? Jak to masz w kodzie?

A próbowałeś wyłączyć całkowicie stronę w React i dopiero wtedy się spróbować tam dostać?

W jaki sposób dokładnie jest to rozwiązane technicznie? Firebase zapewnia takie usługi? W jaki sposób to skonfigurowałeś?

Clienta dodałem do firebase za pomocą: cd client -> firebase login -> firebase init -> Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys -> npm run build -> firebase deploy. Po tej sekwencji wygenerowało mi link z adresem, na którym strona wyświetla się tak jak powinna. Adres to nie localstorage, tylko już gotowa strona.

Natomiast Node.js dodałem tak: cd server -> firebase init hosting -> firebase init functions -> Przeniosłem kod do folderu functions -> firebase deploy. I po tej sekwencji mój wcześniejszy adres, który wygenerowałem u klienta przekierowuje na serwer i API się wykonuje. (API się wykonuje, w sensie, że wyświetla się Cannot GET /, jednak url www.adres.pl powinno przekierowywać do mojej strony internetowej)

A na którym porcie nasłuchujesz w Node.js? Jak to masz w kodzie?

Nasłuchiwałem na 5050, ale kiedy uruchamiam firebase deploy mi błąd: Error: listen EADDRINUSE: address already in use :::5050, więc zmieniam o 1 i teraz jestem na 5053. Ci do kodu:

const PORT = 5053;
app.listen(PORT, function () {
    console.log(`Demo project at: ${PORT}!`); 
});

Ogólnie moim okiem to wygląda, jakby klient i serwer nadpisywały się i tylko jedno może mieć dostęp do adresu url/domeny mojej.

To spróbuj tak jak mówiłem, wypieprzyć w ogóle stronę na React i tylko samo API dać.

https://www.adres.pl/get

A skąd wynika ten adres, że akurat to API ma się znajdować na /get? Gdzie to jest skonfigurowane?
I jak próbujesz się do tego połączyć?
Tak:

https://www.adres.pl:5053/get

?

No aktualnie tak mam zrobione, jeśli dobrze rozumiem chodzi o to, żeby hostowane było tylko API. Jednak ta strona ma działać w internecie, a nie na localhost.

A skąd wynika ten adres, że akurat to API ma się znajdować na /get? Gdzie to jest skonfigurowane?

Skonfigurowałem to używając express w taki sposób:

app.get('/get/:id', function);

I jak próbujesz się do tego połączyć?

Jeśli to robię bezpośrednio przez przeglądarkę to tak, jak pokazałeś, natomiast w kliencie React używam fetch. Jednak kiedy użyję portu strona się ładuje, aż do ERR_CONNECTION_TIMED_OUT.

Co chciałbym jeszcze raz napisać - kiedy używam firebase deploy na kliencie, pod adresem strony znajduje się klient React, nawet jeśli wywołam www.adres.pl/get, a kiedy na serwerze wywołam deploy to pod adresem znajduje się Cannot GET /. Jednak ja bym chciał, żeby klient znajdował się pod www.adres.pl oraz pod jego rozwinięciami określonymi w Routerze, (np. www.adres.pl/contact), a API pod adresami podanymi w express np. www.adres.pl/get.

Może musisz gdzieś zaznaczyć, żeby Firebase pozwalało na połączenie się z zewnątrz do tego konkretnego portu, albo żeby go jakoś przemapowało?
Nie wiem, zgaduję tylko.

No aktualnie tak mam zrobione, jeśli dobrze rozumiem chodzi o to, żeby hostowane było tylko API. Jednak ta strona ma działać w internecie, a nie na localhost.

Ale co ma localhost do tego? To w końcu jak wyłączysz stronkę reactową i wrzucisz tylko API do netu, to działa czy nie?

Z tego, co piszesz, to są 2 różne aplikacje, które prawdopodobnie się konfliktują albo nawet API po prostu nie jest widoczne.

Nie wiem natomiast, jakie opcje zapewnia Firebase konkretnie (tylko z bazy danych korzystałem z Firebase, nie wiedziałem nawet, że mają hosting). Ale jeśli chcesz mieć tę stronę pod /get to w jakiś sposób musi gdzieś to być skonfigurowane.

BTW w ogóle da się hostować bezpośrednio serwer Node.js na Firebase? Jak szukam o tym w necie, to wyskakują mi tylko rzeczy o Cloud Functions, gdzie w zasadzie piszesz w Node.js, ale w specjalny sposób te funkcje. Ale jak próbowałem tak zrobić, to mi pisze, że Error: Your project (...) must be on the Blaze (pay-as-you-go) plan to complete this command., więc chyba w darmowym planie, który mam, tego nie ma.

A możesz wstawić przykład swojej konfiguracji z firebase.json żebyśmy wiedzieli jak ona wygląda? Bo wydaje mi się, że konfiguracja routingu po stronie serwera, gryzie się z tym co jest po stronie Reacta.

Co to jest fetch?

Znalazłem taki artykuł: https://javascript.plainenglish.io/hosting-your-react-js-and-node-js-apps-for-free-with-firebase-6dc670564aca i podążając za nim udało się.