Apache2 react app + laravel REST api on same domain

Question

So my goal is I have my domain named example.com conf for example.com

<VirtualHost *:80>
        ServerName example.com
        ServerAlias www.example.com
        ServerAdmin webmaster@localhost

        DocumentRoot /var/www/public_frontend
        <Directory "/var/www/public_frontend">
                Options Indexes FollowSymLinks
                AllowOverride All
                Require all granted
                RewriteEngine on
        </Directory>

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

RewriteEngine On
RewriteCond %{SERVER_PORT} !443
RewriteRule ^(/(.*))?$ https://%{HTTP_HOST}$1 [R=301,L]
</VirtualHost>

^ this conf is for my react app which contains an .htaccess file:

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteBase /
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteCond %{REQUEST_FILENAME} !-l
 RewriteRule ^.*$ / [L,QSA]
</IfModule>

And I have my laravel backend layer which is reffered to in my app as localhost:8000 here is it's conf file

Listen 8000

<VirtualHost *:8000>
       
        ServerName example.com
        ServerAlias localhost

        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/api/public

        <Directory "/var/www/api/public">
                Options FollowSymLinks Indexes MultiViews
                AllowOverride All
                Order allow,deny
                Require all granted
                RewriteEngine On
        </Directory>


        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

</VirtualHost>

.htaccess of the laravel api

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Send Requests To Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
    RewriteCond %{HTTP:Authorization} . RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
</IfModule>

Mysql is correctly installed, Laravel is correctly installed

My problem is the following: My react app is timing out on the requests.

Error: timeout of 5000ms exceeded
    createError createError.js:16
    handleTimeout xhr.js:96

EDIT: If I start my development server locally and try my APACHE server it does request to localhost on my LOCAL machine.

How to bind apache2 request to localhost to the actual localhost?

netstat output

Active Internet connections (servers and established)
Proto Recv-Q Send-Q Local Address           Foreign Address         State
tcp        0      0 0.0.0.0:xxxx            0.0.0.0:*               LISTEN
tcp6       0      0 :::443                  :::*                    LISTEN
tcp6       0      0 :::8000                 :::*                    LISTEN
tcp6       0      0 :::33060                :::*                    LISTEN
tcp6       0      0 :::3306                 :::*                    LISTEN
tcp6       0      0 :::80                   :::*                    LISTEN

PS: I will leave the question Open, but I've ended up using nginx. Someone pointed out that my case should be possible with mod_proxy.

score 0 · Answer 1 · answered Mar 30 '21 at 04:49

0

You have a VirtualHost configuration based on names, i.e. when a request comes to port 8000, you have provided a VirtualHost that is prepared to serve requests for laravel.api (ServerName) or www.laravel.api (ServerAlias).

However, your application seems to use http://localhost:8000. I suggest you try to add localhost as ServerAlias and check if it works.

In addition, you have included some rewrite directives for the case in which "example.com" was the SERVER_NAME. They are useless if you are going to acces through laravel.api or www.laravel.api.

answered Mar 30 '21 at 04:49

J.M. Robles

925
6
9

So to be clearer you suggest adding `ServerAlias localhost` under my `*:8080` virtualhost. I will try that thank you for the feedback I've been going without reading much doc, I've gone the whole day over mods, thank you for your time. – Danys Chalifour Mar 30 '21 at 05:09
@Robles I tried, not result so far. But I have a clearer config now I will edit – Danys Chalifour Mar 31 '21 at 05:18

score 0 · Answer 2 · answered Feb 26 '22 at 20:19

0

I ended up using Nginx which was more simple to use for a rookie at setting up servers. But I really wanted to learn apache and this was the roadblock I couldnt resolve.

answered Feb 26 '22 at 20:19

Danys Chalifour

1
2

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 12 '22 at 16:08

Apache2 react app + laravel REST api on same domain

2 Answers2