Comments (29)
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
from vikunja.
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.
from vikunja.
@kingfungdesign Thanks, now integrated!
from vikunja.
@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.
from vikunja.
Submitted a PR. Hopefully, the revised and shortened wording is still clear.
from vikunja.
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
from vikunja.
Not sure about nginx proxy manager, but have you seen the nginx reverse proxy example in the docs?
from vikunja.
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;
}
from vikunja.
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.
from vikunja.
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
from vikunja.
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?
- 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?
from vikunja.
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
from vikunja.
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.
from vikunja.
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?
from vikunja.
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.
from vikunja.
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?
from vikunja.
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.
from vikunja.
Ok thanks. For the end user this is not ideal but it works.
from vikunja.
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
from vikunja.
@TheBig-O That looks great! Do you want to submit a PR to add this to the docs?
from vikunja.
@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.
from vikunja.
@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.
from vikunja.
@DrProphet0 would you be open to send a PR to the docs?
from vikunja.
Hi yes, I submitted a PR!
from vikunja.
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.
from vikunja.
@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
from vikunja.
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/
from vikunja.
@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)
from vikunja.
@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
from vikunja.
Related Issues (20)
- Opera Mobile OIDC Login not possible HOT 8
- Upcoming "Today" not showing expected tasks HOT 1
- Problems with single-container version: 502, Migration failed, no live upstreams HOT 1
- cannot scroll sidebar to switch to different list items HOT 2
- Line breaks not working in task description HOT 2
- Date picker current date incorrect if page was not refreshed in browser today HOT 3
- 403 Forbidden when adding Label in Share Link HOT 4
- Dark mode - Low contrast for table headers within tasks HOT 1
- Todoist migration: Buckets HOT 3
- Saved filters are not updated when tasks are updated HOT 4
- sticky openid login / Authentik OpenID misconfiguration HOT 4
- Switching back from :unstable tag to :latest tag breaks website HOT 3
- Kanban board width too small in share link HOT 1
- Error when paste text to task - error reading 'nodeSize' HOT 2
- Unable to go to cloud app in Brave Private tab. HOT 1
- Add cache-control headers to background images
- State in docs where to report bugs/issues
- patch to fix typos HOT 2
- Make import page have formatting consistent with other pages HOT 2
- Succesful login does not redirect/login HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vikunja.