Update screenshots and docs to latest versions

Signed-off-by: Michael Irwin <mikesir87@gmail.com>
This commit is contained in:
Michael Irwin
2022-11-22 23:13:08 -05:00
parent 726bfd126b
commit b6ea4168d4
13 changed files with 112 additions and 223 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 105 KiB

After

Width:  |  Height:  |  Size: 238 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 126 KiB

After

Width:  |  Height:  |  Size: 282 KiB

View File

@@ -12,35 +12,18 @@ So, how do we get started?
## Installing Docker Compose
If you installed Docker Desktop/Toolbox for either Windows or Mac, you already have Docker Compose!
Play-with-Docker instances already have Docker Compose installed as well. If you are on
a Linux machine, you will need to install Docker Compose using
[the instructions here](https://docs.docker.com/compose/install/).
After installation, you should be able to run the following and see version information.
```bash
docker-compose version
```
If you installed Docker Desktop for Windows, Mac, or Linux you already have Docker Compose!
Play-with-Docker instances already have Docker Compose installed as well. If you are on
another system, you can install Docker Compose using [the instructions here](https://docs.docker.com/compose/install/).
## Creating our Compose File
1. At the root of the app project, create a file named `docker-compose.yml`.
1. In the compose file, we'll start off by defining the schema version. In most cases, it's best to use
the latest supported version. You can look at the [Compose file reference](https://docs.docker.com/compose/compose-file/compose-file-v3/)
for the current schema versions and the compatibility matrix.
1. In the compose file, we'll start off by defining a list of services (or containers) we want to run as part of our application.
```yaml
version: "3.8"
```
1. Next, we'll define the list of services (or containers) we want to run as part of our application.
```yaml hl_lines="3"
version: "3.8"
services:
```
@@ -59,74 +42,52 @@ docker run -dp 3000:3000 \
-e MYSQL_USER=root \
-e MYSQL_PASSWORD=secret \
-e MYSQL_DB=todos \
node:12-alpine \
sh -c "yarn install && yarn run dev"
```
If you are using PowerShell then use this command.
```powershell
docker run -dp 3000:3000 `
-w /app -v "$(pwd):/app" `
--network todo-app `
-e MYSQL_HOST=mysql `
-e MYSQL_USER=root `
-e MYSQL_PASSWORD=secret `
-e MYSQL_DB=todos `
node:12-alpine `
node:18-alpine \
sh -c "yarn install && yarn run dev"
```
1. First, let's define the service entry and the image for the container. We can pick any name for the service.
The name will automatically become a network alias, which will be useful when defining our MySQL service.
```yaml hl_lines="4 5"
version: "3.8"
```yaml hl_lines="2 3"
services:
app:
image: node:12-alpine
image: node:18-alpine
```
1. Typically, you will see the command close to the `image` definition, although there is no requirement on ordering.
So, let's go ahead and move that into our file.
```yaml hl_lines="6"
version: "3.8"
```yaml hl_lines="4"
services:
app:
image: node:12-alpine
image: node:18-alpine
command: sh -c "yarn install && yarn run dev"
```
1. Let's migrate the `-p 3000:3000` part of the command by defining the `ports` for the service. We will use the
[short syntax](https://docs.docker.com/compose/compose-file/compose-file-v3/#short-syntax-1) here, but there is also a more verbose
[long syntax](https://docs.docker.com/compose/compose-file/compose-file-v3/#long-syntax-1) available as well.
```yaml hl_lines="7 8"
version: "3.8"
[short syntax](https://docs.docker.com/compose/compose-file/#short-syntax-2) here, but there is also a more verbose
[long syntax](https://docs.docker.com/compose/compose-file/#long-syntax-2) available as well.
```yaml hl_lines="5 6"
services:
app:
image: node:12-alpine
image: node:18-alpine
command: sh -c "yarn install && yarn run dev"
ports:
- 3000:3000
```
1. Next, we'll migrate both the working directory (`-w /app`) and the volume mapping (`-v "$(pwd):/app"`) by using
the `working_dir` and `volumes` definitions. Volumes also has a [short](https://docs.docker.com/compose/compose-file/compose-file-v3/#short-syntax-3) and [long](https://docs.docker.com/compose/compose-file/compose-file-v3/#long-syntax-3) syntax.
the `working_dir` and `volumes` definitions. Volumes also has a [short](https://docs.docker.com/compose/compose-file/#short-syntax-4) and [long](https://docs.docker.com/compose/compose-file/#long-syntax-4) syntax.
One advantage of Docker Compose volume definitions is we can use relative paths from the current directory.
```yaml hl_lines="9 10 11"
version: "3.8"
```yaml hl_lines="7 8 9"
services:
app:
image: node:12-alpine
image: node:18-alpine
command: sh -c "yarn install && yarn run dev"
ports:
- 3000:3000
@@ -137,12 +98,10 @@ docker run -dp 3000:3000 `
1. Finally, we need to migrate the environment variable definitions using the `environment` key.
```yaml hl_lines="12 13 14 15 16"
version: "3.8"
```yaml hl_lines="10 11 12 13 14"
services:
app:
image: node:12-alpine
image: node:18-alpine
command: sh -c "yarn install && yarn run dev"
ports:
- 3000:3000
@@ -167,46 +126,31 @@ docker run -d \
-v todo-mysql-data:/var/lib/mysql \
-e MYSQL_ROOT_PASSWORD=secret \
-e MYSQL_DATABASE=todos \
mysql:5.7
```
If you are using PowerShell then use this command.
```powershell
docker run -d `
--network todo-app --network-alias mysql `
-v todo-mysql-data:/var/lib/mysql `
-e MYSQL_ROOT_PASSWORD=secret `
-e MYSQL_DATABASE=todos `
mysql:5.7
mysql:8.0
```
1. We will first define the new service and name it `mysql` so it automatically gets the network alias. We'll
go ahead and specify the image to use as well.
```yaml hl_lines="6 7"
version: "3.8"
```yaml hl_lines="4 5"
services:
app:
# The app service definition
mysql:
image: mysql:5.7
image: mysql:8.0
```
1. Next, we'll define the volume mapping. When we ran the container with `docker run`, the named volume was created
automatically. However, that doesn't happen when running with Compose. We need to define the volume in the top-level
`volumes:` section and then specify the mountpoint in the service config. By simply providing only the volume name,
the default options are used. There are [many more options available](https://docs.docker.com/compose/compose-file/compose-file-v3/#volume-configuration-reference) though.
```yaml hl_lines="8 9 10 11 12"
version: "3.8"
the default options are used. There are [many more options available](https://docs.docker.com/compose/compose-file/#volumes-top-level-element) though.
```yaml hl_lines="6 7 8 9 10"
services:
app:
# The app service definition
mysql:
image: mysql:5.7
image: mysql:8.0
volumes:
- todo-mysql-data:/var/lib/mysql
@@ -216,14 +160,12 @@ docker run -d `
1. Finally, we only need to specify the environment variables.
```yaml hl_lines="10 11 12"
version: "3.8"
```yaml hl_lines="8 9 10"
services:
app:
# The app service definition
mysql:
image: mysql:5.7
image: mysql:8.0
volumes:
- todo-mysql-data:/var/lib/mysql
environment:
@@ -238,11 +180,9 @@ At this point, our complete `docker-compose.yml` should look like this:
```yaml
version: "3.8"
services:
app:
image: node:12-alpine
image: node:18-alpine
command: sh -c "yarn install && yarn run dev"
ports:
- 3000:3000
@@ -256,7 +196,7 @@ services:
MYSQL_DB: todos
mysql:
image: mysql:5.7
image: mysql:8.0
volumes:
- todo-mysql-data:/var/lib/mysql
environment:
@@ -274,41 +214,40 @@ Now that we have our `docker-compose.yml` file, we can start it up!
1. Make sure no other copies of the app/db are running first (`docker ps` and `docker rm -f <ids>`).
1. Start up the application stack using the `docker-compose up` command. We'll add the `-d` flag to run everything in the
1. Start up the application stack using the `docker compose up` command. We'll add the `-d` flag to run everything in the
background.
```bash
docker-compose up -d
docker compose up -d
```
When we run this, we should see output like this:
```plaintext
Creating network "app_default" with the default driver
Creating volume "app_todo-mysql-data" with default driver
Creating app_app_1 ... done
Creating app_mysql_1 ... done
[+] Running 3/3
⠿ Network app_default Created 0.0s
⠿ Container app-mysql-1 Started 0.4s
⠿ Container app-app-1 Started 0.4s
```
You'll notice that the volume was created as well as a network! By default, Docker Compose automatically creates a
network specifically for the application stack (which is why we didn't define one in the compose file).
1. Let's look at the logs using the `docker-compose logs -f` command. You'll see the logs from each of the services interleaved
1. Let's look at the logs using the `docker compose logs -f` command. You'll see the logs from each of the services interleaved
into a single stream. This is incredibly useful when you want to watch for timing-related issues. The `-f` flag "follows" the
log, so will give you live output as it's generated.
If you don't already, you'll see output that looks like this...
```plaintext
mysql_1 | 2019-10-03T03:07:16.083639Z 0 [Note] mysqld: ready for connections.
mysql_1 | Version: '5.7.27' socket: '/var/run/mysqld/mysqld.sock' port: 3306 MySQL Community Server (GPL)
mysql_1 | 2022-11-23T04:01:20.185015Z 0 [System] [MY-010931] [Server] /usr/sbin/mysqld: ready for connections. Version: '8.0.31' socket: '/var/run/mysqld/mysqld.sock' port: 3306 MySQL Community Server - GPL.
app_1 | Connected to mysql db at host mysql
app_1 | Listening on port 3000
```
The service name is displayed at the beginning of the line (often colored) to help distinguish messages. If you want to
view the logs for a specific service, you can add the service name to the end of the logs command (for example,
`docker-compose logs -f app`).
`docker compose logs -f app`).
!!! info "Pro tip - Waiting for the DB before starting the app"
When the app is starting up, it actually sits and waits for MySQL to be up and ready before trying to connect to it.
@@ -335,16 +274,16 @@ quickly see what container is our app and which container is the mysql database.
## Tearing it All Down
When you're ready to tear it all down, simply run `docker-compose down` or hit the trash can on the Docker Dashboard
When you're ready to tear it all down, simply run `docker compose down` or hit the trash can on the Docker Dashboard
for the entire app. The containers will stop and the network will be removed.
!!! warning "Removing Volumes"
By default, named volumes in your compose file are NOT removed when running `docker-compose down`. If you want to
By default, named volumes in your compose file are NOT removed when running `docker compose down`. If you want to
remove the volumes, you will need to add the `--volumes` flag.
The Docker Dashboard does _not_ remove volumes when you delete the app stack.
Once torn down, you can switch to another project, run `docker-compose up` and be ready to contribute to that project! It really
Once torn down, you can switch to another project, run `docker compose up` and be ready to contribute to that project! It really
doesn't get much simpler than that!