Compare commits

..

3 Commits

Author SHA1 Message Date
3f0d1d77ca Update links to repo 2025-06-13 20:32:13 -04:00
7c6e8a88a3 Add demo on devcontainer 2025-06-13 20:12:08 -04:00
302cc66d55 Restructure and clarify 2025-06-13 16:13:57 -04:00
6 changed files with 54 additions and 18 deletions

View File

@ -1,11 +1,21 @@
# Welcome to [Slidev](https://github.com/slidevjs/slidev)!
# Demystifying Docker
This repo is a work in progress documenting my upcoming presentation for Scenic City Summit 2025. This repo is currently split into 2 parts.
To start the slide show:
## Slide Deck presentaiton
The slides folder contains my slide deck for the event. To view the presentation:
- `pnpm install`
- `pnpm dev`
- visit <http://localhost:3030>
```shell
cd slides
yarn
yarn dev
```
Once everything is done it should open a browser window to http://localhost:3030. I am using [slidev](https://sli.dev) for the slide deck. All of the "slides" are in a single markdown file in the slides directory.
## Code examples
The examples folder contains several Docker examples.
`examples/fullstack` is a basic example containing a backend NodeJS application with a React frontend as well as a Postgres Database. The project is set up so that you can do all development in dev containers. The `node_modules` folder for the backend is isolated from your host system and only exists inside the running container. For this reason, you will need to use a devcontainer in order to be able to get things like Intellisense and typings.
Edit the [slides.md](./slides.md) to see the changes.
Learn more about Slidev at the [documentation](https://sli.dev/).

Binary file not shown.

View File

@ -14,11 +14,16 @@ cp backend/.env.example backend/.env
docker compose up
```
The first time you run `docker compose up` it may take a few minutes as Docker will need to build images for the frontend and backend. Also there are some database migrations and seed data that need to happen. Those are handled by `backend/dev-entrypoint.sh`. This is handled for you automatically since it is baked into the image. You will most likely need to run `sudo docker compose up` or add yourself to the privileged `docker` group (`sudo usermod -aG docker YOUR_USER`) in order for `Traefik` to bind to port 80.
The first time you run `docker compose up` it may take a few minutes as Docker will need to build images for the frontend and backend. Also there are some database migrations and seed data that need to happen. Those are handled by `backend/dev-entrypoint.sh`. This is handled for you automatically since it is baked into the image. Once everything is up you should be able to access the frontend at [http://app.docker.localhost:8888]() and the backend at [http://app.docker.localhost:8888/api]()
![](./homepage.png)
## Developing
When running the `compose` stack, the backend node_modules are isolated from your host system. This is common in dev environment setups. In this case it is advised to use a Dev container. The following video demonstrates starting a dev container by using the VSCode plugin.
<video src="../../assets/open-dev-container.m4v" controls></video>
### Proxying and routes
You will notice that the backend is listening on `http://0.0.0.0:3333/` but the frontend is making requests to `/api/`. This is designed to mimic how you would deploy something like this in production where the backend would be behind a reverse proxy. Traefik has some really nice middleware that allows us to easily tell it to route requests destined for `/api` to `/`. The bit that handles that are these labels:

View File

@ -11,7 +11,6 @@ RUN npm ci
FROM deps AS develop
WORKDIR /app
COPY dev-entrypoint.sh /entrypoint.sh
COPY .env.example /app/.env
RUN chmod +x /entrypoint.sh
RUN cat /entrypoint.sh
ENV NODE_ENV=development

11
slides/README.md Normal file
View File

@ -0,0 +1,11 @@
# Welcome to [Slidev](https://github.com/slidevjs/slidev)!
To start the slide show:
- `pnpm install`
- `pnpm dev`
- visit <http://localhost:3030>
Edit the [slides.md](./slides.md) to see the changes.
Learn more about Slidev at the [documentation](https://sli.dev/).

View File

@ -29,14 +29,12 @@ mdc: true
Mike Conrad - SCS 2025
<div @click="$slidev.nav.next" class="mt-12 py-1 flex" hover:bg="white op-10">
<div @click="$slidev.nav.next" class="mt-12 py-1 flex justify-center flex-col">
<!-- Press Space for next page <carbon:arrow-right /> -->
<div class="ml-auto">
<a href="https://git.hackanooga.com/mikeconrad/demystifying-docker.get">Example Repo<br /> (with slides)</a>
<br />
<br>
<img src="./images/talk.jpg">
</div>
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">
@ -61,8 +59,9 @@ layout: center
## About you
- Some experience with Docker/containers
- Some experience with BASH
- Familiarity with Linux/BASH
- Want to better understand how containers work
- Want to learn new techniques for automation
---
transition: fade-out
@ -70,7 +69,19 @@ layout: center
---
## Follow Along
**Example Repo** - https://git.hackanooga.com/mikeconrad/demystifying-docker
**Example Repo** - https://hackanooga.com/scs
**Prerequisites**
- Docker
- VSCode
- Git
- yarn/npm/pnpm,etc (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