0

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 '/'.

2
  • 1
    It's a common error with SPAs and web servers. Since the routing should be handled client-side nginx should redirect all requests to the same file, index.html. I'm not an nginx expert so I'm not sure what the config would be to redirect all requests instead to your http-server, but that is the general strategy you'd need to employ. If you can switch from http-server to serving static production files, I would do that, then review this question and answer. Otherwise, hopefully someone else can provide a more thorough answer for your scenario. Commented Jan 8, 2024 at 16:14
  • I found a solution just to use common volume and serve static from that. Should be working, but got another problem :D stackoverflow.com/questions/77782891/… Commented Jan 8, 2024 at 19:58

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.