nginx proxy manager configuration

[TWART016]

Hi,

I have running a nginx proxy manager instance in docker.
Now I want to configure vikunja with nginx proxy manager.

The vikunja instance in available from the WAN. Just the login failed: Network Error

// 20211005000721
// http://192.168.178.15:3456/api/v1/login

{
  "message": "missing or malformed jwt"
}

In npm I set the domain name with
Scheme http
Forward Hostname / IP: 192.168.178.15
Forward Port: 10002
SSL Certificate
No Advanced configuration

docker-compose von vikunja:

version: '3'

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
    ports:
      - 3456:3456
    volumes:
      - ./files:/app/vikunja/files
    depends_on:
      - db
    restart: unless-stopped
  frontend:
    image: vikunja/frontend:unstable
    ports:
      - 10002:80
    environment:
      VIKUNJA_API_URL: http://192.168.178.15:3456/api/v1/
    restart: unless-stopped

Does anyone have a proxy configuration for npm?

[kolaente]

Not sure about nginx proxy manager, but have you seen the nginx reverse proxy example in the docs?

[TWART016]

Not sure about nginx proxy manager, but have you seen the nginx reverse proxy example in the docs?

I know this example. But in nginx proxy manager it looks a bit different.

In this issue there is a similar problem.
#2 (comment)

This is the config for the host

server {
  set $forward_scheme http;
  set $server         "192.168.178.15";
  set $port           10002;

  listen 80;
listen [::]:80;

listen 443 ssl http2;
listen [::]:443;

  server_name todo.mydomain;

  # Let's Encrypt SSL
  include conf.d/include/letsencrypt-acme-challenge.conf;
  include conf.d/include/ssl-ciphers.conf;
  ssl_certificate /etc/letsencrypt/live/npm-10/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/npm-10/privkey.pem;

  access_log /data/logs/proxy_host-5.log proxy;

  location / {
    # Proxy!
    include conf.d/include/proxy.conf;
  }

  # Custom
  include /data/nginx/custom/server_proxy[.]conf;
}

[kolaente]

So the file at conf.d/include/proxy.conf contains the proxy config adapted from the docs? Where do you proxy the api requests? If all is set up correctly, you should be able to reach /api/v1/info through the proxy - on the same domain/ip +port as the frontend.

Or you could just continue to expose the api ports and use the api directly, but that kind of defeats the purpose of a proxy.

I'm not sure if I can help you here, while I know my way around nginx I don't know how the nginx proxy manager is different. You might want to ask in the forum, someone else might be able to help you there.

[TWART016]

I created a topic in the forum
https://community.vikunja.io/t/nginx-proxy-manager-configuration/385

This is the configuration of npm. It is automatic stored in the volume /data/nginx/proxy_host.

As you can see in the docker-compose #206 the api is available with port 3456.

[TWART016]

Hi @kolaente

which of these strings are variables? Do I need to replace frontend to the IP and api to IP:Port?

server {
    listen 80;

    location / {
        proxy_pass http://frontend:80;
    }

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

EDIT: listen to 80 or the port (10002) defined in the docker-compose?

  frontend:
    ports:
      - 10002:80

EDIT2: On the login page of the public domain I see this line. Is this correct?
Sign in to your Vikunja account on 192.168.178.15:3456

NPM is running on a different stack than vikunja

[kolaente]

which of these strings are variables? Do I need to replace frontend to the IP and api to IP:Port?

If you did not change the names of the containers or VIKUNJA_SERVICE_INTERFACE you don't need to change anything.

listen to 80 or the port (10002) defined in the docker-compose?

80. That's the internal port of the frontend container.

On the login page of the public domain I see this line. Is this correct?

Does it work?

[TWART016]

VIKUNJA_SERVICE_INTERFACE
I did not set VIKUNJA_SERVICE_INTERFACE or changed the container names.

Is it a problem that vikunja and NPM is not in the same docker network? I always define the IP:Port and not the internal names of the containers.

The login still fails.

// 20211027001333
// http://192.168.178.15:3456/api/v1/login

{
  "message": "missing or malformed jwt"
}

Console:
user-settings.89ce70d7.js:10 Mixed Content: The page at 'https://MYDOMAIN/login' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://192.168.178.15:3456/api/v1/login'. This request has been blocked; the content must be served over HTTPS.

EDIT: issue on NPM
NginxProxyManager/nginx-proxy-manager#1522

[kolaente]

Is it a problem that vikunja and NPM is not in the same docker network? I always define the IP:Port and not the internal names of the containers.

If the nginx config you showed is the one of the proxy container like in the examples it should be fine.

The login still fails.

The console message you posted tells you everything you need to know: The API URL you configured at the frontend container should be https.

On the other hand, since you are now using a proxy you should be fine to remove it all together as long as you're accessing everything only through that proxy.

[TWART016]

If the nginx config you showed is the one of the proxy container like in the examples it should be fine.

This is my nginx config now

# ------------------------------------------------------------
# MYDOMAIN
# ------------------------------------------------------------

server {
  set $forward_scheme http;
  set $server         "192.168.178.15";
  set $port           10002;

  listen 80;
listen [::]:80;

listen 443 ssl http2;
listen [::]:443;

  server_name MYDOMAIN;

  # Let's Encrypt SSL
  include conf.d/include/letsencrypt-acme-challenge.conf;
  include conf.d/include/ssl-ciphers.conf;
  ssl_certificate /etc/letsencrypt/live/npm-10/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/npm-10/privkey.pem;

  access_log /data/logs/proxy_host-5.log proxy;

  location ~* ^/(api|dav|\.well-known)/ {
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-Scheme $scheme;
    proxy_set_header X-Forwarded-Proto  $scheme;
    proxy_set_header X-Forwarded-For    $remote_addr;
    proxy_pass       http://192.168.178.15:3456;
    client_max_body_size 20M;
  }

  location / {

    # Proxy!
    include conf.d/include/proxy.conf;
  }

  # Custom
  include /data/nginx/custom/server_proxy[.]conf;
}

The console message you posted tells you everything you need to know: The API URL you configured at the frontend container should be https.

I set the parameter in the compose
VIKUNJA_API_URL: http://192.168.178.15:3456/api/v1/

If I change that to https I get the error:

user-settings.89ce70d7.js:10 Mixed Content: The page at 'https://MYDOMAIN/login' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://192.168.178.15:3456/api/v1/info'. This request has been blocked; the content must be served over HTTPS.
(anonymous)	@	user-settings.89ce70d7.js:10
El	@	user-settings.89ce70d7.js:10
bv	@	user-settings.89ce70d7.js:10
Sr.request	@	user-settings.89ce70d7.js:10
Sr.<computed>	@	user-settings.89ce70d7.js:10
(anonymous)	@	user-settings.89ce70d7.js:9
update	@	index.e4884bbb.js:16
(anonymous)	@	user-settings.89ce70d7.js:9
fe.dispatch	@	user-settings.89ce70d7.js:9
dispatch	@	user-settings.89ce70d7.js:9
beforeCreate	@	index.e4884bbb.js:8
jt	@	user-settings.89ce70d7.js:5
ke	@	user-settings.89ce70d7.js:5
Rf.e._init	@	user-settings.89ce70d7.js:5
l	@	user-settings.89ce70d7.js:5
Xh	@	user-settings.89ce70d7.js:5
init	@	user-settings.89ce70d7.js:5
c	@	user-settings.89ce70d7.js:5
u	@	user-settings.89ce70d7.js:5
(anonymous)	@	user-settings.89ce70d7.js:5
e._update	@	user-settings.89ce70d7.js:5
n	@	user-settings.89ce70d7.js:5
Ee.get	@	user-settings.89ce70d7.js:5
Ee	@	user-settings.89ce70d7.js:5
ff	@	user-settings.89ce70d7.js:5
F.$mount	@	user-settings.89ce70d7.js:5
(anonymous)	@	index.e4884bbb.js:504

user-settings.89ce70d7.js:9 Uncaught (in promise) Error: Network Error
    at xl (user-settings.89ce70d7.js:9)
    at XMLHttpRequest.o.onerror (user-settings.89ce70d7.js:10)
xl	@	user-settings.89ce70d7.js:9
o.onerror	@	user-settings.89ce70d7.js:10
Promise.then (async)		
beforeCreate	@	index.e4884bbb.js:8
jt	@	user-settings.89ce70d7.js:5
ke	@	user-settings.89ce70d7.js:5
Rf.e._init	@	user-settings.89ce70d7.js:5
l	@	user-settings.89ce70d7.js:5
Xh	@	user-settings.89ce70d7.js:5
init	@	user-settings.89ce70d7.js:5
c	@	user-settings.89ce70d7.js:5
u	@	user-settings.89ce70d7.js:5
(anonymous)	@	user-settings.89ce70d7.js:5
e._update	@	user-settings.89ce70d7.js:5
n	@	user-settings.89ce70d7.js:5
Ee.get	@	user-settings.89ce70d7.js:5
Ee	@	user-settings.89ce70d7.js:5
ff	@	user-settings.89ce70d7.js:5
F.$mount	@	user-settings.89ce70d7.js:5
(anonymous)	@	index.e4884bbb.js:504

On the other hand, since you are now using a proxy you should be fine to remove it all together as long as you're accessing everything only through that proxy.

Remove the VIKUNJA_API_URL in the docker-compose?

[kolaente]

If I change that to https I get the error:

Did you try in a private tab after restarting the container?

The error seems to indicate it is still using the http URL.

Remove the VIKUNJA_API_URL in the docker-compose?

Yeah exactly.

[TWART016]

I removed the line from the docker-compose. Now I can login and there is no error with the public domain.

If I open the interal IP:Port I cannot login because the sign in account is Sign in to your Vikunja account on 192.168.178.15:10002 and not Sign in to your Vikunja account on 192.168.178.15:3456.

it is not possible to use a local login in parallel?

[kolaente]

it is not possible to use a local login in parallel?

It should be possible but you will probably need to manually change the ip address in Vikunja's frontend.

[TWART016]

Ok thanks. For the end user this is not ideal but it works.

[TheBig-O]

So, I had the same issue and sorted out a viable solution for using NGINX Proxy Manager with a Docker install of Vikunja. I've tried to detail the method here: https://github.com/TheBig-O/Vikunja-NGINX-Proxy-Manager

[kolaente]

@TheBig-O That looks great! Do you want to submit a PR to add this to the docs?

[TheBig-O]

@kolaente, I want to try one more thing tonight to see if I can streamline this option a bit. If it works, I'll submit that. If not, I'll go with the posted recommendation. Glad this helped.

[TheBig-O]

Submitted a PR. Hopefully, the revised and shortened wording is still clear.

[DrProphet0]

Hi,

so I tried following the new guide https://github.com/TheBig-O/Vikunja-NGINX-Proxy-Manager but I kept failing, after much trial and error I figured a way to do it from the UI.

First to get it up and running I used docker compose
I like to put everything in a custom docker network so I don't have ports exposed, if you don't mind you will have to uncomment them

version: '3'

services:
  db:
    image: postgres:13
    environment:
      POSTGRES_PASSWORD: secret
      POSTGRES_USER: vikunja
    volumes:
      - /path/to/vikunja/db:/var/lib/postgresql/data
    restart: unless-stopped
  api:
    image: vikunja/api
    environment:
      VIKUNJA_DATABASE_HOST: db
      VIKUNJA_DATABASE_PASSWORD: secret
      VIKUNJA_DATABASE_TYPE: postgres
      VIKUNJA_DATABASE_USER: vikunja
      VIKUNJA_DATABASE_DATABASE: vikunja
    #ports:
    #  - 3456:3456
    volumes: 
      - /path/to/vikunja/files:/app/vikunja/files
    depends_on:
      - db
    restart: unless-stopped
  frontend:
    image: vikunja/frontend
    #ports:
    #  - 80:80
    restart: unless-stopped

went on to create a docker-compose.yml file and running docker-compose up -d

After it has spun up the containers it assigns them automatically a network in my case vikunja_default
For this setup to work you must assign the containers on the same network your NPM is
If you have ports exposed in the yaml you don't have to.

For example I have my npm running on npm_default
To assign my containers I execute

docker network connect vikunja_api_1 npm_default
docker network connect vikunja_frontend_1 npm_default

You don't have to assign the DB container

Running a command to check that everything is on the same network

docker ps -q | xargs -n 1 docker inspect --format '{{ .Name }} {{range .NetworkSettings.Networks}} {{.IPAddress}}{{end}}' | sed 's#^/##';

So in this case
vikunja_api_1 has 192.168.0.23
vikunja_frontend_1 has 192.168.0.22
nginx proxy manager 192.168.0.2

Just make sure to note that these IP addresses will be different on your system just try to find them following the above command

Now for the fun part
Let's go to npm

Click to Add a Proxy Host

Then fill in the form

• Your domain name or subdomain of choice
• The vikunja frontend IP address as found before
• At port 80

Then we move to the next tab Custom Locations and we will add a new location

We will fill the form

• The same location as in the nginx configuration ~* ^/(api|dav|\.well-known)/
• The vikunja api address in the Forward IP
• At port 3456

We will click the cog

and add last line
client_max_body_size 20M;
exactly as in the original nginx setup

We can finally request a new SSL Certificate and Save our configuration!

That's it we did it!
Time to have fun!

Hope this helps someone <3

[kolaente]

@DrProphet0 Nice guide! One thing I'd like to add is you may want to use the docker container host names instead of the IP - within the same docker network you can access containers using their host names. IPs can change, host names usually don't. You can figure out what host name the container have with docker inspect <container name> (usually the host name is the same as the container name).

@TWART016 Given there's now multiple guides here in this issue and in the docs, I'm going to close this issue now. Feel free to ping if you have any other issues.

[TheBig-O]

@kolaente, I had a NGINX Proxy Manager meltdown for the proxy host I used in my PR. When I recreated, I used @DrProphet0 guide and it worked perfectly. As his is much easier, I would list his in your official documentation.
@DrProphet0 Thanks for the tip. I knew there had to be a way to do this from custom locations, but couldn't sort it out.

[kolaente]

@DrProphet0 would you be open to send a PR to the docs?

[DrProphet0]

Hi yes, I submitted a PR!

[deanord]

Thank you for this, however, it doesn't work if nginx proxy manager and vikunja are on separate networks. It's more common to have your proxy on one server and your services on other. I've tried everything above and still get the "Network Error" at login.

[Shahin-rmz]

@DrProphet0 thanks for your complete explanation.
I have followed the guide step by step, but at the end got 502 Error.
any clue how can I resolve the issue?

---

PS. without Nginx Proxy manager front end works fine.
API has problem, which is ok because they can't connect.

---

Thanks

[Jemberg]

For anyone still having issues with this after following the solution by DrProphet0, there is a simple solution using docker networks and editing the proxy setup in NPM which is described in the Reddit article linked below:

https://www.reddit.com/r/selfhosted/comments/xovuh6/setting_up_nginx_proxy_manager_with_vikunja/

[kingfungdesign]

I find the steps from @TheBig-O's and @DrProphet0's guide still quite confusing and wasn't able to get them to work with reverse proxy and HTTPS. (couldn't get pass Network Error on HTTPS) @Jemberg's link also didn't quite make sense to me who has little experience with docker network. With more digging and more trial and error, I actually found even easier and more straight forward steps to properly setup Vikunja with Nginx Proxy Manager and HTTPS.

I am using a blank Ubuntu server, and of course having docker, docker-compose and NPM already setup. Following https://vikunja.io/docs/docker-walkthrough/, you should be able to get Vikunja to work via HTTP connection to your server ip.

From there, all you have to do is adjust the following things:

In docker-compose.yml

api

change VIKUNJA_SERVICE_FRONTENDURL to your desired domain

VIKUNJA_SERVICE_FRONTENDURL: https://vikunja.your-domain.com/ # change vikunja.your-domain.com to your desired domain/subdomain

expose port 3456 on host

    ports:
      - 3456:3456

frontend

add VIKUNJA_API_URL to environment

    environment:
      VIKUNJA_API_URL: https://api.your-domain.com/api/v1/ # change api.your-domain.com to your desired domain/subdomain, it should be different from your frontend domain

proxy

change ports

    ports:
       - 1078:80 # change the number infront (host port) to whatever you desire, but make sure it's not 80 which will be used by Nginx Proxy Manager

In your DNS provider

Add two A record that points to your server ip. I personally use Cloudflare. You are of course free to change them to whatever domain/subdomain you desire but they should be different.

vikunja for accessing the frontend

api for accessing the api

(setting is different for different DNS provider, the end result should be vikunja.your-domain.com and api.your-domain.com respectively)

In Nginx Proxy Manager

Add two Proxy Host, and you don't have to add anything extra from @DrProphet0's comment

You can of course set SSL however you want. Your HTTPS frontend should be able to reach the api after these adjustments.

My docker-compose.yml if anyone is interested:
https://getupnote.com/share/notes/1wu7ZeFfPhQcdhDFi6UL7l32Vyt2/7d2039d1-d246-4966-8dff-867d7dfa4724

Inspiration from:
https://www.youtube.com/watch?v=DqyqDWpEvKI
https://community.vikunja.io/t/synology-vikunja-working-locally-but-not-via-proxy/536

[kolaente]

@kingfungdesign great tutorial, do you want to send a PR to add it to the docs? (include at https://kolaente.dev/vikunja/api/src/branch/main/docs/content/doc/setup/reverse-proxies.md#nginx-proxy-manager-npm)

[kingfungdesign]

@kingfungdesign great tutorial, do you want to send a PR to add it to the docs? (include at https://kolaente.dev/vikunja/api/src/branch/main/docs/content/doc/setup/reverse-proxies.md#nginx-proxy-manager-npm)

Couldn't get the account to work. Here's the file.
https://send.kingz.dev/s/M0MTM5NAG948FEW

[kolaente]

@kingfungdesign Thanks, now integrated!