Run Angular and dotnet core api app in docker container with docker compose — Part 4 — Docker Compose and The Conclusion

Hello Friends,

In this last part of the series, we will be looking at creating docker compose file which will hold 2 applications that we created in last 2 parts (KnowThatCountryAPI and KnowThatCountryUI) together and run it as a single command with their respective docker files in one container.

Lets create that docker-compose.yaml file at root as below.

version: '3.7'
services: 
    apiservice:
        container_name: ktcapi
        build: 
            context: ./KnowThatCountryAPI
            dockerfile: dockerfile
        ports: 
          - "5005:5005"
    uiservice:
        container_name: ktcui
        build: 
            context: ./KnowThatCountryUI
            dockerfile: dockerfile.UI
        ports: 
          - "5006:80"
        depends_on: 
          - apiservice

Lets dive in.

Each application container is treated as a service so that they can talk to each other. Here we are creating 2 services, apiservice for KnowThatCountryAPI and uiservice as KnowThatCountryUI application.

For each service, we give build instructions.

Here, we are going to use the same dockerfiles that we used to build individual applications so that we can keep this tidy and also if we have to build/test the applications separately, then we don’t have to standup the whole thing. We achieve that using context in docker.

Lets check the API service creation part.

apiservice:
        container_name: ktcapi
        build: 
            context: ./KnowThatCountryAPI
            dockerfile: dockerfile
        ports: 
          - "5005:5005"

Here, we are naming the container as ktcapi, like we did in part 2 of this series. We will be using the same docker file that we created for the API project, hence we set the context of this service by giving the location of the docker file which is ./KnowThatCountryAPI. Now this container image will be created with ./KnowThatCountryAPI as the root.

Then we assign local port 5005 to 5005 inside the container.

Now lets move on to the UI service creation part.

uiservice:
        container_name: ktcui
        build: 
            context: ./KnowThatCountryUI
            dockerfile: dockerfile.UI
        volumes: 
            - ./src:/app2/src
        ports: 
          - "5006:80"

Here, we are naming the container as ktcui, like we did in part 3 of this series. We are setting the context as ./KnowThatCountryUI since our docker file is located there and we can use all of those paths already defined in the docker file. And assign port 5006 on local to port 80 inside the container.

…. and we are done.

Now we ready to launch the application. First we build the whole thing with

docker-compose build

With this command, docker builds both of these services as per the instructions specified in their respective docker files.

Once the services are built, all we have to do is

docker-compose up

This will spin up the containers created in previous command and make them ready to use.

Now if you visit localhost:5006, you should be able to see the application running in docker container.

Hope this was helpful in getting started with angular, .Net core and Docker.

Your feedbacks are always appreciated !!