n8n one-click-app doesn't work out of the box

[sneak]

n8n has special needs from its reverse proxy for the communication between the webapp and the server. The following nginx config makes it work right.

            proxy_pass $upstream;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;

            proxy_set_header Connection '';
            proxy_http_version 1.1;
            chunked_transfer_encoding off;
            proxy_buffering off;
            proxy_cache off;

[githubsaturn]

Thanks for the note! The issue was also discussed here: https://github.com/n8n-io/n8n/issues/593

One click apps don't have customized nginx config at this point, but we can link this issue so that users know that they'll have to do this post installation process.

[githubsaturn]

I assume when you set these nginx configs, you can also enable HTTPS and things will work fine, right?

[sneak]

Yes, this works with TLS.

[mikeriss]

@sneak I am new to caprover and have two questions

1. Where should I load the above nginx config?
2. Once the config have been loaded, can I activate "Enable HTTPS" on CapRover site?

Thx

[Brandutchmen]

@mikeriss To answer your questions:

1. There is an "Edit Default NGINX Configuration" button on the app's HTTP settings page. You can add the modified configuration there.
2. Yes, I run my n8n with a custom NGINX configuration over https

[mikeriss]

Thanks @Brandutchmen. I have edited the NGINX Configuration and then enabled HTTPS. Unfortunately when I call the https site I see the default error page from caprover saying: Nothing here yet :/ Below is how my configuration looks like now

[Brandutchmen]

Here is my NGINX config: (Note that the ssl_ciphers have been removed. I am not overly sure how important they are for security, but I am not going to take chances :P)

<%
if (s.forceSsl) {
%>
    server {

        listen       80;

        server_name  <%-s.publicDomain%>;

        # Used by Lets Encrypt
        location /.well-known/acme-challenge/ {
            root <%-s.staticWebRoot%>;
        }

        # Used by CapRover for health check
        location /.well-known/captain-identifier {
            root <%-s.staticWebRoot%>;
        }

        location / {
            return 302 https://$http_host$request_uri$is_args$query_string;
        }
    }
<%
}
%>

server {

    <%
    if (!s.forceSsl) {
    %>
        listen       80;
    <%
    }
    if (s.hasSsl) {
    %>
        listen              443 ssl;
        ssl_certificate     <%-s.crtPath%>;
        ssl_certificate_key <%-s.keyPath%>;

        ssl_session_cache   shared:SSL:20m;
        ssl_session_timeout 1d;
        ssl_session_tickets off;

        # Mozilla Intermediate configuration. tweak to your needs.
        ssl_protocols TLSv1.2 TLSv1.3;
        ssl_ciphers ****REDACTED*** Insert yours plz
        ssl_prefer_server_ciphers off;
    <%
    }
    %>

        client_max_body_size 500m;

        server_name  <%-s.publicDomain%>;

        # 127.0.0.11 is DNS set up by Docker, see:
        # https://docs.docker.com/engine/userguide/networking/configure-dns/
        # https://github.com/moby/moby/issues/20026
        resolver 127.0.0.11 valid=10s;
        # IMPORTANT!! If you are here from an old thread to set a custom port, you do not need to modify this port manually here!!
        # Simply change the Container HTTP Port from the dashboard HTTP panel
        set $upstream http://<%-s.localDomain%>:<%-s.containerHttpPort%>;

        location / {

    <%
    if (s.httpBasicAuthPath) {
    %>
            auth_basic           "Restricted Access";
            auth_basic_user_file <%-s.httpBasicAuthPath%>; 
    <%
    }
    %>

            proxy_pass $upstream;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;

    <%
    if (s.websocketSupport) {
    %>
            proxy_set_header Upgrade $http_upgrade;
           # proxy_set_header Connection "upgrade";
            proxy_http_version 1.1;
            proxy_buffering off;
            proxy_cache off;
            chunked_transfer_encoding off;
            proxy_set_header Connection '';
    <%
    }
    %>
        }

        # Used by Lets Encrypt
        location /.well-known/acme-challenge/ {
            root <%-s.staticWebRoot%>;
        }

        # Used by CapRover for health check
        location /.well-known/captain-identifier {
            root <%-s.staticWebRoot%>;
        }

        error_page 502 /captain_502_custom_error_page.html;
        location = /captain_502_custom_error_page.html {
                root <%-s.customErrorPagesDirectory%>;
                internal;
        }
}

[Brandutchmen]

@mikeriss tag above

[Brandutchmen]

@mikeriss Also, before I forget, be sure to change your environment variables to reflect:

N8N_PROTOCOL=http
WEBHOOK_TUNNEL_URL=https:// (your url)
VUE_APP_URL_BASE_API=http:// (your url)
N8N_HOST=https:// (your url)

[mikeriss]

Thanks @Brandutchmen for your effort. Unfortunately with all above changes still I get the same result with following:

[Brandutchmen]

@mikeriss What does your app's console say?

[Brandutchmen]

@mikeriss Also, bear in mind that nginx can sometimes take 30 seconds or so before working after a config change

[mikeriss]

@Brandutchmen I had waited longer than 30 seconds. The app Console: 2020-09-15T21:09:04.332887246Z n8n ready on 0.0.0.0, port 5678 2020-09-15T21:09:04.333300625Z Version: 0.82.0 2020-09-15T21:09:04.358642458Z 2020-09-15T21:09:04.358657433Z Editor is now accessible via: 2020-09-15T21:09:04.358679119Z http://https://(MYURL)/:5678/

[Brandutchmen]

@mikeriss Did you enable websockets support? Otherwise, I am not sure what the problem could be atm...

[mikeriss]

@Brandutchmen yes I have. Hopefully I can find a solution soon Thanks for your effort anyway

[githubsaturn]

Added notes to instructions.end to link to this issue: https://github.com/caprover/one-click-apps/commit/742f06762c2f61215fbdd65e8ef156311be90e5a

[sneak]

@mikeriss email me (contact info available on my website) if you're still having trouble and I can help you troubleshoot.

[melalj]

@mikeriss Had a similar issue, and made it work with the following steps:

1. Edited the nginx configation (per @sneak initial comment)
2. Edited environment variables:

WEBHOOK_TUNNEL_URL=https://YOUR_DOMAIN/ # you remote public domain
VUE_APP_URL_BASE_API=http://srv-captain--n8n:5678 # with local domain
N8N_HOST=srv-captain--n8n # with local domain

[danielmguerrero]

HTTPs didn't work for me following these steps. But I've solved the issue with the following Nginx config: https://github.com/n8n-io/n8n/issues/593#issuecomment-650922295

Hope it helps someone.

[alexander-potemkin]

Thank you! Is there any way to implement all those hacks into main n8n package, to keep it one-click installation?

[githubsaturn]

@alexander-potemkin Try CapRover "Edge" version. I've made some changes that might make n8n work by default without having to make any modifications.

[alexander-potemkin]

Thank you!

[alexander-potemkin]

It seems that it does now work out of the box, so reference to this ticket from the installation, probably, shall be removed.

[githubsaturn]

@alexander-potemkin - there is actually a bug in the current version (1.9.0) nginx config. I wonder if that bug is making n8n to work without an issue. Can you please find this line:

return 302 https://$http_host$request_uri$is_args$query_string;

And change it to

return 302 https://$http_host$request_uri;

Does it still work?

PS: $is_args$query_string results in duplicated query params when redirecting.

[alexander-potemkin]

I'm sorry, I can't be of help here now, as I don't have it up and running now, but it was working just fine just a couple of weeks ago, that's why I though to notify you that a reference to this ticket shall not be mentioned any longer during n8n installation :)