DEV Community

Randika Madhushan Perera
Randika Madhushan Perera

Posted on

Docker Hands-On Part 03

#aws #docker #tutorial

03. Handcrafting a Container Image

Introduction

This approach to creating a container image, emphasizes the practicality of incorporating data directly into the image rather than manually mounting it each time a container is started. This method is particularly useful for web deployment, where efficiency and customization are key. The process outlined involves starting with a pre-built HTTPD image and modifying it to suit specific needs.

Step-by-Step Guide to Creating a Handcrafted Container Image

01. Selecting a Base Image: The journey begins with selecting HTTPD as the base image, a popular choice for serving web content.

02. Adding Tools and Data: To customize the container, tools are added to fetch website data from a repository, such as GitHub. This step ensures that the necessary content is directly embedded within the container.

03. Creating the Initial Image: After customizing the template container with the website's data, an image is created from this state, labeled Widget Factory v1.

04. Optimizing the Image: Inspection of the initial image reveals it to be larger than necessary due to residual installation artifacts. By removing these, a cleaner and more efficient image, Web App v2, is produced.

05. Deployment and Testing: Multiple containers are spawned from the optimized v2 image to test and view the final product in action.

The Process Visualized

The creation process visualizes the transition from a generic HTTPD latest version image to a specialized Widget Factory image. The initial modifications result in the v1 image, which is further refined to create the optimized v2 image. This final version is then used to run multiple containers, showcasing the website deployment.

Step 01: Create another container called "webtemplate" using httpd.

$ docker run --name webtemplate -d httpd:latest

$ docker ps -a
CONTAINER ID   IMAGE          COMMAND              CREATED         STATUS         PORTS                                   NAMES
4dadb7c6ca70   httpd:latest   "httpd-foreground"   5 seconds ago   Up 4 seconds   80/tcp                                  webtemplate
Enter fullscreen mode Exit fullscreen mode

Step 02: Get an internal terminal of the webtemplate container.

$ docker exec -it webtemplate bash
Enter fullscreen mode Exit fullscreen mode

Step 03: Update the container and install git.

# apt update && apt install -y git
Enter fullscreen mode Exit fullscreen mode

Step 04: Clone the repo from the GitHub.

Repo Link: https://github.com/RandiakM/content-widget-factory-inc.git

# git clone https://github.com/RandiakM/content-widget-factory-inc.git /tmp/widget-factory-inc

# ls -l /tmp/widget-factory-inc
Enter fullscreen mode Exit fullscreen mode

Step 05: Now we need to set up the htdocs folder. Remove the default apache page and copy our web pages.

root@4dadb7c6ca70:/usr/local/apache2# pwd
/usr/local/apache2

# rm -rf htdocs/index.html

# cp -r /tmp/widget-factory-inc/web/* htdocs

# ls -l htdocs
Enter fullscreen mode Exit fullscreen mode

Step 06: Create an image from the container, we need the container ID.

$ docker ps -a
CONTAINER ID   IMAGE          COMMAND              CREATED             STATUS             PORTS                                   NAMES
4dadb7c6ca70   httpd:latest   "httpd-foreground"   About an hour ago   Up About an hour   80/tcp                                  webtemplate

$ docker commit 4dadb7c6ca70 example/widgetfactory:v1

$ docker images
[ec2-user@ip-172-16-1-10 ~]$ docker images
REPOSITORY              TAG       IMAGE ID       CREATED          SIZE
example/widgetfactory   v1        1676623db0fc   11 seconds ago   277MB
httpd                   latest    59bcd61b45fd   3 weeks ago      167MB
hello-world             latest    d2c94e258dcb   9 months ago     13.3kB
Enter fullscreen mode Exit fullscreen mode

You can see our example/widgetfactory size is large. All this coming from the extra build tools. We need to clean this up.

Step 07: Go to the inside of the container, and need to remove git, web app codes, and remove the cache.

$ docker exec -it webtemplate bash

# rm -rf /tmp/widget-factory-inc

# apt remove git -y && apt autoremove -y && apt clean

# exit
Enter fullscreen mode Exit fullscreen mode

Step 08: Now we need to run docker commit again.

$ docker commit 4dadb7c6ca70 example/widgetfactory:v2

$ docker images
REPOSITORY              TAG       IMAGE ID       CREATED         SIZE
example/widgetfactory   v2        01e2bd60f515   7 seconds ago   187MB
example/widgetfactory   v1        1676623db0fc   7 minutes ago   277MB
httpd                   latest    59bcd61b45fd   3 weeks ago     167MB
Enter fullscreen mode Exit fullscreen mode

Step 09: Remove v1 image and run the v2. Stop the webtemplate.

$ docker rmi example/widgetfactory:v1

$ docker run -d --name web1 -p 8081:80  example/widgetfactory:v2

$ docker ps -a
CONTAINER ID   IMAGE                      COMMAND              CREATED             STATUS             PORTS                                   NAMES
adaf110c7088   example/widgetfactory:v2   "httpd-foreground"   4 seconds ago       Up 3 seconds       0.0.0.0:8081->80/tcp, :::8081->80/tcp   web1
4dadb7c6ca70   httpd:latest               "httpd-foreground"   About an hour ago   Up About an hour   80/tcp                                  webtemplate
53aace921e70   httpd:latest               "httpd-foreground"   4 hours ago         Up 4 hours         0.0.0.0:8080->80/tcp, :::8080->80/tcp   httpd


$ docker stop webtemplate
Enter fullscreen mode Exit fullscreen mode

Step 10: Now in your browser navigate to the public_ip:8081

Top comments (0)

Read next

bgskurono profile image

Golang básico - Comparação de Igualdade

Bruno Gomes -

iamcymentho profile image

YARP vs. Ocelot: Choosing the Right API Gateway in C#

Odumosu Matthew -

abdibrokhim profile image

Step-by-Step Tutorial on Building AI Coding Interviewer with AI/ML API and Integration with Clerk Auth and Deploying to Vercel

Ibrohim Abdivokhidov -

balrajola profile image

Common Mistakes Beginners Make in Coding and How to Avoid Them

Balraj Singh -