CODEWITHSUNDEEP
laravelnginxnext.jsnginx-reverse-proxy
Benfactor
Benfactor

Reputation: 599

How to deploy Nextjs/Laravel project with nginx?

I am using Laravel-8 framework as Restful API server, and Nextjs as client render. I created two folders:

/var/www/domain/backend (Laravel 8 app)

/var/www/domain/frontend (Nextjs app)

To run nextjs app I am using pm2. (npm run build then pm2 start). I have two nginx configuration files:

/etc/nginx/conf.d/frontend.conf

/etc/nginx/conf.d/backend.conf

Before production frontend run in port 3000 and backend run in port 8000. The application not working properly, it gives some errors below:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/api/index. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/api/index. (Reason: CORS request did not succeed)

Error in error page `getInitialProps`:  TypeError: t.response is undefined

How can I correctly deploy laravel and nextjs app? Is there any best way to deploy them?

frontend.conf:

upstream frontend_upstream {
    server localhost:3000;
}

server {
    listen 80 default_server;

    server_name _;

    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;

    location /_next/static {
        proxy_cache STATIC;
        proxy_pass http://frontend_upstream;
    }

    location /static {
        proxy_cache STATIC;
        proxy_ignore_headers Cache-Control;
        proxy_cache_valid 60m;
        proxy_pass http://frontend_upstream;
    }

    location / {
        proxy_pass http://frontend_upstream;
    }
}

backend.conf

server {

    listen         80;

    server_name  domain.com www.domain.com;

    root         /var/www/domain/backend/public;
    index    index.php index.html

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    charset utf-8;

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

    error_page 404 /index.php;
    
    location ~ \.php$ {
        fastcgi_pass unix:/run/php/php8.0-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
        fastcgi_read_timeout 300;
    }
        
    location ~ /\.ht {
        deny all;
    }
}

Upvotes: 2

Views: 2778

Answers (1)

Darius.V
Darius.V

Reputation: 938

What you could try/check, when checking nginx config I guess only backend part is important, header has to come from backend, like this:

Access-Control-Allow-Origin: *
  • check if the application code is executed - maybe server stops execution for some reason, and so your laravel code cannot add a header.
  • maybe there is preflight request and server does not allow it (so again server stopped execution and your backend code could not send the header)
  • maybe you yourself stop script somewhere before the header is added, like die();
  • maybe there is redirect to code which does not add header, for example some exception
  • try running the request from Postman - you should not get the error and maybe you will see something surprising.
  • Is this installed, enabled ? https://github.com/fruitcake/laravel-cors . If so, have you tried with wild card settings - allow all methods, domains?

More details: https://dariuscoder.com/2021/09/16/how-to-debug-cors/

Upvotes: 0

Related Questions