Installation with docker-compose using custom ports (other than 80) for proxy service

I am building my vikunya container step by step in my server, which already has other docker containers running and default ports like 80, are being used by other process. I am having some difficulty following the documentation when it comes to using custom ports for the proxy service. What should be the ports to configure on the yml and on the nginx.conf?

This is what I did:
First, I only the api service using the yml below, and it works great (it can be accessed from a desktop app)

services:
  db:
    image: mariadb:10
    command: --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    environment:
      MYSQL_ROOT_PASSWORD: supersecret
      MYSQL_USER: vikunja
      MYSQL_PASSWORD: secret
      MYSQL_DATABASE: vikunja
    volumes:
      - ./db:/var/lib/mysql
    restart: unless-stopped
####
  api:
    image: vikunja/api
    environment:
      VIKUNJA_DATABASE_HOST: db
      VIKUNJA_DATABASE_PASSWORD: secret
      VIKUNJA_DATABASE_TYPE: mysql
      VIKUNJA_DATABASE_USER: vikunja
      VIKUNJA_DATABASE_DATABASE: vikunja
      VIKUNJA_SERVICE_JWTSECRET: supersecret
      VIKUNJA_SERVICE_FRONTENDURL: http://192.168.40.200/ # this is the add of my localhost 
    ports:
      - 3456:3456
    volumes:
      - ./files:/app/vikunja/files
    depends_on:
      - db
    restart: unless-stopped

Second, I configured the frontend with a custom port in the host (8081). it is accessible from http://192.168.40.200:8081 in the sense that the welcome page loads, but I get an error “AxiosError: Network Error” which must be because the proxy server is not yet configured?

  frontend:
    image: vikunja/frontend
    ports:
      - 8081:80
    environment:
      VIKUNJA_API_URL: http:/192.168.40.200:3456/api/v1
    restart: unless-stopped

So given this, what should be the ports for the proxy service in this container? and what would be the ports in the nginx.conf file?

So far I have in the yml:

  proxy:
    image: nginx
    ports:
      - 75:80 #<== custom port on host, keeping 80 on container
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro
    depends_on:
      - api
      - frontend
    restart: unless-stopped

and in the nginx.conf:

server {
    listen 75;  # <== custom port on host
    server_name  localhost;

    location / {
        proxy_pass http://frontend:75; #<== what port to use here, the host or the container?
    }

    location ~* ^/(api|dav|\.well-known)/ {
        proxy_pass http://api:3456;
        client_max_body_size 20M;
    }
}

You have a typo here. A slash is missing after the http:/.

How is the frontend accessible at port 8027 if you’re only exposing it on port 8081?

The proxy server is not required.

If you want the proxy server to be accessible on the outside on port 75, the config in the compose file changing the port. You shouldn’t change the listen port in the nginx config.

In the proxy_pass for the frontend the port should be 80 as that’s what the nginx in the container is listening on (assuming you’re running it all in the same docker network)

Thanks so much for your help! My installation of Vikunja is almost there!

wow, idk how I missed this slash. I fixed it and now I have access the Vikunja using a custom frontend port (with or without the proxy server). However it still gives me an error 405 when logging in in chrome, but the error disappears in chrome incognito and in firefox… maybe it is the cache…?

That was a type in my post, which is fixed now. The frontend is accessible on port 8081.

This is super helpful. I got confused with all the port redirections. I kept the Ngnix conf file to port 80 (as in the documentation), and I just changed the compose to have a custom port for the proxy server like this: .

  proxy:
    ports:
      - 75:80 # <== <custom port>:80

I am still unsure what is the role of the proxy server if the frontend is sufficient to have a working installation. I seems to me that I am using a single port in the browser whether I have the frontend or the frontend + proxy.

Maybe. If it works in an incognito tab it looks like it’s configured correctly. You can try to clear local storage via the dev tools.

A reason to use a proxy is to get the frontend and api on the same domain without any hacky configuration (as it is hosted for example on try).