About Docker Multi-stage building introduced in version 17.05

1. TO MAKE BUILDING EASY!
Milindu Kumarage
Software Engineer
Multi-stage Docker builds

2. A common man app
Let’s talk about a typical web application

3. Back-end Implementation
• Golang
• Needs Golang to compile
Front-end Implementation
• ReactJS
• Needs Yarn and NodeJS to transpile
A typical web app
A common man app

4. Serving static files
Static files, the transpiled html,JS,CSS,
images, etc will be served by NGINX
NGINX Server in the front
A common man app
Proxying API Calls
API calls will be proxied to the Go app

5. A common problem
How we CI/CD this app?

6. • Install NodeJs, Yarn, Golang, etc on CI/CD?
• Use some docker magic?
A common problem

7. A common solution
Let’s use some Docker stuff…

8. One Docker to rule them all?
• Get one Docker, say NodeJS docker.
• Then install Golang and Nginx on it?
Bit from that, bit from this?
• Use NodeJS docker and build the React app, get the build artifacts out
• Use Golang docker and build the API, get the build artifacts out
• Then copy to Nginx docker?
What approach we can use?
A common solution

9. Docker Version 17.05+
Introducing Docker Multi-stage builds
A common solution

10. It is like having multiple Dockers
but in one!
• You can define several stages,
using different Docker base
images.
• You can copy files from one stage
to the next stage
A common solution
Docker Multi-stage builds

11. FROM node:9 AS frontend
WORKDIR /app/web
ADD web .
RUN yarn && yarn build
FROM golang:alpine AS backend
RUN apk add git
WORKDIR /go/src/github.com/agentmilindu/web-api
ADD src .
RUN go get github.com/joho/godotenv github.com/labstack/echo github.com/dgrijalva/jwt-go
RUN go install github.com/agentmilindu/web-api
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=frontend /app/web/build /usr/share/nginx/html
COPY --from=backend /go/bin/web-api /opt/app/api
CMD /opt/app/api

12. Your final docker image will have only the needed files
No NodeJS, No Yarn, No Golang,
Just NGINX, front-end html, JS, CSS, etc and compiled Go app.
Small Docker images!
A common solution

13. Let’s get our hands dirty!
Let’s create a multi-stage Docker
github.com/agentmilindu/A-typical-web-app

14. Thank you