Help with NGINX proxy using a custom path

[wrexroad]

I have seen a few posts about getting an NGINX reverse proxy working, but I am still stuck. If I setup the proxy with the location '/' everything works fine, but if I try to use a path other than '/' I get an error "Not Found" coming from openvscode-server.

This is the configuration I am using:

        location /vscode/ {
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection $http_connection;
           proxy_http_version 1.1;

           proxy_pass http://localhost:5001;
        }

As far as I can tell, the initial request with the token goes through, but then when it tries to redirect so the URL bar doesn't have the token displayed, something gets messed up. Does anyone have a configuration like this working?

[jeanp413]

@wrexroad I think you are missing a trailing slash in proxy_pass: proxy_pass http://localhost:5001/;, also I think you'll need to use proxy_redirect directive proxy_redirect default;. Not sure 100% this would work but you could try 🙂

[wrexroad]

Thanks for the idea, but neither of those worked. I think the problem is that some of the openvscode-server files are linked with absolute paths, so those bypass the /vscode/ subdirectory in the URL and try to load from the root of the web server.

For example, here is the NGINX access log showing two of the workbench files that are requested. One uses a relative path, the other uses an absolute path:

::1 - - [14/Jan/2022:10:50:37 -0800] "GET /vscode/static/out/vs/code/browser/workbench/workbench.js HTTP/1.1" 200 7875 "-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36" "-"

::1 - - [14/Jan/2022:10:50:47 -0800] "GET /static/out/vs/code/browser/workbench/workbench.nls.js HTTP/1.1" 404 3650 "http://localhost/vscode/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36" "-"

The absolute path is trying to get the file workbench.nls.js from a path starting at /static/ rather than /vscode/. I tried to create a symlink from /static/ to the actual location of the openvscode-server files. That worked for loading the workbench, but then I was getting websocket failures.

I don't think there is any way to have the absolute paths corrected with NGINX, is there?

I found in manifest.json there is a value for "start_url" but changing that doesn't seem to have any effect. Maybe that is for when the app guest built?

[wrexroad]

Ok after realizing that some of the files were loading, and some weren't I did some digging. There is are a couple of functions that build URLs based on the current URL. The problem is the hostname is used, but the pathname is ignored. I patched up the files and it's working well now. I will probably open an issue when I have time.

[Techcraft7]

I know this is an old post, but for anyone who finds this post it may help.

I have been using NGINX to put multiple containers of vscode for each of my projects.

NOTE: If you are using multiple containers, make sure to put them on a network:

docker network create my_network
# You don't need to expose the port
docker run -itd --name project1 --network my_network -v "..." gitpod/openvscode-server
docker run -itd --name project2 --network my_network -v "..." gitpod/openvscode-server
# DO expose NGINX ports
docker run -itd --name nginx -p 80:80 --network my_network -v "..." nginx

As an aside, when starting vscode, bind your project's code to /home/workspace/project. Extensions like to dump a ton of files into /home/workspace, which will pollute your project's code folder.

I worked around the custom path issue by keeping everything on the root path, but only route my requests to vscode if a specific cookie is set. I also added a location block that resets the cookie.
This cookie gets set into a variable that you put into proxy_pass.
To do this you need to use njs (works on the nginx docker container).

You have to add a resolver when putting variables in proxy_pass or it wont work. If you're using Docker, you can use 127.0.0.11 to resolve other containers on the same network.
Lastly, you NEED to set the CSP, or vscode's js will not run.

Unfortunately I had to use an if block, which is considered bad practice.

NGINX configuration

nginx.conf

load_module modules/ngx_http_js_module.so;

events {}

http {

        server {
                listen 80;
                js_import "/etc/nginx/proxy.js";
                resolver 127.0.0.11; # Docker's embedded DNS
                location / {
                        add_header Content-Security-Policy "default-src 'self' 'unsafe-inline'"; # /!\ this is required
                        js_set $project proxy.getProject; # get cookie
                        if ($project = "") {
                                return 302 /projects; # Project chooser UI
                        }
                        if ($project != "") {
                                proxy_pass http://devenv_$project:3000; # note the prefix!
                        }
                        # /!\ override CSP sent by upstream
                        proxy_hide_header Content-Security-Policy;
                        # Web sockets
                        proxy_set_header Upgrade $http_upgrade;
                        proxy_set_header Connection "Upgrade";
                        proxy_set_header Host $host;
                }
                location /projects { # This location resets the cookie
                        js_header_filter proxy.removeCookie;
                        root /wwwroot/;
                }
        }
}

proxy.js

NOTE: my code assumes that the cookie takes the following format: CurrentProject=name;path=/;other=args;.... Make sure to account for this when setting document.cookie!

function getProject(r) {
        const cookies = (r.headersIn["Cookie"] || "").split(";");
        const project = (cookies.filter(c => c.startsWith("CurrentProject="))[0] || "=").split("=")[1].split(";")[0];
        return project;
}

function removeCookie(r) {
        const cookies = (r.headersIn["Cookie"] || "").split(";");
        r.headersOut["Cookie"] = cookies.filter(c => !c.startsWith("CurrentProject=")).join(";");
}

export default {getProject, removeCookie};

/projects UI

index.html

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width, initial-scale=1">
        </head>
        <body>
                <section class="section">
                        <div class="container box">
                                <div class="has-text-centered mb-6">
                                        <p class="title is-1">
                                                Projects
                                        </p>
                                </div>
                                <div class="columns is-multiline" id="project-list"></div>
                        </div>
                </section>
                <script src="main.js"></script>
        </body>
</html>

main.js

(function() {
        const list = document.getElementById("project-list");
        const projects = ["project1", "project2"];

        // browser refuses to load css, so just fetch and inject it into the <head>
        const style = document.createElement("style");
        fetch("bulma.min.css").then(r => r.text().then(t => style.innerHTML = t));
        document.head.appendChild(style);

        for (const i of projects) {
                const div = document.createElement("div");
                const a = document.createElement("button");

                div.classList.add("column");
                div.classList.add("has-text-centered");

                if (projects.length > 4) {
                        div.classList.add("is-one-quarter");
                }

                a.classList.add("button");
                a.classList.add("is-text");
                a.classList.add("is-large");

                a.innerText = i;

                a.onclick = function() {
                        document.cookie = `CurrentProject=${i};path=/`;
                        window.location.href = "/?folder=/home/workspace/project";
                };

                div.appendChild(a);
                list.appendChild(div);
        }
})();

bulma.min.css is a CSS library, download it here.
(I downloaded it for offline use)

This is a proof of concept, so feel free to modify for your needs.

If you need for the JavaScript to be async, js_set will not work, try js_content, see this example
You should not need to make the cookie removal async.

Later, I am going to add JWT auth along with a MUCH nicer UI (rather than a static html file) to choose which vscode instance i want to connect to.
I could put your app on app.example.com or example.com/app, and put the vscode instances on editor.example.com.

TL;DR

• Set cookie
• Put cookie into nginx variable
• Use variable to choose proxy_pass endpoint in location / { ... }
• Make sure to set CSP, forward web sockets, and configure the resolver properly
• Add location that deletes cookie (your app)
• Add something to your app that sets the cookie and redirects to /