Skip to content

Commit f58631a

Browse files
akashzcoderakashzcoder
authored
Merge pull request #8 from akashzcoder/feature/docker_multistage
Feature/docker multistage
2 parents 334992a + 8225b43 commit f58631a

File tree

1 file changed

+147
-0
lines changed

1 file changed

+147
-0
lines changed

‎blogs/multistage_docker.html

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
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+
<p class="w3-content" style="max-width:900px">
61+
Multistage docker files are one way to handle large images using multi-stage Dockerfiles.
62+
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.
63+
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!
64+
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:
65+
<code>
66+
<br>
67+
<div class="w3-container container" style="width:500px;height:400 px;border:1px solid #000;">
68+
<b>Dockerfile</b>
69+
<br>
70+
FROM fat-image AS builder
71+
<br>
72+
...
73+
<br>
74+
FROM small-image
75+
<br>
76+
COPY --from=builder /result .
77+
<br>
78+
...
79+
<br>
80+
</div>
81+
</code><br>
82+
<p class="w3-content" style="max-width:900px">
83+
It defines two images, but only the last one will be kept as a result of the docker build command.
84+
The filesystem that has been created in the first image, named builder, is made available to the second
85+
image using the <i>--from</i> argument of the <i>COPY</i> command. It states that the /result folder from the builder
86+
image will be copied to the current working directory of the second image.
87+
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.
88+
<br>Here is an example:
89+
<i>Copied from <a href="https://docs.docker.com/develop/develop-images/multistage-build/">Docker docs</a></i>
90+
</p>
91+
<div class="w3-container container" style="width:500px;height:1000 px;border:1px solid #000;">
92+
<b>Dockerfile</b><br>
93+
FROM golang:1.7.3<br>
94+
WORKDIR /go/src/github.com/alexellis/href-counter/<br>
95+
RUN go get -d -v golang.org/x/net/html <br>
96+
COPY app.go .<br>
97+
RUN CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -o app .<br>
98+
<br>
99+
FROM alpine:latest <br>
100+
RUN apk --no-cache add ca-certificates<br>
101+
WORKDIR /root/<br>
102+
COPY --from=0 /go/src/github.com/alexellis/href-counter/app .<br>
103+
CMD ["./app"] <br>
104+
</div>
105+
<p class="w3-content" style="max-width:900px">
106+
When I build an image from that multi-stage definition, I get a 91% improvement over the image size!
107+
When you create an image, you want it to be as small as possible for several reasons:
108+
<ul class="w3-content" style="max-width:900px">
109+
<li>Reduce pull and push times</li>
110+
<li>Use a minimum amount of space in the Registry</li>
111+
<li>Use a minimum amount of space on the machines that will run the containers</li>
112+
<li>Use a minimum amount of space on the machine that creates the image</li>
113+
</ul>
114+
<p class="w3-content" style="max-width:900px">
115+
You want to produce small images or if you plan to generate artifacts inside Docker, make sure to use multi-stage Dockerfile files.
116+
</p>
117+
</p>
118+
</p>
119+
</p>
120+
</div>
121+
</div>
122+
</div>
123+
<!-- Footer -->
124+
<footer class="w3-center w3-light-grey w3-padding-48 w3-large">
125+
<p>
126+
Copyright &#x000A9;&nbsp;2020 &#x000B7; Akash Singh
127+
</p>
128+
</footer>
129+
<script>
130+
// Tabbed Menu
131+
function openMenu(evt, menuName) {
132+
var i, x, tablinks;
133+
x = document.getElementsByClassName("menu");
134+
for (i = 0; i < x.length; i++) {
135+
x[i].style.display = "none";
136+
}
137+
tablinks = document.getElementsByClassName("tablink");
138+
for (i = 0; i < x.length; i++) {
139+
tablinks[i].className = tablinks[i].className.replace(" w3-dark-grey", "");
140+
}
141+
document.getElementById(menuName).style.display = "block";
142+
evt.currentTarget.firstElementChild.className += " w3-dark-grey";
143+
}
144+
document.getElementById("myLink").click();
145+
</script>
146+
</body>
147+
</html>

0 commit comments

Comments
 (0)