DigitalOcean

Tutorial

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

Published on April 24, 2020
Default avatar

By Kathleen Juell

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

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:

  1. mkdir node_project

Navigieren Sie zu diesem Verzeichnis:

  1. cd node_project

Dies ist das Stammverzeichnis des Projekts.

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

  1. 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:

  1. 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:

  1. 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:

  1. mkdir views

Öffnen Sie index.html:

  1. 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:

  1. 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:

  1. 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:

  1. 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:

  1. 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:

  1. 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:

  1. 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:

  1. 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:

  1. 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:

  1. 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:

  1. 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:

  1. 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:

  1. docker stop e50ad27074a7

Listen Sie alle Images mit dem Flag -a auf:

  1. 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:

  1. docker system prune -a

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

  1. docker pull your_dockerhub_username/nodejs-image-demo

Listen Sie Ihre Images erneut auf:

  1. 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:

  1. 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:

  1. 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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us

About the authors
Default avatar
Kathleen Juell

author

Still looking for an answer?

Ask a questionSearch for more help
Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Comment
Creative CommonsThis work is licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License.

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Sign up

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Learn more

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Learn more

Featured on Community
Kubernetes CourseLearn Python 3Machine Learning in PythonGetting started with GoIntro to Kubernetes
DigitalOcean Products
CloudwaysVirtual MachinesManaged DatabasesManaged KubernetesBlock StorageObject StorageMarketplaceVPCLoad Balancers
Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel
© 2024 DigitalOcean, LLC.Sitemap.