'Frontend/Backend Serving on Ubuntu Server 20.04

I am working on my first web-project and therefore use an Ubuntu Server 20.04 with apache2. Now i struggle with the correct frontend/backend-serving of my website. Actually I can not communicate with my backend in a meaningful way.

What is the "correct" way to do so? My current structure is:

Frontend (ReactJS):

  • webserver: apache2
  • IP: XXX.XXX.XXX.XXX:80

Backend (PHP):

  • webserver: apache2 (I allowed port 8080 in the firewall)
  • IP:
    • variant 1: XXX.XXX.XXX.XXX:8080
    • variant 2: localhost:8080
    • variant 3: 127.0.0.1:8080

I tried some different approaches to access my backend, but all failed.

My first approach was to serve the backend on the same public IP (variant 1) as the frontend, which lead to having all backend-files public visible. For security reasons this seamed like a stupid idea to me.

So I tried variant 2 and 3, which both ended with the same effect, that I could not access the backend from the frontend any more. (I tried accessing the backend via React Axios on "http://localhost:8080/index.php")

How does it happen, that I can not access my localhost directly from the frontend?

Sorry if this question sounds stupid, but I am just about to learn about servers.

If you need more information, please tell me. Thanks in advance.

phpreactjslocalhostapache2port


Solution 1:[1]

My first approach was to serve the backend on the same public IP (variant 1) as the frontend, which lead to having all backend-files public visible. For security reasons this seamed like a stupid idea to me.

Public files need to be visible. That's what makes them public.

So I tried variant 2 and 3, which both ended with the same effect, that I could not access the backend from the frontend any more. (I tried accessing the backend via React Axios on "http://localhost:8080/index.php")

Localhost means "The same computer as the client".

So it will try to access a server running on the same computer as the browser, not a server running on the same computer as the server that hosted the HTML document referencing localhost.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Quentin

Related Questions