Example#3.1: How to create, test, tag, push and pull an Nginx docker image

On Ubuntu Docker host, create an empty directory, `~/example31`

$ mkdir example31
$ cd example31

Create `index.html` and `about.html` inside the `example31` directory

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>example31 - Home</title>
  <h1>This is my Home page</h1>
</head>
<body>
  
</body>
</html>

about.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>example31 - About</title>
  <h1>This is About page</h1>
</head>
<body>
  
</body>
</html>

Try access http://localhost:8080 and http://localhost:8080/about.html.

Create a Dockerfile in the `example31` directory

Dockerfile:

FROM nginx:1.15-alpine

WORKDIR /usr/share/nginx/html

COPY . .

Build a custom nginx image

Inside the example31 directory, run the $ docker build ... command in the following pattern.

$ docker build -t <docker hub username>/<image:tag> <location of Dockerfile>

for example,

$ docker image build -t cpe405/example31:testing .

The command will look for the Dockerfile in the current directory, example31.

Sample output:

Sending build context to Docker daemon  4.096kB
Step 1/3 : FROM nginx:1.15-alpine
 ---> 36f3464a2197
Step 2/3 : WORKDIR /usr/share/nginx/html
 ---> Running in ddbd51209d6a
Removing intermediate container ddbd51209d6a
 ---> 60c5f8b27ab7
Step 3/3 : COPY . .
 ---> 8ad94ec88fbb
Successfully built 8ad94ec88fbb
Successfully tagged cpe405/nginx-alpine-web1:testing

Now try listing docker images.

$ docker image ls
REPOSITORY                        TAG                 IMAGE ID            CREATED              SIZE
cpe405/example31                  testing             8ad94ec88fbb        About a minute ago   18.6MB
nginx                             1.15-alpine         36f3464a2197        4 weeks ago          18.6MB
elasticsearch                     2                   35c9803ff4f4        11 days ago          479MB
nginx                             alpine              36f3464a2197        4 weeks ago          18.6MB

Create a container from the newly create image `cpe405/example31:testing`

$ docker container run -d -p 8081:80 --name nginx-web1 cpe405/example31:testing

Try access http://localhost:8081 and http://localhost:8081/about.html.

Retag the `testing` image to `latest` image (as the release image)

$ docker image tag cpe405/example31:testing cpe405/example31

if we show the image list

$ docker image ls
REPOSITORY                        TAG                 IMAGE ID            CREATED             SIZE
cpe405/example31                  latest              8ad94ec88fbb        10 minutes ago      18.6MB
cpe405/example31                  testing             8ad94ec88fbb        10 minutes ago      18.6MB
nginx                             1.15-alpine         36f3464a2197        4 weeks ago         18.6MB
nginx                             alpine              36f3464a2197        4 weeks ago         18.6MB

Time to push images to Docker Hub

Firstly, login to the Docker Hub:

$ docker login
Login with your Docker ID to push and pull images from Docker Hub. 
If you don't have a Docker ID, head over to https://hub.docker.com to create one.
Username: cpe405
Password: *************
WARNING! Your password will be stored unencrypted in ~/.docker/config.json.
Configure a credential helper to remove this warning. See
https://docs.docker.com/engine/reference/commandline/login/#credentials-store

Login Succeeded

To push the 'testing' image:

$ docker image push cpe405/example31:testing
The push refers to repository [docker.io/potikanond/example31]
ecfceee3b2f2: Pushed
ecbc53aebc27: Pushed
1585039add0a: Pushed
692d855fb28e: Mounted from library/nginx
717b092b8c86: Mounted from library/wordpress
testing: digest: sha256:551ad87fde2c57aeb57c124ec5304083abda4798e74a09c8d21fa0fd2c874c42 size: 1360

And if try pushing the 'latest' image, which is basically the same image with different tag:

# docker image push cpe405/example31
The push refers to repository [docker.io/potikanond/example31]
ecfceee3b2f2: Layer already exists
ecbc53aebc27: Layer already exists
1585039add0a: Layer already exists
692d855fb28e: Layer already exists
717b092b8c86: Layer already exists
latest: digest: sha256:551ad87fde2c57aeb57c124ec5304083abda4798e74a09c8d21fa0fd2c874c42 size: 1360

Create a container from your custom image (by pulling from Docker Hub)

Remove all cpe405/example31 images and containers from local host then create a container from 'cpe405/example31'.

$ docker image rm cpe405/example31
$ docker image rm cpe405/example31:testing
$ docker container run -d -p 8082:80 --name nginx-alpine-web1 cpe405/example31
...

the newly created container will be ready with http://localhost:8082/index.html and http://localhost:8082/about.html

Options: Create an Nginx container with volume mapping

If we already have index.html and about.html file in the current directory, we can create an Nginx container with Bind Mount using the following command:

$ docker container run -d -p 8080:80 --name example31-vol -v $(pwd):/usr/share/nginx/html nginx:alpine

This will create an cpe405/example31 container and mount current directory, ~/example31, on the host to the /usr/share/nginx/html directory in the container. All modification on files in the host's ~/example31 directory will affect files in the /usr/share/nginx/html directory in container.

potikanond/README.md

Example#3.1: How to create, test, tag, push and pull an Nginx docker image

On Ubuntu Docker host, create an empty directory, ~/example31

Create index.html and about.html inside the example31 directory

Create a Dockerfile in the example31 directory