Nginx Unicorn AngularJS html5 URLs configuration

Question

I want to add pretty URLS in Angular UI-router. I have Nginx + Unicorn over a Rails app with Angular JS as the front-end.

I want to have pretty URLS like mysite/a/b/c, no '#' and no hashbang. When I change the location of nginx to:

server {
    server_name yoursite.com;
    root /path/to/app;

    location / {
        try_files $uri $uri/ @unicorn;
    }
}

Unicorn will throw this error:

directory index of "/path/to/app" is forbidden

Any idea on how to setup nginx to redirect? Giving chmod to my app path isn't a good solution I believe..

Edit: The issue is that with try_files $uri/index @unicorn, it works e.g. url.com/a/b. But when I refresh, it automatically redirects me to root url.com. UI-router suggests try_files $uri $uri/ /index.html, but when I do this I get an access denied by nginx. The folder /path/to/app belongs to user 'deploy', so it's not a chmod issue..

Your application must have rights to access files at /path/to/app as set in the root directive. At least in my case, I run my Rails/Unicorn application from the same user that is the owner of those files. — steve klein
Sorry Alex I don't think I understand - can you explain a little more? I don't think you need to change any privileges, just run unicorn under the appropriate user and from the application folder. There are probably other ways to do it but that is my approach. — steve klein
I run it using Chef and AWS opsworks. The source/root folder is on /srv/app/.../public. Then chef takes those files and deploys with the user 'deploy' to /srv/app/.../shared. Now, if the rule is try_files $uri/index $uri/index.htm @unicorn; my app works fine, so this is the weird part (without the html5 /a/b/ links of course, but with /#/a/b). I don't have any index.html on my root folder and I don't understand why it works!! Is your solution/suggestion to chown the files under /srv/app/...public by the user 'deploy'? — Alex Arvanitidis
I use mina to manage my deploys but I think it is similar to Chef. When I deploy, mina pulls my files from git and builds them in /home/myapp/app/current/public and makes user myapp owner. This is my public Rails directory - it has assets plus some static error page files like 404.html - and is where my NGINX root directive points. To start/restart the application, I run /etc/init.d/unicorn.myapp which, among other things, performs su - myapp to run Unicorn under myapp. The Rails router handles routing of requests from this public directory to app/controllers etc. — steve klein

Alex Arvanitidis Alex Arvanitidis · Accepted Answer · 2015-06-20T13:52:43

Finally solved it! It was my mistake, because running my app with angular I forgot in the rails routes.rb file this line:

get '*path' => '/'

Changed it to

get '*path' => 'layouts#index'

where layouts#index is my layout for Angular, and now after refreshing the url.com/a/b the url stays url.com/a/b and renders the appropriate route.

At nginx my config remained:

location /{
    try_files $uri @unicorn;
}

Nginx Unicorn AngularJS html5 URLs configuration

1 Answers