Tutorial
So erstellen Sie eine Node.js-Anwendung mit Docker [Schnellstart]
![So erstellen Sie eine Node.js-Anwendung mit Docker [Schnellstart]](https://www.digitalocean.com/api/static-content/v1/images?src=%2F_next%2Fstatic%2Fmedia%2Fintro-to-cloud.d49bc5f7.jpeg&width=1920 "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:
- 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:
{
"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:
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:
<!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:
<!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:
.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:
Klicken Sie auf die Schaltfläche Get Shark Info. Sie sehen die folgende Informationsseite:
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:
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_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:
OutputREPOSITORY 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:
OutputCONTAINER 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:
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:
OutputCONTAINER 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:
OutputREPOSITORY 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:
OutputREPOSITORY 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
OutputCONTAINER 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:
- So installieren Sie Docker Compose auf Ubuntu 18.04.
- So stellen Sie Remote Docker Hosts mit Docker Machine unter Ubuntu 18.04 bereit und verwalten sie.
- So teilen Sie Daten zwischen Docker Containern.
- So teilen Sie Daten zwischen Docker Containern und dem Host.
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.
author
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!
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and SMBs
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Get started for free
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.