Update the first post

This commit is contained in:
Emin Arslan 2024-11-13 19:38:13 +03:00
parent 08bc8dfe2a
commit b249ce9d91
10 changed files with 83 additions and 484 deletions

View File

@ -1,6 +1,6 @@
+++
title = 'My Setup - p1'
subtitle = 'Containers!'
title = 'My Setup '
subtitle = 'Containers! Docker!'
summary = "I go over the things I've learned about docker, and how I've used it to host my website."
date = 2024-10-25T23:11:17+03:00
draft = false
@ -127,3 +127,45 @@ Docker compose helps with this: you can create a
`compose.yaml` file, and define containers, ports, volumes, secrets all inside
this file. Then, when you run `docker compose up` this configuration is read,
and all of it is processed as you would want it to.
e.g you might have this for starting a web server on port 3000:
```yaml
services:
web:
image: "nginx"
ports:
- 3000:80
```
Or you could even have *two* servers, like, a gogs and a web server!
```yaml
services:
web:
image: "nginx"
ports:
- 80:80
gogs-haha:
image: "gogs/gogs"
ports:
- 3000:3000
- 3022:22
```
See how we got multiple services to run, very very easily? Isn't that just
really nice? You can just keep adding stuff. And compose even sets up dns for
these containers! That means, for example, you can have your web server act as
a reverse proxy by having it access http://gogs-haha:3000 in the above config!
It just works!
Of course, you can add volumes to tie it all, and 'secrets' to manage sensitive
files (like keys and certificates). I won't go into those here though.
# Conclusion
Docker and Docker Compose are a lot more useful than my younger self would have
given them credit for. It was really fun learning about them, and hopefully I'll
use this knowledge in the future.
Thank you for reading.

View File

@ -1,5 +0,0 @@
+++
title = 'Setup_p2'
date = 2024-10-28T23:41:06+03:00
draft = true
+++

View File

@ -9,7 +9,7 @@
<lastBuildDate>Fri, 25 Oct 2024 23:11:17 +0300</lastBuildDate>
<atom:link href="https://emin.software/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>My Setup - p1</title>
<title>My Setup </title>
<link>https://emin.software/posts/setup_p1/</link>
<pubDate>Fri, 25 Oct 2024 23:11:17 +0300</pubDate>
<guid>https://emin.software/posts/setup_p1/</guid>

View File

@ -1,179 +0,0 @@
<!doctype html><html lang="en-us">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="generator" content="Qubt theme for Hugo" />
<title>haxala1r</title>
<meta name="title" content="haxala1r" />
<meta name="author" content="Emin Arslan" />
<link type="text/css" rel="stylesheet" href="/css/main.bundle.min.955b22a3fcff20511a11d9c7fdac7dd57e8293ee16e4d4ca0d6ab737f4895c3017582739cfd1f17a7c3feae23b42a8f4b01d7052fa2bc03a1430fa0669bf2d60.css" integrity="sha512-lVsio/z/IFEaEdnH/ax91X6Ck&#43;4W5NTKDWq3N/SJXDAXWCc5z9Hxenw/6uI7Qqj0sB1wUvorwDoUMPoGab8tYA==" />
<script defer src="/js/main.bundle.min.4657c962c90bb42241e3db9c00332ac44a2ff6a901654b8248b4e2f4b586571fd2aa672dcadf728d6f2135b0ea6088f21d1cf5302b4cae8557e0593f70081d72.js" integrity="sha512-RlfJYskLtCJB49ucADMqxEov9qkBZUuCSLTi9LWGVx/Sqmctyt9yjW8hNbDqYIjyHRz1MCtMroVX4Fk/cAgdcg=="></script>
<meta property="og:url" content="http://emin.software/posts/docker_setup/">
<meta property="og:site_name" content="haxala1r">
<meta property="og:title" content="haxala1r">
<meta property="og:locale" content="en_us">
<meta property="og:type" content="article">
<meta property="article:section" content="posts">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="haxala1r">
<script>
if (localStorage.getItem("color-theme") === "dark" || (!("color-theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
</script>
</head>
<body class="flex h-screen flex-col justify-between bg-neutral-100 dark:bg-neutral-800">
<div>
<header class="sticky top-0 z-10 bg-neutral-100 dark:bg-neutral-800">
<section class="mx-auto flex max-w-screen-xl items-center justify-between p-4">
<a href="http://emin.software/" class="flex items-center space-x-3">
<span class="self-center whitespace-nowrap text-2xl font-semibold text-slate-700 dark:text-slate-400">
haxala1r
</span>
</a>
<div class="flex flex-row space-x-8">
<nav class="hidden space-x-8 text-xl md:block" aria-label="main">
<a href="/" class="px-3 py-2 text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
Home
</a>
<a href="/about/" class="px-3 py-2 text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
About
</a>
</nav>
<button id="theme-toggle" type="button" class="rounded-lg text-sm text-slate-700 hover:text-indigo-500 dark:text-slate-400" aria-label="theme-switcher">
<svg id="theme-toggle-dark-icon" class="hidden h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
</svg>
<svg id="theme-toggle-light-icon" class="hidden h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
fill-rule="evenodd"
clip-rule="evenodd"></path>
</svg>
</button>
<button id="hamburger-button" class="relative h-8 w-8 cursor-pointer text-3xl md:hidden" aria-label="hamburger-button">
<div
class="absolute top-4 -mt-0.5 h-[3px] w-8 rounded bg-slate-700 transition-all duration-500 before:absolute before:h-[3px] before:w-8 before:-translate-x-4 before:-translate-y-2.5 before:rounded before:bg-slate-700 before:transition-all before:duration-500 before:content-[''] after:absolute after:h-[3px] after:w-8 after:-translate-x-4 after:translate-y-2.5 after:rounded after:bg-slate-700 after:transition-all after:duration-500 after:content-[''] dark:bg-slate-400 before:dark:bg-slate-400 after:dark:bg-slate-400"></div>
</button>
</div>
</section>
<section id="mobile-menu" class="absolute hidden w-full origin-top animate-open-menu flex-col justify-center bg-neutral-100 text-4xl dark:bg-neutral-800">
<nav class="flex min-h-screen flex-col items-center py-8" aria-label="mobile">
<a href="/" class="px-3 py-2 text-center text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
Home
</a>
<a href="/about/" class="px-3 py-2 text-center text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
About
</a>
</nav>
</section>
</header>
<main>
<div class="justify-left mx-auto mt-8 flex max-w-screen-md px-4">
<article>
<h1 class="text-4xl font-extrabold text-slate-700 dark:text-slate-200">
</h1>
<h2 class="mt-4 text-2xl text-slate-500 dark:text-slate-400">
</h2>
<div class="mb-4 mt-2 text-sm text-slate-500 dark:text-slate-400">
Jan 1, 1 - 0 minute read
</div>
<span class="prose prose-slate break-words text-lg text-slate-700 dark:prose-invert prose-pre:max-w-[90vw] md:prose-pre:max-w-screen-md dark:text-slate-200">
</span>
</article>
</div>
</main>
</div>
<footer>
<div class="flex flex-col justify-center p-10">
<p class="text-center text-slate-700 dark:text-slate-400">
&copy;
2024
Emin Arslan
</p>
<p class="text-center text-sm text-slate-700 dark:text-slate-400">
Published with <a class="hover:underline hover:decoration-indigo-500 hover:text-indigo-500" href="https://gohugo.io" target="_blank" rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:decoration-indigo-500 hover:text-indigo-500" href="https://github.com/chrede88/qubt" target="_blank" rel="noopener noreferrer">Qubt</a>
</p>
</div>
</footer>
</body>
</html>

View File

@ -155,7 +155,7 @@
<div class="flex flex-col justify-between p-6">
<div>
<h4 class="mb-2 line-clamp-2 text-base font-semibold text-slate-700 antialiased md:text-2xl dark:text-slate-200">
My Setup - p1
My Setup
</h4>
<p class="mb-4 line-clamp-6 text-base text-slate-500 dark:text-slate-400">
I go over the things I&rsquo;ve learned about docker, and how I&rsquo;ve used it to host my website.

View File

@ -9,7 +9,7 @@
<lastBuildDate>Fri, 25 Oct 2024 23:11:17 +0300</lastBuildDate>
<atom:link href="https://emin.software/posts/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>My Setup - p1</title>
<title>My Setup </title>
<link>https://emin.software/posts/setup_p1/</link>
<pubDate>Fri, 25 Oct 2024 23:11:17 +0300</pubDate>
<guid>https://emin.software/posts/setup_p1/</guid>

View File

@ -1,287 +0,0 @@
<!doctype html><html lang="en-us">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="generator" content="Qubt theme for Hugo" />
<title>haxala1r</title>
<meta name="title" content="haxala1r" />
<meta name="author" content="Emin Arslan" />
<link type="text/css" rel="stylesheet" href="/css/main.bundle.min.955b22a3fcff20511a11d9c7fdac7dd57e8293ee16e4d4ca0d6ab737f4895c3017582739cfd1f17a7c3feae23b42a8f4b01d7052fa2bc03a1430fa0669bf2d60.css" integrity="sha512-lVsio/z/IFEaEdnH/ax91X6Ck&#43;4W5NTKDWq3N/SJXDAXWCc5z9Hxenw/6uI7Qqj0sB1wUvorwDoUMPoGab8tYA==" />
<script defer src="/js/main.bundle.min.4657c962c90bb42241e3db9c00332ac44a2ff6a901654b8248b4e2f4b586571fd2aa672dcadf728d6f2135b0ea6088f21d1cf5302b4cae8557e0593f70081d72.js" integrity="sha512-RlfJYskLtCJB49ucADMqxEov9qkBZUuCSLTi9LWGVx/Sqmctyt9yjW8hNbDqYIjyHRz1MCtMroVX4Fk/cAgdcg=="></script>
<meta property="og:url" content="http://emin.software/posts/podman-setup/">
<meta property="og:site_name" content="haxala1r">
<meta property="og:title" content="My Setup - p1">
<meta property="og:description" content="Podman In this series I will be walking you through my process of how I host everything on this server.
When first creating this website, I just had my blog. I generated this blog using hugo: a static site generator. Hugo allowed me to focus on writing whatever I wanted in Markdown format, it would take care of converting my writing into HTML and CSS.
I had a small issue with how I wrote my code and deployed it though: whenever I made a small change to the page, I had to manually rebuild it, then upload the updated version to my server and put it in the web directory.">
<meta property="og:locale" content="en_us">
<meta property="og:type" content="article">
<meta property="article:section" content="posts">
<meta property="article:published_time" content="2024-10-25T23:11:17+03:00">
<meta property="article:modified_time" content="2024-10-25T23:11:17+03:00">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="My Setup - p1">
<meta name="twitter:description" content="Podman In this series I will be walking you through my process of how I host everything on this server.
When first creating this website, I just had my blog. I generated this blog using hugo: a static site generator. Hugo allowed me to focus on writing whatever I wanted in Markdown format, it would take care of converting my writing into HTML and CSS.
I had a small issue with how I wrote my code and deployed it though: whenever I made a small change to the page, I had to manually rebuild it, then upload the updated version to my server and put it in the web directory.">
<script>
if (localStorage.getItem("color-theme") === "dark" || (!("color-theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
</script>
</head>
<body class="flex h-screen flex-col justify-between bg-neutral-100 dark:bg-neutral-800">
<div>
<header class="sticky top-0 z-10 bg-neutral-100 dark:bg-neutral-800">
<section class="mx-auto flex max-w-screen-xl items-center justify-between p-4">
<a href="http://emin.software/" class="flex items-center space-x-3">
<span class="self-center whitespace-nowrap text-2xl font-semibold text-slate-700 dark:text-slate-400">
haxala1r
</span>
</a>
<div class="flex flex-row space-x-8">
<nav class="hidden space-x-8 text-xl md:block" aria-label="main">
<a href="/" class="px-3 py-2 text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
Home
</a>
<a href="/about/" class="px-3 py-2 text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
About
</a>
</nav>
<button id="theme-toggle" type="button" class="rounded-lg text-sm text-slate-700 hover:text-indigo-500 dark:text-slate-400" aria-label="theme-switcher">
<svg id="theme-toggle-dark-icon" class="hidden h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
</svg>
<svg id="theme-toggle-light-icon" class="hidden h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
fill-rule="evenodd"
clip-rule="evenodd"></path>
</svg>
</button>
<button id="hamburger-button" class="relative h-8 w-8 cursor-pointer text-3xl md:hidden" aria-label="hamburger-button">
<div
class="absolute top-4 -mt-0.5 h-[3px] w-8 rounded bg-slate-700 transition-all duration-500 before:absolute before:h-[3px] before:w-8 before:-translate-x-4 before:-translate-y-2.5 before:rounded before:bg-slate-700 before:transition-all before:duration-500 before:content-[''] after:absolute after:h-[3px] after:w-8 after:-translate-x-4 after:translate-y-2.5 after:rounded after:bg-slate-700 after:transition-all after:duration-500 after:content-[''] dark:bg-slate-400 before:dark:bg-slate-400 after:dark:bg-slate-400"></div>
</button>
</div>
</section>
<section id="mobile-menu" class="absolute hidden w-full origin-top animate-open-menu flex-col justify-center bg-neutral-100 text-4xl dark:bg-neutral-800">
<nav class="flex min-h-screen flex-col items-center py-8" aria-label="mobile">
<a href="/" class="px-3 py-2 text-center text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
Home
</a>
<a href="/about/" class="px-3 py-2 text-center text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
About
</a>
</nav>
</section>
</header>
<main>
<div class="justify-left mx-auto mt-8 flex max-w-screen-md px-4">
<article>
<h1 class="text-4xl font-extrabold text-slate-700 dark:text-slate-200">
My Setup - p1
</h1>
<h2 class="mt-4 text-2xl text-slate-500 dark:text-slate-400">
</h2>
<div class="mb-4 mt-2 text-sm text-slate-500 dark:text-slate-400">
Oct 25, 2024 - 5 minute read
</div>
<span class="prose prose-slate break-words text-lg text-slate-700 dark:prose-invert prose-pre:max-w-[90vw] md:prose-pre:max-w-screen-md dark:text-slate-200">
<h1 id="podman">Podman</h1>
<p>In this &lsquo;series&rsquo; I will be walking you through my process of how I
host everything on this server.</p>
<p>When first creating this website, I just had my blog. I generated this blog
using <a href="https://hugo.io">hugo</a>: a static site generator. Hugo allowed me to
focus on writing whatever I wanted in Markdown format, it would take care of
converting my writing into HTML and CSS.</p>
<p>I had a small issue with how I wrote my code and deployed it though: whenever I
made a small change to the page, I had to manually rebuild it, then upload the
updated version to my server and put it in the web directory.</p>
<p>This is a cumbersome process. The whole point of using hugo is to <em>focus on the
writing</em>, so having to rebuild and reupload for every typo is&hellip; not great. I
wanted to be able to do a simple <code>git push</code>, and not worry about the rest.</p>
<p>The previous &ldquo;manual&rdquo; approach also depends on me having already installed all
necessary software. If you have a dedicated server that you&rsquo;re running yourself,
that&rsquo;s probably okay, you just have to setup once, but I&rsquo;m running this on a VPS
that I&rsquo;m not sure I&rsquo;ll keep forever. The ability to reproduce this exact setup
within minutes actually matters.</p>
<p>After reading a bit on this topic, I decided I would use podman for this. Docker would
work just as nicely (any containerization software would work, really), but I decided
on podman because it can run without a daemon and without root privilages. Also,
it has pretty neat support for kubernetes pods (which are honestly a lot more useful
than I would&rsquo;ve given them credit for before I started this whole project).</p>
<p>That&rsquo;s really why I&rsquo;m writing this. So that you, the reader (or possibly my future self) can
understand the methodology of podman, how to create pods, run containers and configure all
of this automatically, and so that I may demonstrate and share what I&rsquo;ve learnt during
this process.</p>
<h2 id="motivation">Motivation</h2>
<p>Basically, I&rsquo;m already running a web server. Why shouldn&rsquo;t I also host several other services
for friends and family while I&rsquo;m at it? Why shouldn&rsquo;t I make the entire setup reproducable?</p>
<p>Here are some of the services I wanted to self-host:
- Web server: obviously, who doesn&rsquo;t want a website?
- Some git server: having my own place to show off all the things I&rsquo;ve done is certainly really cool.
- Wireguard: Free VPN along with the website? sign me up.
- CI/CD: automatic testing and releases of my software is cool, and also incredibly useful because that&rsquo;s
how I plan to handle the website as well.</p>
<p>Of course, there are always more things I could be self-hosting. So it makes sense to automate
the setup, and that&rsquo;s where podman comes in.</p>
<h2 id="basics-of-podman">Basics of podman</h2>
<p>Before we can get to the exciting stuff, we need to go over what podman is, and how to
use it. Essentially, podman is a container engine: it lets you build and run applications in
a containerized environment. Containers are useful because they provide security,
easy setup and most importantly, reproducability.</p>
<p>I&rsquo;m not going to spend any more time explaining what containers are and why they&rsquo;re
good, that&rsquo;s been done to death already. Right now, what matters is the actual setup,
so let&rsquo;s get on with it.</p>
<p>If you&rsquo;ve used docker before, you&rsquo;ll feel right at home. Many commands are unchanged
from docker, making podman a suitable drop-in replacement. Some things like network
setups tend to be a little different, but that won&rsquo;t matter too much right now.</p>
<p>In case you&rsquo;re unfamiliar with docker, here are some basic commands:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-sh" data-lang="sh"><span style="display:flex;"><span><span style="color:#75715e"># Search for container images (on docker.io unless you configure otherwise)</span>
</span></span><span style="display:flex;"><span>$ podman search &lt;image name&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e"># Download (pull) an image from remote repo</span>
</span></span><span style="display:flex;"><span>$ podman pull &lt;image name&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e"># list the images you have pulled.</span>
</span></span><span style="display:flex;"><span>$ podman images
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e"># run a container.</span>
</span></span><span style="display:flex;"><span>$ podman run &lt;image name&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e"># run a container, but with a LOT of flags. I just listed the most useful ones.</span>
</span></span><span style="display:flex;"><span>$ podman run
</span></span><span style="display:flex;"><span> -i <span style="color:#75715e"># interactive, so you can e.g. run a shell in the container</span>
</span></span><span style="display:flex;"><span> -t <span style="color:#75715e"># allocates a tty. useful with -i so that shell completion etc. can work</span>
</span></span><span style="display:flex;"><span> -d <span style="color:#75715e"># opposite of -i, detach and run in the background</span>
</span></span><span style="display:flex;"><span> --port &lt;HOST PORT&gt;:&lt;CONTAINER PORT&gt; <span style="color:#75715e"># port forwarding, for when you need a server.</span>
</span></span><span style="display:flex;"><span> -v &lt;HOST DIR&gt;:&lt;CONT DIR&gt;:&lt;FLAGS&gt; <span style="color:#75715e"># give the container access to some directory</span>
</span></span><span style="display:flex;"><span> &lt;image name&gt;
</span></span><span style="display:flex;"><span> &lt;command&gt; <span style="color:#75715e"># ... want a shell?</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e"># list running containers. add -a to list ALL containers, running or stopped.</span>
</span></span><span style="display:flex;"><span><span style="color:#75715e"># podman ps &lt;-a&gt;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e"># stop a running container.</span>
</span></span><span style="display:flex;"><span>$ podman stop &lt;id&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e"># stopped containers don&#39;t automatically get removed. This command removes it.</span>
</span></span><span style="display:flex;"><span>$ podman rm &lt;id&gt;
</span></span></code></pre></div><h2 id="pods-are-nice">Pods are nice.</h2>
<p>Pods are basically just a collection of containers - multiple programs working
with each other.</p>
<p>Usually, on a server, each application <em>isn&rsquo;t</em> totally separate from each other</p>
<ul>
<li>for my own usecase, I want my git server (e.g. gogs) to automatically build
and update my website whenever I push to its git repository. That means my git
server and web server can&rsquo;t be <em>totally</em> separate, there&rsquo;s some amount of relation.
Pods can help with this.</li>
</ul>
<p>Pods allow you to create a &ldquo;pod&rdquo; containing several containers, sharing resources
with each other, etc. For example, I could run a pod with nginx and gogs running
in seperate containers - then, the nginx server could act as a reverse proxy based
on host name, showing the web page on emin.software, and the git server on
git.emin.software. Nginx redirects to gogs which only binds to <em>the pod&rsquo;s
localhost address</em>, so only nginx can reach it. Likewise, a database server can
be added to the pod only for the git server to use, so that it can&rsquo;t be reached
from the outside the pod - and it is logically grouped along with the rest of the pod.</p>
<p>On top of this, pods can be built purely from a kubernetes-compatible configuration
file, so setting them up is relatively easy.</p>
</span>
</article>
</div>
</main>
</div>
<footer>
<div class="flex flex-col justify-center p-10">
<p class="text-center text-slate-700 dark:text-slate-400">
&copy;
2024
Emin Arslan
</p>
<p class="text-center text-sm text-slate-700 dark:text-slate-400">
Published with <a class="hover:underline hover:decoration-indigo-500 hover:text-indigo-500" href="https://gohugo.io" target="_blank" rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:decoration-indigo-500 hover:text-indigo-500" href="https://github.com/chrede88/qubt" target="_blank" rel="noopener noreferrer">Qubt</a>
</p>
</div>
</footer>
</body>
</html>

View File

@ -45,7 +45,7 @@
<meta property="og:url" content="https://emin.software/posts/setup_p1/">
<meta property="og:site_name" content="haxala1r">
<meta property="og:title" content="My Setup - p1">
<meta property="og:title" content="My Setup ">
<meta property="og:description" content="I go over the things Ive learned about docker, and how Ive used it to host my website.">
<meta property="og:locale" content="en_us">
<meta property="og:type" content="article">
@ -55,7 +55,7 @@
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="My Setup - p1">
<meta name="twitter:title" content="My Setup ">
<meta name="twitter:description" content="I go over the things Ive learned about docker, and how Ive used it to host my website.">
@ -147,13 +147,13 @@
<div class="justify-left mx-auto mt-8 flex max-w-screen-md px-4">
<article>
<h1 class="text-4xl font-extrabold text-slate-700 dark:text-slate-200">
My Setup - p1
My Setup
</h1>
<h2 class="mt-4 text-2xl text-slate-500 dark:text-slate-400">
Containers!
Containers! Docker!
</h2>
<div class="mb-4 mt-2 text-sm text-slate-500 dark:text-slate-400">
Oct 25, 2024 - 5 minute read
Oct 25, 2024 - 6 minute read
</div>
@ -261,6 +261,35 @@ but that&rsquo;s hardly elegant.</p>
<code>compose.yaml</code> file, and define containers, ports, volumes, secrets all inside
this file. Then, when you run <code>docker compose up</code> this configuration is read,
and all of it is processed as you would want it to.</p>
<p>e.g you might have this for starting a web server on port 3000:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#f92672">services</span>:
</span></span><span style="display:flex;"><span> <span style="color:#f92672">web</span>:
</span></span><span style="display:flex;"><span> <span style="color:#f92672">image</span>: <span style="color:#e6db74">&#34;nginx&#34;</span>
</span></span><span style="display:flex;"><span> <span style="color:#f92672">ports</span>:
</span></span><span style="display:flex;"><span> - <span style="color:#ae81ff">3000</span>:<span style="color:#ae81ff">80</span>
</span></span></code></pre></div><p>Or you could even have <em>two</em> servers, like, a gogs and a web server!</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#f92672">services</span>:
</span></span><span style="display:flex;"><span> <span style="color:#f92672">web</span>:
</span></span><span style="display:flex;"><span> <span style="color:#f92672">image</span>: <span style="color:#e6db74">&#34;nginx&#34;</span>
</span></span><span style="display:flex;"><span> <span style="color:#f92672">ports</span>:
</span></span><span style="display:flex;"><span> - <span style="color:#ae81ff">80</span>:<span style="color:#ae81ff">80</span>
</span></span><span style="display:flex;"><span> <span style="color:#f92672">gogs-haha</span>:
</span></span><span style="display:flex;"><span> <span style="color:#f92672">image</span>: <span style="color:#e6db74">&#34;gogs/gogs&#34;</span>
</span></span><span style="display:flex;"><span> <span style="color:#f92672">ports</span>:
</span></span><span style="display:flex;"><span> - <span style="color:#ae81ff">3000</span>:<span style="color:#ae81ff">3000</span>
</span></span><span style="display:flex;"><span> - <span style="color:#ae81ff">3022</span>:<span style="color:#ae81ff">22</span>
</span></span></code></pre></div><p>See how we got multiple services to run, very very easily? Isn&rsquo;t that just
really nice? You can just keep adding stuff. And compose even sets up dns for
these containers! That means, for example, you can have your web server act as
a reverse proxy by having it access http://gogs-haha:3000 in the above config!
It just works!</p>
<p>Of course, you can add volumes to tie it all, and &lsquo;secrets&rsquo; to manage sensitive
files (like keys and certificates). I won&rsquo;t go into those here though.</p>
<h1 id="conclusion">Conclusion</h1>
<p>Docker and Docker Compose are a lot more useful than my younger self would have
given them credit for. It was really fun learning about them, and hopefully I&rsquo;ll
use this knowledge in the future.</p>
<p>Thank you for reading.</p>
</span>
</article>

View File

@ -3,10 +3,10 @@
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>https://emin.software/posts/</loc>
<lastmod>2024-10-28T23:41:06+03:00</lastmod>
<lastmod>2024-10-25T23:11:17+03:00</lastmod>
</url><url>
<loc>https://emin.software/</loc>
<lastmod>2024-10-28T23:41:06+03:00</lastmod>
<lastmod>2024-10-25T23:11:17+03:00</lastmod>
</url><url>
<loc>https://emin.software/posts/setup_p1/</loc>
<lastmod>2024-10-25T23:11:17+03:00</lastmod>