I have a Vue application and nginx running as a services in docker compose
services:
nginx:
image: nginx:latest
restart: unless-stopped
volumes:
- ./data/nginx:/etc/nginx/conf.d
- ./data/certbot/conf:/etc/letsencrypt
- ./data/certbot/www:/var/www/certbot
ports:
- "80:80"
- "443:443"
depends_on:
- client
command: "/bin/sh -c 'while :; do sleep 6h & wait $${!}; nginx -s reload; done & nginx -g \"daemon off;\"'"
client:
build:
dockerfile: ./apps/client/Dockerfile
context: ../../
restart: always
ports:
- "8080:8080"
My nginx config:
server {
listen 80;
server_name mydomain.com;
server_tokens off;
location /.well-known/acme-challenge/ {
root /var/www/certbot;
}
location / {
return 301 https://$host$request_uri;
}
}
server {
listen 443 ssl;
server_name mydomain.com;
server_tokens off;
ssl_certificate /etc/letsencrypt/live/mydomain.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/mydomain.com/privkey.pem;
include /etc/letsencrypt/options-ssl-nginx.conf;
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
location / {
proxy_pass http://client:8080;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
So, I am not serving static files via nginx how I would do it in bare metal, I run my vue build using http-server and then proxying nginx to look at it. Not sure if this is a viable solution, but seems to be working.
Except for one thing, but I am sure this is on nginx configuration side.
When I try to open any page other than '/', I will get 404 error, despite the app is working fine and I can reach desired url if only I start from the '/'.