218 lines
7.2 KiB
HTML
218 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Deploying Your Dumb Ideas with Dokku</title>
|
|
<meta name="description" content="The slides for a talk about deploying by Dave Smith-Hayes">
|
|
<meta name="author" content="Dave Smith-Hayes">
|
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<link rel="stylesheet" href="dist/reset.css">
|
|
<link rel="stylesheet" href="dist/reveal.css">
|
|
<link rel="stylesheet" href="dist/theme/black.css" id="theme">
|
|
|
|
<!-- Theme used for syntax highlighting of code -->
|
|
<link rel="stylesheet" href="plugin/highlight/monokai.css">
|
|
</head>
|
|
<body>
|
|
<div class="reveal">
|
|
<div class="slides">
|
|
<!-- Introduction -->
|
|
<section>
|
|
<h1>Deploying</h1>
|
|
<h3 class="fragment">Your Dumb Ideas</h3>
|
|
<h3 class="fragment">With Dokku</h3>
|
|
</section>
|
|
|
|
<section>
|
|
<h1>Who am I?</h1>
|
|
</section>
|
|
|
|
<section>
|
|
<h1>Dave Smith-Hayes</h1>
|
|
<ul>
|
|
<li class="fragment">Father</li>
|
|
<li class="fragment">Developer</li>
|
|
<li class="fragment">JavaScript Enjoyer</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h1>What is deploying?</h1>
|
|
</section>
|
|
|
|
<section>
|
|
<p>Releasing software to be used.</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h3>How it works for Web</h3>
|
|
<ul>
|
|
<li class="fragment">Have a DNS record point to an IP</li>
|
|
<li class="fragment">Have a webserver runnning at that IP</li>
|
|
<li class="fragment">Have that webserver proxy requests to the application</li>
|
|
<ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h1>My history of deploying</h1>
|
|
</section>
|
|
|
|
<section>
|
|
<ul>
|
|
<li>cPanel File Manager</li>
|
|
<li class="fragment">FTP to Shared Hosting</li>
|
|
<li class="fragment"><code>$ git pull</code></li>
|
|
<li class="fragment">Jenkins & Ansible build VM Images</li>
|
|
<li class="fragment">Packer & Terraform build Containers</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Doing it Yourself</h2>
|
|
<h3 class="fragment">What do you need?</h3>
|
|
<ul>
|
|
<li class="fragment">A domain</li>
|
|
<li class="fragment">An internet connected server </li>
|
|
<li class="fragment">A webserver (<em>NGiNX, Apache, Caddy, etc</em>)</li>
|
|
<li class="fragment">Patience</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<!-- Dokku -->
|
|
<section>
|
|
<h2>Dokku</h2>
|
|
<p>Self-hosted <strong>P</strong>latform as a <strong>S</strong>ervice (PaaS)</p>
|
|
<p>Your very own <em>Heroku*</em></p>
|
|
<p class="fragment"><small><em>*I have never used Heroku</em></small></p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>What Dokku Does</h2>
|
|
<ul>
|
|
<li>Creates a <code>dokku</code> user on your system</li>
|
|
<li>Installs all the services for running Dokku
|
|
<ul>
|
|
<li>Docker</li>
|
|
<li>NGiNX</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>How Dokku Works</h2>
|
|
<ul>
|
|
<li>Sets up Application</li>
|
|
<li>Becomes a Git remote repository</li>
|
|
<li>Builds and deploys the app behind NGiNX</li>
|
|
</ul>
|
|
<p class="fragment">
|
|
<small><em>It does a lot more than this</em></small>
|
|
</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Builders</h2>
|
|
<ul>
|
|
<li>Heroku Buildpacks</li>
|
|
<li>Dockerfile</li>
|
|
<li>Nixpacks</li>
|
|
</ul>
|
|
<p class="fragment">
|
|
<small><em>It does a lot more than this</em></small>
|
|
</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Plugins</h2>
|
|
<ul>
|
|
<li>Let's Encrypt</li>
|
|
<li>Databases (MySQL, Postgres)</li>
|
|
</ul>
|
|
<p class="fragment">
|
|
<small><em>It does a lot more than this</em></small>
|
|
</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h1>Demo</h1>
|
|
</section>
|
|
|
|
<section>
|
|
<h3>Anatomy of the Server</h3>
|
|
<ul>
|
|
<li>Linode VPS</li>
|
|
<li>Debian</li>
|
|
<li>Nameservers</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h3>Anatomy of the Application</h3>
|
|
<ul>
|
|
<li>Chat Application</li>
|
|
<li>Hono Backend</li>
|
|
<li>Mithril.js Frontend</li>
|
|
<li>Bun!</li>
|
|
<li>Dockerized</li>
|
|
<li><a href="https://chat.freedoom.party">chat.freedoom.party</a></li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>What's already done?</h2>
|
|
</section>
|
|
|
|
<section>
|
|
<ul>
|
|
<li>Server Setup</li>
|
|
<li class="fragment">DNS Records</li>
|
|
<li class="fragment">Dokku installation</li>
|
|
<li class="fragment">Git Remote Setup</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>What We're Going to Do</h2>
|
|
</section>
|
|
|
|
<section>
|
|
<ul>
|
|
<li>Create an app with Dokku</li>
|
|
<li class="fragment">Push the code</li>
|
|
<li class="fragment">Add SSL</li>
|
|
<li class="fragment">Chat!</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h3><a href="https://chat.freedoom.party">chat.freedoom.party</a></h3>
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JavaScript for the Slide Deck to Run -->
|
|
<script src="dist/reveal.js"></script>
|
|
<script src="plugin/notes/notes.js"></script>
|
|
<script src="plugin/markdown/markdown.js"></script>
|
|
<script src="plugin/highlight/highlight.js"></script>
|
|
<script>
|
|
// More info about initialization & config:
|
|
// - https://revealjs.com/initialization/
|
|
// - https://revealjs.com/config/
|
|
Reveal.initialize({
|
|
hash: true,
|
|
|
|
// Learn about plugins: https://revealjs.com/plugins/
|
|
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|