Magento 2 Installation: css/js/images not loading in php-fpm + nginx server

[MagePsycho]

I am trying to install Magento2(0.1.0-alpha107 ) in my localhost powered by OSX 10.10 + brew installed php-fpm + mysql + nginx.
Steps that I followed for installation:

 $ mkdir /path/to/magento2 && cd /path/to/magento2
 $ git clone git@github.com:magento/magento2.git .
 $ composer install
 $ cd setup
 $ composer install
 $ php -f index.php install --base_url=http://magento2alpha.dev/ --backend_frontname=admin --db_host=localhost --db_name=magento2alpha --db_user=root --db_pass=root --admin_firstname=Raj --admin_lastname=KB --admin_email=magepsycho@gmail.com --admin_username=admin --admin_password=pass123 --language=en_US --currency=USD --timezone=America/Chicago

So far everything worked great. But when you load the frontend: http://magento2alpha.dev/ it's showing plain text only (i.e. css/images/js are missing).

View source gives you the path like http://magento2alpha.dev/pub/static/frontend/Magento/blank/en_US/[css/images]/[css/images file] which led to the 404 page
My nginx conf file looks like:

server {
    listen 80;
    server_name magento2alpha.dev;
    root /Users/Raj/Sites/magento/magento2alpha;

    location /setup {
        try_files $uri $uri/ @setuphandler;
    }

    # Rewrite Setup's Internal Requests
    location @setuphandler {
        rewrite /setup /magento/magento2alpha/setup/index.php;
    }

    location / {
        index index.php index.html;
        try_files $uri $uri/ @handler;
    }

     # Rewrite Internal Requests
     location @handler {
        rewrite / /magento/magento2alpha/index.php;
     }

     # Rewrite magento2 static files
     #location /pub/static {
     #   rewrite ^/pub/static/(.*)$ /magento/magento2alpha/pub/static.php?resource=$1? last;
     #}

     location /pub/static {
          try_files $uri $uri/ @static;
     }

     location @static {
           rewrite ^/pub/static/(.*)$ /magento/magento2alpha/pub/static.php?resource=$1? last;
     }

     #location ~ .php/ {
     #    rewrite ^(.*.php)/ $1 last;
     #}

    location ~ \.php$ { ## Execute PHP scripts
        try_files $uri =404;
        expires        off;
        fastcgi_pass   127.0.0.1:9000;
        fastcgi_read_timeout 900s;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include        fastcgi_params;

        ## Magento 2 Developer mode
        fastcgi_param MAGE_MODE "developer";
    }
}

I guess the issue lies in the static files rewrite. But this is what I followed from the github which is not working. Is there any workaround?

[kandy]

looks like unnecessary question mark at end of rewrite
rewrite ^/pub/static/(.*)$ /magento/magento2alpha/pub/static.php?resource=$1~~?~~ last;

[MagePsycho]

@kandy even removing that last ? and reloading the nginx didn't work.

[MagePsycho]

Further checking:
Log file: http://pastie.org/pastes/9779603/text

[kandy]

I use this config

index index.php;
root  /Users/Raj/Sites/magento/magento2alpha;

autoindex off;
# disable_symlinks on;
charset off;
#charset utf-8;
location /setup {
    try_files $uri $uri/ @setup;
}

location @setup {
    rewrite /setup /setup/index.php;
}

location / {
    rewrite / /index.php ;
}

location /pub/static {
    try_files $uri @static;
}

location @static {
    rewrite ^/pub/static/(version\d*/)?(.*)$ /pub/static.php?resource=$2 last;
}

location /pub/media {
    try_files $uri/ @mediahandler;
}
location @mediahandler {
    rewrite / /get.php;
}

location /pub/media/customer {
    deny all;
}
location /pub/media/downloadable {
    deny all;
}
location ~ /pub/media/theme_customization/.*\.xml$ {
    deny all;
}
location ~ /pub/errors/.*\.(xml|phtml)$ {
    deny all;
}

location ~ \.php$ {
    #fastcgi_pass   127.0.0.1:9000;
    fastcgi_pass   unix:/var/run/php5-fpm.sock;
    fastcgi_index  index.php;
    fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
    fastcgi_param  PHP_FLAG  "session.auto_start=off \n suhosin.session.cryptua=off";
    fastcgi_param  PHP_VALUE "memory_limit=256M \n max_execution_time=18000";
    fastcgi_param  MAGE_MODE "developer";
    include        fastcgi_params;
}

and static files works as expected

[kandy]

Also you may debug nginx rewrites by add error_log /tmp/nginx.log debug; to the static location

[MagePsycho]

@kandy thanks man. At least I can see the beautiful homepage though it takes so long to render.

• Page loading: http://cl.ly/image/1i2s3y2i0A2H
• Resource Usage: http://cl.ly/image/062i3d0v2C2y

My new nginx config looks like:

server {
    listen 80;
    server_name magento2alpha.dev;
    root /Users/Raj/Sites/magento/magento2alpha;

    location /setup {
        try_files $uri $uri/ @setuphandler;
    }

    # Rewrite Setup's Internal Requests
    location @setuphandler {
        rewrite /setup /setup/index.php;
    }

    location / {
        index index.php index.html;
        try_files $uri $uri/ @handler;
    }

     # Rewrite Internal Requests
     location @handler {
        rewrite / /index.php;
     }

     location /pub/static {
          try_files $uri $uri/ @static;
     }

     location @static {
           rewrite ^/pub/static/(.*)$ /pub/static.php?resource=$1? last;
     }

     location ~ \.php$ { ## Execute PHP scripts
        try_files $uri =404;
        expires        off;
        fastcgi_pass   127.0.0.1:9000;
        fastcgi_read_timeout 900s;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include        fastcgi_params;

        ## Magento 2 Developer mode
        fastcgi_param MAGE_MODE "developer";
        fastcgi_param  PHP_FLAG  "session.auto_start=off \n suhosin.session.cryptua=off";
        fastcgi_param  PHP_VALUE "memory_limit=256M \n max_execution_time=18000";
     }
}

One thing that I noticed is: If you create virtual host specific configuration in nginx's conf.d is more resource expensive & slower than keeping in sites-enabled dir
If I enable the cache everything goes much faster.

[Edit]

Sorry my bad, xdebug was causing the slowness not the nginx conf.

Is there any work around for magento2 optimisation in terms of php-fpm + nginx?

[MagePsycho]

My above nginx configuration doesn't let me run installation wizard.
It gives me the 403 forbidden page. If I add autoindex on; to it, it shows me the directory index.
Not sure why index.php is not being executed?
If i manually enter /setup/index.php it gives me the error:
Fatal error: Class 'Magento\Setup\Mvc\Bootstrap\InitParamListener' not found in setup/config/application.config.php on line 24

[kandy]

Try clean install and use https://github.com/magento/magento2/blob/master/nginx.conf.sample

[MagePsycho]

This configuration gives error:

nginx: [emerg] "location" directive is not allowed here

which refers to the line https://github.com/magento/magento2/blob/master/nginx.conf.sample#L28

Seems the they should be wrapped under server { directive?

[kandy]

yes

 upstream fastcgi_backend {
    # use tcp connection
    # server  127.0.0.1:9000;
    # or socket#
    server   unix:/var/run/php5-fpm.sock;
}
 server {
    listen 80;
    server_name mage.dev;
    set $MAGE_ROOT /var/www/magento2;
    set $MAGE_MODE develop;
    include /vagrant/magento2/nginx.conf.sample;
}

[MagePsycho]

Still the same error.

nginx: [emerg] "location" directive is not allowed here in /usr/local/etc/nginx/sites-enabled/magento2alpha.dev:18

Here is my configuration:

upstream fastcgi_backend {
    server  127.0.0.1:9000;
}
server {
    listen 80;
    server_name magento2alpha.dev;
    set $MAGE_ROOT /Users/Raj/Sites/magento/magento2alpha;
    set $MAGE_MODE develop;
}

root $MAGE_ROOT;

index index.php;
autoindex off;
# disable_symlinks on;
charset off;

location /setup/ {
    rewrite / /setup/index.php;

    location /setup/pub/ {}

    location /setup/index.php {
        fastcgi_pass   fastcgi_backend;

        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include        fastcgi_params;
    }
}

location / {
    root $MAGE_ROOT/pub;

    location / {
        rewrite / /index.php ;
    }


    location /static/ {
        if ($MAGE_MODE = "production") {
            expires max;
        }
        if (!-f $request_filename) {
            rewrite ^/static/(version\d*/)?(.*)$ /static.php?resource=$2 last;
        }
    }

    location /media/ {
        if (!-f $request_filename) {
            rewrite / /get.php;
        }
    }

    location /media/customer/ {
        deny all;
    }

    location /media/downloadable/ {
        deny all;
    }

    location ~ /media/theme_customization/.*\.xml$ {
        deny all;
    }

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

    location ~ ^/errors/.*\.(xml|phtml)$ {
        deny all;
    }

    location ~ cron\.php {
        deny all;
    }

    location ~ (index|get|static|report|404|503)\.php$ {
        fastcgi_pass   fastcgi_backend;

        fastcgi_param  PHP_FLAG  "session.auto_start=off \n suhosin.session.cryptua=off";
        fastcgi_param  PHP_VALUE "memory_limit=256M \n max_execution_time=600";
        fastcgi_read_timeout 600s;
        fastcgi_connect_timeout 600s;
        fastcgi_param  MAGE_MODE $MAGE_MODE;

        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include        fastcgi_params;
    }
}

[kandy]

yes, you should add it inside server block, but why did you not use include instruction?

[MagePsycho]

This one is working for me:

upstream fastcgi_backend {
    server  127.0.0.1:9000;
}
server {
    listen 80;
    server_name magento2alpha.dev;
    set $MAGE_ROOT /Users/Raj/Sites/magento/magento2alpha;
    set $MAGE_MODE default;

    root $MAGE_ROOT;

    index index.php;
    autoindex off;
    # disable_symlinks on;
    charset off;

    location /setup/ {
        rewrite / /setup/index.php;
        location /setup/pub/ {}
        location /setup/index.php {
            fastcgi_pass   fastcgi_backend;
            fastcgi_index  index.php;
            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
            include        fastcgi_params;
        }
    }

    location / {
        root $MAGE_ROOT/pub;

        location / {
            rewrite / /index.php ;
        }

        location /static/ {
            if ($MAGE_MODE = "production") {
                expires max;
            }
            if (!-f $request_filename) {
                rewrite ^/static/(version\d*/)?(.*)$ /static.php?resource=$2 last;
            }
        }

        location /media/ {
            if (!-f $request_filename) {
                rewrite / /get.php;
            }
        }

        location /media/customer/ {
            deny all;
        }

        location /media/downloadable/ {
            deny all;
        }

        location ~ /media/theme_customization/.*\.xml$ {
            deny all;
        }

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

        location ~ ^/errors/.*\.(xml|phtml)$ {
            deny all;
        }

        location ~ cron\.php {
            deny all;
        }

        location ~ (index|get|static|report|404|503)\.php$ {
            fastcgi_pass   fastcgi_backend;

            fastcgi_param  PHP_FLAG  "session.auto_start=off \n suhosin.session.cryptua=off";
            fastcgi_param  PHP_VALUE "memory_limit=256M \n max_execution_time=600";
            fastcgi_read_timeout 600s;
            fastcgi_connect_timeout 600s;
            fastcgi_param  MAGE_MODE $MAGE_MODE;

            fastcgi_index  index.php;
            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
            include        fastcgi_params;
        }
    }
}

But getting the same error

Fatal error: Class 'Magento\Setup\Mvc\Bootstrap\InitParamListener' not found in >setup/config/application.config.php on line 24

And Magento\Setup module also not there.
Let me try to do fresh installation and get back to you.

[MagePsycho]

Now I did the fresh installation and the installation worked perfectly with the above nginx configuration.
So I doubt the nginx sample given by magento2 is correct or not. Please verify.

[buskamuza]

@MagePsycho , could you, please, confirm that Nginx sample provided in Magento code (https://github.com/magento/magento2/blob/master/nginx.conf.sample) works fine for you and the task can be closed?
And still did you try to include it instead of copying (just to avoid missing updates in later Magento versions)?
Thanks

[kandy]

Looks like mod_rewrite is disabled.
But, this configuration issue is not nginx related, why do you post it here?

[ravi939]

Enable Mod_rewrite from httpd.conf to start in win 7 system. File is located at apache\apacheXXX\conf.

[maksek]

Hi @MagePsycho, can you update the issue, if you still have issues. Thanks

[MagePsycho]

Yeah it's working for me. See my comments above:
#802 (comment)

[maksek]

Thanks @MagePsycho, we are going to close the issue, is there is additional issues - feel free to reopen with additional info.

[sarath-c-sandwich]

I am using Ubuntu 14.04, after typed my virtualhost domain, magento.dev, then it show blank. Lolzz, there is no any error on Nginx log

[mazhalai]

@uchsarath This issue has been closed and marked as resolved. If it does not solve your issue, please open a new issue. Also, please include what mode magento 2 is running on?

[LiamKarlMitchell]

I was able to compare a working site with a non working site.

There was extra cruft in the url values in core_config_data.

UPDATE core_config_data SET value = NULL WHERE path IN ('web/unsecure/base_static_url','web/unsecure/base_media_url','web/secure/base_static_url','web/secure/base_media_url');

All of these needed to be NULL.

web/unsecure/base_link_url | {{unsecure_base_url}} 
web/unsecure/base_media_url | {{unsecure_base_url}}pub/media/ 
web/unsecure/base_static_url | {{unsecure_base_url}}pub/static/
web/secure/base_link_url | {{secure_base_url}} 
web/secure/base_media_url | {{secure_base_url}}pub/media/ 
web/secure/base_static_url | {{secure_base_url}}pub/static/ 

Resolved it for me.