How can I setup the Nginx config for a webapp with Nuxt and Laravel on Digital Ocean?

Question

I'm setting up an app on a DigitalOcean droplet using Nuxt 3 for the frontend and Laravel 8 for the backend. I have installed Nginx for the server virtualization. My current /etc/nginx/sites-available structure is [api] and [md-alluminio].

On the [api] file I have the configuration for the backend:

server {
    listen 8000;
    server_name 157.230.109.19;
    root /var/www/api/public;    #This is the path for the backend folder

    index index.php;

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

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

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php8.2-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

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

On the [md-alluminio] file I have the configuration for the frontend:

server {
    listen 80;
    listen [::]:80;
    index index.html;
    root /var/www/md-alluminio;    #This is the path for the frontend folder
    server_name 157.230.109.19;

    location / {
       proxy_pass http://localhost:3000;
       proxy_http_version 1.1;
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection 'upgrade';
       proxy_set_header Host $host;
       proxy_cache_bypass $http_upgrade;
    }
}

If I browse the IP address (157.230.109.19) the server gives me the "502 Bad Gateway" error, and if I browse the IP address with the port for the backend it works fine (http://157.230.109.19:8000/).

I think that could be a problem with the Nginx configuration because in local on my Mamp server it works fine, somebody knows what I'm doing wrong?

I have already tried to restart Nginx and the server. I think that it could be a problem with the location / { ... } part of the [md-alluminio] file, if I remove it, the error change from 502 to 403.

Answer 1

I often deployed Nuxt & Laravel app on Digital-Ocean droplet. I also used port base reverse proxy to run both apps.

Note: I created a single virtualhost file i.e.mysite.com and wrote below instructions for both Nuxt/Laravel apps in a single file.

I used the following tools:

1. PM2 (To run node server for Nuxt app).
2. php-fpm to run multiple PHP versions for Laravel.

Once you run node server for Nuxt app please run 157.230.109.19:3000 on your browser (3000 is a port of node server). It should run your Nuxt app in the browser otherwise you have a problem with your server permission.

---

Nuxt Configuration (If running node server):

server {
     listen 80;
     listen [::]:80;
     server_name 157.230.109.19;

     location / {
        proxy_pass http://localhost:3000;  
    }

}

Laravel Cofiguration:

server {  
    listen 8001;  
    server_name 157.230.109.19;  
    root /var/www/api/public;  
  
    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-Allow-Origin *;  
        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/mysite.log error;  
  
    error_page 404 /index.php;  
      
    location ~ \.php$ {  
    include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php8.2-fpm.sock;
    }  
  
    location ~ /\.(?!well-known).* {  
        deny all;  
    }  

}

Answer 2

It seems like the issue lies in the Nginx configuration for your frontend application. Let's address this by making sure the frontend requests are properly proxied to your Nuxt application.

Here's the updated configuration for your md-alluminio file:

server {
    listen 80;
    listen [::]:80;
    index index.html;
    root /var/www/md-alluminio;    #This is the path for the frontend folder
    server_name 157.230.109.19;

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

    location /api {
        proxy_pass http://localhost:8000;  # Adjust the port if your Laravel backend is running on a different port
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

After making these changes, don't forget to reload Nginx for the changes to take effect:

sudo systemctl reload nginx