We just created such basic docker compose yaml file with description of two services front end and API.
And now let's using Docker compose command, try to run both containers front end 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.yaml file and both folders API and front end here.
Please type following command Docker compose up.
Let's go ahead and see what will happen.
Also notice that you are 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
Yaml file is located.
Afterwards Docker compose started build process for the front end 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 and now let me scroll to the very beginning of this output and explain to
you what happened next.
After Docker Compose started building front end application so it reused few cached layers.
For instance this layer or this layer or this layer, but on 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 NPM install command and node modules
folder was added in the front end 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 brand new layer here on this tab.
Afterwards it exported resulting layers to the image and here is Sha hash of resulting front end image
and name of it is images dash gallery underscore front end.
This name was chosen by Docker compose automatically images dash gallery is name of the folder where
docker compose yaml file is located.
It is name of our project folder images gallery and after underscore it added name of the service that
is being built and name of the service is front end.
That's what we defined here in the docker.
Compose Yaml file.
Here is this service name front end.
All right, front end image was built and afterwards you see some additional outputs from Docker compose
like successfully build image with such ID and also you see warning image for service.
Front end was built because it did not already exist.
To rebuild this image you must use command, Docker, compose, build or Docker.
Compose up dash, dash, build and you need to perform rebuild of Docker compose services.
If for instance, you install additional packages in the front end application and package, the Json
file and package dislodged 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 Docker file for the API service.
And notice that here it reused all cached layers starting from the step number two till the step number
seven because we did not modify anything in the folder.
That's why it was able to reuse even this layer for copy step.
No files were modified in the folder.
After that it exported layers to resulting image and here is resulting Sha hash of the API image.
And here is name of the resulting image images.
Dash gallery underscore API and approach for the naming of this image is the same as for front end API.
Here is service name defined here in the Docker compose file.
Here it is and images gallery is name of the folder where we run Docker compose up command.
Great.
Also you see warning that the image for the API service was built because there was no previously built
image and you could.
Same as for front end rebuild API service using Docker, compose, build or Docker compose up dash dash,
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 front end one and creating images
gallery API one.
And on those steps, Docker compose creates actually new containers based on the previously built images.
And it automatically gives such names to those containers.
Images Dash gallery front end one and images gallery one.
Afterwards it attached to standard output of images gallery front end one and images gallery one 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 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 front end container.
And we see finally the development server has started compiled successfully.
It means that React scripts successfully created 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 see that application is available.
Let's search here for something.
For instance, phone.
And get results.
It means that both front end and API service work as expected.
They are running using Docker compose.
And here basically I see log additional log that comes from the 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 EC2 containers.
And here are names of those containers Images Gallery API one and images gallery front end one.
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 front end.
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.