84 lines
8.4 KiB
HTML
84 lines
8.4 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Zk | 2017-06-22-guiproxy</title>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Gentium+Plus&family=Lato&family=Ubuntu+Monodisplay=swap" />
|
|
<link rel="stylesheet" type="text/css" href="/style.css?2024-05-04" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<meta charset="utf-8" />
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<header>
|
|
<h1>Zk | 2017-06-22-guiproxy</h1>
|
|
</header>
|
|
<article class="content">
|
|
<hr />
|
|
<p>type: post
|
|
slug: guiproxy
|
|
date: 2017-06-22
|
|
title: Standing up long-running GUI instances with guiproxy</p>
|
|
<hr />
|
|
<p>Recently while working on Juju, we’ve started to use a tool called <a href="https://github.com/juju/guiproxy">guiproxy</a>. This allows us to talk to all of the various services that back our application in its live environment while proxying websocket requests to where they are going, as the proxy knows all of their addresses, while the GUI does not.</p>
|
|
<p>We’ve mostly used this for developing locally, where we start the GUI with <code>make run</code> and then run guiproxy. Running the GUI starts a pyramid server on port 6543, and guiproxy sets up a server running on :8042 that manages all of the proxying. You could visit the gui on :6543, but none of the websockets would reach the services, as it doesn’t know their addresses, so you visit the proxy at :8042, it proxies requests to the GUI and guides the websockets where they need to go.</p>
|
|
<p>However, I run things a little differently sort of by accident. Firstly, I have a Mac at home and don’t want to do what it takes to get the GUI up and running on this box, since that’d likely require vagrant. Secondly, as I wanted to work from anywhere and didn’t want to open up my home network so that I could access the GUI running on one of my other machines.</p>
|
|
<p>The end result is that I spun up a remote server — a linode, in this case — to work on. It also runs things like my <a href="https://thelounge.github.io/">IRC client</a> and such. I set this up at work.drab-makyo.com. I work on the GUI there, and that’s where it runs. For a while, I would just run guiproxy locally:</p>
|
|
<div class="codehilite"><pre><span></span><code>guiproxy -gui http://work.drab-makyo.com:6543 -env production -controller jimm.jujucharms.com:443
|
|
</code></pre></div>
|
|
|
|
<p>This meant that I could run the GUI on my server, run the proxy locally, and visit it at http://localhost.com:8042.</p>
|
|
<p>With our most recent sprint (which I’m writing from now), we needed to stand up a long-running instance of the GUI running a specific branch for some testing. I spent a bit of time thinking about just how to do this, but it turned out fairly easy: there’s no need to run the guiproxy on your local machine; you can run it wherever you want.</p>
|
|
<p>The end result is that I had the GUI running in the same way as any others would during development, but at a remote URL.</p>
|
|
<p>This took a bit of extra configuration</p>
|
|
<h3 id="the-server">The server</h3>
|
|
<p>We wanted this instance to be set up on a relatively pretty URL. I could have directed people to https://work.drab-makyo.com:8042, but that wasn’t really desirable for our tests. We wanted something that had looked like we had tried. I have <code>makyo.io</code> for short URLs and redirections, so I set up https://jujugui.makyo.io. This is how that worked with nginx:</p>
|
|
<div class="codehilite"><pre><span></span><code><span class="k">server</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">listen</span><span class="w"> </span><span class="mi">80</span><span class="p">;</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">listen</span><span class="w"> </span><span class="s">[::]:80</span><span class="w"></span>
|
|
<span class="w"> </span><span class="s">listen</span><span class="w"> </span><span class="mi">443</span><span class="w"> </span><span class="s">ssl</span><span class="p">;</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">listen</span><span class="w"> </span><span class="s">[::]:443</span><span class="w"> </span><span class="s">ssl</span><span class="p">;</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">ssl_certificate</span><span class="w"> </span><span class="s">/etc/letsencrypt/live/work.drab-makyo.com/fullchain.pem</span><span class="p">;</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">ssl_certificate_key</span><span class="w"> </span><span class="s">/etc/letsencrypt/live/work.drab-makyo.com/privkey.pem</span><span class="p">;</span><span class="w"></span>
|
|
|
|
<span class="w"> </span><span class="kn">server_name</span><span class="w"> </span><span class="s">jujugui.makyo.io</span><span class="p">;</span><span class="w"></span>
|
|
|
|
<span class="w"> </span><span class="kn">root</span><span class="w"> </span><span class="s">/var/www/html</span><span class="p">;</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">index</span><span class="w"> </span><span class="s">index.html</span><span class="p">;</span><span class="w"></span>
|
|
|
|
<span class="w"> </span><span class="kn">location</span><span class="w"> </span><span class="s">/</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">proxy_pass</span><span class="w"> </span><span class="s">http://localhost:8042/</span><span class="p">;</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">proxy_http_version</span><span class="w"> </span><span class="mi">1</span><span class="s">.1</span><span class="p">;</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">proxy_set_header</span><span class="w"> </span><span class="s">Connection</span><span class="w"> </span><span class="s">"upgrade"</span><span class="p">;</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">proxy_set_header</span><span class="w"> </span><span class="s">Upgrade</span><span class="w"> </span><span class="nv">$http_upgrade</span><span class="p">;</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">proxy_set_header</span><span class="w"> </span><span class="s">X-Forwarded-For</span><span class="w"> </span><span class="nv">$remote_addr</span><span class="p">;</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">proxy_read_timeout</span><span class="w"> </span><span class="s">1d</span><span class="p">;</span><span class="w"></span>
|
|
<span class="w"> </span><span class="p">}</span><span class="w"> </span>
|
|
<span class="p">}</span><span class="w"> </span>
|
|
</code></pre></div>
|
|
|
|
<p>This sets up a server running on jujugui.makyo.io using SSL. From there, it proxies requests to the guiproxy running in the background.</p>
|
|
<h3 id="running-guiproxy">Running guiproxy</h3>
|
|
<p>Running the guiproxy takes two additional bits of work to get this solution up and running.</p>
|
|
<ol>
|
|
<li>The GUI must be available from a different URL than from the proxy. jujugui.makyo.io <em>only</em> proxies requests to the proxy, so it’ll have to be something else. <del>This can be localhost, of course, but can also be the fully qualified URL.</del> I still have work.drab-makyo.com up and running, so I used that.</li>
|
|
<li>We have SSL set up, but the GUI in dev mode expects the websocket to be insecure. We’ll need to manually upgrade that to WSS so that the browser doesn’t complain.</li>
|
|
</ol>
|
|
<div class="codehilite"><pre><span></span><code>guiproxy -gui http://work.drab-makyo.com:6543 -env production -controller jimm.jujucharms.com:443 -config 'socket_protocol:"wss"'
|
|
</code></pre></div>
|
|
|
|
<p>I know this is a super specific case, but it just goes to show how to get all these parts talking together with tooling to help you along the way.</p>
|
|
</article>
|
|
<footer>
|
|
<p>Page generated on 2024-05-04</p>
|
|
</footer>
|
|
</main>
|
|
<script type="text/javascript">
|
|
document.querySelectorAll('.tag').forEach(tag => {
|
|
let text = tag.innerText;
|
|
tag.innerText = '';
|
|
tag.innerHTML = `<a href="/tags.html#${text}">${text}</a>`;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|