Introduction

This article describes how to start with Dockerfile and start with docker-compose until the HTML file is displayed with nginx. Since it is a beginner, I would appreciate it if you could point out any mistakes.

environment

macOS Catalina version 10.15.6 Docker version 19.03.13 Visual Studio Code version 1.42.1

Prerequisites

You have Docker installed. If you have not installed it, please install it by referring to the link below. Maybe it works! Let's get started with Docker!

Method using Dockerfile

Start with the basic method using Dockerfile.

Folder structure

The folder structure is as follows.

`Folder structure`


root/
├── Dockerfile
├── conf
│   └── default.conf
└── src
    ├── css
    │   └── topPage.css
    ├── js
    │   └── topPage.js
    ├── nextPage.html
    └── topPage.html

Each file

Each file is as follows.

`Dockerfile`


FROM nginx:latest

ADD ./conf/default.conf /etc/nginx/conf.d/default.conf
ADD ./src /usr/share/nginx/html

RUN echo "start nginx"

FROM nginx: latest: FROM is the specification of what the Docker image is based on. This time it means to use the latest version of nginx.
ʻADD {local path} {container path} `: Add the local path to the container path.
RUN: Specify the command to be executed in the Docker container when building Docker.

`/conf/default.conf`


server {
        listen 80;
        listen 443;
        server_name localhost;

        root /usr/share/nginx/html;
        index topPage.html topPage.html;

        location / {
                try_files $uri $uri/ /src/index.html$query_string;
        }

        error_page   500 502 503 504  /50x.html;
                 location = /50x.html {
                   root   /usr/share/nginx/html;
        }
}

default.conf is the configuration file used by nginx. I won't go into detail in this article.

`/src/topPage.html`


<html>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="./css/topPage.css">
  <script src="./js/topPage.js"></script>
  <body>
    <h1 style="color:red;">Hello Enginx with Docker!!</h1>
    <a href="./nextPage.html">next</a>
  </br>
  <p>css!</p>
  <button type="button" onclick="execute()">Run!!!
  </button>
  <div id="output"></div>
  </body>
</html>

`html:src.nextPage.html`


<html>
<body>
  <h1>nextPage!</h1>
  <a href="./topPage.html">back</a>
</body>
</html>

CSS and JavaScript are created appropriately to check if they work.

`/src/css/topPage.css`


p {
  color : red;
}

`/src/js/topPage.js`


function execute() {
  var elem = document.getElementById("output");
  var now = new Date();
  var hour = now.getHours();
  var min = now.getMinutes();
  elem.innerHTML = "The time is right now" + hour + ":" + min + "is";
}

Launch using Dockerfile

When the file is ready, change to the directory where Dockerfile is located in the terminal and create a container image with the docker build command.

$ docker build -t app:0.0.1 .

-t: Can be tagged. Tagging makes it easier to manage because the tag name is assigned when starting a container or deleting an image. You can also specify the version by separating them with a : colon.
.: Specifies the path where Dockerfile is located. This time, I'm hitting the command in the directory where Dockerfile is located, so it's ..

Check if the container image has been created.

$ docker images
REPOSITORY              TAG                 IMAGE ID            CREATED             SIZE
app                     0.0.1               8ddbfbb33917        14 hours ago        133MB

You have created a container image called ʻapp with version 0.0.1`.

Next, actually start the container from the container image with the docker container run command.

$ docker container run --name app --rm -d -p 8080:80 app:0.0.1

--name app: Starts with the name app. As with building the container image, specifying the image name makes it easier to manage, so specify it.
--rm: Automatically deletes the container when it is stopped.
-d: Run the container in the background.
-p {local port}: {container port}: Forwards the local port to the container's port.
ʻApp: 0.0.1`: Specify the container image to start.

Check if it is running

$ docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                  NAMES
f64c1f7ef410        app:0.0.1           "/docker-entrypoint.…"   7 seconds ago       Up 6 seconds        0.0.0.0:8080->80/tcp   app

It seems that the container is running. Try accessing http: // localhost: 8080 /.

You can see that the screen is displayed and that CSS is working!

Try pressing the "Run" button.

JavaScript is also working!

Let's click the "next" link.

You can also transition to the nextPage!

If you want to go inside a running container, use the docker exec command.

$ docker exec -it app bash -p

Stop the container and check the container list.

$ docker stop app
app
$ docker ps -a
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS                         PORTS               NAMES

It's stopped.

-a: The -a option will also show you which containers are stopped. Since the --rm option was added at startup, the container is automatically deleted when it is stopped. Note that if you do not add the --rm option, the stopped containers will accumulate more and more. If you want to delete it, use docker rm {CONTAINER ID}.

Method using docker-compose

docker-conmpose is included when you install Docker. Originally, it is convenient to use it for managing multiple containers such as web servers and DB servers, but ~~ because my technology is insufficient ~~ This time, I will create docker-compose with only nginx.

Folder structure

I added docker-compose.yml and stored the configuration of the Dockerfile earlier in the nginx folder.

`Folder structure`


root/
├── docker-compose.yml
└── nginx
    ├── Dockerfile
    ├── conf
    │   ├── default.conf
    │   └── nginx.conf
    └── src
        ├── css
        │   └── topPage.css
        ├── js
        │   └── topPage.js
        ├── nextPage.html
        └── topPage.html

docker-compose.yml Define the container image build to container startup in docker-compose.yml.

`docker-compose.yml`


version: '3'               #This docker-compose.of yml file"Format"Version of
services:                  #Define a service.
  nginx:                   #Declaration to define for nginx.
    build: ./nginx         #Dockerfile path
    image: app:0.0.2       #Specify the image name
    container_name: "app"  #Specify the container name
    ports:                 #Specify the contents of the port disclosure.
      - "8080:80"          #If it is 80 on the container side, it will be 8080 on the host side.
    volumes:               #Add the host folder to the container. Host side:Container side
      - ./nginx/conf/default.conf:/etc/nginx/conf.d/default.conf  #Copy config file
      - ./nginx/src:/usr/share/nginx/html         #Copy source

volumes can be omitted because it overlaps with the part described in Dockerfile.

If you want to increase the number of DB servers and other services, add them in the same line as nginx.

Launch using docker-compose

Navigate to the folder where docker-compose.yml is located and use the docker-compose up command.

$ docker-compose up -d
Starting app        ... done
$ docker ps
CONTAINER ID        IMAGE                   COMMAND                  CREATED             STATUS              PORTS                               NAMES
94af0a7f210d        docker_plactice_nginx   "/docker-entrypoint.…"   2 minutes ago       Up About a minute   0.0.0.0:8080->80/tcp                app

You can check the startup! While the port etc. was specified when starting with Dockerfile, starting with docker-compose is easy!

Use the docker-compose down command to stop it.

$ docker-compose down
Stopping app        ... done
$ docker ps -a
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES

There are no running containers.

At the end

In this article, the convenience of docker-compose has not been fully exploited. This time, I have the purpose of organizing it once, so I'm sorry that it was halfway. Next time, I wish I could write an article about simultaneous startup of multiple containers with docker-compose ...

Maybe it works! Display HTML page from nginx with Docker!

Introduction

environment

Prerequisites

Method using Dockerfile

Folder structure

Folder structure

Each file

Dockerfile

/conf/default.conf

/src/topPage.html

html:src.nextPage.html

/src/css/topPage.css

/src/js/topPage.js

Launch using Dockerfile

Method using docker-compose

Folder structure

Folder structure

docker-compose.yml

Launch using docker-compose

At the end

`Folder structure`

`Dockerfile`

`/conf/default.conf`

`/src/topPage.html`

`html:src.nextPage.html`

`/src/css/topPage.css`

`/src/js/topPage.js`

`Folder structure`

`docker-compose.yml`