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

}