Docker Compose Flow (FullStack)
MD
R
MarkdownQuick 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