Einführung

Dieser Artikel beschreibt, wie Sie "Dockerfile" verwenden und "Docker-Compose" verwenden, bis die "HTML" -Datei mit "Nginx" angezeigt wird. Da es ein Anfänger ist, würde ich es begrüßen, wenn Sie auf Fehler hinweisen könnten.

Umgebung

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

Voraussetzungen

Sie haben Docker installiert. Wenn Sie es nicht installiert haben, installieren Sie es bitte unter dem folgenden Link. Vielleicht funktioniert es! Beginnen wir mit Docker!

Methode mit Dockerfile

Beginnen Sie mit der grundlegenden Methode mit "Dockerfile".

Ordnerstruktur

Die Ordnerstruktur ist wie folgt.

`Ordnerstruktur`


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

Jede Datei

Jede Datei ist wie folgt.

`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 ist die Spezifikation der Basis des Docker-Images. Diesmal bedeutet es, die neueste Version von nginx zu verwenden.
ADD {lokaler Pfad} {Containerpfad}: Fügen Sie den lokalen Pfad zum Containerpfad hinzu.
RUN: Geben Sie den Befehl an, der beim Erstellen von Docker im Docker-Container ausgeführt werden soll.

`/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 ist die Konfigurationsdatei, die von nginx verwendet wird. Ich werde in diesem Artikel nicht ins Detail gehen.

`/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()">Lauf!!!
  </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 und JavaScript werden entsprechend erstellt, um zu überprüfen, ob sie funktionieren.

`/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 = "Die aktuelle Zeit ist" + hour + ":" + min + "ist";
}

Starten Sie mit Dockerfile

Sobald die Datei fertig ist, wechseln Sie in das Verzeichnis, in dem sich "Dockerfile" im Terminal befindet, und erstellen Sie mit dem Befehl "Docker Build" ein Container-Image.

$ docker build -t app:0.0.1 .

-t: Kann markiert werden. Das Taggen erleichtert die Verwaltung, da der Tag-Name beim Starten eines Containers oder beim Löschen eines Bildes zugewiesen wird. Sie können die Version auch angeben, indem Sie sie durch einen Doppelpunkt : trennen.
.: Gibt den Pfad an, in dem sich Dockerfile befindet. Dieses Mal drücke ich den Befehl in dem Verzeichnis, in dem sich "Dockerfile" befindet, also ist es ".".

Überprüfen Sie, ob das Container-Image erstellt wurde.

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

Sie haben ein Container-Image namens "App" mit einer Version von "0.0.1" erstellt.

Starten Sie als Nächstes den Container aus dem Container-Image mit dem Befehl "Docker Container Run".

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

--name app: Beginnt mit der name app. Wie beim Erstellen eines Container-Images erleichtert die Angabe des Bildnamens die Verwaltung. Geben Sie ihn daher an.
--rm: Löscht den Container automatisch, wenn er gestoppt wird.
-d: Führen Sie den Container im Hintergrund aus.
-p {lokaler Port}: {Container-Port}: Leitet den lokalen Port an den Port des Containers weiter.
app: 0.0.1: Geben Sie das zu startende Container-Image an.

Überprüfen Sie, ob es läuft

$ 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

Es scheint, dass der Container läuft. Versuchen Sie, auf http: // localhost: 8080 / zuzugreifen.

Sie können sehen, dass der Bildschirm angezeigt wird und dass CSS funktioniert!

Versuchen Sie, die Schaltfläche "Ausführen" zu drücken.

JavaScript funktioniert auch!

Klicken wir auf den Link "Weiter".

Sie können auch zur nächsten Seite wechseln!

Wenn Sie in den laufenden Container gelangen möchten, verwenden Sie den Befehl docker exec.

$ docker exec -it app bash -p

Stoppen Sie den Container und überprüfen Sie die Containerliste.

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

Es ist gestoppt.

-a: Die Option -a zeigt Ihnen auch, welche Container gestoppt sind. Da die Option "--rm" beim Start hinzugefügt wurde, wird der Container automatisch gelöscht, wenn er gestoppt wird. Beachten Sie, dass sich die gestoppten Container immer mehr ansammeln, wenn Sie die Option "--rm" nicht hinzufügen. Wenn Sie es löschen möchten, verwenden Sie "docker rm {CONTAINER ID}".

Methode mit Docker-Compose

"Docker-Conmpose" ist enthalten, wenn Sie Docker installieren. Ursprünglich ist es praktisch, es für die Verwaltung mehrerer Container wie Webserver und DB-Server zu verwenden, aber ~~ weil meine Technologie nicht ausreicht ~~ Dieses Mal werde ich "Docker-Compose" nur mit Nginx erstellen.

Ordnerstruktur

Ich habe docker-compose.yml hinzugefügt und die Konfiguration der Docker-Datei früher im Ordner nginx gespeichert.

`Ordnerstruktur`


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 Die docker-compose.yml definiert alles vom Container-Image-Build bis zum Container-Start.

`docker-compose.yml`


version: '3'               #Dieser Docker-compose.der yml-Datei"Format"Version von
services:                  #Definieren Sie einen Service.
  nginx:                   #Zu definierende Erklärung für Nginx.
    build: ./nginx         #Dockerfile-Pfad
    image: app:0.0.2       #Geben Sie den Bildnamen an
    container_name: "app"  #Geben Sie den Containernamen an
    ports:                 #Geben Sie den Inhalt der Portoffenlegung an.
      - "8080:80"          #Wenn es auf der Containerseite 80 ist, ist es auf der Hostseite 8080.
    volumes:               #Fügen Sie den Hostordner zum Container hinzu. Host-Seite:Containerseite
      - ./nginx/conf/default.conf:/etc/nginx/conf.d/default.conf  #Konfigurationsdatei kopieren
      - ./nginx/src:/usr/share/nginx/html         #Quelle kopieren

"Volumes" können weggelassen werden, da sie sich mit dem in "Dockerfile" beschriebenen Teil überschneiden.

Wenn Sie die Anzahl der DB-Server und anderer Dienste erhöhen möchten, fügen Sie diese in derselben Zeile wie "nginx" hinzu.

Starten Sie mit Docker-Compose

Navigieren Sie zu dem Ordner, in dem sich "docker-compose.yml" befindet, und verwenden Sie den Befehl "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

Sie können den Start überprüfen! Während der Port usw. beim Starten mit "Dockerfile" angegeben wurde, ist das Starten mit "Docker-Compose" einfach!

Verwenden Sie zum Beenden den Befehl "Docker-Compose Down".

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

Es gibt keine laufenden Container.

Am Ende

In diesem Artikel wurde die Bequemlichkeit von "Docker-Compose" nicht vollständig ausgenutzt. Diesmal tut es mir leid, dass ich auf halbem Weg war, weil ich es einmal organisieren wollte. Das nächste Mal wünschte ich mir, ich könnte einen Artikel über das gleichzeitige Starten mehrerer Container mit "Docker-Compose" schreiben ...

Vielleicht funktioniert es! Zeigen Sie HTML-Seiten von nginx mit Docker an!

Einführung

Umgebung

Voraussetzungen

Methode mit Dockerfile

Ordnerstruktur

Ordnerstruktur

Jede Datei

Dockerfile

/conf/default.conf

/src/topPage.html

html:src.nextPage.html

/src/css/topPage.css

/src/js/topPage.js

Starten Sie mit Dockerfile

Methode mit Docker-Compose

Ordnerstruktur

Ordnerstruktur

docker-compose.yml

Starten Sie mit Docker-Compose

Am Ende

`Ordnerstruktur`

`Dockerfile`

`/conf/default.conf`

`/src/topPage.html`

`html:src.nextPage.html`

`/src/css/topPage.css`

`/src/js/topPage.js`

`Ordnerstruktur`

`docker-compose.yml`