Nuxt•2w ago

Error 500 in nuxt using reverse proxy with nginx

I have my nuxtjs application deployed, and in turn I have an NGINX configured with a proxy reverse that points to the Nuxt app, but I get an error 500 always by Nuxt here's my nginx config

server {
    listen 80;
    server_name blog.srwither.com.ar;

    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name blog.srwither.com.ar;

    ssl_certificate /usr/local/etc/letsencrypt/live/blog.srwither.com.ar/fullchain.pem;
    ssl_certificate_key /usr/local/etc/letsencrypt/live/blog.srwither.com.ar/privkey.pem;

    gzip on;
    gzip_types text/plain application/xml text/css application/javascript;
    gzip_min_length 1000;

    location / {
        expires $expires;

        proxy_redirect                      off;
        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_read_timeout          1m;
        proxy_connect_timeout       1m;

        proxy_pass http://10.1.1.30:3000;

        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
    }
}

server {
    listen 80;
    server_name blog.srwither.com.ar;

    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name blog.srwither.com.ar;

    ssl_certificate /usr/local/etc/letsencrypt/live/blog.srwither.com.ar/fullchain.pem;
    ssl_certificate_key /usr/local/etc/letsencrypt/live/blog.srwither.com.ar/privkey.pem;

    gzip on;
    gzip_types text/plain application/xml text/css application/javascript;
    gzip_min_length 1000;

    location / {
        expires $expires;

        proxy_redirect                      off;
        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_read_timeout          1m;
        proxy_connect_timeout       1m;

        proxy_pass http://10.1.1.30:3000;

        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
    }
}

3 Replies

kapa.ai•2w ago

Hi @Aiz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can offer some insights and suggestions regarding your Nuxt application error 500 when using a reverse proxy with Nginx. The error 500 you're encountering could be due to various reasons, but one common issue is related to the Nginx configuration. Let's review your configuration and suggest some potential improvements: 1. Proxy Pass Configuration: Your current proxy_pass setting looks correct:

proxy_pass <http://10.1.1.30:3000;>

proxy_pass <http://10.1.1.30:3000;>

However, make sure that your Nuxt application is indeed running on the specified IP and port (10.1.1.30:3000). 2. Host Configuration: Ensure that your Nuxt application is configured to accept connections from outside the host machine. As mentioned in this Stack Overflow answer (https://stackoverflow.com/questions/77046323), you need to set the HOST environment variable or configure it in your nuxt.config.js:

server: {
    port: 3000,     
    host: '0.0.0.0' // do not put localhost (only accessible from the host machine)
}

server: {
    port: 3000,     
    host: '0.0.0.0' // do not put localhost (only accessible from the host machine)
}

3. Error Handling: To better understand the nature of the 500 error, you might want to implement custom error handling in your Nuxt application. As described in the Nuxt documentation on error handling (https://nuxt.com/docs/getting-started/error-handling), you can create a custom error page by adding an error.vue file in your source directory. 4. Debugging: To further diagnose the issue, you can: - Check the Nginx error logs for more detailed information about the 500 error. - Ensure that your Nuxt application is running without errors when accessed directly (without Nginx). - Verify that there are no firewall issues blocking the connection between Nginx and your Nuxt application. 5. Additional Nginx Configuration: You might want to add the following to your Nginx configuration to handle larger payloads if applicable:

client_max_body_size 20M;

client_max_body_size 20M;

6. SSL Configuration: Your SSL configuration looks correct, but ensure that the certificate paths are accurate and the certificates are up to date. If after implementing these suggestions you still encounter issues, you may need to investigate further. The Nuxt documentation on reporting bugs (https://nuxt.com/docs/community/reporting-bugs) suggests figuring out what the cause might be, which could involve checking Nuxt modules or other JavaScript libraries that your application depends on. Remember, if you're unable to resolve the issue, you can seek help from the Nuxt community or consider reporting a bug (https://nuxt.com/docs/community/getting-help#could-there-be-a-bug) if you believe it's a Nuxt-specific problem. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@593227915571888130> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

AizOP•2w ago

That doesn't work for me [Nitro Error] Failed to retrieve remote version. If the server is behind a proxy, make sure it's configured correctly. VersionRetrievalFailure: Failed to retrieve remote version. If the server is behind a proxy, make sure it's configured correctly. i get this

Gaming

Programming

Error 500 in nuxt using reverse proxy with nginx