Communicating with containers on Docker network

Table of contents

Create a backend service
Create an Angular app
Scenario 1: Containers on the same Docker stack
Scenario 2: Containers on different Docker stacks

Say, you’ve an Angular app that talks to a backend service through a network. Both of them are running in separate containers, which can be on the same or different Docker stack(s). You want only the Angular container to be publicly accessible through a port.

Let’s run through some scenarios on how you can achieve this.

We’d need an Angular app and a backend service to begin with.

Create a backend service

Let’s create a very simple backend that will return a greeting message when a /hello endpoint will be called. We’ll use Micronaut to generate this service. Install Micronaut CLI and execute the following command on the terminal.

$mn create-app dev.mflash.guides.greeter.greeter-api --build maven

This will generate a basic Micronaut app with Maven support. Import this app in your favorite IDE.

Create a class for greeting message.

java

1// greeter-api/src/main/java/dev/mflash/guides/greeter/Greeting.java
2
3public class Greeting {
4
5  private String message;
6
7  // constructors, getters, setters, etc
8}

Configure an endpoint, say /hello, that returns a Greeting object.

java

 1// greeter-api/src/main/java/dev/mflash/guides/greeter/GreetingController.java
 2
 3@Controller("/hello")
 4public class GreetingController {
 5
 6  @Get
 7  public Greeting greet(@QueryValue(value = "name", defaultValue = "World") String name) {
 8    return new Greeting(String.format("Hello, %s!", name));
 9  }
10}

To let the Angular app call this endpoint, we’ll have to enable CORS. To do this, edit application.yml file and add the following configuration.

yaml

 1# greeter-api/src/main/resources/application.yml
 2
 3micronaut:
 4  application:
 5    name: greeter-api
 6  server:
 7    port: 8084
 8    cors:
 9      enabled: true
10      configurations:
11        web:
12          allowedOrigins:
13            - http://0.0.0.0:4200

This backend will run on an embedded server on the port 8084 and will accept all the requests coming from http://0.0.0.0:4200.

Edit the Dockerfile in the project root and overwrite it with the following configuration.

dockerfile

 1# greeter-api/Dockerfile
 2
 3FROM maven:3.6.1-jdk-13-alpine as builder
 4WORKDIR /usr/home/greeter
 5COPY . .
 6RUN mvn package
 7
 8FROM adoptopenjdk/openjdk13-openj9:jre-13.0.2_8_openj9-0.18.0-alpine
 9COPY --from=builder /usr/home/greeter/target/greeter-api-*.jar greeter-api.jar
10EXPOSE 8084
11CMD ["java", "-jar", "greeter-api.jar"]

To build a Docker image, execute the following command on the terminal.

docker build -t mflash/greeter-api .

Create an Angular app

For the sake of example, let’s generate a very minimal Angular app with no routing, specifications or external templates. Execute the following command on the terminal.

ng new greeter-ui --minimal --routing=false --style=css --skipTests --inlineStyle --inlineTemplate

Refer to ng new reference for more information on these options.

To call the REST endpoint, we’ll need HttpClientModule. Add it in the root module of the Angular app.

typescript

1// greeter-ui/src/app/app.module.ts
2
3import { HttpClientModule } from '@angular/common/http';
4
5@NgModule({
6  imports: [BrowserModule, HttpClientModule]
7  // declarations, providers, bootstrap, etc
8})
9export class AppModule {}

Create a GreetingService by executing the following command.

ng generate service Greeting

Add a method (getGreeting) to call the backend service.

typescript

 1// greeter-ui/src/app/greeting.service.ts
 2
 3@Injectable({
 4  providedIn: 'root'
 5})
 6export class GreetingService {
 7  constructor(private client: HttpClient) {}
 8
 9  getGreeting() {
10    return this.client.get('/hello?name=Microflash');
11  }
12}

Edit AppComponent to display the greeting message.

typescript

 1// greeter-ui/src/app/app.component.ts
 2
 3@Component({
 4  selector: 'app-root',
 5  template: `
 6    <main>{{ message }}</main>
 7  `,
 8  styles: []
 9})
10export class AppComponent {
11  message: string = 'Hello, stranger!';
12
13  constructor(private greetingService: GreetingService) {}
14
15  ngOnInit(): void {
16    this.getMessage();
17  }
18
19  getMessage() {
20    this.greetingService.getGreeting()
21      .subscribe(response => (this.message = response['message']));
22  }
23}

To serve the production build of this app, we can use Nginx. Create a default.conf file in the root of the Angular app and add the following configuration.

conf

 1# greeter-ui/default.conf
 2
 3server {
 4  listen 4200;
 5
 6  sendfile on;
 7
 8  default_type application/octet-stream;
 9
10  gzip on;
11  gzip_http_version 1.1;
12  gzip_disable "MSIE [1-6]\.";
13  gzip_min_length 256;
14  gzip_vary on;
15  gzip_proxied expired no-cache no-store private auth;
16  gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
17  gzip_comp_level 9;
18  
19  root /usr/share/nginx/html;
20  
21  location / {
22    index index.html index.htm;
23    try_files $uri $uri/ /index.html =404;
24  }
25
26  location /hello {
27    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
28    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
29
30    if ($request_method = 'OPTIONS') {
31      add_header 'Access-Control-Max-Age' 1728000;
32      add_header 'Content-Type' 'text/plain; charset=utf-8';
33      add_header 'Content-Length' 0;
34      return 204;
35    }
36
37    if ($request_method = "POST|GET") {
38      add_header 'Access-Control-Allow-Origin' '*';
39      add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
40    }
41
42    proxy_pass http://0.0.0.0:8084;
43  }
44}

Don’t worry too much about this configuration; it instructs nginx to

listen for any requests at port 4200
serve files from a directory /usr/share/nginx/html
serve index.html at /
redirect the requests coming at /hello to http://0.0.0.0:8084/hello

The last point is important where nginx will serve as a proxy for the backend service.

Create a Dockerfile in the root of the Angular project and add the following.

dockerfile

 1# greeter-ui/Dockerfile
 2
 3# Generate a build
 4FROM node:12-alpine as builder
 5WORKDIR /app
 6COPY . /app
 7RUN yarn
 8RUN yarn build
 9
10# Serve with Nginx
11FROM nginx:1.17-alpine
12RUN rm -rf /usr/share/nginx/html/*
13COPY default.conf /etc/nginx/conf.d/
14COPY --from=builder /app/dist/greeter-ui /usr/share/nginx/html
15EXPOSE 4200
16CMD ["nginx", "-g", "daemon off;"]

Generate the image by running the following command.

docker build -t mflash/greeter-ui .

Scenario 1: Containers on the same Docker stack

Consider the first scenario where the Angular app and the backend service are running on the same Docker stack. Create a compose file and add the following configuration.

yaml

 1# scenario-1-on-the-same-network/docker-compose.yml
 2
 3version: '3'
 4
 5services:
 6  greeter-ui:
 7    image: mflash/greeter-ui
 8    networks:
 9      - greeternet
10    ports:
11      - 4200:4200
12
13  greeter-api:
14    image: mflash/greeter-api
15    networks:
16      - greeternet
17
18networks:
19  greeternet:
20    driver: bridge

Note that only greeter-ui is exposed publicly.

Launch this stack by executing docker-compose up -d and browse to http://localhost:4200. You’ll see the following message displayed on the browser window.

This is the default greeting message; we’re not getting the message from the backend service. A quick look on the Networks tab in Devtools reveals that we’re getting a 502 Bad Gateway for the request at http://0.0.0.0:8084/hello?name=Microflash. That’s because Docker assigns some random host to a service; in this case, it is not 0.0.0.0.

To resolve this issue, open default.conf file and replace the host 0.0.0.0 in the proxy_pass value with the service name you specified in docker-compose.yml (in our case, it’s greeter-api).

conf

 1# greeter-ui/default.conf
 2
 3server {
 4  # other configurations
 5
 6  location /hello {
 7    # other configurations
 8
 9    proxy_pass http://greeter-api:8084;
10  }
11}

Rebuild the greeter-ui image, launch the stack again and browse to http://localhost:4200. You’d see the expected greeting message.

Scenario 2: Containers on different Docker stacks

The service url http://greeter-api:8084 won’t work unless the containers share the same network. For the containers running on different Docker stacks, we can configure them to connect through the same network.

Create a compose file and add the following configuration for the backend service.

yaml

 1# scenario-2-on-different-networks/greeter-api/docker-compose.yml
 2
 3version: '3'
 4
 5services:
 6  greeter-api:
 7    image: mflash/greeter-api
 8    networks:
 9      - greeternet
10
11networks:
12  greeternet:
13    driver: bridge

In this file, we’re specifying the backend service and the network greeternet associated with this stack.

Create another compose file and add the following configuration for the Angular app.

yaml

 1# scenario-2-on-different-networks/greeter-ui/docker-compose.yml
 2
 3version: '3'
 4
 5services:
 6  greeter-ui:
 7    image: mflash/greeter-ui
 8    networks:
 9      - uinet
10    ports:
11      - 4200:4200
12
13networks:
14  uinet:
15    external:
16      name: greeter-api_greeternet

In this file, we’re declaring the Angular app exposed over the port 4200 and the network uinet which is nothing but a reference for greeternet. This will ensure that the services on both the stacks can talk to each other over the network greeternet.

Launch both the stacks with docker-compose up -d and browse to http://localhost:4200. You would see the expected message on the browser window.

References

Source code

communicating-with-containers-on-docker-network