introduction

Cet article décrit comment démarrer avec Dockerfile et commencer avec docker-compose jusqu'à ce que le fichier HTML s'affiche avec nginx. Puisqu'il s'agit d'un débutant, je vous serais reconnaissant si vous pouviez signaler des erreurs.

environnement

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

Conditions préalables

Vous avez installé Docker. Si vous ne l'avez pas installé, veuillez l'installer en vous référant au lien ci-dessous. Peut-être que ça marche! Commençons avec Docker!

Méthode utilisant Dockerfile

Commencez par la méthode de base en utilisant Dockerfile.

Structure des dossiers

La structure des dossiers est la suivante.

`Structure des dossiers`


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

Chaque dossier

Chaque fichier est comme suit.

`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 est la spécification de la base de l'image Docker. Cette fois, cela signifie utiliser la dernière version de nginx.
ʻADD {chemin local} {chemin du conteneur} `: Ajouter le chemin local au chemin du conteneur.
RUN: Spécifiez la commande à exécuter dans le conteneur Docker lors de la construction de 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 est le fichier de configuration utilisé par nginx. Je n'entrerai pas dans les détails dans cet 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()">Courir!!!
  </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 et JavaScript sont créés de manière appropriée pour vérifier s'ils fonctionnent.

`/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 = "L'heure actuelle est" + hour + ":" + min + "est";
}

Lancer à l'aide de Dockerfile

Une fois que le fichier est prêt, accédez au répertoire où se trouve Dockerfile dans le terminal et créez une image de conteneur avec la commande docker build.

$ docker build -t app:0.0.1 .

-t: peut être marqué. Le balisage facilite la gestion car le nom du tag est attribué lors du démarrage d'un conteneur ou de la suppression d'une image. Vous pouvez également spécifier la version en les séparant par un : deux points.
.: Spécifie le chemin où se trouve Dockerfile. Cette fois, j'appuie sur la commande dans le répertoire où se trouve Dockerfile, donc c'est ..

Vérifiez si l'image du conteneur a été créée.

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

Vous avez créé une image de conteneur appelée ʻapp avec une version de 0.0.1`.

Ensuite, démarrez le conteneur à partir de l'image du conteneur avec la commande docker container run.

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

--name app: commence par le nom de l'application. Comme dans le cas de la création d'une image de conteneur, la spécification du nom de l'image facilite la gestion, alors spécifiez-le.
--rm: supprime automatiquement le conteneur lorsqu'il est arrêté.
-d: Exécute le conteneur en arrière-plan.
-p {port local}: {port du conteneur}: Transmet le port local vers le port du conteneur.
ʻApp: 0.0.1`: Spécifiez l'image du conteneur à démarrer.

Vérifiez s'il fonctionne

$ 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

Il semble que le conteneur fonctionne. Essayez d'accéder à http: // localhost: 8080 /.

Vous pouvez voir que l'écran est affiché et que CSS fonctionne!

Essayez d'appuyer sur le bouton "Exécuter".

JavaScript fonctionne également!

Cliquons sur le lien "suivant".

Vous pouvez également passer à la page suivante!

Si vous voulez entrer dans le conteneur en cours d'exécution, utilisez la commande docker exec.

$ docker exec -it app bash -p

Arrêtez le conteneur et vérifiez la liste des conteneurs.

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

C'est arrêté.

-a: L'option -a vous montrera également quels conteneurs sont arrêtés. Puisque l'option --rm a été ajoutée au démarrage, le conteneur est automatiquement supprimé lorsqu'il est arrêté. Notez que si vous n'ajoutez pas l'option --rm, les conteneurs arrêtés s'accumuleront de plus en plus. Si vous voulez le supprimer, utilisez docker rm {CONTAINER ID}.

Méthode utilisant docker-compose

docker-conmpose est inclus lorsque vous installez Docker. À l'origine, il est pratique de l'utiliser pour gérer plusieurs conteneurs tels que le serveur Web et le serveur de base de données, mais ~~ parce que ma technologie est insuffisante ~~ Cette fois, je vais créer docker-compose avec seulement nginx.

Structure des dossiers

J'ai ajouté docker-compose.yml et stocké la configuration Dockerfile dans le dossier nginx.

`Structure des dossiers`


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 Le docker-compose.yml définit tout, de la construction de l'image du conteneur au démarrage du conteneur.

`docker-compose.yml`


version: '3'               #Ce docker-compose.du fichier yml"Format"Version de
services:                  #Définissez un service.
  nginx:                   #Déclaration à définir pour nginx.
    build: ./nginx         #Chemin Dockerfile
    image: app:0.0.2       #Spécifiez le nom de l'image
    container_name: "app"  #Spécifiez le nom du conteneur
    ports:                 #Spécifiez le contenu de la divulgation du port.
      - "8080:80"          #S'il est de 80 du côté du conteneur, ce sera de 8080 du côté de l'hôte.
    volumes:               #Ajoutez le dossier hôte au conteneur. Côté hôte:Côté conteneur
      - ./nginx/conf/default.conf:/etc/nginx/conf.d/default.conf  #Copier le fichier de configuration
      - ./nginx/src:/usr/share/nginx/html         #Copier la source

volumes peut être omis car il chevauche la partie décrite dans Dockerfile.

Si vous voulez augmenter le nombre de serveurs de base de données et d'autres services, ajoutez-les dans la même ligne que nginx.

Lancer avec docker-compose

Naviguez vers le dossier où se trouve docker-compose.yml et utilisez la commande docker-compose up.

$ 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

Vous pouvez vérifier le démarrage! Alors que le port etc. a été spécifié en commençant par Dockerfile, il est facile de commencer par docker-compose!

Pour l'arrêter, utilisez la commande docker-compose down.

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

Il n'y a pas de conteneurs en cours d'exécution.

À la fin

Dans cet article, la commodité de docker-compose n'a pas été pleinement exploitée. Cette fois, je suis désolé d'être à mi-chemin car je voulais l'organiser une fois. La prochaine fois, j'aimerais pouvoir écrire un article sur le démarrage simultané de plusieurs conteneurs avec docker-compose ...

Peut-être que ça marche! Affichez les pages HTML de nginx avec Docker!

introduction

environnement

Conditions préalables

Méthode utilisant Dockerfile

Structure des dossiers

Structure des dossiers

Chaque dossier

Dockerfile

/conf/default.conf

/src/topPage.html

html:src.nextPage.html

/src/css/topPage.css

/src/js/topPage.js

Lancer à l'aide de Dockerfile

Méthode utilisant docker-compose

Structure des dossiers

Structure des dossiers

docker-compose.yml

Lancer avec docker-compose

À la fin

`Structure des dossiers`

`Dockerfile`

`/conf/default.conf`

`/src/topPage.html`

`html:src.nextPage.html`

`/src/css/topPage.css`

`/src/js/topPage.js`

`Structure des dossiers`

`docker-compose.yml`