Tutorial

So erstellen Sie eine Node.js-Anwendung mit Docker [Schnellstart]

Node.jsDockerQuickstart

Einführung

In diesem Tutorial lernen Sie das Erstellen eines Anwendungs-Images für eine statische Website, die das Express-Framework und Bootstrap verwendet. Sie erstellen dann einen Container mit diesem Image, übertragen ihn mittels Push auf den Docker Hub und erstellen damit einen anderen Container. So wird gezeigt, wie eine Anwendung neu erstellt und skaliert werden kann.

Eine detailliertere Version dieses Tutorials mit schrittweisen Erklärungen finden Sie unter So erstellen Sie eine Node.js-Anwendung mit Docker.

Voraussetzungen

Um dieser Anleitung zu folgen, benötigen Sie:

  • Einen sudo-Benutzer auf Ihrem Server oder in ihrer lokalen Umgebung.
  • Docker.
  • Node.js und npm.
  • Ein Docker Hub-Konto.

Schritt 1 – Installieren Ihrer Anwendungsabhängigkeiten

Erstellen Sie zunächst ein Verzeichnis für Ihr Projekt im Home-Verzeichnis Ihres Benutzers ohne Rootberechtigung:

  • mkdir node_project

Navigieren Sie zu diesem Verzeichnis:

  • cd node_project

Dies ist das Stammverzeichnis des Projekts.

Erstellen Sie als Nächstes ein package.json mit den Abhängigkeiten Ihres Projekts:

  • nano package.json

Fügen Sie die nachstehenden Informationen zum Projekt zur Datei hinzu; vergewissern Sie sich dabei, dass Sie die Informationen zum Autor durch Ihren eigenen Namen und Ihre Kontaktinformationen ersetzen:

~/node_project/package.json
{
  "name": "nodejs-image-demo",
  "version": "1.0.0",
  "description": "nodejs image demo",
  "author": "Sammy the Shark <sammy@example.com>",
  "license": "MIT",
  "main": "app.js",
  "scripts": {
    "start": "node app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "nodejs",
    "bootstrap",
    "express"
  ],
  "dependencies": {
    "express": "^4.16.4"
  }
}

Installieren Sie die Abhängigkeiten Ihres Projekts:

  • npm install

Schritt 2 – Erstellen der Anwendungsdateien

Wir erstellen eine Website, die Benutzern Informationen über Haie bereitstellt.

Öffnen Sie app.js im Haupt-Projektverzeichnis, um die Routen des Projekts zu definieren:

  • nano app.js

Fügen Sie der Datei den folgenden Inhalt zum Erstellen der Express-Anwendung und der Router-Objekte hinzu, definieren Sie das Basisverzeichnis, den Port und den Host als Variablen, bestimmen Sie die Routen und binden Sie die Router Middleware gemeinsam mit den statischen Assets der Anwendung ein:

~/node_project/app.js
var express = require("express");
var app = express();
var router = express.Router();

var path = __dirname + '/views/';

// Constants
const PORT = 8080;
const HOST = '0.0.0.0';

router.use(function (req,res,next) {
  console.log("/" + req.method);
  next();
});

router.get("/",function(req,res){
  res.sendFile(path + "index.html");
});

router.get("/sharks",function(req,res){
  res.sendFile(path + "sharks.html");
});

app.use(express.static(path));
app.use("/", router);

app.listen(8080, function () {
  console.log('Example app listening on port 8080!')
})

Als Nächstes fügen wir der Anwendung statischen Inhalt hinzu. Erstellen Sie das Verzeichnis views:

  • mkdir views

Öffnen Sie index.html:

  • nano views/index.html

Fügen Sie den folgenden Code zur Datei hinzu, womit Bootstrap importiert wird, und erstellen Sie ein eine jumbotron-Komponente mit einem Link zu der detaillierteren sharks.html-Infoseite:

~/node_project/views/index.html
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>About Sharks</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link href="css/styles.css" rel="stylesheet">
      <link href='https://fonts.googleapis.com/css?family=Merriweather:400,700' rel='stylesheet' type='text/css'>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>
   <body>
      <nav class="navbar navbar-inverse navbar-static-top">
         <div class="container">
            <div class="navbar-header">
               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
               <span class="sr-only">Toggle navigation</span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               </button>
               <a class="navbar-brand" href="#">Everything Sharks</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
               <ul class="nav navbar-nav mr-auto">
                  <li class="active"><a href="/">Home</a></li>
                  <li><a href="/sharks">Sharks</a></li>
               </ul>
            </div>
         </div>
      </nav>
      <div class="jumbotron">
         <div class="container">
            <h1>Want to Learn About Sharks?</h1>
            <p>Are you ready to learn about sharks?</p>
            <br>
            <p><a class="btn btn-primary btn-lg" href="/sharks" role="button">Get Shark Info</a></p>
         </div>
      </div>
      <div class="container">
         <div class="row">
            <div class="col-md-6">
               <h3>Not all sharks are alike</h3>
               <p>Though some are dangerous, sharks generally do not attack humans. Out of the 500 species known to researchers, only 30 have been known to attack humans.</p>
            </div>
            <div class="col-md-6">
               <h3>Sharks are ancient</h3>
               <p>There is evidence to suggest that sharks lived up to 400 million years ago.</p>
            </div>
         </div>
      </div>
   </body>
</html>

Öffnen Sie als Nächstes eine Datei namens sharks.html:

  • nano views/sharks.html

Fügen Sie den folgenden Code hinzu, der Bootstrap und die benutzerdefinierte Formatvorlage importiert und Benutzern detaillierte Informationen über bestimmte Haie bietet:

~/node_project/views/sharks.html
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>About Sharks</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link href="css/styles.css" rel="stylesheet">
      <link href='https://fonts.googleapis.com/css?family=Merriweather:400,700' rel='stylesheet' type='text/css'>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>
   <nav class="navbar navbar-inverse navbar-static-top">
      <div class="container">
         <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Everything Sharks</a>
         </div>
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav mr-auto">
               <li><a href="/">Home</a></li>
               <li class="active"><a href="/sharks">Sharks</a></li>
            </ul>
         </div>
      </div>
   </nav>
   <div class="jumbotron text-center">
      <h1>Shark Info</h1>
   </div>
   <div class="container">
      <div class="row">
         <div class="col-md-6">
            <p>
            <div class="caption">Some sharks are known to be dangerous to humans, though many more are not. The sawshark, for example, is not considered a threat to humans.</div>
            <img src="https://assets.digitalocean.com/articles/docker_node_image/sawshark.jpg" alt="Sawshark">
            </p>
         </div>
         <div class="col-md-6">
            <p>
            <div class="caption">Other sharks are known to be friendly and welcoming!</div>
            <img src="https://assets.digitalocean.com/articles/docker_node_image/sammy.png" alt="Sammy the Shark">
            </p>
         </div>
      </div>
    </div>
   </body>
</html>

Erstellen Sie schließlich die benutzerdefinierte CSS-Formatvorlage, mit der Sie index.html und sharks.html verknüpft haben, indem Sie zunächst einen css-Ordner in dem Verzeichnis views erstellen:

  • mkdir views/css

Öffnen Sie die Formatvorlage und fügen Sie den folgenden Code hinzu, womit Sie die gewünschte Farbe und Schriftart für unsere Seiten festlegen:

~/node_project/views/css/styles.css
.navbar {
        margin-bottom: 0;
}

body {
        background: #020A1B;
        color: #ffffff;
        font-family: 'Merriweather', sans-serif;
}
h1,
h2 {
        font-weight: bold;
}
p {
        font-size: 16px;
        color: #ffffff;
}


.jumbotron {
        background: #0048CD;
        color: white;
        text-align: center;
}
.jumbotron p {
        color: white;
        font-size: 26px;
}

.btn-primary {
        color: #fff;
        text-color: #000000;
        border-color: white;
        margin-bottom: 5px;
}

img, video, audio {
        margin-top: 20px;
        max-width: 80%;
}

div.caption: {
        float: left;
        clear: both;
}

Starten Sie die Anwendung:

  • npm start

Navigieren Sie Ihren Browser zu http://your_server_ip:8080 oder localhost:8080, wenn Sie lokal arbeiten. Sie sehen die folgende Startseite:

Anwendungs-Startseite

Klicken Sie auf die Schaltfläche Get Shark Info. Sie sehen die folgende Informationsseite:

Shark Info-Seite

Sie haben jetzt eine funktionierende Anwendung. Wenn Sie fertig sind, beenden Sie den Server,indem Sie CTRL+C eingeben.

Schritt 3 – Schreiben des Dockerfiles

Erstellen Sie das Dockerfile in dem Stammverzeichnis Ihres Projekts:

  • nano Dockerfile

Fügen Sie den folgenden Code zur Datei hinzu:

~/node_project/Dockerfile

FROM node:10-alpine

RUN mkdir -p /home/node/app/node_modules && chown -R node:node /home/node/app

WORKDIR /home/node/app

COPY package*.json ./

USER node

RUN npm install

COPY --chown=node:node . .

EXPOSE 8080

CMD [ "node", "app.js" ]

Dieses Dockerfile verwendet ein Alpine-Basisimage und stellt sicher, dass die Anwendungsdateien zu einem Node-Benutzer ohne Rootberechtigung gehören, der standardmäßig vom Docker Node-Image bereitgestellt wird.

Fügen Sie als Nächstes Ihre lokalen Knotenmodule, npm-Protokolle, das Dockerfile und .dockerignore zu Ihrer Datei .dockerignore hinzu:

~/node_project/.dockerignore
node_modules
npm-debug.log
Dockerfile
.dockerignore

Erstellen Sie das Anwendungs-Image mit dem Befehl docker build:

  • docker build -t your_dockerhub_username/nodejs-image-demo .

Das . gibt an, dass der Build-Kontext das aktuelle Verzeichnis ist.

Überprüfen Sie Ihre Images:

  • docker images

Sie sehen die folgende Ausgabe:

Output
REPOSITORY TAG IMAGE ID CREATED SIZE your_dockerhub_username/nodejs-image-demo latest 1c723fb2ef12 8 seconds ago 895MB node 10 f09e7c96b6de 17 hours ago 893MB

Führen Sie den folgenden Befehl zum Erstellen eines Containers mit diesem Image aus:

  • docker run --name nodejs-image-demo -p 80:8080 -d your_dockerhub_username/nodejs-image-demo

Inspizieren Sie die Liste Ihrer laufenden Container mit docker ps:

  • docker ps

Sie sehen die folgende Ausgabe:

Output
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES e50ad27074a7 your_dockerhub_username/nodejs-image-demo "npm start" 8 seconds ago Up 7 seconds 0.0.0.0:80->8080/tcp nodejs-image-demo

Wenn Ihr Container ausgeführt wird, können Sie jetzt Ihre Anwendung besuchen, indem Sie Ihren Browser zu http://your_server_ip oder localhost navigieren. Sie sehen Ihre Anwendungs-Startseite erneut:

Anwendungs-Startseite

Jetzt haben Sie ein Image für Ihre Anwendung erstellt und können es für spätere Zwecke mittels Push auf Docker Hub übertragen.

Schritt 4 – Ein Repository zum Arbeiten mit Images verwenden

Der erste Schritt zum Übertragen des Images mittels Push besteht darin, sich im Docker Hub-Konto anzumelden:

  • docker login -u your_dockerhub_username -p your_dockerhub_password

Bei dieser Art von Anmeldung wird eine ~/.docker/config.json-Datei im Home-Verzeichnis Ihres Benutzers mit Ihren Docker Hub-Anmeldeinformationen erstellt.

Übertragen Sie Ihr Image mittels Push, indem Sie Ihren eigenen Benutzernamen anstelle von your_dockerhub_username verwenden:

  • docker push your_dockerhub_username/nodejs-image-demo

Sie können auch den Nutzen der Image-Registrierung testen, indem Ihren aktuellen Anwendungs-Container und das Image zerstören und dann erneut erstellen.

Listen Sie zunächst alle ausgeführten Container auf:

  • docker ps

Sie sehen die folgende Ausgabe:

Output
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES e50ad27074a7 your_dockerhub_username/nodejs-image-demo "npm start" 3 minutes ago Up 3 minutes 0.0.0.0:80->8080/tcp nodejs-image-demo

Stoppen Sie den ausgeführten Anwendungs-Container mit der CONTAINER ID, die in Ihrer Ausgabe aufgelistet ist. Vergewissern Sie sich, dass Sie die nachstehende hervorgehobene ID durch Ihre eigene CONTAINER ID ersetzen:

  • docker stop e50ad27074a7

Listen Sie alle Images mit dem Flag -a auf:

  • docker images -a

Sie sehen die folgende Ausgabe mit dem Namen Ihres Images, your_dockerhub_username/nodejs-image-demo, gemeinsam mit dem node-Image und den anderen Images aus Ihrem Build:

Output
REPOSITORY TAG IMAGE ID CREATED SIZE your_dockerhub_username/nodejs-image-demo latest 1c723fb2ef12 7 minutes ago 895MB <none> <none> e039d1b9a6a0 7 minutes ago 895MB <none> <none> dfa98908c5d1 7 minutes ago 895MB <none> <none> b9a714435a86 7 minutes ago 895MB <none> <none> 51de3ed7e944 7 minutes ago 895MB <none> <none> 5228d6c3b480 7 minutes ago 895MB <none> <none> 833b622e5492 8 minutes ago 893MB <none> <none> 5c47cc4725f1 8 minutes ago 893MB <none> <none> 5386324d89fb 8 minutes ago 893MB <none> <none> 631661025e2d 8 minutes ago 893MB node 10 f09e7c96b6de 17 hours ago 893MB

Entfernen Sie den angehaltenen Container und alle Images, einschließlich nicht verwendeter oder nachstehender Images, mit dem folgenden Befehl:

  • docker system prune -a

Wenn all Ihre Images und Container gelöscht sind, können Sie jetzt das Anwendungs-Image von Docker Hub übertragen:

  • docker pull your_dockerhub_username/nodejs-image-demo

Listen Sie Ihre Images erneut auf:

  • docker images

Sie sehen Ihr Anwendungs-Image:

Output
REPOSITORY TAG IMAGE ID CREATED SIZE your_dockerhub_username/nodejs-image-demo latest 1c723fb2ef12 11 minutes ago 895MB

Sie können jetzt Ihren Container mit dem Befehl aus Schritt 3 neu erstellen:

  • docker run --name nodejs-image-demo -p 80:8080 -d your_dockerhub_username/nodejs-image-demo

Listen Sie zunächst all Ihre ausgeführten Container auf:

  • docker ps
Output
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES f6bc2f50dff6 your_dockerhub_username/nodejs-image-demo "npm start" 4 seconds ago Up 3 seconds 0.0.0.0:80->8080/tcp nodejs-image-demo

Besuchen Sie erneut http://your_server_ip oder localhost, um Ihre ausgeführte Anwendung zu sehen.

Relevante Tutorials

Hier sehen Sie Links zu detaillierteren Leitfäden, die in Verbindung mit diesem Tutorial stehen:

Sie können sich auch die längere Serie zu From Containers to Kubernetes with Node.js ansehen, welche die Grundlage für dieses Tutorial bildete.

Sie können sich auch auf unsere komplette Bibliothek mit Docker-Ressourcen für weitere Informationen zu Docker beziehen.

0 Comments

Creative Commons License