Docker Compose Flow (FullStack)

MD
R
Markdown

Quick sample of using docker compose to start multiple containers based on the yml configuration file.

Simple docker-compose.yml (1 node app, 1 mongo service)

version: "2"
services:
  nodeapp:
    build:
      context: .
      dockerfile: node.dockerfile
    ports:
      - "3000:3000"
    networks:
      - nodeapp-network
  mongonode:
    image: mongo
    networks:
      - nodeapp-network
networks:
  nodeapp-network:
    driver: bridge

Docker Compose in 5 minutes

Create Node App for WebServer (using express generator)

mkdir backend cd backend express . npm install Open URL: http://localhost:3000 Create a new route handler

var express = require('express');
var router = express.Router();
const products = require('./products');

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});
router.use('/products', products);

module.exports = router;

Create a Dockerfile (Dockerfile) from Node LTS 6

FROM node:boron
WORKDIR /usr/src/app
COPY package.json .
RUN npm install
COPY . .
EXPOSE 3000
CMD [ "npm", "start" ]

Create a Docker Ignore (.dockerignore)

node_modules npm-debug.log

Test the container manually

docker build -t nodetest . docker images docker run -d -p 3000:3000 --name nodetest nodetest docker ps Open URL: http://localhost:3000 docker stop nodetest docker rm nodetest docker rmi nodetest

Test the container via Docker Compose YML file

cd .. touch docker-compose.yml ls -la

version: '3'

services:
  product-service:
    build: ./backend
    volumes: 
      - ./backend:/usr/src/app
    ports:
      - 3000:3000  

docker-compose up

Create the Client App

Create an index.html with an inline script (demo purposes) Call the data to the service URL: xhttp.open("GET", "http://cars-service", true);

Example:

function loadCars() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            processData(this);
        }
    };
    xhttp.open("GET", "http://cars-service", true); // the service name declared in the docker compose YML
    // xhttp.open("GET", "http://localhost:3000/products", true); // the service name on local development
    xhttp.send();
}

function processData(json) {                  
    const jsonData = JSON.parse(json.responseText);                     
    var list = '';                        
    for (var i = 0; i < jsonData.product.length; i++) {                
        list += '<li>'+jsonData.product[i]+'</li>';                
    }
    document.getElementById("list").innerHTML = list;
}

(function () {
    loadCars();
})();

Update the docker compose

version: '3'

services:
  cars-service:
    build: ./backend
    volumes: 
      - ./backend:/usr/src/app
    ports:
      - 3000:3000  
  site:
    image: nginx    
    volumes:
      - ./frontend:/usr/share/nginx/html
      - ./frontend/nginx.conf:/etc/nginx/sites-available
    ports:
      - 5000:80
    links:
      - cars-service
    depends_on:
      - cars-service    

docker-compose up

Created on 11/3/2017