Search code examples
phpnginxnext.jsreverse-proxyvirtualhost

How to load a nextjs route along with php driven website running both on nginx server?


I tried to create a php driven website on by ubuntu system along with nextjs website. I have tried the following.

Suppose I have a website build in php say mysite.com with 2 pages mysite.com/ & mysite.com/about.php

Parallelly I have a nextjs website running on port 3000 with url as 127.0.0.1:3000 , Also It have a page 127.0.0.1:3000/blog

What I need is I need to load nginx blog page on the url mysite.com/blog . Lot more to come from nextjs

By referring some articles and I tried the following setting in nginx , But couldn't work

server {
    listen 80;
        listen [::]:80;

        root /var/www/nginx/mysite;
        index index.html index.htm index.nginx-debian.html;

        server_name mysite.com www.mysite.com;

        location / {
                try_files $uri $uri/ =404;
        }

        location ~ \.php$ {
        #try_files $uri =404;
        #include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php7.4-fpm.sock;
        include fastcgi_params;
    }

    location /blog {
           proxy_pass          http://127.0.0.1:3000;
        }

}

Observaations and Problems are listed below

  • mysite.com/index.html working correctly
  • mysite.com/about.php Not loading , Instead php file get downloading
  • mysite.com/blog Load from nextjs, I can see on source but not loading resources correctly

Solution

  • I could able to achieve my need by adding the following, but still has some few issue, which I have noted below

    server {
        listen 80;
        server_name mysite.com www.mysite.com;
    
        access_log /var/www/nginx/mysite/logs/access.log;
        error_log  /var/www/nginx/mysite/logs/error.log error;
    
        root /var/www/nginx/mysite;
        index index.php index.html;
    
        location /blog {
            proxy_pass          http://127.0.0.1:3000;
        }
    
        location / {
            try_files $uri $uri/ /index.php?$query_string;
        }
    
        location ~ \.php {
            fastcgi_index index.php;
            fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
    
            include fastcgi_params;
            fastcgi_split_path_info ^(.+\.php)(/.+)$;
            fastcgi_param PATH_INFO $fastcgi_path_info;
            fastcgi_param PATH_TRANSLATED $document_root$fastcgi_path_info;
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        }
    
        # Prevents caching of css/less/js/images, only use this in development
        location ~* \.(css|less|js|jpg|png|gif)$ {
            add_header Cache-Control "no-cache, no-store, must-revalidate"; 
            add_header Pragma "no-cache";
            expires 0;
        }
    
        
    }
    

    One small Issue I could see is that though blog loads from nextjs, It still show 404 in console, I think I have missed something from below snippet

    location /blog {
        proxy_pass          http://127.0.0.1:3000;
    }
    
    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }
    

    Also something begin with blog (donatetest.com/blogedxx) also route to nextjs, Which should not happens

    Screenshots is added for the issues

    Screeshot 1 Screenshot 2