Docker for front end engineers

Anupama H

@anuhosad

Agenda

@anuhosad

  • Web applications lifecycle : build, test & deploy
  • Problems with deployment
  • What is Docker & what does it solve
  • Dockerize an app
  • Test the dockerization
  • Build flow with Docker

Web App Lifecycle

@anuhosad

  • Choose a technology stack & build the app
  • Locally host the app during development
  • Once complete, deploy on servers for QA testing & prod push
  • Manually login to server machine, install required things (like node JS, nginx, git etc.)
  • git clone & start server (maybe using forever js)

Problems with deployment

@anuhosad

  • Need to manually install all libraries required on the server
  • Might not be the same environment as you are used to (mac vs a linux machine)
  • Need to repeat same steps if required to deploy on multiple machines
  • No easy way to rollback a release in case of issues

Problems with deployment

@anuhosad

When the QA person finds a bug

Well, it works on my machine ;-P

What is Docker

@anuhosad

From wikipedia:

Docker is a set of platform-as-a-service products that use OS-level virtualization to deliver software in packages called containers. Containers are isolated from one another and bundle their own software, libraries and configuration files; they can communicate with each other through well-defined channels. "

How does Docker help

@anuhosad

  • Define the exact system configs that you require
  • Define the exact version of libraries that you need to be installed 
  • Describe the set of steps to run to deploy your application
  • Exact same application with same environment will be deployed on all servers

Docker Overview

@anuhosad

APP

Dockerfile

Docker Image

Container

Container

Container

Build

Run

Docker Terminologies

@anuhosad

Dockerfile

Docker Image

Container

Set of instructions on how to build the image. Define the images to include, commands to run etc.

Similar to an exe file, contains the executable app

Instance of an image. The app is running inside the container.

Docker Terminologies (contd..)

@anuhosad

Container

APP

ENV Variables

Libraries

p

o

r

t

Dockerize an app

@anuhosad

Define a Dockerfile at the root of your project folder

@anuhosad

Define each image that you want to be included along with its version

FROM node:10.6.0

Pulls packages from Docker hub

https://hub.docker.com/

Dockerize an app (contd..)

@anuhosad

Add any required environment variables which will be available inside the container

ENV BASEDIR /opt/unbxd/pimento-ui

ARG ASSETS_AWS_KEY_ID

ARG ASSETS_AWS_SECRET_KEY

ENV ASSETS_AWS_KEY_ID ${ASSETS_AWS_KEY_ID}

ENV ASSETS_AWS_SECRET_KEY ${ASSETS_AWS_SECRET_KEY}

Dockerize an app (contd..)

@anuhosad

Specify the commands to run when the image is being created

# Install npm dependecies
RUN npm install --verbose

# Install grunt
RUN npm install -g grunt

# run the release task
RUN NODE_ENV=production grunt release

Dockerize an app (contd..)

@anuhosad

Expose the port on which you can access the application running inside docker

# Make port 8090 available 
# to the world outside this container

EXPOSE 8090

Dockerize an app (contd..)

@anuhosad

Specify the commands to run when the container is launched

# Run app.js when the container launches

CMD ["sh", "-c", "NODE_ENV=production node app.js"]

Dockerize an app (contd..)

@anuhosad

Download docker app for mac / windows: https://www.docker.com/get-started

Test the Dockerfile

Start the docker daemon

Build docker image

@anuhosad

docker build -t <appname> .

Run the below command inside the app directory where the Dockerfile is created

Check that image has been created by running following command

docker image ls

Run docker image

@anuhosad

docker run -d -p 3000:8090 <appname>

Run the docker image using the following command

-d => runs the docker image in the background

-p => maps host port 3000 to container port 8090, so that you can access the docker application at localhost:3000/

docker ps

List docker containers

Other docker commands

@anuhosad

docker exec -it <container ID> bash

Enter into the docker container

docker rmi <image ID>

Remove docker image

docker rm -f <container ID>

Remove docker container

Demo Time

@anuhosad

Build flow with Docker

@anuhosad

Service X

Dockerfile

Container

Build

Run

Web App

Dockerfile
Dockerfile

Service Y

Docker Image

Build

Build

Container

Run

Container

Run

D

o

c

k

e

r

 

H

u

b

S

E

R

V

E

R

S

Versioned images for easier rollback

Docker Image

Docker Image

References

https://www.freecodecamp.org/news/comprehensive-introductory-guide-to-docker-vms-and-containers-4e42a13ee103/

https://docs.docker.com/

@anuhosad

@anuhosad

Docker for front end engineers

By anupama hosad

Made with Slides.com

Docker for front end engineers

  • 1,075

More from anupama hosad