[Intro Music]
We just created such a basic 'docker-
compose.yml' file with description
of two services frontend and api.
And now let's using 'docker-compose'
command, try to run both containers
frontend and api. Let's go to the
terminal here, and first we need to
'cd' to the 'images-gallery' folder.
I'll go to the 'Desktop', 'images-
gallery'. Ensure that you also go
to the 'images-gallery' folder, and
here inside you should find 'docker-
compose.yml' file and both folders
'api' and 'frontend'. Here please type
following command 'docker-
compose up'. Let's go ahead and see
what will happen. Also notice that
you're able to run 'docker-compose'
using 'docker-compose up' command.
First Docker has created such
network as 'images-gallery_default',
and notice name here, it matches
with name of the folder where we
run 'docker-compose' command and
where 'docker-compose.yml' file is
located. Afterwards 'docker-compose'
started the 'build' process for the
frontend service, here it is, and
it started from the first step
where it is needed to pull Docker
image called 'node' with corresponding
tag '15.14-alpine' from the Docker
Hub. Docker will go through the
next steps much faster. This way let
me get back to you when 'docker-compose'
will complete its work.
Finally I see such logs. But now
let me scroll to the very beginning
of this output and explain to you
what happened next after 'docker-compose'
started building frontend
application. So it reused few cached
layers, for instance, this layer or
this layer or this layer, but in
this layer notice that it performed
copy operation once again from
scratch. And the reason for that is
that at the moment of the previous
build when we used 'docker build'
command we removed node modules
folder before and afterwards we entered
up 'npm install' command and node
modules folder was added in the
frontend folder in our 'images-
gallery' project. That's why it
wasn't possible to reuse cached
layer and Docker has initiated copy
operation again and created a brand
new layer here on this step.
Afterwards it exported resulting
layers to the image, and here is the
SHA Hash of resulting from an
image and name of it is 'images-
gallery_frontend'. This
name was chosen by 'docker-compose'
automatically. 'images-gallery is
name of the folder where 'docker-compose.yml'
file is located. It is
name of our project folder, 'images-
gallery, and after '_' it
added the name of the service that is
being built, and name of the service
is frontend. That's what we
defined here in the 'docker-compose.yml'
file here with this service
name, frontend. Alright, frontend
image was built. And afterwards you
see some additional outputs from
'docker-compose' like 'Successfully
built' image with such ID; and also
you see the 'WARNING: Image for service
frontend was built because it did
not already exist. To rebuild this
image you must use `docker-
compose build` or `docker-compose up
--build`'; and you need to
perform rebuild of 'docker-compose'
services if for instance, you
install additional packages in the
frontend application, and 'package
.json' file and 'package-lock.json'
files change. Next you see
starting 'Building api' log. And from
this moment 'docker-compose' actually
started building api service. It
also went through all steps defined
in the Dockerfile for the api
service. And notice that here, it
reused all cached layers starting
from the step number 2 till the
step number 7. Because we did
not modify anything in the api
folder, that's why it was able to
reuse even this layer for copy
step. No files were modified in the
'api' folder. After that, it exported
layers to resulting image. And here's
resulting SHA Hash of the api
image. And here was name for the
resulting image, 'images-gallery
_api', and approach for the
naming of this image is the same as
for frontend. 'api' here is service
name defined here in the 'docker-compose'
file, here it is. And 'images-gallery'
is the name of the
folder where we run 'docker-compose
up' command. Great. Also, you see
'WARNING: Image for service api
was built because there was
no previously built image'. And you
could same as for frontend rebuild
api service using 'docker-compose
build', or 'docker-compose up -- build'
command. But notice that
in such case, 'docker-compose' will
rebuild all services defined in the
'docker-compose' file. All right,
next to it, you see such two logs,
'Creating images-gallery_frontend_1',
and 'Creating images-gallery_api_1'
And in those steps 'docker-compose'
creates actually new containers
based on the previously built
images, and it automatically gives
such names to those containers,
'images-gallery_frontend_1',
and 'images-gallery_api_1'.
Afterwards, it attached to standard
output of 'images-gallery_frontend_1',
and 'images-gallery_api_1'
containers in order to produce here
logs that are generated by those
containers. And for instance, here
you see logs that are coming from
the api container. All those logs
are from the api container. And you
see that Flask web server is now
actually running at Port 5050. And
also next to those logs, you see
logs that come from the frontend
container. And we see finally the
development server has started,
'Compiled successfully'. It means
that React screens successfully
greeted development build. And now
I see that same as before React
application is running at Port
3000. Great. Now let's try to
verify whether our application is
accessible or not. Let's go to web
browser and refresh page here. And
I see that application is available.
Let's search here for something, for
instance 'phone', and I get results.
It means that both frontend and api
service work as expected. They are
running using 'docker-compose', and
here basically I see a log,
additional log that comes from the
api container. It tells us that
there was GET request to this api
endpoint. Great. Let's now go to
another tab, and here enter 'docker
ps' in order to see a list of the
running containers. And I see two
containers. And here are names of
those containers, 'images-gallery_
api_1', and 'images-gallery_frontend_1';
and those container names
are no longer random. They were
assigned by 'docker-compose' based on
the folder name, 'images-gallery';
and service name, api, and frontend.
And now of course, if you want
you could stop those containers or
run over again. But the best way to
stop all containers simultaneously
is to use 'docker-compose down'
command. Also, it's possible to
run Docker containers using 'docker-compose'
in background and let's
try all of that after the small pause.
[no audio]