try_files in nginx.conf not working

Question

I'm working with an angular 2 app, nginx and docker. Everytime I'm reloading a page with /site it gives me a 404. My server block looks like this right now:

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

root /var/www/project/html;

index index.html;

server_name project.com;

location / {
    try_files $uri $uri/ /index.html;
}}

I have tried a lot, and have seen ALL other stackoverflow questions and have tried every possibility. But nothing works. Can someone please help?

UPDATE: The whole nginx.conf:

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*;
}

the sites-enabled/default:

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

root /var/www/project/html;

index index.html;

server_name project.com;

location / {
    try_files $uri $uri/ /index.html;
}}

And the Dockerfile:

FROM nginx

COPY ./docker/sites-enabled /etc/nginx/sites-enabled
COPY ./docker/nginx.conf /etc/nginx/nginx.conf
COPY ./dist /var/www/project/html
COPY ./dist /usr/share/nginx/html
EXPOSE 80

Answer 1

In your nginx.conf, you are loading additional configs from two locations:

include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;

The second one loads your sites.enabled/default config with the server name project.com .

The first one, though, loads the default config default.conf which is part of the nginx docker image per default. That config looks similar to

server {
    listen       80;
    server_name  localhost;

    ....

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    ....
}

So if you try to access your site with localhost , your sites-enabled/default is never used (since you specified the server_name project.com and that doesn't match with localhost ). Instead the request runs in the default.conf since there the server_name is localhost .

And in the default.conf the location part is:

location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
}

That means, if you just go to localhost , the index.html is served and everything works as expected. But as soon as you try accessing localhost/something , Nginx is trying to find the file/directory /usr/share/nginx/html/something which doesn't exist (-> 404).

So you have to options:

1. Remove include /etc/nginx/conf.d/*.conf; from your nginx.conf (or delete the default.conf ) and change the server_name in your sites-enabled/default to localhost . Then your request will run into your config.

2. Add the try_files $uri $uri/ /index.html; to the location in the default.conf like you have it in your sites-enabled/default .

I would recommend the first solution, do not include the default.conf and change your server_name to localhost in your sites-enabled/config . If you later need your real domain, you can still use regex to match for either localhost or your domain.