Jak nasadit aplikaci Node.js (Express.js) pomocí Dockeru na Ubuntu 20.04

Hark Labs2021-10-15 · 35 min read

Jak nasadit aplikaci Node.js (Express.js) pomocí Dockeru na Ubuntu 20.04

Úvod

Docker je kontejnerová platforma, což je lehké, virtualizované, přenosné, softwarově definované standardizované prostředí. Umožňuje softwaru běžet v izolaci od ostatního softwaru běžícího na fyzickém hostitelském počítači. Docker je klíčovou součástí aspektu Continuous Development and Integration (průběžný vývoj a integrace) ve vývoji softwaru. Nabízí lehkou alternativu k virtuálním počítačům a umožňuje vývojářům využívat distribuované aplikační architektury. Pro podrobný přehled ekosystému Docker se podívejte na tento článek.

Proces sestavení aplikace pomocí Dockeru začíná tím, že vývojář vytvoří obraz (image) pro svou aplikaci. Poté bude tento obraz nasazen uvnitř kontejneru. Obraz obsahuje definující komponenty aplikace, jako je kód aplikace, knihovny, konfigurační soubory, proměnné prostředí a běhové prostředí. Obraz standardizuje prostředí uvnitř kontejneru, což kontejnerizaci dodává vlastnosti přenositelnosti. Node.js je open-source, multiplatformní backendové běhové prostředí pro JavaScript, které dokáže spouštět kód JavaScriptu mimo webový prohlížeč. Je postaveno na V8 JavaScript Engine. Express.js je minimalistický backendový JavaScript framework, který běží nad Node.js.

V tomto návodu vytvoříme obraz pro web, který běží na frameworku Express. Použijeme Bootstrap, což je frontendová knihovna, aby frontend vypadal lépe. Jakmile obraz vytvoříme, sestavíme kontejner a nahrajeme ho na Docker Hub. Docker Hub umožňuje vývojářům hostovat kontejnerizované aplikace pro snadné nasazení do jakéhokoli prostředí Docker. Jakmile bude váš kontejner hostován na Docker Hubu, stáhneme ho a vytvoříme další obraz, který bude skutečně sloužit našemu webu.

Požadavky

Tento návod bude praktický. Měli byste si vytvořit prostředí, které vám umožní postupovat podle kroků.

Měli byste mít nainstalované Ubuntu 20.04 jako vaše výchozí operační prostředí a vytvořit uživatele bez oprávnění root s právy sudo. Přihlaste se jako uživatel bez oprávnění root a pokračujte následujícími kroky.
Musíte nainstalovat Docker. Postupujte podle kroků 1, 2, 3 a 4 v našem návodu na jak nainstalovat a provozovat Docker na Ubuntu. To by mělo fungovat pro jakoukoli distribuci Ubuntu.
Pokud ještě nemáte účet na Docker Hubu, vytvořte si ho. Můžete použít tento odkaz pro Rychlý průvodce Docker Hubem.
Nainstalujte Node.js a NPM. NPM je správce balíčků pro JavaScript. Můžete postupovat podle těchto pokynů pro instalaci Node a npm.

Krok 1: Konfigurace závislostí aplikace

Před vytvořením obrazu musíte vytvořit zdrojový kód aplikace. Zdrojový kód aplikace zahrnuje kód, statický obsah a závislosti, které se zkopírují do kontejneru. Začněte vytvořením adresáře pro váš projekt v domovském adresáři uživatele bez oprávnění root. Nazveme ho node_express, ale můžete použít jakýkoli název adresáře, který se vám líbí:

mkdir node_express

1	mkdir node_express

Dále se přesuňte do tohoto adresáře:

cd node_express

1	cd node_express

Toto bude kořenový adresář vaší aplikace. Aplikace node.js očekává package.json v kořenové složce. Npm používá tento soubor k určení, jaké závislosti vaše aplikace potřebuje. Pro vytvoření tohoto souboru zadejte následující příkaz:

nano package.json

1	nano package.json

Poté do souboru přidejte následující fragment kódu. Název, autora, popis a soubor vstupního bodu můžete upravit podle svého uvážení:

{
"name": "node-express-docker-image",
"version": "1.0.0",
"description": "Nodejs Express Docker Image Example",
"author": "hackins",
"main": "index.js",
"license": "ISC",
"keywords": [
"nodejs",
"express",
"bootstrap"
],
"dependencies": {
"express": "^4.17.1"
}
}

{

"name": "node-express-docker-image",

"version": "1.0.0",

"description": "Nodejs Express Docker Image Example",

"author": "hackins",

"main": "index.js",

"license": "ISC",

"keywords": [

"nodejs",

"express",

"bootstrap"

"dependencies": {

"express": "^4.17.1"

}

Jak vidíte, tento soubor specifikuje název projektu, verzi, autora a licenci, pod kterou bude kód aplikace sdílen. Doporučuje se použít krátký a popisný název pro váš projekt, abyste se vyhnuli duplicitám v npm registru. Pro projekt jsme specifikovali licenci ISC, která umožňuje bezplatné kopírování, úpravy nebo distribuci kódu aplikace.

Nejdůležitější je, abyste si v souboru všimli následujících direktiv:

“main“: tato direktiva specifikuje vstupní bod aplikace, který jsme nastavili jako index.js. Tento soubor vytvoříme za chvíli.
“dependencies“: tato direktiva specifikuje závislosti aplikace, které budou staženy z npm registru, když spustíme příkaz npm, v našem případě chceme Express verze 4.17.1 a vyšší.

Nyní můžete soubor uložit stisknutím Ctrl + O. Poté soubor zavřete stisknutím Ctrl + X. Dále nainstalujeme závislosti spuštěním následujícího příkazu:

npm install

1	npm install

Tento příkaz nainstaluje závislosti aplikace specifikované v souboru package.json v adresáři node_modules. Ty byly automaticky vytvořeny při prvním spuštění příkazu. S nainstalovanými závislostmi aplikace nyní můžete začít přidávat kód aplikace.

Krok 2: Přidání souborů s kódem aplikace

Vytvoříme jednoduchý web s recepty, s laskavým svolením allrecipes. Hlavním vstupním bodem aplikace je soubor index.js. Přidáme adresář views, který bude obsahovat různé stránky a statické soubory projektu. Web bude mít úvodní stránku, která bude obsahovat úvodní informace a odkazy na některé recepty.

Kód naší úvodní stránky bude umístěn v souboru home.html. Nejprve vytvořte soubor index.js zadáním následujícího příkazu:

nano index.js

1	nano index.js

Přidejte následující kód, který importuje a vytvoří aplikaci Express. Specifikuje také objekt Router, základní adresář a port, na kterém bude tato aplikace běžet:

const express = require('express');
const app = express();
const router = express.Router();

const path = __dirname + '/views/';
const port = 8090;

const express = require('express');

const app = express();

const router = express.Router();

const path = __dirname + '/views/';

const port = 8090;

require je JavaScriptová funkce, která načítá modul. V tomto případě načítáme modul express. Poté použijeme importovaný modul k vytvoření objektů express a router. Objekt router provádí směrovací funkce aplikace tím, že reaguje na volání HTTP metod, které budeme do tohoto objektu přidávat v průběhu tutoriálu.

Nastavili jsme také path a port. Konstanta path definuje základní adresář pro kód. V našem případě je to podadresář views uvnitř kořenového adresáře projektu. port specifikuje port, na kterém by měla aplikace express naslouchat, v našem příkladu jsme jej nastavili na 8090.

Jakmile máme konstanty, můžeme pro aplikaci specifikovat některé trasy pomocí objektu router. Přidejte následující kód do souboru index.js pro specifikaci tras:

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

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

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

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

router.get('/banana-bread', function(req,res){
res.sendFile(path + 'banana_bread.html');
});

router.use(function (req,res,next) {

console.log('/' + req.method);

next();

});

router.get('/', function(req,res){

res.sendFile(path + 'home.html');

});

router.get('/lasagna', function(req,res){

res.sendFile(path + 'lasagna.html');

});

router.get('/guacamole', function(req,res){

res.sendFile(path + 'guacamole.html');

});

router.get('/banana-bread', function(req,res){

res.sendFile(path + 'banana_bread.html');

});

Můžete přidat middleware k trasám pomocí funkce router.use. V tomto případě přidáme funkci, která zaznamenává požadavky routeru před jejich předáním trasám aplikace. Požadavek GET na základní adresu aplikace vrátí home.html stránku. Poté jsme přidali stránky pro tři recepty, které budou také načteny pomocí požadavku GET na konkrétní stránku receptu.

Nakonec přidejte následující kód pro připojení router middlewaru a statických prostředků aplikace. Navíc řekněte aplikaci express, aby naslouchala na portu 8090:

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

app.listen(port, function () {
console.log('Nodejs Express Example App listening on port ' + port)
})

app.use(express.static(path));

app.use('/', router);

app.listen(port, function () {

console.log('Nodejs Express Example App listening on port ' + port)

})

Váš kompletní index.js soubor by měl vypadat takto:

const express = require('express');
const app = express();
const router = express.Router();

const path = __dirname + '/views/';
const port = 8090;

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

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

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

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

router.get('/banana-bread', function(req,res){
res.sendFile(path + 'banana_bread.html');
});

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

app.listen(port, function () {
console.log('Nodejs Express Example App listening on port ' + port)
})

const express = require('express');

const app = express();

const router = express.Router();

const path = __dirname + '/views/';

const port = 8090;

router.use(function (req,res,next) {

console.log('/' + req.method);

next();

});

router.get('/', function(req,res){

res.sendFile(path + 'home.html');

});

router.get('/lasagna', function(req,res){

res.sendFile(path + 'lasagna.html');

});

router.get('/guacamole', function(req,res){

res.sendFile(path + 'guacamole.html');

});

router.get('/banana-bread', function(req,res){

res.sendFile(path + 'banana_bread.html');

});

app.use(express.static(path));

app.use('/', router);

app.listen(port, function () {

console.log('Nodejs Express Example App listening on port ' + port)

})

Nyní můžete soubor uložit a zavřít. Dalším krokem je přidání statických webových stránek do adresáře views. Začněte zadáním následujícího příkazu pro vytvoření adresáře:

mkdir views

1	mkdir views

Zadejte následující příkaz pro otevření souboru úvodní stránky home.html:

nano views/home.html

1	nano views/home.html

Přidejte do souboru následující kód. Kód importuje Bootstrap a nabízí návštěvníkům webu informace o tom, o čem celý web je:

<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.80.0">
<title>Skvělé recepty</title>

<!-- Základní CSS Bootstrapu -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
crossorigin="anonymous">

<link href="css/custom.css" rel="stylesheet">

</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-static-top navbar-expand-md">
<div class="container">
<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Přepnout navigaci</span>
</button> <a class="navbar-brand" href="#">Skvělé recepty</a>

<div class="collapse navbar-collapse justify-content-center" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav justify-content-center">
<li class="active nav-item">
<a href="/" class="nav-link">Domů</a>
</li>
<li class="nav-item">
<a href="/lasagna" class="nav-link">Lasagne</a>
</li>
<li class="nav-item">
<a href="/guacamole" class="nav-link">Guacamole</a>
</li>
<li class="nav-item">
<a href="/banana-bread" class="nav-link">Banánový chlebíček</a>
</li>
</ul>
</div>
</div>
</nav>
<main>
<section class="py-5 text-center container">
<div class="row py-lg-5">
<div class="col-lg-6 col-md-8 mx-auto">

<h1 class="fw-light">Skvělý recept</h1>

<p class="lead text-muted">
Najděte a sdílejte každodenní inspiraci na vaření z těchto skvělých receptů. Objevujte recepty, kuchaře,
videa a návody na základě jídla, které milujete, a přátel, které sledujete.
<br />
<em>(Nic vážného, toto je pouze pro naši ukázkovou aplikaci pro node-express-docker image)</em>
</p>

</div>
</div>
</section>
</main>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Skvělé recepty</title>

crossorigin="anonymous">

</head>

<body>

<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Přepnout navigaci</span>

</button> <a class="navbar-brand" href="#">Skvělé recepty</a>

</li>

<a href="/lasagna" class="nav-link">Lasagne</a>

</li>

<a href="/guacamole" class="nav-link">Guacamole</a>

</li>

<a href="/banana-bread" class="nav-link">Banánový chlebíček</a>

</li>

</ul>

</div>

</nav>

<main>

<h1 class="fw-light">Úžasný recept</h1>

Najděte a sdílejte každodenní inspiraci na vaření z těchto skvělých receptů. Objevujte recepty, kuchaře,

videa a návody na základě jídla, které milujete, a přátel, které sledujete.

<br />

<em>(Nic vážného, toto je pouze pro naši demo aplikaci node-express-docker)</em>

</p>

</div>

</section>

</main>

</body>

</html>

Kromě importu Bootstrapu stránka také přidává základní navigační menu pro snazší přecházení mezi stránkami a návrat na úvodní stránku. Přidali jsme také řádek pro import našeho vlastního CSS souboru:

<link href="css/custom.css" rel="stylesheet">

1	<link href="css/custom.css" rel="stylesheet">

Tento soubor použijeme k pozdějšímu přidání vlastního stylu do aplikace. Nyní vytvoříme tři stránky pro recepty. Nejprve začneme vytvořením stránky pro lasagne. Otevřete soubor v editoru nano pomocí následujícího příkazu:

nano views/lasagna.html

1	nano views/lasagna.html

Do otevřeného souboru přidejte následující kód. Tento soubor naimportuje Bootstrap, soubor custom.css, definuje navigační menu a nabídne informace o receptu na lasagne:

<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.80.0">
<title>Recept na lasagne</title>

<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
crossorigin="anonymous">

<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-static-top navbar-expand-md">
<div class="container">
<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Přepnout navigaci</span>
</button> <a class="navbar-brand" href="#">Awesome Recipes</a>

<div class="collapse navbar-collapse justify-content-center" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav justify-content-center">
<li class="active nav-item">
<a href="/" class="nav-link">Domů</a>
</li>
<li class="nav-item">
<a href="/lasagna" class="nav-link">Lasagne</a>
</li>
<li class="nav-item">
<a href="/guacamole" class="nav-link">Guacamole</a>
</li>
<li class="nav-item">
<a href="/banana-bread" class="nav-link">Banánový chlebíček</a>
</li>
</ul>
</div>
</div>
</nav>

<main>

<section class="py-5 text-center container bg-light">
<div class="row py-lg-5">
<div class="col-lg-6 col-md-8 mx-auto">

<h1 class="fw-light">Nejlepší recept na lasagne</h1>

<p class="lead text-muted">
Tohle jsou ty nejlepší lasagne, jaké kdy připravíte.
<br />
<em>(Nic vážného, toto je pouze pro naši ukázkovou aplikaci node-express-docker image)</em>
</p>
<h3>Ingredience</h3>
<ul class="list-group">
<li class="list-group-item">1 libra sladké italské klobásy</li>
<li class="list-group-item">¾ libry libového mletého hovězího masa</li>
<li class="list-group-item">½ hrnku nadrobno nakrájené cibule</li>
<li class="list-group-item">2 stroužky česneku, drcené</li>
<li class="list-group-item">1 (28 uncí) plechovka drcených rajčat</li>
<li class="list-group-item">2 (6 uncí) plechovky rajčatového protlaku</li>
<li class="list-group-item">2 (6.5 unce) plechovky rajčatové omáčky</li>
<li class="list-group-item">½ hrnku vody</li>
<li class="list-group-item">2 lžíce bílého cukru</li>
<li class="list-group-item">1 ½ lžičky sušených lístků bazalky</li>
<li class="list-group-item">½ lžičky fenyklových semínek</li>
<li class="list-group-item">1 lžička italského koření</li>
<li class="list-group-item">1 ½ lžičky soli, rozdělené, nebo podle chuti</li>
<li class="list-group-item">¼ lžičky mletého černého pepře</li>
<li class="list-group-item">4 lžíce nasekané čerstvé petrželky</li>
<li class="list-group-item">12 plátků na lasagne</li>
<li class="list-group-item">16 uncí sýru ricotta</li>
<li class="list-group-item">1 vejce</li>
<li class="list-group-item">¾ libry sýru mozzarella, nakrájeného na plátky</li>
<li class="list-group-item">¾ hrnku nastrouhaného parmazánu</li>
</ul>
</div>
</div>
</section>
</main>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Recept na lasagne</title>

crossorigin="anonymous">

</head>

<body>

<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Přepnout navigaci</span>

</button> <a class="navbar-brand" href="#">Skvělé recepty</a>

</li>

<a href="/lasagna" class="nav-link">Lasagne</a>

</li>

<a href="/guacamole" class="nav-link">Guacamole</a>

</li>

<a href="/banana-bread" class="nav-link">Banánový chlebíček</a>

</li>

</ul>

</div>

</nav>

<main>

<h1 class="fw-light">Nejlepší recept na lasagne</h1>

Tohle jsou ty nejlepší lasagne, jaké kdy uděláte.

<br />

<em>(Nic vážného, toto je pouze pro naši ukázkovou aplikaci s node-express-docker obrazem)</em>

</p>

<h3>Ingredience</h3>

<li class="list-group-item">1 libra jemné italské klobásy</li>

<li class="list-group-item">¾ libry libového mletého hovězího masa</li>

<li class="list-group-item">½ hrnku nadrobno nakrájené cibule</li>

<li class="list-group-item">2 stroužky česneku, drcené</li>

<li class="list-group-item">1 plechovka (28 uncí) drcených rajčat</li>

<li class="list-group-item">2 plechovky (6 uncí) rajčatového protlaku</li>

<li class="list-group-item">2 plechovky (6,5 unce) rajčatové omáčky</li>

<li class="list-group-item">½ hrnku vody</li>

<li class="list-group-item">2 lžíce bílého cukru</li>

<li class="list-group-item">1 ½ lžičky sušených lístků bazalky</li>

<li class="list-group-item">½ lžičky fenyklových semínek</li>

<li class="list-group-item">1 lžička italského koření</li>

<li class="list-group-item">1 ½ lžičky soli, rozdělené, nebo podle chuti</li>

<li class="list-group-item">¼ lžičky mletého černého pepře</li>

<li class="list-group-item">4 lžíce nasekané čerstvé petrželky</li>

<li class="list-group-item">12 plátků na lasagne</li>

<li class="list-group-item">16 uncí sýru ricotta</li>

<li class="list-group-item">1 vejce</li>

<li class="list-group-item">¾ libry sýru mozzarella, nakrájeného na plátky</li>

<li class="list-group-item">¾ hrnku strouhaného parmazánu</li>

</ul>

</div>

</section>

</main>

</body>

</html>

Pojďme provést stejný postup a vytvořit soubor pro stránku s receptem na guacamole. Otevřete soubor v editoru nano spuštěním následujícího příkazu:

nano views/guacamole.html

1	nano views/guacamole.html

Poté do souboru přidejte tento kód:

<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton a přispěvatelé Bootstrapu">
<meta name="generator" content="Hugo 0.80.0">
<title>Recept na guacamole</title>

<!-- Základní CSS Bootstrapu -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
crossorigin="anonymous">

<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-static-top navbar-expand-md">
<div class="container">
<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Přepnout navigaci</span>
</button> <a class="navbar-brand" href="#">Skvělé recepty</a>

<div class="collapse navbar-collapse justify-content-center" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav justify-content-center">
<li class="active nav-item">
<a href="/" class="nav-link">Domů</a>
</li>
<li class="nav-item">
<a href="/lasagna" class="nav-link">Lasagne</a>
</li>
<li class="nav-item">
<a href="/guacamole" class="nav-link">Guacamole</a>
</li>
<li class="nav-item">
<a href="/banana-bread" class="nav-link">Banánový chlebíček</a>
</li>
</ul>
</div>
</div>
</nav>

<main>

<section class="py-5 text-center container bg-light">
<div class="row py-lg-5">
<div class="col-lg-6 col-md-8 mx-auto">

<h1 class="fw-light">Nejlepší recept na guacamole</h1>

<p class="lead text-muted">
Tento avokádový salát můžete připravit jemný nebo s kousky, záleží na vaší chuti.
<br />
<em>(Nic vážného, toto je pouze pro naši ukázkovou aplikaci node-express-docker image)</em>
</p>
<h3>Ingredience</h3>
<ul class="list-group">
<li class="list-group-item">3 avokáda - oloupaná, vypeckovaná a rozmačkaná</li>
<li class="list-group-item">šťáva z 1 limetky</li>
<li class="list-group-item">1 lžička soli</li>
<li class="list-group-item">½ hrnku nakrájené cibule</li>
<li class="list-group-item">3 lžíce nasekaného čerstvého koriandru</li>
<li class="list-group-item">2 rajčata roma (keříčková), nakrájená na kostičky</li>
<li class="list-group-item">1 lžička prolisovaného česneku</li>
<li class="list-group-item">1 špetka mletého kajenského pepře (volitelně)</li>
</ul>
</div>
</div>
</section>
</main>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Recept na guacamole</title>

crossorigin="anonymous">

</head>

<body>

<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Přepnout navigaci</span>

</button> <a class="navbar-brand" href="#">Skvělé recepty</a>

</li>

<a href="/lasagna" class="nav-link">Lasagne</a>

</li>

<a href="/guacamole" class="nav-link">Guacamole</a>

</li>

<a href="/banana-bread" class="nav-link">Banánový chlebíček</a>

</li>

</ul>

</div>

</nav>

<main>

<h1 class="fw-light">Nejlepší recept na guacamole</h1>

Tento avokádový salát můžete připravit jemný nebo s kousky, podle vaší chuti.

<br />

<em>(Nic vážného, toto je pouze pro naši ukázkovou aplikaci node-express-docker)</em>

</p>

<h3>Ingredience</h3>

<li class="list-group-item">3 avokáda – oloupaná, vypeckovaná a rozmačkaná</li>

<li class="list-group-item">1 limetka, vymačkaná</li>

<li class="list-group-item">1 lžička soli</li>

<li class="list-group-item">½ hrnku nakrájené cibule</li>

<li class="list-group-item">3 lžíce nasekaného čerstvého koriandru</li>

<li class="list-group-item">2 rajčata roma (švestková), nakrájená na kostičky</li>

<li class="list-group-item">1 lžička prolisovaného česneku</li>

<li class="list-group-item">1 špetka mletého kajenského pepře (volitelně)</li>

</ul>

</div>

</section>

</main>

</body>

</html>

Nakonec vytvořme soubor banana_bread.html zadáním příkazu:

nano views/banana_bread.html

1	nano views/banana_bread.html

Poté do souboru přidejte následující kód HTML:

<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.80.0">
<title>Recept na banánový chlebíček</title>

<!-- Základní CSS pro Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
crossorigin="anonymous">

<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-static-top navbar-expand-md">
<div class="container">
<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Přepnout navigaci</span>
</button> <a class="navbar-brand" href="#">Skvělé recepty</a>

<div class="collapse navbar-collapse justify-content-center" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav justify-content-center">
<li class="active nav-item">
<a href="/" class="nav-link">Domů</a>
</li>
<li class="nav-item">
<a href="/lasagna" class="nav-link">Lasagne</a>
</li>
<li class="nav-item">
<a href="/guacamole" class="nav-link">Guacamole</a>
</li>
<li class="nav-item">
<a href="/banana-bread" class="nav-link">Banánový chlebíček</a>
</li>
</ul>
</div>
</div>
</nav>

<main>

<section class="py-5 text-center container bg-light">
<div class="row py-lg-5">
<div class="col-lg-6 col-md-8 mx-auto">

<h1 class="fw-light">Nejlepší recept na banánový chlebíček</h1>

<p class="lead text-muted">
Proč dělat kompromisy v banánové chuti? Tento banánový chlebíček je vláčný, lahodný a plný banánové chuti! Přátelé a rodina můj recept milují a tvrdí, že je zdaleka nejlepší! Je skvělý i opečený! Dobrou chuť!
<br />
<em>(Nic vážného, toto je pouze pro naši ukázkovou aplikaci s node-express-docker obrazem)</em>
</p>
<h3>Ingredience</h3>
<ul class="list-group">
<li class="list-group-item">2 hrnky hladké mouky</li>
<li class="list-group-item">1 lžička jedlé sody</li>
<li class="list-group-item">¼ lžičky soli</li>
<li class="list-group-item">½ hrnku másla</li>
<li class="list-group-item">¾ hrnku hnědého cukru</li>
<li class="list-group-item">2 rozšlehaná vejce</li>
<li class="list-group-item">2⅓ hrnku rozmačkaných přezrálých banánů</li>
</ul>
</div>
</div>
</section>
</main>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Recept na banánový chlebíček</title>

crossorigin="anonymous">

</head>

<body>

<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Přepnout navigaci</span>

</button> <a class="navbar-brand" href="#">Skvělé recepty</a>

</li>

<a href="/lasagna" class="nav-link">Lasagne</a>

</li>

<a href="/guacamole" class="nav-link">Guacamole</a>

</li>

<a href="/banana-bread" class="nav-link">Banánový chlebíček</a>

</li>

</ul>

</div>

</nav>

<main>

<h1 class="fw-light">Nejlepší recept na banánový chlebíček</h1>

Proč dělat kompromisy v banánové chuti? Tento banánový chlebíček je vláčný a lahodný s hromadou banánové chuti! Přátelé a rodina můj recept milují a říkají, že je zdaleka nejlepší! Je skvělý opečený!! Dobrou chuť!

<br />

<em>(Nic vážného, toto je pouze pro naši ukázkovou aplikaci s node-express-docker obrazem)</em>

</p>

<h3>Ingredience</h3>

<li class="list-group-item">2 hrnky hladké mouky</li>

<li class="list-group-item">1 lžička jedlé sody</li>

<li class="list-group-item">¼ lžičky soli</li>

<li class="list-group-item">½ hrnku másla</li>

<li class="list-group-item">¾ hrnku hnědého cukru</li>

<li class="list-group-item">2 rozšlehaná vejce</li>

<li class="list-group-item">2⅓ hrnku rozmačkaných přezrálých banánů</li>

</ul>

</div>

</section>

</main>

</body>

</html>

Nyní jsme vytvořili všechny stránky. Pokud si pamatujete, máme přidat soubor css/custom.css. Pro vytvoření adresáře zadejte následující příkaz:

mkdir views/css

1	mkdir views/css

Poté vytvořte a otevřete soubor v editoru nano pomocí příkazu:

nano views/css/custom.css

1	nano views/css/custom.css

Můžete přidat další CSS kódy pro nastylování vašeho webu podle libosti. Pro stručnost přidejme do souboru následující fragment kódu:

.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}

@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}

.bd-placeholder-img {

font-size: 1.125rem;

text-anchor: middle;

-webkit-user-select: none;

-moz-user-select: none;

user-select: none;

}

@media (min-width: 768px) {

.bd-placeholder-img-lg {

font-size: 3.5rem;

}

Po dokončení soubor uložte a zavřete.

Nyní můžete aplikaci spustit, protože máme nainstalovaný zdrojový kód aplikace i závislosti projektu.

Nastavili jsme aplikaci tak, aby naslouchala na portu 8090, spusťte následující příkaz, který instruuje firewall, aby povolil provoz přes tento port. Pokud jste zadali jiný port, nahraďte číslo portu v příkazu:

sudo ufw allow 8090

1	sudo ufw allow 8090

Nyní můžete aplikaci spustit. Nejprve se však ujistěte, že se nacházíte v kořenovém adresáři projektu, spuštěním následujícího příkazu:

cd ~/node_express

1	cd ~/node_express

Spusťte aplikaci pomocí node index.js. Pokud jste zadali jiný vstupní bod, nahraďte jej svým vstupním bodem:

node index.js

1	node index.js

Pokud ve svém prohlížeči přejdete na http://your_public_server_ip:8090, uvidíte úvodní stránku receptů (Recipes), jak byla definována:

V navigaci můžete vidět odkazy na různé recepty. Klikněme na některé z nich. Níže máme stránku s receptem na Lasagne:

A zde máme stránku s receptem na Guacamole:

Do tohoto okamžiku jste vytvořili svou aplikaci a otestovali, že funguje podle očekávání. Server můžete ukončit stisknutím Ctrl + C a přejít k vytvoření Dockerfile. Soubory Dockerfile pomáhají s škálovatelností tím, že umožňují v případě potřeby znovu vytvořit instanci aplikace.

Krok 3: Vytvoření Dockerfile

Docker při vytváření obrazů čte instrukce specifikované v souboru Dockerfile. Určuje běhové prostředí aplikace. Pomáhá tak vývojářům vyhnout se nesrovnalostem se závislostmi nebo měnícími se verzemi běhového prostředí. Pro vytvoření souboru Dockerfile zadejte následující příkaz:

nano Dockerfile

1	nano Dockerfile

Obraz Dockeru se vytváří pomocí několika vrstev obrazů, které na sebe navazují. Začnete přidáním základního obrazu, který tvoří výchozí bod pro aplikaci.

Vzhledem k tomu, že se očekává, že aplikace poběží v prostředí node.js, začneme přidáním obrazu node:10-alpine pro node.js. V současné době, kdy píšeme tento návod, je to doporučená LTS verze Node.js. Tento konkrétní obraz jsme vybrali, protože je odvozen od projektu Alpine Linux. Pomůže nám to tedy udržet velikost našeho obrazu na minimu. Na stránce obrazů Node na Docker Hubu je k dispozici několik variant obrazů, ze kterých si můžete vybrat podle svých potřeb.

Přidejte následující kód pro nastavení základního obrazu aplikace pomocí direktivy FROM:

FROM node:10-alpine

1	FROM node:10-alpine

Tento obraz obsahuje Node.js a npm. Každý Dockerfile musí začínat direktivou FROM. Obraz Dockeru node standardně obsahuje uživatele node, který nemá oprávnění root a kterého můžete použít ke spuštění kontejneru aplikace namísto uživatele root. Bezpečnostní doporučení pro Docker doporučují nespouštět kontejnery jako root a omezit oprávnění pouze na ta, která jsou vyžadována ke spuštění jeho prostředků.

V takovém případě budeme jako pracovní adresář pro aplikaci i pro uživatele uvnitř kontejneru používat domovský adresář uživatele node. Další informace naleznete v této příručce osvědčených postupů pro obraz Docker Node.

Vytvoříme podadresář node_modules uvnitř /home/node spolu s adresářem aplikace, což pomůže zjednodušit oprávnění pro kód aplikace. Vytvoření těchto adresářů zajistí, že budou mít správná oprávnění, když v kontejnerech lokálně spustíme příkaz npm install. Jakmile adresáře vytvoříte, musíte na ně nastavit vlastnictví pro uživatele node. To provedeme uvnitř souboru Dockerfile přidáním následujícího řádku:

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

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

Poté nastavíte pracovní adresář přidáním následujícího řádku:

WORKDIR /home/node/app

1	WORKDIR /home/node/app

Je dobré vždy nastavit WORKDIR, aby jej Docker nemusel vytvářet ve výchozím nastavení.

Přidejte následující řádek pro zkopírování souborů package.json a package-lock.json:

COPY package*.json ./

1	COPY package*.json ./

Doporučuje se přidat instrukci COPY před spuštěním npm install nebo kopírováním zdrojového kódu aplikace. To vám umožní využít mechanismus cachování Dockeru. Během procesu sestavení Docker kontroluje, zda má pro každou instrukci nacachovanou vrstvu. To znamená, že pokud jste nezměnili soubor package.json, Docker použije existující vrstvu obrazu a vyhne se přeinstalaci node modules, což urychlí proces sestavení.

Před spuštěním npm install, přidejte následující řádek pro přepnutí uživatele na node , abyste zajistili, že všechny soubory aplikace a adresář node_modules budou vlastněny uživatelem node, který nemá oprávnění root:

USER node

USER node

Náš kontejner je nyní připraven ke spuštění příkazu npm install. Přidejte do souboru Dockerfile následující řádek:

RUN npm install

1	RUN npm install

Jakmile jsou node_modules nainstalovány, přidejte následující řádek, který Dockeru řekne, aby zkopíroval kód aplikace do adresáře aplikace v kontejneru se správnými oprávněními a vlastnictvím, tj. pro uživatele node bez oprávnění root:

COPY --chown=node:node . .

1	COPY --chown=node:node . .

Posledním krokem je vystavení portu 8090 na kontejneru, jak jsme definovali v našem vstupním souboru index.js:

EXPOSE 8090
CMD [ "node", "index.js" ]

1 2	EXPOSE 8090 CMD [ "node", "index.js" ]

EXPOSE určuje, které porty na kontejneru budou otevřené za běhu. CMD spustí příkaz pro spuštění aplikace, v tomto případě node index.js.

V Dockerfile byste měli mít pouze jeden příkaz CMD, protože se uplatní pouze ten poslední. Podívejte se prosím na referenční dokumentaci k Dockerfile, kde najdete seznam věcí, které můžete s Dockerfile dělat.

Váš kompletní Dockerfile by měl vypadat takto:

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 8090
CMD [ "node", "index.js" ]

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 8090

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

Nyní můžete soubor uložit a zavřít.

Další věcí, kterou uděláte, je přidání souboru .dockerignore. Stejně jako soubor .gitignore, soubor .dockerignore určuje, které soubory a adresáře v adresáři projektu by se neměly kopírovat do kontejneru.

Otevřete soubor v editoru nano:

nano .dockerignore

1	nano .dockerignore

Do souboru přidejte následující řádky:

node_modules
npm-debug.log
Dockerfile
.dockerignore

node_modules

npm-debug.log

Dockerfile

.dockerignore

Pokud pracujete s git repozitářem, měli byste také přidat adresář .git a soubor .gitignore. Soubor uložte a zavřete.

Pokud vše proběhlo v pořádku, je čas sestavit obraz aplikace pomocí příkazu docker build. K příkazu –t můžete přidat příznak docker build, abyste obraz označili snadno zapamatovatelným názvem namísto náhodného řetězce, který docker nastavuje ve výchozím nastavení. Obraz budeme také nahrávat na Docker Hub, takže je nejlepší do značky zahrnout vaše uživatelské jméno pro Docker Hub.

Jako název značky použijeme nodejs-express-image. Můžete si vybrat libovolný název značky, který se vám líbí. Zde je příkaz pro sestavení obrazu:

sudo docker build -t your_dockerhub_username/nodejs-express-image .

1	sudo docker build -t your_dockerhub_username/nodejs-express-image .

Nezapomeňte nahradit your_dockerhub_username vaším skutečným uživatelským jménem pro Docker Hub. Tečka (.) na konci určuje, že kontextem sestavení je aktuální adresář.

Proces sestavení trvá minutu nebo dvě. Jakmile je hotovo, zadejte příkaz pro kontrolu vašich obrazů:

sudo docker images

1	sudo docker images

Měli byste vidět něco takového:

Nezapomeňte, že jsme nahradili your_dockerhub_username skutečným uživatelským jménem.

Po potvrzení, že byl váš obraz sestaven, můžete nyní vytvořit kontejner s tímto obrazem pomocí docker run. Budou zahrnuty následující příznaky:

-p: publikuje port na kontejneru a mapuje jej na port na hostitelském systému. Pro demonstrační účely použijeme port 80 na hostitelském systému. Pokud však na tomto portu běží jiný proces, můžete jej podle potřeby upravit. Další informace o vázání portů naleznete v dokumentaci k Dockeru.
-d: pro odpojený režim (detached mode). Umožňuje kontejneru pokračovat v běhu na pozadí.
--name: můžete použít k nastavení snadno zapamatovatelného názvu namísto toho, aby Docker přiřadil náhodný řetězec.

Příkaz pro sestavení kontejneru je následující. Nahraďte své uživatelské jméno pro Docker Hub odpovídajícím způsobem:

sudo docker run --name nodejs-express-image -p 80:8090 -d your_dockerhub_username/nodejs-express-image

1	sudo docker run --name nodejs-express-image -p 80:8090 -d your_dockerhub_username/nodejs-express-image

Počkejte, až se kontejner sestaví a spustí. Pomocí tohoto příkazu můžete zkontrolovat všechny běžící kontejnery:

sudo docker ps

1	sudo docker ps

Měli byste vidět výstup podobný následujícímu:

Jak je vidět ve výstupu, kontejner nyní běží. Můžete si jej prohlédnout v prohlížeči, pokud navštívíte veřejnou IP adresu vašeho serveru bez portu. Načte se vaše domovská stránka:

Úspěšně jste nasadili statický web Node Express pomocí Dockeru. Podívejme se, jak můžeme tento obraz nahrát na Docker Hub pro budoucí použití a účely škálování.

Krok 4: Práce s repozitáři obrazů Docker

Své obrazy můžete nahrát do registrů obrazů, jako je Docker Hub, a uložit je pro budoucí použití, sdílet je s ostatními vývojáři nebo umožnit škálování kontejnerů. Vytvořený obraz můžeme nahrát na Docker Hub a použít jej k opětovnému vytvoření kontejneru.

Pro přihlášení k účtu Docker Hub použijte následující příkaz. Nahraďte jej svým skutečným uživatelským jménem pro Docker Hub:

sudo docker login -u your_dockerhub_username

1	sudo docker login -u your_dockerhub_username

Po vyzvání zadejte své heslo. Po přihlášení se vytvoří soubor ~/.docker/config.json v domovském adresáři vašeho uživatele, který obsahuje vaše přihlašovací údaje k Docker Hubu.

S tímto nastavením zadejte následující příkaz pro nahrání obrazu na Docker Hub, přičemž uveďte tag, který jste nastavili při dřívějším sestavení obrazu:

sudo docker push your_dockerhub_username/nodejs-express-image

1	sudo docker push your_dockerhub_username/nodejs-express-image

Tento příkaz nahraje docker obraz na váš účet Docker Hub. Pokud navštívíte svůj účet, uvidíte svůj nedávno nahraný obraz:

Užitečnost repozitáře obrazů můžeme otestovat tak, že zničíme aktuální kontejner aplikace a znovu jej sestavíme pomocí obrazu v repozitáři.

Zadejte příkaz pro výpis aktuálních kontejnerů:

sudo docker ps

1	sudo docker ps

Měli byste vidět výstup podobný tomuto:

Poznamenejte si CONTAINER ID uvedené ve vašem výstupu, zkopírujte jej a použijte jej k zastavení kontejneru pomocí příkazu, přičemž nahraďte ID svým vlastním:

sudo docker stop 1bb2d65279bb

1	sudo docker stop 1bb2d65279bb

Zadejte následující příkaz pro výpis všech docker obrazů dostupných ve vašem systému:

sudo docker images –a

1	sudo docker images –a

Výstup zobrazí název vašeho obrazu, obraz node.js a další obrazy z procesu sestavení.

Zadejte následující příkaz pro odstranění obrazů, včetně nepoužívaných nebo osiřelých obrazů:

sudo docker system prune

1	sudo docker system prune

Napište y pro potvrzení. Tím se odstraní zastavené kontejnery a obrazy. Pokud je vypíšete, uvidíte ve výstupu prázdný seznam:

Nanyi jste odstranili jak kontejner, v němž aplikace běžela, tak samotný obraz. Další informace o odstraňování Docker kontejnerů, obrazů a svazků naleznete v našem návodu.

Nyní můžeme celý proces zopakovat tak, že nejprve stáhneme obraz z Docker Hubu pomocí následujícího příkazu. Podle potřeby nahraďte své uživatelské jméno pro Docker Hub:

sudo docker pull your_dockerhub_username/nodejs-express-image

1	sudo docker pull your_dockerhub_username/nodejs-express-image

Znovu vypište své Docker obrazy pomocí příkazu:

sudo docker images

1	sudo docker images

Ve výstupu byste měli vidět daný obraz:

Nyní můžete svůj kontejner znovu sestavit pomocí příkazu z Step 3. Samozřejmě podle potřeby nahraďte své uživatelské jméno pro Docker Hub:

sudo docker run --name nodejs-express-image -p 80:8090 -d your_dockerhub_username/nodejs-express-image

1	sudo docker run --name nodejs-express-image -p 80:8090 -d your_dockerhub_username/nodejs-express-image

Vypište své kontejnery, abyste potvrdili, že byl znovu sestaven:

sudo docker ps

1	sudo docker ps

Měli byste vidět podobný výstup:

V prohlížeči přejděte na veřejnou IP adresu svého serveru a měli byste vidět, že vaše aplikace běží.

Závěr

Pokud jste postupovali podle návodu až do tohoto bodu, máte nyní statický web vytvořený pomocí Expressu a Bootstrapu a nasazený pomocí Dockeru. Použili jste soubory statického webu k sestavení Docker obrazu a tento obraz jste použili k vytvoření kontejneru. Poté jste obraz nahráli do registru Docker obrazů, Docker Hub, čímž jste jej zpřístupnili pro budoucí použití nebo škálování. Chcete-li otestovat použití registru obrazů, zničili jste obrazy a kontejnery, stáhli obrazy z registru a kontejnery znovu sestavili.

Tento návod vysvětlil, jak nasadit aplikaci Node.js. Pokud byste se chtěli dozvědět, jak používat jiný stack pro vývoj webu, máme pro vás návod na Nasazení aplikace Laravel s Docker Compose na Nginx.

Další zdroje týkající se využití Dockeru naleznete v následujících návodech:

Příjemnou práci s počítačem!

Hark Labs

Autor · CloudSigma

Preslav Dobrev je kreativní designér ve společnosti CloudSigma, který se zaměřuje na konzistentní firemní identitu prostřednictvím tradičních i inovativních marketingových kanálů. Je zdatný v propojování umělecké vize se strategickým marketingem za účelem vytváření působivých příběhů značky.

Jak nasadit aplikaci Node.js (Express.js) pomocí Dockeru na Ubuntu 20.04

Úvod

Požadavky

Krok 1: Konfigurace závislostí aplikace

Krok 2: Přidání souborů s kódem aplikace

Krok 3: Vytvoření Dockerfile

Krok 4: Práce s repozitáři obrazů Docker

Závěr

Hark Labs

Komentáře