I'm developing a VueJS single page application, and for local development I'm using Docker with a docker-compose.yml file to handle an Nginx container for the webserver and a Node container for the asset compilation.
At the moment there is a single page on the /configurator route where the root / route should redirect, and with the Vue router it works just fine: visiting / correctly redirects to /configurator.
The problem arise when refreshing the page, due Nginx not being able to handle the request since there is no appropriate file at the given uri to serve.
VueJS docs states to set Nginx configuration location section as follows in order to redirect every request to the project index and therefore let Vue router to handle the navigation
location / {
try_files $uri $uri/ /index.html;
}
so I made a custom nginx.conf file and added/renamed to the Nginx container through my docker-compose.yml file as below, but I still get a 404 by Nginx.
Checking from inside the Nginx container with nginx -T correctly list my custom file, but I noticed that default.conf file was the last in the list, so I tought that Nginx add additional files alphabetically, and being mine not the last one my custom config where overwritten by default.conf's one, so I edited my docker-compose.yml to add it named as z_custom.conf just to be shure to have it as the last one, but nothing changed.
Searching online I noticed that every example I found had the custom file content identical as the default one, except for the needed customization, so I tought that I really need to entirely overwrite default.conf file and edit the section I need, but couldn't find any explicit indication about that.
Is that correct or there is a way to actually merge just my custom section on the entire default configuration?
custom.conf
server {
#Vue router configuration
location / {
try_files $uri $uri/ /index.html;
}
}
docker-compose.yml
webserver:
image: nginx:latest
container_name: webserver
restart: unless-stopped
ports:
- 80:80
volumes:
- ./application/public:/usr/share/nginx/html:ro
- ./nginx.conf:/etc/nginx/conf.d/custom.conf:ro
Update #1: adding server_name to custom configuration file
Following @tero-kilkanen answer I just tried adding server_name localhost inside server root section of my conf file and updated docker-compose.yml to copy it inside Nginx image as localhost.conf but nothing changed, stil getting a 404 on non-index routes.
Update #2
Didn't noticed before, previous update creates a conflict between default configuration and custom configuration as both files declared the same server name, so now I'm just replacing default.conf with my custom file, and updated location section as follows, but still getting 404 on non-root routes.
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
Running nginx -T and nginx -t confirm that my custom config file is being read and used correctly:
root@be898ad4ca17:/# nginx -T
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
# configuration file /etc/nginx/nginx.conf:
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log notice;
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;
}
# configuration file /etc/nginx/mime.types:
types {
text/html html htm shtml;
text/css css;
text/xml xml;
image/gif gif;
image/jpeg jpeg jpg;
application/javascript js;
application/atom+xml atom;
application/rss+xml rss;
text/mathml mml;
text/plain txt;
text/vnd.sun.j2me.app-descriptor jad;
text/vnd.wap.wml wml;
text/x-component htc;
image/avif avif;
image/png png;
image/svg+xml svg svgz;
image/tiff tif tiff;
image/vnd.wap.wbmp wbmp;
image/webp webp;
image/x-icon ico;
image/x-jng jng;
image/x-ms-bmp bmp;
font/woff woff;
font/woff2 woff2;
application/java-archive jar war ear;
application/json json;
application/mac-binhex40 hqx;
application/msword doc;
application/pdf pdf;
application/postscript ps eps ai;
application/rtf rtf;
application/vnd.apple.mpegurl m3u8;
application/vnd.google-earth.kml+xml kml;
application/vnd.google-earth.kmz kmz;
application/vnd.ms-excel xls;
application/vnd.ms-fontobject eot;
application/vnd.ms-powerpoint ppt;
application/vnd.oasis.opendocument.graphics odg;
application/vnd.oasis.opendocument.presentation odp;
application/vnd.oasis.opendocument.spreadsheet ods;
application/vnd.oasis.opendocument.text odt;
application/vnd.openxmlformats-officedocument.presentationml.presentation
pptx;
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
xlsx;
application/vnd.openxmlformats-officedocument.wordprocessingml.document
docx;
application/vnd.wap.wmlc wmlc;
application/wasm wasm;
application/x-7z-compressed 7z;
application/x-cocoa cco;
application/x-java-archive-diff jardiff;
application/x-java-jnlp-file jnlp;
application/x-makeself run;
application/x-perl pl pm;
application/x-pilot prc pdb;
application/x-rar-compressed rar;
application/x-redhat-package-manager rpm;
application/x-sea sea;
application/x-shockwave-flash swf;
application/x-stuffit sit;
application/x-tcl tcl tk;
application/x-x509-ca-cert der pem crt;
application/x-xpinstall xpi;
application/xhtml+xml xhtml;
application/xspf+xml xspf;
application/zip zip;
application/octet-stream bin exe dll;
application/octet-stream deb;
application/octet-stream dmg;
application/octet-stream iso img;
application/octet-stream msi msp msm;
audio/midi mid midi kar;
audio/mpeg mp3;
audio/ogg ogg;
audio/x-m4a m4a;
audio/x-realaudio ra;
video/3gpp 3gpp 3gp;
video/mp2t ts;
video/mp4 mp4;
video/mpeg mpeg mpg;
video/quicktime mov;
video/webm webm;
video/x-flv flv;
video/x-m4v m4v;
video/x-mng mng;
video/x-ms-asf asx asf;
video/x-ms-wmv wmv;
video/x-msvideo avi;
}
# configuration file /etc/nginx/conf.d/default.conf:
server {
listen 80;
listen [::]:80;
server_name localhost;
#access_log /var/log/nginx/host.access.log main;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
nginx -Tto the question.