Skip to content

Commit 9c82ee5

Browse files
akashzcoderakashzcoder
committed
docker multistage
1 parent caf0e7c commit 9c82ee5

File tree

1 file changed

+155
-0
lines changed

1 file changed

+155
-0
lines changed

‎blogs/multistage_docker.html

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<title>Akash Singh</title>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
7+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
8+
<style>
9+
body, html {
10+
height: 100%;
11+
font-family: "Inconsolata", sans-serif;
12+
}
13+
.bgimg {
14+
background-position: center;
15+
background-size: cover;
16+
background-image: url("./img/ml.jpg");
17+
min-height: 75%;
18+
}
19+
.menu {
20+
display: none;
21+
}
22+
.container{
23+
width: 80%;
24+
margin: auto;
25+
}
26+
.code {
27+
background-color: #eee;
28+
border-radius: 3px;
29+
font-family: courier, monospace;
30+
padding: 0 3px;
31+
}
32+
.boxed {
33+
border: 1px solid green ;
34+
}
35+
</style>
36+
<body>
37+
<!-- Links (sit on top) -->
38+
<div class="w3-top">
39+
<div class="w3-row w3-padding w3-black">
40+
<div class="w3-col s3">
41+
<a href="https://akashzcoder.github.io" class="w3-button w3-block w3-black">HOME</a>
42+
</div>
43+
<div class="w3-col s3">
44+
<a href="https://akashzcoder.github.io/#about" class="w3-button w3-block w3-black">ABOUT</a>
45+
</div>
46+
<div class="w3-col s3">
47+
<a href="https://akashzcoder.github.io/#resume" class="w3-button w3-block w3-black">RESUME</a>
48+
</div>
49+
<div class="w3-col s3">
50+
<a href="https://akashzcoder.github.io/#academicWriting" class="w3-button w3-block w3-black">BLOGS</a>
51+
</div>
52+
</div>
53+
</div>
54+
<div class="w3-grayscale w3-large">
55+
<!-- About Container -->
56+
<p class="w3-container container" id="about">
57+
<p class="w3-content" style="max-width:700px">
58+
<h5 class="w3-center w3-padding-64"><span class="w3-tag w3-wide">Multi-stage Docker files</span></h5>
59+
</p>
60+
61+
<p class="w3-content" style="max-width:900px">
62+
Multistage docker files are one way to handle large images using multi-stage Dockerfiles.
63+
64+
The problem with the Dcoker image is that they are massive in size! This is because it contains the build tools we don’t need. Also, it contains the source code and intermediate build artifacts again we don't need this, at least not in production.
65+
We could use the RUN command to try and clean the image; delete intermediate build artifacts, uninstall build tools, and delete source code, but that would be tedious. Remember that containers are like cheap, disposable machines; let’s dispose of the build machine and grab a brand new one that has only the runtime installed!
66+
Docker has a neat way to do this; use a single Dockerfile file with distinct sections. An image can be named simply by adding AS at the end of the FROM instruction. Consider the following simplified Dockerfile file:
67+
<code>
68+
<br>
69+
70+
71+
<div class="w3-container container" style="width:500px;height:400 px;border:1px solid #000;">
72+
<b>Dockerfile</b>
73+
<br>
74+
FROM fat-image AS builder
75+
<br>
76+
...
77+
<br>
78+
FROM small-image
79+
<br>
80+
COPY --from=builder /result .
81+
<br>
82+
...
83+
<br>
84+
85+
</div>
86+
</code><br>
87+
<p class="w3-content" style="max-width:900px">
88+
It defines two images, but only the last one will be kept as a result of the docker build command.
89+
The filesystem that has been created in the first image, named builder, is made available to the second
90+
image using the <i>--from</i> argument of the <i>COPY</i> command. It states that the /result folder from the builder
91+
image will be copied to the current working directory of the second image.
92+
This technique allows you to benefit from the tools available in fat-image while getting an image with only the environment defined in the small-image it’s based on. Moreover, you can have many stages in a Dockerfile file when necessary.
93+
<br>Here is an example:
94+
<i>Copied from <a href="https://docs.docker.com/develop/develop-images/multistage-build/">Docker docs</a></i></p>
95+
<div class="w3-container container" style="width:500px;height:1000 px;border:1px solid #000;">
96+
<b>Dockerfile</b><br>
97+
FROM golang:1.7.3<br>
98+
WORKDIR /go/src/github.com/alexellis/href-counter/<br>
99+
RUN go get -d -v golang.org/x/net/html <br>
100+
COPY app.go .<br>
101+
RUN CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -o app .<br>
102+
<br>
103+
FROM alpine:latest <br>
104+
RUN apk --no-cache add ca-certificates<br>
105+
WORKDIR /root/<br>
106+
COPY --from=0 /go/src/github.com/alexellis/href-counter/app .<br>
107+
CMD ["./app"] <br>
108+
</div>
109+
<p class="w3-content" style="max-width:900px">
110+
111+
When I build an image from that multi-stage definition, I get a 91% improvement over the image size!
112+
When you create an image, you want it to be as small as possible for several reasons:
113+
<ul class="w3-content" style="max-width:900px">
114+
<li>Reduce pull and push times</li>
115+
<li>Use a minimum amount of space in the Registry</li>
116+
<li>Use a minimum amount of space on the machines that will run the containers</li>
117+
<li>Use a minimum amount of space on the machine that creates the image</li>
118+
</ul>
119+
<p class="w3-content" style="max-width:900px">
120+
You want to produce small images or if you plan to generate artifacts inside Docker, make sure to use multi-stage Dockerfile files.
121+
</p>
122+
</p>
123+
</p>
124+
125+
126+
</p>
127+
128+
</div>
129+
</div>
130+
</div>
131+
<!-- Footer -->
132+
<footer class="w3-center w3-light-grey w3-padding-48 w3-large">
133+
<p>
134+
Copyright &#x000A9;&nbsp;2020 &#x000B7; Akash Singh
135+
</p>
136+
</footer>
137+
<script>
138+
// Tabbed Menu
139+
function openMenu(evt, menuName) {
140+
var i, x, tablinks;
141+
x = document.getElementsByClassName("menu");
142+
for (i = 0; i < x.length; i++) {
143+
x[i].style.display = "none";
144+
}
145+
tablinks = document.getElementsByClassName("tablink");
146+
for (i = 0; i < x.length; i++) {
147+
tablinks[i].className = tablinks[i].className.replace(" w3-dark-grey", "");
148+
}
149+
document.getElementById(menuName).style.display = "block";
150+
evt.currentTarget.firstElementChild.className += " w3-dark-grey";
151+
}
152+
document.getElementById("myLink").click();
153+
</script>
154+
</body>
155+
</html>

0 commit comments

Comments
 (0)