---
# You can also start simply with 'default'
theme: seriph
# random image from a curated Unsplash collection by Anthony
# like them? see https://unsplash.com/collections/94734566/slidev
background: https://cover.sli.dev
# some information about your slides (markdown enabled)
title: Welcome to Slidev
info: |
  ## Slidev Starter Template
  Presentation slides for developers.

  Learn more at [Sli.dev](https://sli.dev)
# apply unocss classes to the current slide
class: text-center
# https://sli.dev/features/drawing
drawings:
  persist: false
# slide transition: https://sli.dev/guide/animations.html#slide-transitions
transition: slide-left
# enable MDC Syntax: https://sli.dev/features/mdc
mdc: true
# open graph
# seoMeta:
#  ogImage: https://cover.sli.dev
---

# Demystifying Docker

Mike Conrad - SCS 2025

<div @click="$slidev.nav.next" class="mt-12 py-1 flex justify-center flex-col">
  <!-- Press Space for next page <carbon:arrow-right /> -->
  Follow along
  <p><a href="https://hackanooga.com/scs">https://hackanooga.com/scs</a></p>
  <small>Includes slide deck, and repo with examples</small>
  <img src="./images/talk.jpg" width="200">
</div>

<div class="abs-br m-6 text-xl">
  <button @click="$slidev.nav.openInEditor()" title="Open in Editor" class="slidev-icon-btn">
    <carbon:edit />
  </button>
  <a href="https://git.hackanooga.com/mikeconrad/demystifying-docker" target="_blank" class="slidev-icon-btn">
    <carbon:logo-github />
  </a>
</div>

<!--
The last comment block of each slide will be treated as slide notes. It will be visible and editable in Presenter Mode along with the slide. [Read more in the docs](https://sli.dev/guide/syntax.html#notes)
-->

---
transition: fade-out
layout: statement
background: ./images/pexels-markusspiske-1089438.jpg
---
# The 3 universal constants in programming
<v-click>
<h2>1) The speed of light</h2>
</v-click>
<v-click>
<h2>2) "It's more complicated than you think"</h2>
</v-click>
<v-click>
<h2>3) "It works on my machine"</h2>
<br />
<small>Source: <a href="https://www.linkedin.com/posts/robertroskam_the-3-universal-constants-in-programming-activity-7339260450074775553-ofik?utm_source=share&utm_medium=member_desktop&rcm=ACoAACZXneYB_uWiOE0T9VO3caUkn7m0ZMrRS_o">Some random guy on the internet</a></small>
</v-click>

---
transition: fade-out
layout: center
---

<img src="./images/docker-meme.jpg" width="300"/>


---
transition: fade-out
layout: image-right
image: ./images/pexels-markusspiske-1089438.jpg
---

# Who is this for?

## About you
- Some experience with Docker/containers
- Familiarity with Linux/BASH/zsh, etc
- Want to better understand how containers work
- Want to learn new techniques for automation

---
transition: fade-out
layout: image-left
image: ./images/pexels-joshsorenson-1714208.jpg
---

## Follow Along
<small>Visit the link to check out the sample Git repository.</small>

**Example Repo** - https://hackanooga.com/scs

**Prerequisites**
- Docker Engine (Linux) or Docker Desktop (Windows/MacOS)
- VSCode
- Git
- yarn, npm or pnpm (for viewing slides)

  ### VSCode plugins
  - [Official Docker Plugin](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker)
  - [Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
  - [Container Tools](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-containers)



---
transition: fade-out
layout: center
---

## Common Use cases for containers
- Reproducible dev environments
- Testing in CI/CD environments
- Better "Portability" of application code
- Snapshot of application code at specific point in time



---
transition: fade-out
layout: center
---

## How we use containers

- PR builds (Preview Environments).  
<br />
<br />
### Allows us to 
- Test changes in isolated environments
- Simplify complex dev environment setups
  - (frontend/backend services, databases, object storage, etc)

<!--A single VM in the cloud running `Docker Compose` with `Traefik` and `Sablier` allows us to have multiple ephemeral preview environments running at any given time.-->
---
transition: fade-out
layout: center
---

## Containers vs Virtual Machines

| Feature          | VM             | Container        |
|------------------|----------------|------------------|
| Boot time        | Minutes        | Seconds          |
| Resource usage   | Heavy          | Lightweight      |
| Isolation        | Strong         | Process-level    |
| Portability      | Medium         | Very High        |

In reality we use containers and vm's together.  Containers run inside of VM's for better security and isolation, especially in cloud and multi tenant environments.

---
transition: fade-out
layout: center
---

## What is Docker?

- Written in GO
- Uses Client/Server model with REST API (`docker cli` and `dockerd`)
- Eco system of tools (Compose, Swarm, etc)
- Public Image Registry (Dockerhub)
- Docker client typically runs on same machine as server but doesn't have to

---
transition: fade-out
layout: center
---
## What is Docker?

- A tool to build and run containers
- Containers are exclusive to Linux
- Docker engine runs containers using Linux features like:
  - Namespaces
  - cgroups
  - Union file systems
- Container runs from an image layered with base image and application code

---
transition: fade-out
layout: center
---

## Docker Architecture

Docker CLI (Client) <-- REST API --> Docker Engine (Server)

<img src="https://docs.docker.com/get-started/images/docker-architecture.webp" width="700" />

[https://docs.docker.com/get-started/docker-overview/]

---
transition: fade-out
layout: center
---

## Docker Under the Hood

- **Namespaces**: isolate PID, net, mount, etc.
- **cgroups**: control CPU, memory, IO
- **UnionFS**: layered filesystem (OverlayFS)
<!-- 
  Overlayfs is the default.  This allows Docker to use a layered approach.  In this example the bottom layer or lowerdir is the "filesytem" from the image.  The upperdir is the container filesystem (not persisted by default) and the merged is volume/bind mounts. 
-->

![UnionFS diagram](https://docs.docker.com/engine/storage/drivers/images/overlay_constructs.webp)

---
transition: fade-out
layout: two-cols-header
---

<div class="flex items-center flex-col">
<h1 class="ml-5">Bind/Volume Mounts</h1>

<p>2 most common storage mechanisms<br />Different use cases and security implications</p>
</div>
::left::
## Bind Mounts

- Created/managed by user.
- Files from host mounted directly into container.
- Container processes can modify files on host system.
- Bind mounts are strongly tied to the host.
- Best for things like dev containers.

::right::


## Volume mounts
- Created/managed by Docker Daemon.
- Data is stored on host filesystem.
- Used for persistent data.

<!--
  It is possible to modify the data directly via normal tools but unsupported and can cause unintended side-effects due to the overlayfs storage driver.
  An example would be creating a postgres volume for persistent database storage.
-->
---
transition: fade-out
layout: center
image: 'https://unsplash.com/collections/oGE7TYSLt3I/software-development
equal: false
left: false
---

## Bind Mount Example
```bash
$ docker run --mount type=bind,src=/home/mikeconrad/projects/example/app,dst=/app,ro nginx # ro for ReadOnly
$ docker run --volume /home/mikeconrad/projects/example/app:/app nginx
```
<!-- https://docs.docker.com/engine/storage/bind-mounts/ -->

<!-- 
These terms are oftentimes used interchangebly and can be confusing but it is important to understand the difference.
You need to be careful when using bind mounts because by default, the processes running in the container will have read/write access to your filesystem.  
This could cause some issues if code running inside the container is malicious or is compromised.  
It is also possible to mount the files as read-only so that the container has access to read them but not write.  This is better for security.  
Bind mounts also "overwrite" the container/image filesystem layers.  So for example mounting ./some-files/test:/etc/passwd would overwrite the /etc/passwd file in the container 
The directory inside the container does not need to exist for this to work.  If the directory does not exist inside of the container filesystem it will be created with the contents.
-->


---
transition: fade-out
layout: center
---

## Volume Mount Example
```bash
$ docker run --name postgrestest \
   --mount type=volume,src=postgresData,dst=/var/lib/postgresql/data \
   -e POSTGRES_PASSWORD=postgres \ 
   --rm postgres:16 

$ docker run --name postgrestest \
    --volume postgresData:/var/lib/postgresql/data \
    -e POSTGRES_PASSWORD=postgres \
    --rm postgres:16 
```
```bash
$ docker volume inspect postgresData
[
    {
        "CreatedAt": "2025-06-08T10:39:12-04:00",
        "Driver": "local",
        "Labels": null,
        "Mountpoint": "/var/lib/docker/volumes/postgresData/_data",
        "Name": "postgresData",
        "Options": null,
        "Scope": "local"
    }
]
```

- Docker creates a volume named postgresData and mounts that directory inside the container.
<!-- https://docs.docker.com/engine/storage/bind-mounts/ -->


---
transition: fade-out
layout: center
---

## Anatomy of a Dockerfile

```dockerfile
FROM node:22-slim
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]
```
```bash
mikeconrad@pop-os:~/projects/demystifying-docker/examples/react
$ docker build -t react-app .
```


- Starts with a base image
- Copy files and install deps
- Set default command

---
transition: fade-out
layout: center
---

## Multi Stage builds

```dockerfile
# Stage 1 - Define Base image
FROM node:22-alpine AS base
# Stage 2 Install dependencies
FROM base AS install-deps
WORKDIR /app
COPY package*.json /app/
RUN yarn
# Stage 3 Development
FROM install-deps AS develop
WORKDIR /app
COPY . .
ENTRYPOINT ["yarn", "dev", "--host=0.0.0.0"]
EXPOSE 5173
```

```bash
$ docker build -t react .
$ docker run --rm -p 5173:5173 react
```
<!--
  Run docker image and demonstrate dev container functionality.  Attach to the running container
  via VSCode extension and make changes to code.  Note that it updates in real time in the browser.
  Kill the container and start a new one.  Note that the files do not persist.  Need volume/bind mounts
  For that.
-->
---
transition: fade-out
layout: center
---

## What is Docker Compose?

- Define multi-container apps in one file
- Great for local dev and staging (and production!)
- Glue together multiple services with networking

---
transition: fade-out
layout: center
---

## Q/A

-

---
transition: fade-out
layout: center
---

## Resources
- [Slide Deck (including examples)](https://git.hackanooga.com/mikeconrad/demystifying-docker)
- [DocketProxy (Docker socket proxy)](https://git.hackanooga.com/mikeconrad/docketproxy)
- [SlimToolkit (Optimize and secure containers)](https://github.com/slimtoolkit/slim)

## VSCode plugins
- [Official Docker Plugin](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker)
- [Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
- [Container Tools](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-containers)