0
593
ViewsNginx routing not working when refresh page or when I go directly to the page
I'm running Docker Containers with a Vue.js front and a Node.js+Express.js backend and managing the routes using Nginx.
When I access the route https://equilibrista.app/ and click the link inside the page to go to https://equilibrista.app/exams it works fine, but I got an error when I directly goes to this page (and a Express error shows up Cannot GET /exams).
Why is this happening? It looks like an Nginx redirect error, but I couldn't find anything wrong on nginx.conf
server {
listen 80;
listen [::]:80;
server_name equilibrista.app www.equilibrista.app;
location ~ /.well-known/acme-challenge {
allow all;
root /var/www/html;
}
location / {
rewrite ^ https://$host$request_uri? permanent;
}
}
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name equilibrista.app www.equilibrista.app;
server_tokens off;
ssl_certificate /etc/letsencrypt/live/equilibrista.app/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/equilibrista.app/privkey.pem;
ssl_buffer_size 8k;
ssl_dhparam /etc/ssl/certs/dhparam-2048.pem;
ssl_protocols TLSv1.2 TLSv1.1 TLSv1;
ssl_prefer_server_ciphers on;
ssl_ciphers ECDH+AESGCM:ECDH+AES256:ECDH+AES128:DH+3DES:!ADH:!AECDH:!MD5;
ssl_ecdh_curve secp384r1;
ssl_session_tickets off;
ssl_stapling on;
ssl_stapling_verify on;
resolver 8.8.8.8;
location /api/ {
proxy_pass http://api:3000/;
proxy_redirect off;
}
location / {
proxy_pass http://front:8888;
}
}
1 answers
Answer question0
The way we got it to work with a Vue app was following.
1) First you have a location that capture all the physical files and paths that exists.
2) Secondly you redirect any other request to the main application file, for Vue it is index.html.
So your location configuration should look like this:
location /api/ {
proxy_pass http://api:3000/;
}
location ~* \/(index\.html|favicon\.ico|styles\.css|styles\.min\.css|css\/.*|js\/.*|images\/.*) {
proxy_pass http://front:8888;
}
location / {
rewrite / /index.html;
proxy_pass http://front:8888;
}
(updated to match question)
we have the static files on the nginx server, but it should work the same way with proxy_pass.