Nuxt 3 app deployment to laravel forge

Am working on a nuxt 3 app project and wish to deploy to my forge server. I've followed the steps from the link below https://github.com/nuxt/docs/blob/master/en/faq/laravel-forge-deployment.md But after i click deploy and my site is deployed successfully, i get a 502 bad gateway error when i visit my site domain. Can someone help me out here please

LaryAI

1 year ago

Level 58

To resolve the 502 Bad Gateway error when deploying a Nuxt 3 app to a Laravel Forge server, you can follow these steps to ensure your setup is correct:

Check the Build Process: Ensure that your Nuxt 3 app is properly built before deployment. You can do this by running the build command locally to see if there are any errors:
```
npm run build
```

Verify the Deployment Script: Make sure your deployment script on Laravel Forge is correctly set up to build and start your Nuxt app. A typical deployment script might look like this:

# Navigate to the project directory
cd /home/forge/your-domain.com

# Pull the latest changes from the repository
git pull origin main

# Install dependencies
npm install

# Build the application
npm run build

# Restart the process manager (e.g., PM2)
pm2 restart all

Check the Process Manager: Ensure that you are using a process manager like PM2 to run your Nuxt app. If PM2 is not installed, you can install it globally:
```
npm install -g pm2
```
Then, start your Nuxt app using PM2:
```
pm2 start npm --name "nuxt-app" -- start
```

Verify the Server Configuration: Ensure that your server is configured to proxy requests to the correct port where your Nuxt app is running. For example, if your Nuxt app is running on port 3000, your Nginx configuration should include:

location / {
    proxy_pass http://127.0.0.1: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;
}

Check Logs for Errors: Look at the logs for any errors that might give you more information about the 502 error. You can check the Nginx error logs and the logs for your Nuxt app (if using PM2, you can use pm2 logs).
Firewall and Port Configuration: Ensure that the port your Nuxt app is running on is open and accessible. You might need to adjust your firewall settings to allow traffic on that port.

By following these steps, you should be able to identify and resolve the issue causing the 502 Bad Gateway error. If the problem persists, double-check each configuration step and ensure that all services are running as expected.

Shiro1101

1 year ago

Level 2

@LaryAI The build was successful but i still get the 502 bad gateway error when i visit the site

JerryEvans

1 year ago

Level 1

I am also getting the same error.

Shiro1101

1 year ago

Best Answer

Level 2

@JerryEvans Hi mate, I got a solution to the issue for NUXT v3.16.0

https://nuxt.com/docs/getting-started/deployment#nodejs-server follow this link to the documentation on deploying a NUXT app to a node server.
https://nuxt.com/docs/getting-started/deployment#pm2 here you will find the pm2 configuration
Use the following script as your deploy script

cd /home/forge/$YOUR_SITE_DOMAINE
git pull origin $FORGE_SITE_BRANCH

# install node & build app
npm install && npm run build

# Set permissions
chmod 644 ecosystem.config.cjs

# 3. Stop existing PM2 process
pm2 delete $YOUR_SITE_DOMAINE || true

# 4. Start with updated config
pm2 start ecosystem.config.cjs

# Save PM2 process list
pm2 save

# Optional: health check
echo "🩹 Performing health check..."
curl -Ifs http://localhost:3000 || echo "⚠️ Health check failed - application may not be running"

echo "✅ Deployment complete!"

Add the following script to your Nginx config file

server {
    http2 on;
    listen 443 ssl;
    listen [::]:443 ssl;
    server_name $YOUR_SITE_DOMAINE;

    # FORGE SSL (DO NOT REMOVE!)
    ssl_certificate /etc/nginx/ssl/$YOUR_SITE_DOMAINE/$YOUR_SSL_SIGNATURE_GOES_HERE/server.crt;
    ssl_certificate_key /etc/nginx/ssl/$YOUR_SITE_DOMAINE/$YOUR_SSL_SIGNATURE_GOES_HERE/server.key;

    # SSL Protocols
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    ssl_ciphers '$YOUR_SSL_CIPHER_CODE_GOES_HERE';
    ssl_ecdh_curve secp384r1;
    ssl_session_timeout 10m;
    ssl_session_cache shared:SSL:10m;
    ssl_session_tickets off;
    ssl_stapling on;
    ssl_stapling_verify on;
    resolver 8.8.8.8 8.8.4.4 valid=300s;
    resolver_timeout 5s;

    # Security Headers
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
    add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload" always;

    # Proxy Configuration
    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
        
        # Timeouts (important for SSR)
        proxy_connect_timeout 600s;
        proxy_send_timeout 600s;
        proxy_read_timeout 600s;
        send_timeout 600s;
    }

    # Static files
    location /_nuxt/ {
      alias /home/forge/$YOUR_SITE_DOMAINE/.output/public/_nuxt/;
      expires 1y;
      add_header Cache-Control "public";
    }

    # Error pages
    error_page 500 502 503 504 /500.html;
    error_page 404 /404.html;
    location = /50x.html {
        root /home/forge/$YOUR_SITE_DOMAINE/.output/public;
    }

    # Gzip Compression
    gzip on;
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_types text/plain text/css text/xml application/json application/javascript application/xml+rss application/atom+xml image/svg+xml;
}

# HTTP to HTTPS redirect
server {
    listen 80;
    listen [::]:80;
    server_name $YOUR_SITE_DOMAINE;
    return 301 https://$host$request_uri;
}

Make sure you add your environment variables before you deploy your application
Do not forget to replace all variables I added by the right information you should have and if you have any issues or difficulties just leave a comment here and I'll help out as much as I can

1 like

luna_papa

1 year ago

Level 4

@Shiro1101 seems it doesn't work for ip address. can you also try Nuxt3 CSR(ssr:false) with raw ip?

i can't figure out what is the correct nginx conf or ecosystem.config.cjs for this.

it sometimes display but it makes preflight options request not post(since I use nuxt apollo all should be post) I set up cors properly, so my app from local and vercel works fine, only Forge deployment failed.

TrentRowley

1 year ago

Level 1

Check Nuxt build output and ensure correct Node version is installed.

Please or to participate in this conversation.