同一DigitalOcean服务器部署Nuxt SPA与Laravel API遇Nginx配置问题

Let’s dig into this step by step — I’ve run into similar issues deploying Nuxt + Laravel on DO Droplets before, so here’s what’s likely going wrong and how to fix it:

1. Check if Port 3000 is Open in Your Firewall #

DigitalOcean Droplets come with UFW enabled by default, and port 3000 isn’t allowed out of the box. If your firewall blocks it, external requests to http://DROPLET_IP:3000 will hang indefinitely.

• Run these commands to open the port and reload UFW:

  sudo ufw allow 3000/tcp
  sudo ufw reload
  

• Verify the rule is active with:

  sudo ufw status
  

  You should see a line like 3000/tcp ALLOW Anywhere

2. Fix Your Nuxt Nginx Configuration #

Your current Nuxt server block has two key issues that can cause loading failures:

• The root directive is inside the location / block (it should live at the server level)
• Missing try_files to handle SPA routing (critical for Nuxt to serve the correct index.html file)

Update your Nuxt server block to this:

server {
    listen 3000;
    server_name DROPLET_IP;
    keepalive_timeout 60;
    root /var/www/nuxt-front/dist; # Move root to server level
    index index.html;

    location / {
        # Ensures all routes fall back to index.html for SPA behavior
        try_files $uri $uri/ /index.html;
    }

    # Optional: Add caching for static assets to improve performance
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

Critical Pre-Check: #

Make sure you’ve actually built your Nuxt app! Run cd /var/www/nuxt-front && npm run build to generate the dist directory. If this folder doesn’t exist or is empty, Nginx has nothing to serve.

3. Reload Nginx & Validate Configuration #

After updating the config, always test for syntax errors first:

sudo nginx -t

If you see nginx: configuration file /etc/nginx/nginx.conf test is successful, reload Nginx to apply changes:

sudo systemctl reload nginx

4. Verify Nginx is Listening on Port 3000 #

Double-check that Nginx is actually bound to port 3000 with:

ss -tulpn | grep 3000

You should see a line with nginx in the process column. If nothing shows up, recheck your server block for typos (like misspelling listen or using an invalid IP).

Bonus: Better Setup (No Port Required) #

Using separate ports works, but it’s cleaner to serve both apps on port 80 using a path prefix for the API. Here’s how to combine both server blocks into one:

server {
    listen 80;
    server_name DROPLET_IP;

    # Serve Nuxt frontend at the root
    root /var/www/nuxt-front/dist;
    index index.html;

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

    # Serve Laravel API at /api
    location /api {
        alias /var/www/laravel-api/public;
        try_files $uri $uri/ /api/index.php?$query_string;

        location ~ \.php$ {
            fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
            fastcgi_index index.php;
            fastcgi_param SCRIPT_FILENAME $request_filename;
            include fastcgi_params;
        }
    }

    # Security headers (apply to both apps)
    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";
    charset utf-8;

    # Static file exclusions
    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt { access_log off; log_not_found off; }

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

With this setup:

• Visit http://DROPLET_IP for your Nuxt frontend
• Visit http://DROPLET_IP/api for your Laravel API
• Don’t forget to update your Nuxt app’s API base URL to /api in nuxt.config.js!

内容的提问来源于stack exchange，提问作者user14289833