Updated get-started: storage GUI, git bash, format issues

Signed-off-by: Craig Osterhout <craig.osterhout@docker.com>
This commit is contained in:
Craig Osterhout 2023-06-02 09:52:41 -07:00
parent d09cbcc1a4
commit 3bdca8594f
No known key found for this signature in database
GPG Key ID: 497A5E49261C73B5
5 changed files with 206 additions and 69 deletions

View File

@ -6,7 +6,7 @@ title: Explore Volumes
The **Volumes** view in Docker Dashboard enables you to easily create and delete volumes and see which ones are being used. You can also see which container is using a specific volume and explore the files and folders in your volumes.
For more information about volumes, see [Use volumes](../../storage/volumes.md)
For more information about volumes, see [Use volumes](../../storage/volumes.md). For examples of how to use volumes in the GUI, see [Persiting the DB](../../get-started/05_persisting_data.md) and [Use bind mounts](../../get-started/06_bind_mounts.md).
By default, the **Volumes** view displays a list of all the volumes. Volumes that are currently used by a container display the **In Use** badge.

View File

@ -14,6 +14,9 @@ To complete this guide, you'll need the following:
- Docker running locally. Follow the instructions to [download and install Docker](../get-docker.md).
- A [Git client](https://git-scm.com/downloads){:target="_blank" rel="noopener" class="_"}.
> **Note**
>
> If you use Windows and want to use Git Bash to run Docker commands, see [Working with Git Bash](../desktop/troubleshoot/topics.md#working-with-git-bash) for syntax differences.
- An IDE or a text editor to edit files. Docker recommends using [Visual Studio Code](https://code.visualstudio.com/){:target="_blank" rel="noopener" class="_"}.
- A conceptual understanding of [containers and images](../get-started/overview.md/#docker-objects).

View File

@ -13,12 +13,10 @@ In the steps below, you will change the "empty text" when you don't have any tod
1. In the `src/static/js/app.js` file, update line 56 to use the new empty text.
```diff
...
- <p className="text-center">No items yet! Add one above!</p>
+ <p className="text-center">You have no todo items yet! Add one above!</p>
...
```
```diff
- <p className="text-center">No items yet! Add one above!</p>
+ <p className="text-center">You have no todo items yet! Add one above!</p>
```
2. Build your updated version of the image, using the same `docker build` command you used in [part 2](./02_our_app.md/#build-the-apps-container-image){:target="_blank" rel="noopener" class="_"}.

View File

@ -32,8 +32,8 @@ What you'll see is that the files created in one container aren't available in a
2. Validate that you can see the output by accessing the terminal in the container. To do so, you can use the CLI or Docker Desktop's graphical interface.
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" data-target="#cli">CLI</a></li>
<li><a data-toggle="tab" data-target="#gui">Docker Desktop</a></li>
<li class="active"><a data-toggle="tab" data-group="cli" data-target="#cli">CLI</a></li>
<li><a data-toggle="tab" data-target="#gui" data-group="gui">Docker Desktop</a></li>
</ul>
<div class="tab-content">
<div id="cli" class="tab-pane fade in active" markdown="1">
@ -103,33 +103,76 @@ As mentioned, you're going to use a volume mount. Think of a volume mount as an
Docker fully manages the volume, including the storage location on disk. You only need to remember the
name of the volume.
### Create a volume and start the container
You can create the volume and start the container using the CLI or Docker Desktop's graphical interface.
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" data-target="#cli2" data-group="cli">CLI</a></li>
<li><a data-toggle="tab" data-target="#gui2" data-group="gui">Docker Desktop</a></li>
</ul>
<div class="tab-content">
<div id="cli2" class="tab-pane fade in active" markdown="1">
1. Create a volume by using the `docker volume create` command.
```console
$ docker volume create todo-db
```
```console
$ docker volume create todo-db
```
2. Stop and remove the todo app container once again in the Dashboard (or with `docker rm -f <id>`), as it is still running without using the persistent volume.
2. Stop and remove the todo app container once again with `docker rm -f <id>`, as it is still running without using the persistent volume.
3. Start the todo app container, but add the `--mount` option to specify a volume mount. Give the volume a name, and mount
it to `/etc/todos` in the container, which captures all files created at the path.
it to `/etc/todos` in the container, which captures all files created at the path. In your Mac or Linux terminal, or in Windows Command Prompt or PowerShell, run the following command:
```console
$ docker run -dp 3000:3000 --mount type=volume,src=todo-db,target=/etc/todos getting-started
```
4. Once the container starts up, open the app and add a few items to your todo list.
<hr>
</div>
<div id="gui2" class="tab-pane fade" markdown="1">
1. Create a volume.
1. Select **Volumes** in Docker Desktop.
2. In **Volumes**, select **Create**.
3. Specify `todo-db` as the volume name, and then select **Create**.
2. Stop and remove the app container.
1. Select **Containers** in Docker Desktop.
2. Select **Delete** in the **Actions** column for the container.
3. Start the todo app container with the volume mounted.
1. Select the search box at the top of Docker Desktop.
2. In the search window, select the **Images** tab.
3. In the search box, specify the container name, `getting-started`.
> **Tip**
>
> Use the search filter to filter images and only show **Local images**.
4. Select your image and then select **Run**.
5. Select **Optional settings**.
6. In **Host path**, specify the name of the volume, `todo-db`.
7. In **Container path**, specify `/etc/todos`.
8. Select **Run**.
<hr>
</div>
</div>
### Verify that the data persists
1. Once the container starts up, open the app and add a few items to your todo list.
![Items added to todo list](images/items-added.png){: style="width: 55%; " }
{: .text-center }
5. Stop and remove the container for the todo app. Use the Dashboard or `docker ps` to get the ID and then `docker rm -f <id>` to remove it.
2. Stop and remove the container for the todo app. Use Docker Desktop or `docker ps` to get the ID and then `docker rm -f <id>` to remove it.
6. Start a new container using the same command from above.
3. Start a new container using the same steps from above.
7. Open the app. You should see your items still in your list.
4. Open the app. You should see your items still in your list.
8. Go ahead and remove the container when you're done checking out your list.
5. Go ahead and remove the container when you're done checking out your list.
You've now learned how to persist data.

View File

@ -6,8 +6,8 @@ keywords: >
description: Using bind mounts in our application
---
In [part 5](./05_persisting_data.md), we talked about and used a volume mount to persist the
data in our database. A volume mount is a great choice when you need somewhere
In [part 5](./05_persisting_data.md), you used a volume mount to persist the
data in your database. A volume mount is a great choice when you need somewhere
persistent to store your application data.
A bind mount is another type of mount, which lets you share a directory from the
@ -17,7 +17,7 @@ changes you make to the code immediately, as soon as you save a file. This means
that you can run processes in the container that watch for filesystem changes
and respond to them.
In this chapter, we'll see how we can use bind mounts and a tool called
In this chapter, you'll see how you can use bind mounts and a tool called
[nodemon](https://npmjs.com/package/nodemon){:target="_blank" rel="noopener"
class="_"} to watch for file changes, and then restart the application
automatically. There are equivalent tools in most other languages and
@ -37,30 +37,38 @@ mounts.
## Trying out bind mounts
Before looking at how we can use bind mounts for developing our application,
let's run a quick experiment to get a practical understanding of how bind mounts
Before looking at how you can use bind mounts for developing your application,
you can run a quick experiment to get a practical understanding of how bind mounts
work.
If you're following these steps on Windows, make sure to use PowerShell and not
command prompt (`cmd`).
1. Open a terminal and make sure your current working directory is in the `app`
1. Open a terminal and change directory to the `app`
directory of the getting started repository.
2. Run the following command to start `bash` in an `ubuntu` container with a
bind mount.
If you are using a Mac or Linux device, then use the following command:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" data-target="#mac-linux">Mac / Linux</a></li>
<li><a data-toggle="tab" data-target="#windows">Windows</a></li>
</ul>
<div class="tab-content">
<div id="mac-linux" class="tab-pane fade in active" markdown="1">
```console
$ docker run -it --mount type=bind,src="$(pwd)",target=/src ubuntu bash
```
If you are using Windows, then use the following command in PowerShell:
<hr>
</div>
<div id="windows" class="tab-pane fade" markdown="1">
Run this command in PowerShell.
```powershell
$ docker run -it --mount "type=bind,src=$pwd,target=/src" ubuntu bash
```
<hr>
</div>
</div>
The `--mount` option tells Docker to create a bind mount, where `src` is the
current working directory on your host machine (`getting-started/app`), and
@ -77,7 +85,7 @@ command prompt (`cmd`).
boot etc lib mnt proc run src sys usr
```
4. Now, change directory in the `src` directory.
4. Change directory to the `src` directory.
This is the directory that you mounted when starting the container. Listing
the contents of this directory displays the same files as in the
@ -97,14 +105,22 @@ command prompt (`cmd`).
Dockerfile myfile.txt node_modules package.json spec src yarn.lock
```
6. Now if you open this directory on the host, you'll see the `myfile.txt` file
has been created in the directory.
6. Open the `app` directory on the host and observe that the `myfile.txt` file
is in the directory.
![File viewer on the host machine that sees the file created from the container](images/bind-mount-newfile.png)
```
├── app/
│ ├── Dockerfile
│ ├── myfile.txt
│ ├── node_modules/
│ ├── pacakge.json
│ ├── spec/
│ ├── src/
│ └── yarn.lock
```
7. From the host, delete the `myfile.txt` file.
8. In the container, list the contents of the `app` directory once more. You'll
see that the file is now gone.
8. In the container, list the contents of the `app` directory once more. Observe that the file is now gone.
```console
root@ac1237fad8db:/src# ls
@ -113,27 +129,43 @@ command prompt (`cmd`).
9. Stop the interactive container session with `Ctrl` + `D`.
And that's all for a brief introduction to bind mounts. This procedure
That's all for a brief introduction to bind mounts. This procedure
demonstrated how files are shared between the host and the container, and how
changes are immediately reflected on both sides. Now let's see how we can use
changes are immediately reflected on both sides. Now you can use
bind mounts to develop software.
## Run your app in a development container
## Development containers
Using bind mounts is common for local development setups. The advantage is that the development machine doesnt need to have all of the build tools and environments installed. With a single docker run command, Docker pulls dependencies and tools.
### Run your app in a development container
The following steps describe how to run a development container with a bind
mount that does the following:
- Mount our source code into the container
- Mount your source code into the container
- Install all dependencies
- Start `nodemon` to watch for filesystem changes
So, let's do it!
You can use the CLI or Docker Desktop to run your container with a bind mount.
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" data-target="#cli">CLI</a></li>
<li><a data-toggle="tab" data-target="#gui">Docker Desktop</a></li>
</ul>
<div class="tab-content">
<div id="cli" class="tab-pane fade in active" markdown="1">
1. Make sure you don't have any `getting-started` containers currently running.
2. Run the following command from the `getting-started/app` directory.
If you are using an Mac or Linux device, then use the following command.
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" data-target="#mac-linux2">Mac / Linux</a></li>
<li><a data-toggle="tab" data-target="#windows2">Windows</a></li>
</ul>
<div class="tab-content">
<div id="mac-linux2" class="tab-pane fade in active" markdown="1">
```console
$ docker run -dp 3000:3000 \
@ -142,7 +174,27 @@ So, let's do it!
sh -c "yarn install && yarn run dev"
```
If you are using Windows, then use the following command in PowerShell.
The following is a breakdown of the command:
- `-dp 3000:3000` - same as before. Run in detached (background) mode and
create a port mapping
- `-w /app` - sets the "working directory" or the current directory that the
command will run from
- `--mount type=bind,src="$(pwd)",target=/app` - bind mount the current
directory from the host into the `/app` directory in the container
- `node:18-alpine` - the image to use. Note that this is the base image for
your app from the Dockerfile
- `sh -c "yarn install && yarn run dev"` - the command. You're starting a
shell using `sh` (alpine doesn't have `bash`) and running `yarn install` to
install packages and then running `yarn run dev` to start the development
server. If you look in the `package.json`, you'll see that the `dev` script
starts `nodemon`.
<hr>
</div>
<div id="windows2" class="tab-pane fade" markdown="1">
Run this command in PowerShell.
```powershell
$ docker run -dp 3000:3000 `
@ -151,22 +203,27 @@ So, let's do it!
sh -c "yarn install && yarn run dev"
```
The following is a breakdown of the command:
- `-dp 3000:3000` - same as before. Run in detached (background) mode and
create a port mapping
- `-w /app` - sets the "working directory" or the current directory that the
command will run from
- `--mount type=bind,src="$(pwd)",target=/app` - bind mount the current
- `--mount "type=bind,src=$pwd,target=/app"` - bind mount the current
directory from the host into the `/app` directory in the container
- `node:18-alpine` - the image to use. Note that this is the base image for
our app from the Dockerfile
- `sh -c "yarn install && yarn run dev"` - the command. We're starting a
your app from the Dockerfile
- `sh -c "yarn install && yarn run dev"` - the command. You're starting a
shell using `sh` (alpine doesn't have `bash`) and running `yarn install` to
install packages and then running `yarn run dev` to start the development
server. If we look in the `package.json`, we'll see that the `dev` script
server. If you look in the `package.json`, you'll see that the `dev` script
starts `nodemon`.
3. You can watch the logs using `docker logs <container-id>`. You'll know you're ready to go
when you see this:
<hr>
</div>
</div>
3. You can watch the logs using `docker logs <container-id>`. You'll know you're
ready to go when you see this:
```console
$ docker logs -f <container-id>
@ -181,7 +238,52 @@ So, let's do it!
When you're done watching the logs, exit out by hitting `Ctrl`+`C`.
4. Now, make a change to the app. In the `src/static/js/app.js` file, on line
<hr>
</div>
<div id="gui" class="tab-pane fade" markdown="1">
1. Make sure you don't have any `getting-started` containers currently running.
2. Run the image with a bind mount.
1. Select the search box at the top of Docker Desktop.
2. In the search window, select the **Images** tab.
3. In the search box, specify the container name, `getting-started`.
> **Tip**
>
> Use the search filter to filter images and only show **Local images**.
4. Select your image and then select **Run**.
5. Select **Optional settings**.
6. In **Host path**, specify the path to the `app` directory on your host machine.
7. In **Container path**, specify `/app`.
8. Select **Run**.
3. You can watch the container logs using Docker Desktop
1. Select **Containers** in Docker Desktop.
2. Select your container name.
You'll know you're ready to go when you see this:
```console
$ docker logs -f <container-id>
nodemon src/index.js
[nodemon] 2.0.20
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): *.*
[nodemon] starting `node src/index.js`
Using sqlite database at /etc/todos/todo.db
Listening on port 3000
```
<hr>
</div>
</div>
### Develop your app with the development container
Update your app on your host machine and see the changes reflected in the container.
1. In the `src/static/js/app.js` file, on line
109, change the "Add Item" button to simply say "Add":
```diff
@ -191,14 +293,14 @@ So, let's do it!
Save the file.
5. Refresh the page in your web browser, and you should see the change reflected
2. Refresh the page in your web browser, and you should see the change reflected
almost immediately. It might take a few seconds for the Node server to
restart. If you get an error, try refreshing after a few seconds.
![Screenshot of updated label for Add button](images/updated-add-button.png){:
style="width:75%;" .text-center}
6. Feel free to make any other changes you'd like to make. Each time you make a
3. Feel free to make any other changes you'd like to make. Each time you make a
change and save a file, the `nodemon` process restarts the app inside the
container automatically. When you're done, stop the container and build your
new image using:
@ -207,28 +309,19 @@ So, let's do it!
$ docker build -t getting-started .
```
Using bind mounts is common for local development setups. The advantage is that
the development machine doesn't need to have all of the build tools and
environments installed. With a single `docker run` command, dependencies and
tools are pulled and ready to go. We'll talk about Docker Compose in a future
step, as this will help simplify our commands (we're already getting a lot of
flags).
## Next steps
At this point, you can persist your database and see changes in your app as you develop without rebuilding the image.
In addition to volume mounts and bind mounts, Docker also supports other mount
types and storage drivers for handling more complex and specialized use cases.
To learn more about the advanced storage concepts, see
[Manage data in Docker](https://docs.docker.com/storage/).
## Next steps
At this point, you can persist your database and respond rapidly to the needs
and demands of your investors and founders. Hooray! But, guess what? You
received great news! Your project has been selected for future development!
In order to prepare for production, you need to migrate your database from
working in SQLite to something that can scale a little better. For simplicity,
you'll keep with a relational database and switch your application to use MySQL.
But, how should you run MySQL? How do you allow the containers to talk to each
other? You'll learn about that next!
In order to prepare your app for production, you need to migrate your database
from working in SQLite to something that can scale a little better. For
simplicity, you'll keep using a relational database and switch your application
to use MySQL. But, how should you run MySQL? How do you allow the containers to
talk to each other? You'll learn about that in the next section.
[Multi container apps](07_multi_container.md){: .button .primary-btn}