NGINX Setup – How to Run React and WordPress Under the Same Domain

Wordpress

I have some content in WordPress for pages with static content or Marketing landing pages. We decided to go on this way because of reasons…

So for doing that I have the configuration below in NGINX 

server {
    server_name mydomain.com;

    location / {
        root /var/www/webapp;
        index index.html index.htm;

        try_files $uri /index.html;

        location ~* \.(eot|ttf|woff)$ {
            add_header Access-Control-Allow-Origin *;
        }

        access_log /var/log/nginx/webapp.access.log;
        error_log /var/log/nginx/webapp.error.log;

    }

    # Alias for discover when is WordPress related content
    location /discover/ {

        index index.html index.htm index.php;
        root /var/www/wordpress;
        try_files $uri $uri/ /index.php$is_args$args;

        access_log /var/log/nginx/wordpress.access.log;
        error_log /var/log/nginx/wordpress.error.log;

        location ~ \.php$ {
            fastcgi_split_path_info  ^(.+\.php)(/.+)$;
            fastcgi_index            index.php;
            fastcgi_pass             unix:/var/run/php/php7.0-fpm.sock;
            include                  fastcgi_params;
            fastcgi_param   PATH_INFO       $fastcgi_path_info;
            fastcgi_param   SCRIPT_FILENAME $document_root$fastcgi_script_name;
        }

    }

}

Sadly this is not working, it's always rendering or try to render the react app even when I go to mydomain.com/discover/ or /discover/something

I configured WordPress URL to mydomain.com/discover in the WP Configuration.

The error for this configuration is

FastCGI sent in stderr: "Primary script unknown" while reading response header from upstream, client:

If I move the PHP extension file configuration outside of /discover I remove the FastCGI Primary script unknown error but I still NGINX resolve everything to the react app.

Some I'm quite new with NGINX I've been using Apache my whole so might be a really noob error, but it's killing already.

I tried moving things around even as default but similar errors.

Any help or guide will help me.

Best Answer

To access a path like /var/www/wordpress/ with a URI like /discover/, you will need to use alias rather than root. See this document for details.

For example:

location ^~ /discover {
    alias /var/www/wordpress;

    access_log /var/log/nginx/wordpress.access.log;
    error_log /var/log/nginx/wordpress.error.log;

    index index.php;
    if (!-e $request_filename) { rewrite ^ /discover/index.php last; }

    location ~ \.php$ {
        if (!-f $request_filename) { return 404; }

        fastcgi_pass  unix:/var/run/php/php7.0-fpm.sock;
        include       fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $request_filename;
    }
}

The location value and the alias value should either both end with a / or neither end with a /.

Note that when using alias, $request_filename should be used to find the path to the filename.

There is a long standing bug related to using alias and try_files together, which is why these blocks use the if directive instead. Note this caution on the use of the if directive.

Related Topic