|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<title>How to Deploy Lichess's Lila With Nginx | tait.tech</title>
|
|
|
<link rel="stylesheet" href="/assets/css/style.css">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<meta name="author" content="Tait Hoyem">
|
|
|
<meta name="keywords" content="">
|
|
|
<meta name="description" content="">
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="wrapper">
|
|
|
<header>
|
|
|
<h1>tait.tech</h1>
|
|
|
|
|
|
<nav>
|
|
|
|
|
|
<a href="/" class="nav-link" >Home</a>
|
|
|
|
|
|
<a href="/blog/" class="nav-link" >Blog</a>
|
|
|
|
|
|
<a href="/ideas/" class="nav-link" >Ideas</a>
|
|
|
|
|
|
<a href="/links/" class="nav-link" >Links</a>
|
|
|
|
|
|
<a href="https://github.com/TTWNO/" class="nav-link" target="_blank" rel="noopener noreferrer" >Github</a>
|
|
|
|
|
|
</nav>
|
|
|
|
|
|
</header>
|
|
|
<main>
|
|
|
<article>
|
|
|
<header>
|
|
|
<h1 class="post-title">How to Deploy Lichess's Lila With Nginx</h1>
|
|
|
<time datetime="20-12-20" class="post-date">Sunday, December 20 2020</time>
|
|
|
</header>
|
|
|
<hr>
|
|
|
|
|
|
<p>I was getting ready to have a public test of some changes I made to <a href="https://lichess.org">lichess.org</a>’s <a href="https://lichess.org/source">open source chess platform</a>.
|
|
|
In preperation, I got my Let’s Encrypt certificates and nginx configurations setup…
|
|
|
and it wouldn’t work.
|
|
|
Here are some tips for myself and future Lichess developers.</p>
|
|
|
|
|
|
<h2 id="reasoning">Reasoning</h2>
|
|
|
|
|
|
<p>My pull request involves accessibility.
|
|
|
It will extend Lichess’s NVUI (Non-Visual User Interface) to be more accessible to beginner level chess players.
|
|
|
At the time of writing this, Lichess’s NVUI only supports searching pieces by type, rank and file.
|
|
|
It does not support any kind of interactive board.</p>
|
|
|
|
|
|
<p>I wanted to play chess with a friend of mine who uses a screen reader.
|
|
|
Even though Lichess does indeed have a separate rendering of the page for visually impaired users,
|
|
|
I have heard from a few people that it is not the best.</p>
|
|
|
|
|
|
<p>I don’t use a screen reader myself, so I thought having a public latest changes deployed server would work better for testing.
|
|
|
It would certainly work better than getting some of my less computer literate friends to connect to me via VSCode/VPN and view my local repository.</p>
|
|
|
|
|
|
<p>So here is how to deploy it:</p>
|
|
|
|
|
|
<h2 id="setup-a-development-environment">Setup a development environment</h2>
|
|
|
|
|
|
<p>This is described <a href="https://github.com/ornicar/lila/wiki/Lichess-Development-Onboarding">in Lichess’s documentation itself</a>.
|
|
|
I will not elaborate further as it is not necessary.</p>
|
|
|
|
|
|
<h2 id="setup-nginx">Setup nginx</h2>
|
|
|
|
|
|
<p>This is the part that stumps most people.
|
|
|
Getting a local development server usually works alright, but once you want to reverse proxy it for security and professionalism purposes, it get more interesting.</p>
|
|
|
|
|
|
<p>Here is the relevant portion of my nginx configuration for lila:</p>
|
|
|
|
|
|
<pre class="file">
|
|
|
server_name chess.tait.tech;
|
|
|
|
|
|
location / {
|
|
|
proxy_pass http://127.0.0.1:9663;
|
|
|
proxy_set_header Host $host;
|
|
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
|
|
proxy_set_header X-NginX-Proxy true;
|
|
|
proxy_set_header X-Real-IP $remote_addr;
|
|
|
}
|
|
|
</pre>
|
|
|
|
|
|
<p>This is the config for the lila-ws websocket subdomain:</p>
|
|
|
|
|
|
<pre class="file">
|
|
|
server_name ws.chess.tait.tech;
|
|
|
|
|
|
location / {
|
|
|
proxy_pass http://127.0.0.1:9664;
|
|
|
proxy_http_version 1.1;
|
|
|
proxy_set_header Upgrade $http_upgrade;
|
|
|
proxy_set_header Connection "upgrade";
|
|
|
}
|
|
|
</pre>
|
|
|
|
|
|
<p>You will need to deploy these on two virtual hosts.</p>
|
|
|
|
|
|
<h2 id="lila">Lila</h2>
|
|
|
|
|
|
<p><a href="https://github.com/ornicar/lila/">Lila</a> is the name for the main chess server, we need to change a few settings. Here is my git diff for the <code class="language-plaintext highlighter-rouge">conf/base.conf</code> file:</p>
|
|
|
|
|
|
<pre class="file">
|
|
|
- domain = "localhost:9663"
|
|
|
- socket.domains = [ "localhost:9664" ]
|
|
|
+ domain = "chess.tait.tech"
|
|
|
+ socket.domains = [ "ws.chess.tait.tech" ]
|
|
|
asset.domain = ${net.domain}
|
|
|
- asset.base_url = "http://"${net.asset.domain}
|
|
|
+ asset.base_url = "https://"${net.asset.domain}
|
|
|
asset.minified = false
|
|
|
- base_url = "http://"${net.domain}
|
|
|
+ base_url = "https://"${net.domain}
|
|
|
</pre>
|
|
|
|
|
|
<h3 id="lila-ws">Lila-ws</h3>
|
|
|
|
|
|
<p><a href="https://github.com/ornicar/lila-ws/">Lila-ws</a> is the websocket component of Lila.</p>
|
|
|
|
|
|
<p>The most common complaint amongst aspiring Lichess developers is websockets not working.
|
|
|
They constantly get these ‘101’ responses from the websocket,
|
|
|
and it also seems that the websocket returns instead of staying in the ‘pending’ state as it should be.</p>
|
|
|
|
|
|
<p>Here is how to fix that (in diff format):</p>
|
|
|
|
|
|
<pre class="file">
|
|
|
-csrf.origin = "http://127.0.0.1:9000"
|
|
|
+csrf.origin = "https://chess.tait.tech"
|
|
|
</pre>
|
|
|
|
|
|
<p>You need to tell lila-ws where the websocket requests will be coming from. This is how to do that.</p>
|
|
|
|
|
|
<h2 id="conclusion">Conclusion</h2>
|
|
|
|
|
|
<p>This is not a long article, but just some notes for future me and Lila developers.</p>
|
|
|
|
|
|
</article>
|
|
|
|
|
|
</main>
|
|
|
<hr>
|
|
|
<footer>
|
|
|
This page will be mirrored on <a href="https://beta.tait.tech/2020/12/20/deploy-lichess/">beta.tait.tech</a>.
|
|
|
|
|
|
</footer>
|
|
|
</div>
|
|
|
</body>
|
|
|
</html>
|
