Configuration NGINX pour la backend API Laravel

Question

J'ai déployé mon interface frontale angulaire et mon backend Laravel sur une machine virtuelle Ubuntu avec un serveur web Nginx.

Maintenant, l'interface frontale fonctionne bien et est accessible via mon URL, cependant l'API du backend ne fonctionne pas - je reçois des erreurs 404 à ce sujet.

Voici ma configuration nginx :

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.
}

J'ai essayé de le tester avec https://nginx.viraptor.info, qui a confirmé qu'il avait testé le préfixe /api.

Cependant, en utilisant postman et l'URL, j'obtiens l'erreur 404. Mais quand je suis sur ma machine locale et que je le teste avec postman via localhost:8000/api/..., cela fonctionne très bien.

Toute aide est appréciée !

EDIT : Il s'agit d'un fichier de configuration pour à la fois Angular et Laravel.

Answer 1

Ceci est ma config gninx docker compose :

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;
}

Bien entendu, vous utilisez un socket, ce n'est pas mon cas, donc ignorez cette différence, mais je pense que vous avez une mauvaise location /, vous utilisez /index.html alors que vous devriez faire comme moi.

Je vois aussi que vous utilisez index index.html, cela devrait être index index.php, car vous servez du Laravel.

Answer 2

@Frevelman la chose que je comprends de votre code hôte virtuel est que vous voulez appeler le service backend Laravel lorsque vous accédez à /api.

Conformément à vos instructions, votre route sera /api/api/ si je ne me trompe pas et vous avez défini toutes les routes dans le fichier de route api.php.

Essayez-le, je pense que cela fonctionnera pour vous.

Ma suggestion et ce serait une meilleure solution est de faire tourner le service Laravel sur un port différent, c'est-à-dire 8001, etc. alors vous pourrez accéder à votre service Laravel via :8001/api

Pour exécuter Laravel sur un port :

vous pouvez écrire les deux codes dans un seul fichier comme vous l'avez fait dans l'exemple ci-dessus. Vous devrez mettre à jour votre fichier de configuration avec cela.

// Pour le routage Angular

serveur {
    écoute 443 ssl;
    server_name mon_ip monurl.de www.monurl.de;
    racine /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;
    }

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

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

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

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

    error_page 404 /index.html;
}

// Pour Laravel
serveur {  
    écoute 8001 ssl;
    server_name mon_ip monurl.de www.monurl.de;
    racine /backend/LeagueOf5v5Backend/public;
    ssl_certificate /etc/nginx/cert.cer;
    ssl_certificate_key /etc/nginx/prvt.key;

    ajouter_en-tête X-Frame-Options "SAMEORIGIN";  
    ajouter_en-tête X-XSS-Protection "1; mode=block";  
    ajouter_en-tête X-Content-Type-Options "nosniff";  

    index index.html index.htm index.php;  

    location /{  

        try_files $uri $uri/ /index.php?$query_string;  

        ajouter_en-tête Access-Control-Max-Age 3600;  
        ajouter_en-tête Access-Control-Expose-Headers Content-Length;  
        ajouter_en-tête Access-Control-Allow-Headers Range;  
    }  

    emplacement = /favicon.ico { access_log off; log_not_found off; }  
    emplacement = /robots.txt  { access_log off; log_not_found off; }  

    access_log off;  
    error_log  /var/log/nginx/-error.log error;  

    error_page 404 /index.php;  

    location ~ \.php$ {  
       inclure snippets/fastcgi-php.conf;
       fastcgi_pass unix:/var/run/php/php8.1-fpm.sock;
    }  

    location ~ /\.(?!well-known).* {  
        refuser tout;  
    }  

}

Avec cette configuration. Vous utiliserez monurl.de/ pour servir l'application Angular et lorsque vous accéderez à monurl.de:8001/ cela servira les routes de l'application Laravel dans web.php et lorsque vous accéderez à monurl.de:8001/api il servira le fichier de routes api.php de Laravel.

Avantages

1. Le même certificat SSL sera utilisé pour les deux applications car le domaine/sous-domaine pour les deux applications est le même. Nous utilisons simplement le renvoi de port pour rediriger les demandes vers Angular ou Laravel.

2. Lorsque la demande arrive à Angular alors php-fpm ne la servira pas et la charge sur la mémoire sera réduite.

Answer 3

Il semble que votre configuration Nginx tente de servir à la fois le frontend Angular et le backend Laravel à partir du même bloc serveur. Cela peut entraîner des conflits de configuration. Pour résoudre ce problème, vous pouvez diviser la configuration en blocs serveurs séparés, un pour le frontend et un autre pour le backend.

Vous pouvez essayer la configuration mise à jour ci-dessous.

# Bloc serveur pour le frontend Angular
server {
    listen 443 ssl;
    server_name 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;
}

# Bloc serveur pour le backend Laravel
server {
    listen 443 ssl;
    server_name api.myurl.de; # Changez ceci par votre sous-domaine souhaité
    root /backend/LeagueOf5v5Backend/public;
    index index.php;
    ssl_certificate /etc/nginx/cert.cer;
    ssl_certificate_key /etc/nginx/prvt.key;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/run/php/php8.1-fpm.sock; # Ajustez le chemin du socket PHP-FPM si nécessaire
    }

    location ~ /\.ht {
        deny all;
    }
}

• Ici, le frontend est servi depuis myurl.de/www.myurl.de, et le backend est servi depuis api.myurl.de.
• Assurez-vous de configurer le DNS pour pointer api.myurl.de vers la même adresse IP du serveur.
• Des certificats SSL sont appliqués aux deux blocs serveurs.
• Chaque bloc serveur a sa propre directive root et une configuration adaptée à son application respective.

Assurez-vous de remplacer api.myurl.de par votre sous-domaine souhaité pour le backend Laravel et de mettre à jour le DNS en conséquence. Après avoir apporté ces modifications, redémarrez Nginx pour appliquer la nouvelle configuration :

sudo service nginx restart

Answer 4

try_files $uri $uri/ /index.html;

me semble incorrect, il devrait être

try_files $uri $uri/ =404;

aussi

error_page 404 /index.html;

fait en sorte que nginx force le code de réponse en 404, où PHP ne peut pas le contourner :( remplace-le par

error_page 404 = /index.html;

et nginx ne forcera plus le code de réponse, et il peut être ce que PHP veut qu'il soit, par exemple http_response_code(200); pour HTTP 200 OK

au fait, utiliser l'extension .html pour les scripts PHP est un choix étrange, les scripts PHP sont généralement définis avec l'extension .php - si j'étais impliqué dans votre projet, je le changerais en .php, je le considérerais même comme un problème de sécurité, car je ne veux pas que mes fichiers .html exécutent des scripts .php s'ils contiennent par hasard la chaîne .

Answer 5

Le problème se trouve ailleurs et non dans votre nginx. Selon mon expérience précédente, il existe deux raisons à cela

1. Probablement votre bloc serveur demande la même demande de serveur. Vous devriez utiliser un proxy pour votre angular et si la demande est du côté serveur, et si la demande provient du côté client, vous devriez corriger l'adresse de votre demande. Si la demande provient d'un client, vérifiez d'abord avec Postman et vérifiez le journal de votre serveur.
2. Parfois, vous devriez changer l'adresse de votre proxy de localhost à 127.0.0.1: votre port, dans angular et Laravel Essayez-les tous ensemble et individuellement. N'oubliez pas de redémarrer votre serveur à chaque fois.