skip to Main Content

I deployed my angular front end and my laravel backend to an ubuntu VM onto an nginx web server.

Now the front end works fine and is accessible through my URL, however the backend API does not work – I get 404 Errors about it.

here is my nginx config:

server {
    listen 443 ssl;
    server_name my_ip myurl.de www.myurl.de;
    root /var/www/html/dist;
    index index.html;
    ssl_certificate /etc/nginx/cert.cer;
    ssl_certificate_key /etc/nginx/prvt.key;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /3rdpartylicenses.txt {
        alias /var/www/html/dist/3rdpartylicenses.txt;
    }

    location /assets {
        alias /var/www/html/dist/assets;
    }

    location = /favicon.ico {
        log_not_found off;
        access_log off;
    }

    location = /index.nginx-debian.html {
        log_not_found off;
        access_log off;
    }

    location ^~ /api {
        root /backend/LeagueOf5v5Backend/public;
        index index.php;
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ .php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/run/php/php8.1-fpm.sock; # Adjust the PHP-FPM socket path if needed
    }

    location ~ /.ht {
        deny all;
    }

    error_page 404 /index.html;

    # Additional Nginx configuration settings can go here.
}

I tried testing it through https://nginx.viraptor.info which returned it tested for the /api prefix.

However using postman and the URL I get the 404 error. But when I am at my local machine and test it with post man through localhost:8000/api/… it works just fine.

Any help appreciated!

EDIT: This is a config file for both angular and laravel in one

2

Answers


  1. This is my docker compose gninx config:

    index index.php
    
    location ~ .php$ {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+.php)(/.+)$;
        fastcgi_pass app:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
    
    location / {
        try_files $uri $uri/ /index.php?$query_string;
        gzip_static on;
    }
    

    Of course, you are using a socket, I am not, so disregard that diffence, but then I think you have a wrong location /, you use /index.html when it should be like me.

    Also see you are using index index.html, it should be index index.php, because you are serving Laravel.

    Login or Signup to reply.
  2. @Frevelman the thing, I understand from your virtual host code is that you want to call the backend Laravel service when you hit
    <your-domain>/api.

    According to your instruction, your route will be following <your-domain>/api/api/ if I’m not wrong and you had defined all routes in the api.php route file.

    Plz try it, I think that will do work for you.

    As my suggestion and would be a better solution is to run Laravel service on a different port i.e. 8001 etc. so then you will be able to access your Laravel service by <domain>:8001/api

    To run Laravel on Port:

    you can write both codes in a single file as you write in the above example.You will need to update your configuration file with it.

    // For Angular routing
    
    server {
        listen 443 ssl;
        server_name my_ip myurl.de www.myurl.de;
        root /var/www/html/dist;
        index index.html;
        ssl_certificate /etc/nginx/cert.cer;
        ssl_certificate_key /etc/nginx/prvt.key;
    
        location / {
            try_files $uri $uri/ /index.html;
        }
    
        location /3rdpartylicenses.txt {
            alias /var/www/html/dist/3rdpartylicenses.txt;
        }
    
        location /assets {
            alias /var/www/html/dist/assets;
        }
    
        location = /favicon.ico {
            log_not_found off;
            access_log off;
        }
    
        location = /index.nginx-debian.html {
            log_not_found off;
            access_log off;
        }
    
        error_page 404 /index.html;
    }
    
    
    // For Laravel
    server {  
        listen 8001 ssl;
        server_name my_ip myurl.de www.myurl.de;
        root /backend/LeagueOf5v5Backend/public;
        ssl_certificate /etc/nginx/cert.cer;
        ssl_certificate_key /etc/nginx/prvt.key;
      
        add_header X-Frame-Options "SAMEORIGIN";  
        add_header X-XSS-Protection "1; mode=block";  
        add_header X-Content-Type-Options "nosniff";  
      
        index index.html index.htm index.php;  
      
        location /{  
      
            try_files $uri $uri/ /index.php?$query_string;  
      
            add_header Access-Control-Max-Age 3600;  
            add_header Access-Control-Expose-Headers Content-Length;  
            add_header Access-Control-Allow-Headers Range;  
        }  
      
      
      
        location = /favicon.ico { access_log off; log_not_found off; }  
        location = /robots.txt  { access_log off; log_not_found off; }  
      
        access_log off;  
        error_log  /var/log/nginx/<your-domain-name>-error.log error;  
      
        error_page 404 /index.php;  
          
        location ~ .php$ {  
           include snippets/fastcgi-php.conf;
           fastcgi_pass unix:/var/run/php/php8.1-fpm.sock;
        }  
      
        location ~ /.(?!well-known).* {  
            deny all;  
        }  
    
    }
    
    

    By this configuration. You will myurl.de/ it will serve the Angular application and when you hit myurl.de:8001/ it will serve Laravel application’s routes in web.php and when you hit myurl.de:8001/api it will serve Laravel api.php routes file.

    Advantages

    1. The same SSL certificate will be used for both applications because the domain/sub-domain for both apps is the same. We are just using port forwarding to redirect requests to Angular or Laravel.

    2. When the request comes to Angular then php-fpm will not serve it and load on memory will be reduced.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search