[Intro Music]
We already created Dockerfiles for
frontend and api applications. And
now it's time to create a
'docker-compose' file with
instructions to start both frontend
and api containers. Let's get
started with that. Now there are
two containers frontend and api
running. I could verify that using
'docker ps' command. And now I'll
stop both containers. And
afterwards we'll create a
'docker-compose' file and run them
using 'docker-compose' feature. So
let's stop first container 'docker
stop', and here will be the name of
the container, this one, like that.
Stopping. And let's also stop
second container with such name. In
your case names will be completely
different from mine. Second
container was stopped and now there
are no containers running. And now
let's go to our project. And here
in the root of the 'images-gallery'
folder, ensure that you'll do that
in the root of the 'images-gallery'
folder, please create a new file
called 'docker- compose.yml'. 'yml'
stands for YAML, and that's
extension for 'docker-compose'
file. Notice that VS Code
recognized the type of this file,
this Dockerfile. And again ensure
that name of this file is exactly
like that, 'docker-compose.yml'.
This file is located in the root of
our project because here we will
specify all necessary instructions
to start both api and frontend
services. Let's add instructions
here. There are different versions
of 'docker-compose', and using
'version' keyword we need to set
specific version that you want to
use. And we will use third version
of the 'docker-compose'. On the
next line let's add the services
that we want to run using
'docker-compose'. And at the
moment, we want to run two services
api and frontend. Please add here
'services' keyword. Notice that VS
Code suggests you specific keys for
'docker-compose' file that because
we installed Docker extension, so
'services', here add colon, and
after colon, please move to the
next line and press tab here.
Ensure that tab is pressed. Here we
will add first service, and that is
frontend. 'frontend'. Of course
here you don't see any suggestions
to autocomplete name because this
actual name for the service, you
choose it. Here will be colon.
Let's go to the next line and press
tab once again. And here we need to
add instructions for
'docker-compose', how to start our
frontend application and first
instruction is 'build'. Using this
instruction, we need to tell Docker
where to find necessary Dockerfile
for corresponding custom image,
because 'docker-compose' needs to
know how to build custom images for
frontend and api service. Well,
here for the 'build' key needs to be
path to the folder where Docker
file is located. And here we
describe frontend service. This way
path here will be './frontend',
like that. It is our frontend
folder here, because inside of this
folder, there was corresponding
Dockerfile that we created before.
All right, build instruction was
added. Next, let's add port mapping
using 'ports' instruction. Type 'ports',
colon, go to the next line, here
press Tab, minus, and here I'll
type 3000:3000. Instructions here
will be similar to those that we
used in '-p' publish option when we
run our frontend service
separately. Internal container port
3000 will be mapped to port 3000 on
your local machine. So that's port
instruction. That's it for frontend
service for now. And now let's add
one more service, ensure that you
move to the same level where
frontend key is located, and here
type 'api'. 'api' service needs to
be built using a Dockerfile
located in the 'api' folder. That's
why 'build' keyword will have value
'./api', that is 'api' folder here,
and there was corresponding Dockerfile
inside. Also, let's add here
ports mapping; 'ports:', on the next
line, tab, '-', and here let's
expose port 5050, to the same port
on your local computer, like that.
This is actually it for the first
version of the 'docker-compose'
file. Let's save changes in this
file and next after a small pause
let's try to run both containers -
frontend and api using
'docker-compose' command. I'll see you guys next.
[no audio]