Kako postaviti Node.js (Express.js) aplikaciju pomoću Dockera na Ubuntu 20.04

Hark Labs2021-10-15 · 35 min read

Kako postaviti Node.js (Express.js) aplikaciju pomoću Dockera na Ubuntu 20.04

Uvod

Docker je platforma za kontejnere koja predstavlja lagano, virtualizirano, prijenosno, softverski definirano standardizirano okruženje. Omogućuje softveru da se izvodi u izolaciji od ostalog softvera koji se izvodi na fizičkom računalu domaćinu. Docker je ključna komponenta aspekta kontinuiranog razvoja i integracije (Continuous Development and Integration) u razvoju softvera. Nudi laganu alternativu virtualnim strojevima i omogućuje razvojnim programerima da uživaju u distribuiranim arhitekturama aplikacija. Za temeljit pregled Docker ekosustava, pogledajte ovaj članak.

Proces izgradnje aplikacije s Dockerom započinje tako što razvojni programer stvara sliku za svoju aplikaciju. Zatim će se slika implementirati unutar kontejnera. Slika sadrži definirajuće komponente aplikacije kao što su kod aplikacije, biblioteke, konfiguracijske datoteke, varijable okruženja i runtime okruženje. Slika standardizira okruženje unutar kontejnera, dajući kontejnerizaciji karakteristike prenosivosti. Node.js je open-source, višeplatformsko pozadinsko JavaScript runtime okruženje koje može izvršavati JavaScript kod izvan web preglednika. Izgrađeno je na Chromeovom V8 JavaScript Engine. Express.js je minimalistički pozadinski JavaScript okvir koji se izvodi povrh Node.js-a.

U ovom vodiču stvorit ćemo sliku za web stranicu koja se izvodi na Express okviru. Koristit ćemo Bootstrap, što je frontend biblioteka, kako bi frontend izgledao bolje. Nakon što stvorimo sliku, izgradit ćemo kontejner i poslati ga na Docker Hub. Docker Hub omogućuje razvojnim programerima udomljavanje kontejneriziranih aplikacija za jednostavnu implementaciju u bilo koje Docker okruženje. Nakon što se vaš kontejner udomi na Docker Hubu, povući ćemo ga i izgraditi drugu sliku koja će zapravo posluživati našu web stranicu.

Preduvjeti

Ovo će biti praktičan vodič. Trebali biste stvoriti okruženje koje će vam omogućiti da ga pratite.

Trebali biste imati instalaciju Ubuntu 20.04 kao vaše početno operativno okruženje i stvoriti ne-root korisnika sa sudo privilegijama. Prijavite se s ne-root korisnikom i nastavite sa sljedećim koracima.
Morate instalirati Docker. Slijedite korake 1, 2, 3 i 4 našeg vodiča o tome kako instalirati i upravljati Dockerom na Ubuntuu. Ovo bi trebalo raditi za bilo koju distribuciju Ubuntua.
Stvorite Docker Hub račun ako ga već nemate. Možete pratiti ovu poveznicu za Vodič za brzi početak rada s Docker Hubom.
Instalirajte Node.js i NPM. NPM je upravitelj JavaScript paketa. Možete slijediti ove upute o instalaciji Nodea i npm-a.

Korak 1: Konfiguriranje ovisnosti aplikacije

Morate stvoriti izvorni kod svoje aplikacije prije nego što možete stvoriti sliku. Izvorni kod aplikacije uključuje kod, statički sadržaj i ovisnosti koje će se kopirati u kontejner. Započnite stvaranjem direktorija za svoj projekt u početnom direktoriju ne-root korisnika. Nazvat ćemo ga node_express, ali slobodno upotrijebite naziv direktorija koji vam se sviđa:

mkdir node_express

1	mkdir node_express

Zatim prijeđite u ovaj direktorij:

cd node_express

1	cd node_express

Ovo će biti korijenski direktorij vaše aplikacije. node.js aplikacija očekuje package.json datoteku u korijenskoj mapi. Npm koristi ovu datoteku kako bi odredio koje su ovisnosti potrebne vašoj aplikaciji. Unesite sljedeću naredbu za stvaranje ove datoteke:

nano package.json

1	nano package.json

Nakon toga dodajte sljedeći isječak koda u datoteku. Možete ažurirati naziv, autora, opis i datoteku ulazne točke po želji:

{
"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"

}

Kao što vidite, ova datoteka specificira naziv projekta, verziju, autora i licencu pod kojom će se kôd aplikacije dijeliti. Preporučuje se korištenje kratkog i opisnog naziva za vaš projekt kako biste izbjegli duplikate u npm registru. Specificirali smo ISC licencu za projekt koja dopušta besplatno kopiranje, modificiranje ili distribuciju koda aplikacije.

Što je najvažnije, trebali biste uočiti sljedeće direktive u datoteci:

“main”: ova direktiva specificira ulaznu točku aplikacije, koju smo postavili kao index.js. Uskoro ćemo kreirati ovu datoteku.
“dependencies”: ova direktiva specificira ovisnosti aplikacije koje će se povući iz npm registra kada pokrenemo naredbu npm, u našem slučaju želimo Express verziju 4.17.1 i noviju.

Sada možete spremiti datoteku pritiskom na Ctrl + O. Zatim zatvorite datoteku pritiskom na Ctrl + X. Dalje, instalirat ćemo ovisnosti pokretanjem sljedeće naredbe:

npm install

1	npm install

Naredba instalira ovisnosti aplikacije specificirane u package.json datoteci unutar node_modules direktorija. Oni su automatski kreirani kada ste prvi put pokrenuli naredbu. S instaliranim ovisnostima naše aplikacije, sada možete početi dodavati kôd aplikacije.

Step 2: Adding Your Application Code Files

Kreirat ćemo jednostavnu web stranicu s receptima, zahvaljujući allrecipes. Glavna ulazna točka za aplikaciju je index.js datoteka. Dodat ćemo views direktorij koji će sadržavati različite stranice i statičke resurse projekta. Web stranica će imati početnu stranicu koja će sadržavati uvodne informacije i poveznice na neke recepte.

Kôd naše početne stranice bit će smješten u home.html datoteku. Prvo kreirajte index.js datoteku unosom sljedeće naredbe:

nano index.js

1	nano index.js

Dodajte sljedeći kôd koji uvozi i kreira Express aplikaciju. Također specificira objekt Router, bazni direktorij i port na kojem će se ova aplikacija posluživati:

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 JavaScript funkcija koja učitava modul. U ovom slučaju učitavamo modul express. Zatim ćemo koristiti uvezeni modul za kreiranje objekata express i router. Objekt router obavlja funkcije usmjeravanja aplikacije odgovarajući na pozive HTTP metoda koje ćemo dodavati ovom objektu kako budemo napredovali kroz vodič.

Također smo postavili path i port. Konstanta path definira bazni direktorij za kôd. U našem slučaju to je views poddirektorij unutar korijenskog direktorija projekta. port specificira port na kojem bi express aplikacija trebala slušati, u našem primjeru postavili smo ga na 8090.

Nakon što imamo konstante, možemo specificirati neke rute za aplikaciju pomoću objekta router. Dodajte sljedeći kôd u index.js datoteku kako biste specificirali rute:

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');

});

Možete dodati middleware rutama pomoću funkcije router.use. U ovom slučaju dodajemo funkciju koja bilježi zahtjeve usmjerivača prije nego što ih proslijedi rutama aplikacije. GET zahtjev na bazu aplikacije vratit će home.html stranicu. Zatim smo dodali stranice za tri recepta koji će se također dohvatiti pomoću GET zahtjeva na određenu stranicu recepta.

Na kraju, dodajte sljedeći kod za montiranje router middleware-a i statičkih resursa aplikacije. Osim toga, recite express aplikaciji da sluša 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 sluša na portu ' + port)

})

Vaša potpuna index.js datoteka bi trebala izgledati ovako:

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 sluša na portu ' + port)

})

Sada možete spremiti i zatvoriti datoteku. Sljedeći korak je dodavanje statičkih web stranica u views direktorij. Započnite unosom sljedeće naredbe za stvaranje direktorija:

mkdir views

1	mkdir views

Unesite sljedeću naredbu za otvaranje home.html početne stranice:

nano views/home.html

1	nano views/home.html

Dodajte sljedeći kod u datoteku. Kod uvozi Bootstrap i posjetiteljima web stranice nudi neke informacije o tome o čemu se radi na web stranici:

<!DOCTYPE html>
<html lang="hr">
<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>Sjajni recepti</title>

<!-- Osnovni Bootstrap 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">Uključi/isključi navigaciju</span>
</button> <a class="navbar-brand" href="#">Sjajni recepti</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">Početna</a>
</li>
<li class="nav-item">
<a href="/lasagna" class="nav-link">Lazanje</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">Kruh od banane</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">Sjajan recept</h1>

<p class="lead text-muted">
Pronađite i podijelite svakodnevnu kulinarsku inspiraciju iz ovih sjajnih recepata. Otkrijte recepte, kuhare,
videozapise i upute na temelju hrane koju volite i prijatelja koje pratite.
<br />
<em>(Ništa ozbiljno, ovo je samo za našu demo aplikaciju node-express-docker slike)</em>
</p>

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

<!DOCTYPE html>

<head>

<title>Sjajni recepti</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">Uključi/isključi navigaciju</span>

</button> <a class="navbar-brand" href="#">Sjajni recepti</a>

<a href="/" class="nav-link">Početna</a>

</li>

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

</li>

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

</li>

<a href="/banana-bread" class="nav-link">Kruh od banane</a>

</li>

</ul>

</div>

</nav>

<main>

<h1 class="fw-light">Sjajan recept</h1>

Pronađite i podijelite svakodnevnu inspiraciju za kuhanje iz ovih sjajnih recepata. Otkrijte recepte, kuhare,

videozapise i vodiče temeljene na hrani koju volite i prijateljima koje pratite.

<br />

<em>(Ništa ozbiljno, ovo je samo za našu demo node-express-docker sliku aplikacije)</em>

</p>

</div>

</section>

</main>

</body>

</html>

Osim uvoza Bootstrapa, stranica također dodaje osnovni navigacijski izbornik koji nam pomaže u kretanju kroz stranice i povratku na početnu stranicu. Također smo dodali redak za uvoz naše prilagođene CSS datoteke:

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

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

Ovu ćemo datoteku kasnije koristiti za dodavanje prilagođenog stila aplikaciji. Sada kreirajmo tri stranice za recepte. Prvo počinjemo stvaranjem stranice za lazanje . Otvorite datoteku pomoću nano uređivača koristeći sljedeću naredbu:

nano views/lasagna.html

1	nano views/lasagna.html

U otvorenu datoteku dodajte sljedeći kod. Ova će datoteka uvesti Bootstrap, custom.css datoteku, odrediti navigacijski izbornik i ponuditi neke informacije o receptu za lazanje:

<!DOCTYPE html>
<html lang="hr">
<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 za lazanje</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">Uključi/isključi navigaciju</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">Početna</a>
</li>
<li class="nav-item">
<a href="/lasagna" class="nav-link">Lazanje</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">Kruh od banane</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">Najbolji recept za lazanje</h1>

<p class="lead text-muted">
Ovo su najbolje lazanje koje ćete ikada napraviti.
<br />
<em>(Ništa ozbiljno, ovo je samo za našu demo node-express-docker image aplikaciju)</em>
</p>
<h3>Sastojci</h3>
<ul class="list-group">
<li class="list-group-item">1 funta slatke talijanske kobasice</li>
<li class="list-group-item">¾ funte nemasnog mljevenog goveđeg mesa</li>
<li class="list-group-item">½ šalice sitno sjeckanog luka</li>
<li class="list-group-item">2 češnja češnjaka, protisnuta</li>
<li class="list-group-item">1 (28 unci) limenka drobljene rajčice</li>
<li class="list-group-item">2 (6 unci) limenke koncentrata rajčice</li>
<li class="list-group-item">2 (6,5 unci) limenke umaka od rajčice</li>
<li class="list-group-item">½ šalice vode</li>
<li class="list-group-item">2 žlice bijelog šećera</li>
<li class="list-group-item">1 ½ žličica sušenih listova bosiljka</li>
<li class="list-group-item">½ žličice sjemenki komorača</li>
<li class="list-group-item">1 žličica talijanskog začina</li>
<li class="list-group-item">1 ½ žličica soli, podijeljeno, ili po ukusu</li>
<li class="list-group-item">¼ žličice mljevenog crnog papra</li>
<li class="list-group-item">4 žlice sjeckanog svježeg peršina</li>
<li class="list-group-item">12 listova za lazanje</li>
<li class="list-group-item">16 unci ricotta sira</li>
<li class="list-group-item">1 jaje</li>
<li class="list-group-item">¾ funte mozzarella sira, narezanog</li>
<li class="list-group-item">¾ šalice naribanog parmezana</li>
</ul>
</div>
</div>
</section>
</main>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Recept za lazanje</title>

crossorigin="anonymous">

</head>

<body>

</button> <a class="navbar-brand" href="#">Sjajni recepti</a>

<a href="/" class="nav-link">Početna</a>

</li>

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

</li>

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

</li>

<a href="/banana-bread" class="nav-link">Kruh od banane</a>

</li>

</ul>

</div>

</nav>

<main>

<h1 class="fw-light">Najbolji recept za lazanje</h1>

Ovo su najbolje lazanje koje ćete ikada napraviti.

<br />

<em>(Ništa ozbiljno, ovo je samo za našu demo node-express-docker slikovnu aplikaciju)</em>

</p>

<h3>Sastojci</h3>

<li class="list-group-item">1 funta slatke talijanske kobasice</li>

<li class="list-group-item">¾ funte nemasnog mljevenog goveđeg mesa</li>

<li class="list-group-item">½ šalice sitno sjeckanog luka</li>

<li class="list-group-item">2 režnja češnjaka, protisnuta</li>

<li class="list-group-item">1 limenka (28 unci) drobljene rajčice</li>

<li class="list-group-item">2 limenke (6 unci) koncentrata rajčice</li>

<li class="list-group-item">2 limenke (6,5 unci) umaka od rajčice</li>

<li class="list-group-item">½ šalice vode</li>

<li class="list-group-item">2 žlice bijelog šećera</li>

<li class="list-group-item">1 ½ žličica sušenih listova bosiljka</li>

<li class="list-group-item">½ žličice sjemenki komorača</li>

<li class="list-group-item">1 žličica talijanske mješavine začina</li>

<li class="list-group-item">1 ½ žličica soli, podijeljeno, ili po ukusu</li>

<li class="list-group-item">¼ žličice mljevenog crnog papra</li>

<li class="list-group-item">4 žlice sjeckanog svježeg peršina</li>

<li class="list-group-item">12 listova za lazanje</li>

<li class="list-group-item">16 unci ricotta sira</li>

<li class="list-group-item">¾ funte mozzarella sira, narezanog</li>

<li class="list-group-item">¾ šalice naribanog parmezana</li>

</ul>

</div>

</section>

</main>

</body>

</html>

Pratimo isti postupak kako bismo izradili datoteku za stranicu s receptom za guacamole. Otvorite datoteku pomoću programa nano pokretanjem sljedeće naredbe:

nano views/guacamole.html

1	nano views/guacamole.html

Zatim dodajte ovaj kod u datoteku:

<!DOCTYPE html>
<html lang="hr">
<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 za guacamole</title>

<!-- Bootstrap osnovni 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">Uključi/isključi navigaciju</span>
</button> <a class="navbar-brand" href="#">Fantastični recepti</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">Početna</a>
</li>
<li class="nav-item">
<a href="/lasagna" class="nav-link">Lazanje</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">Kruh od banane</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">Najbolji recept za guacamole</h1>

<p class="lead text-muted">
Ovu salatu od avokada možete napraviti glatku ili s komadićima, ovisno o vašem ukusu.
<br />
<em>(Ništa ozbiljno, ovo je samo za našu demo aplikaciju node-express-docker slike)</em>
</p>
<h3>Sastojci</h3>
<ul class="list-group">
<li class="list-group-item">3 avokada - oguljena, očišćena od koštica i zgnječena</li>
<li class="list-group-item">1 limeta, iscijeđena</li>
<li class="list-group-item">1 žličica soli</li>
<li class="list-group-item">½ šalice nasjeckanog luka</li>
<li class="list-group-item">3 žlice nasjeckanog svježeg korijandera</li>
<li class="list-group-item">2 rajčice šljivarice (roma), narezane na kockice</li>
<li class="list-group-item">1 žličica sitno sjeckanog češnjaka</li>
<li class="list-group-item">1 prstohvat mljevenog kajenskog papra (neobavezno)</li>
</ul>
</div>
</div>
</section>
</main>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Recept za guacamole</title>

crossorigin="anonymous">

</head>

<body>

</button> <a class="navbar-brand" href="#">Fantastični recepti</a>

<a href="/" class="nav-link">Početna</a>

</li>

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

</li>

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

</li>

<a href="/banana-bread" class="nav-link">Kruh od banane</a>

</li>

</ul>

</div>

</nav>

<main>

<h1 class="fw-light">Najbolji recept za guacamole</h1>

Ovu salatu od avokada možete napraviti glatku ili s komadićima, ovisno o vašem ukusu.

<br />

<em>(Ništa ozbiljno, ovo je samo za našu demo node-express-docker slikovnu aplikaciju)</em>

</p>

<h3>Sastojci</h3>

<li class="list-group-item">3 avokada - oguljena, očišćena od koštica i zgnječena</li>

<li class="list-group-item">1 limeta, iscijeđena</li>

<li class="list-group-item">1 žličica soli</li>

<li class="list-group-item">½ šalica nasjeckanog luka</li>

<li class="list-group-item">3 žlice nasjeckanog svježeg korijandera</li>

<li class="list-group-item">2 roma (šljivar) rajčice, narezane na kockice</li>

<li class="list-group-item">1 žličica sitno nasjeckanog češnjaka</li>

<li class="list-group-item">1 prstohvat mljevenog kajenskog papra (opcionalno)</li>

</ul>

</div>

</section>

</main>

</body>

</html>

Na kraju, kreirajmo datoteku banana_bread.html upisivanjem naredbe:

nano views/banana_bread.html

1	nano views/banana_bread.html

Zatim dodajte sljedeći HTML kod u datoteku:

<!DOCTYPE html>
<html lang="hr">
<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 za kruh od banane</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">Uključi/isključi navigaciju</span>
</button> <a class="navbar-brand" href="#">Sjajni recepti</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">Početna</a>
</li>
<li class="nav-item">
<a href="/lasagna" class="nav-link">Lazanje</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">Kruh od banane</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">Najbolji recept za kruh od banane</h1>

<p class="lead text-muted">
Zašto kompromitirati okus banane? Ovaj kruh od banane je sočan i ukusan s obiljem okusa banane! Prijatelji i obitelj obožavaju moj recept i kažu da je uvjerljivo najbolji! Predivan je kad se tostira!! Uživajte!
<br />
<em>(Ništa ozbiljno, ovo je samo za našu demo node-express-docker sliku aplikacije)</em>
</p>
<h3>Sastojci</h3>
<ul class="list-group">
<li class="list-group-item">2 šalice višenamjenskog brašna</li>
<li class="list-group-item">1 žličica sode bikarbone</li>
<li class="list-group-item">¼ žličice soli</li>
<li class="list-group-item">½ šalice maslaca</li>
<li class="list-group-item">¾ šalice smeđeg šećera</li>
<li class="list-group-item">2 jaja, umućena</li>
<li class="list-group-item">2⅓ šalice zgnječenih prezrelih banana</li>
</ul>
</div>
</div>
</section>
</main>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Recept za kruh od banane</title>

crossorigin="anonymous">

</head>

<body>

</button> <a class="navbar-brand" href="#">Sjajni recepti</a>

<a href="/" class="nav-link">Početna</a>

</li>

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

</li>

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

</li>

<a href="/banana-bread" class="nav-link">Kruh od banane</a>

</li>

</ul>

</div>

</nav>

<main>

<h1 class="fw-light">Najbolji recept za kruh od banane</h1>

Zašto kompromitirati okus banane? Ovaj kruh od banane je sočan i ukusan s puno okusa banane! Prijatelji i obitelj obožavaju moj recept i kažu da je daleko najbolji! Predivan je kad se tostira!! Uživajte!

<br />

<em>(Ništa ozbiljno, ovo je samo za našu demo node-express-docker image aplikaciju)</em>

</p>

<h3>Sastojci</h3>

<li class="list-group-item">2 šalice višenamjenskog brašna</li>

<li class="list-group-item">1 žličica sode bikarbone</li>

<li class="list-group-item">¼ žličice soli</li>

<li class="list-group-item">½ šalice maslaca</li>

<li class="list-group-item">¾ šalice smeđeg šećera</li>

<li class="list-group-item">2 jaja, umućena</li>

<li class="list-group-item">2⅓ šalice zgnječenih prezrelih banana</li>

</ul>

</div>

</section>

</main>

</body>

</html>

Sada smo kreirali sve stranice. Ako se sjećate, trebamo dodati css/custom.css datoteku. Unesite sljedeću naredbu za stvaranje direktorija:

mkdir views/css

1	mkdir views/css

Zatim kreirajte i otvorite datoteku u nano uređivaču pomoću naredbe:

nano views/css/custom.css

1	nano views/css/custom.css

Možete dodati još CSS koda kako biste stilizirali svoju web stranicu po želji. Radi kratkoće, dodajmo sljedeći isječak koda u datoteku:

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

}

Spremite i zatvorite datoteku kada završite.

Možete pokrenuti aplikaciju budući da sada imamo instaliran izvorni kod aplikacije i ovisnosti projekta.

Postavili smo aplikaciju da sluša na portu 8090, pokrenite sljedeću naredbu kako biste uputili vatrozid da dopusti promet kroz ovaj port. Ako ste naveli drugi port, zamijenite broj porta u naredbi:

sudo ufw allow 8090

1	sudo ufw allow 8090

Sada možete pokrenuti aplikaciju. Ali prvo, provjerite jeste li u korijenskom direktoriju projekta pokretanjem sljedeće naredbe:

cd ~/node_express

1	cd ~/node_express

Pokrenite aplikaciju s node index.js. Ako ste naveli drugu ulaznu točku, zamijenite je svojom ulaznom točkom:

node index.js

1	node index.js

Ako u svom pregledniku odete na http://your_public_server_ip:8090, vidjet ćete početnu stranicu s receptima kako je definirano:

U navigaciji možete vidjeti poveznice na razne recepte. Kliknimo na neke. Ispod imamo Lazanje stranicu s receptom:

A ovdje imamo Guacamole stranicu s receptom:

Do ove točke kreirali ste svoju aplikaciju i testirali da radi kako se očekuje. Možete zatvoriti poslužitelj pritiskom na Ctrl + C i prijeći na kreiranje Dockerfile. Dockerfile datoteke pomažu u skalabilnosti omogućujući ponovno stvaranje instance aplikacije kada je to potrebno.

Korak 3: Kreiranje Dockerfile-a

Docker čita upute navedene u Dockerfile-u prilikom izgradnje slika. On specificira runtime okruženje aplikacije. Stoga pomaže programerima da izbjegnu neslaganja s ovisnostima ili promjenama verzija runtimea. Unesite sljedeću naredbu za stvaranje Dockerfile-a:

nano Dockerfile

1	nano Dockerfile

Docker slika se stvara pomoću nekoliko slojeva slika koje se nadograđuju jedna na drugu. Počinjete dodavanjem bazne slike koja čini početnu točku za aplikaciju.

Budući da aplikacija očekuje pokretanje u node.js okruženju, započet ćemo dodavanjem node:10-alpine slike za node.js. Trenutno, dok pišemo ovaj vodič, ovo je preporučena LTS verzija Node.js-a. Odabrali smo ovu specifičnu sliku jer je izvedena iz projekta Alpine Linux. Stoga će pomoći da veličina naše slike bude minimalna. Postoji nekoliko varijanti slika na stranici Docker Hub Node slika koje možete odabrati ovisno o vašim potrebama.

Dodajte sljedeći kod kako biste postavili baznu sliku aplikacije pomoću FROM direktive:

FROM node:10-alpine

1	FROM node:10-alpine

Ova slika uključuje Node.js i npm. Svaki Dockerfile mora započeti s FROM direktivom. Dockerova node slika prema zadanim postavkama dolazi s ne-root node korisnikom kojeg možete koristiti za pokretanje spremnika aplikacije kao root. Docker sigurnost preporučuje da se spremnici ne pokreću kao root i da se privilegije ograniče samo na one potrebne za pokretanje njegovih resursa.

U tom slučaju, koristit ćemo početni direktorij node korisnika kao radni direktorij za aplikaciju, kao i korisnika unutar spremnika. Možete pogledati ovaj vodič za najbolje prakse za Docker Node slike za više informacija.

Stvorit ćemo node_modules poddirektorij unutar /home/node zajedno s direktorijem aplikacije kako bismo pojednostavnili dopuštenja za kod aplikacije. Stvaranje ovih direktorija osigurava da imaju ispravna dopuštenja kada pokrenemo npm install naredbu lokalno unutar spremnika. Nakon što stvorite direktorije, morate postaviti vlasništvo nad njima na node korisnika. To ćemo učiniti unutar Dockerfile-a dodavanjem sljedećeg retka:

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

Zatim ćete postaviti radni direktorij dodavanjem sljedećeg retka:

WORKDIR /home/node/app

1	WORKDIR /home/node/app

Uvijek je dobra ideja postaviti WORKDIR kako ga Docker ne bi morao stvarati prema zadanim postavkama.

Dodajte sljedeći redak za kopiranje package.json i package-lock.json datoteka:

COPY package*.json ./

1	COPY package*.json ./

Preporučuje se dodati COPY instrukciju prije pokretanja npm install ili kopiranja izvornog koda aplikacije. To vam omogućuje da iskoristite Dockerov mehanizam predmemoriranja. Tijekom procesa izgradnje, Docker provjerava ima li predmemorirani sloj za svaku instrukciju. To znači da ako niste promijenili package.json datoteku, Docker će koristiti postojeći sloj slike i izbjeći ponovnu instalaciju node modula, a time i bržim procesima izgradnje.

Prije pokretanja npm install, dodajte sljedeći redak za prebacivanje korisnika na node kako biste osigurali da su sve datoteke aplikacije i node_modules direktorij u vlasništvu ne-root node korisnika:

USER node

USER node

Naš spremnik je sada spreman za pokretanje naredbe npm install. Dodajte sljedeći redak u Dockerfile:

RUN npm install

1	RUN npm install

Nakon što se node_modules instaliraju, dodajte sljedeći redak koji će reći Dockeru da kopira kod aplikacije u direktorij aplikacije na spremniku s ispravnim dopuštenjima i vlasništvom, tj. ne-root node korisnikom:

COPY --chown=node:node . .

1	COPY --chown=node:node . .

Posljednji korak je izlaganje porta 8090 na spremniku, kao što smo definirali u našoj ulaznoj index.js datoteci:

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

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

EXPOSE definira koji će portovi na spremniku biti otvoreni prilikom pokretanja. CMD pokreće naredbu za pokretanje aplikacije, u ovom slučaju, node index.js.

Trebali biste imati samo jednu CMD naredbu u Dockerfileu jer samo zadnja ima učinka. Pogledajte referentnu dokumentaciju za Dockerfile za popis stvari koje možete učiniti s Dockerfileom.

Vaš potpuni Dockerfile trebao bi izgledati ovako:

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" ]

Sada možete spremiti i zatvoriti datoteku.

Sljedeće što trebate učiniti je dodati .dockerignore datoteku. Baš kao i .gitignore datoteka, .dockerignore određuje koje se datoteke i direktoriji unutar direktorija projekta ne bi trebali kopirati u spremnik.

Otvorite datoteku pomoću uređivača nano:

nano .dockerignore

1	nano .dockerignore

Dodajte sljedeće retke unutar datoteke:

node_modules
npm-debug.log
Dockerfile
.dockerignore

node_modules

npm-debug.log

Dockerfile

.dockerignore

Ako radite s git repozitorijem, trebali biste dodati i .git direktorij te .gitignore datoteku. Spremite i zatvorite datoteku.

Ako je sve prošlo dobro, vrijeme je za izgradnju slike aplikacije pomoću naredbe docker build. Možete dodati zastavicu –t naredbi docker build kako biste označili sliku prepoznatljivim nazivom, za razliku od nasumičnog niza koji docker postavlja prema zadanim postavkama. Također ćemo poslati sliku na Docker Hub, pa je najbolje uključiti svoje korisničko ime za Docker Hub u oznaku.

Koristit ćemo nodejs-express-image kao naziv oznake. Slobodno možete odabrati naziv oznake koji vam se sviđa. Evo naredbe za izgradnju slike:

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

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

Ne zaboravite zamijeniti your_dockerhub_username svojim stvarnim korisničkim imenom za Docker Hub. Točka (.) na kraju označava da je kontekst izgradnje trenutni direktorij.

Postupak izgradnje traje minutu ili dvije. Kada završi, unesite naredbu za provjeru svojih slika:

sudo docker images

1	sudo docker images

Trebali biste vidjeti nešto poput ovoga:

Zapamtite, zamijenili smo your_dockerhub_username sa stvarnim korisničkim imenom.

Nakon što potvrdite da je vaša slika izgrađena, sada možete stvoriti spremnik s tom slikom pomoću docker run. Bit će uključene sljedeće zastavice:

-p: objavljuje priključak na spremniku i mapira ga na priključak na host sustavu. Koristit ćemo priključak 80 na host sustavu u svrhu demonstracije. Međutim, ako imate drugi proces koji se izvodi na tom priključku, slobodno ga izmijenite prema potrebi. Saznajte više o povezivanju priključaka u Docker dokumentaciji.
-d: za samostalni način rada. Omogućuje spremniku da nastavi raditi u pozadini.
--name: ovo možete koristiti za postavljanje prepoznatljivog naziva umjesto da dopustite Dockeru da dodijeli nasumični niz.

Naredba za izgradnju spremnika je sljedeća. Zamijenite svoje korisničko ime za Docker Hub na odgovarajući način:

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

Pričekajte da se spremnik izgradi i pokrene. Možete koristiti ovu naredbu za pregled svih pokrenutih spremnika:

sudo docker ps

1	sudo docker ps

Trebali biste vidjeti izlaz sličan sljedećem:

Kao što se vidi u izlazu, spremnik se sada izvodi. Možete ga pregledati u pregledniku ako posjetite javnu IP adresu svog poslužitelja bez priključka u pregledniku. Učitat će se vaša početna stranica:

Uspješno ste postavili statičku web stranicu Node Express pomoću Dockera. Pogledajmo kako možemo poslati ovu sliku na Docker Hub za buduću upotrebu i potrebe skaliranja.

Korak 4: Rad s repozitorijima Docker slika

Svoje slike možete gurnuti u registre slika kao što je Docker Hub i spremiti ih za buduću upotrebu, podijeliti ih s drugim programerima ili omogućiti skaliranje svojih spremnika. Sliku koju smo izradili možemo gurnuti na Docker Hub i upotrijebiti je za ponovno stvaranje spremnika.

Upotrijebite sljedeću naredbu za prijavu na svoj Docker Hub račun. Zamijenite je svojim stvarnim Docker Hub korisničkim imenom:

sudo docker login -u your_dockerhub_username

1	sudo docker login -u your_dockerhub_username

Unesite svoju lozinku kada se to od vas zatraži. Nakon prijave, datoteka ~/.docker/config.json kreira se u početnom direktoriju vašeg korisnika i sadrži vaše Docker Hub vjerodajnice.

Nakon što ste to postavili, unesite sljedeću naredbu za guranje slike na Docker Hub, navodeći oznaku koju ste postavili prilikom ranije izgradnje slike:

sudo docker push your_dockerhub_username/nodejs-express-image

1	sudo docker push your_dockerhub_username/nodejs-express-image

Ova naredba gura docker sliku na vaš Docker Hub račun. Ako posjetite svoj račun, možete vidjeti svoju nedavno gurnutu sliku:

Korisnost repozitorija slika možemo testirati uništavanjem trenutnog spremnika aplikacije i njegovom ponovnom izgradnjom pomoću slike iz repozitorija.

Ispišite svoje trenutne spremnike unosom naredbe:

sudo docker ps

1	sudo docker ps

Trebali biste vidjeti izlaz sličan ovome:

Zabilježite CONTAINER ID naveden u vašem izlazu, kopirajte ga i upotrijebite za zaustavljanje spremnika pomoću naredbe, zamjenjujući ID svojim:

sudo docker stop 1bb2d65279bb

1	sudo docker stop 1bb2d65279bb

Unesite sljedeću naredbu za ispis svih docker slika dostupnih u vašem sustavu:

sudo docker images –a

1	sudo docker images –a

Izlaz će prikazati naziv vaše slike, node.js sliku i druge slike iz procesa izgradnje.

Unesite sljedeću naredbu za uklanjanje slika, uključujući neiskorištene ili viseće slike:

sudo docker system prune

1	sudo docker system prune

Upišite y za potvrdu. Ovo uklanja zaustavljene spremnike i slike. Ako ih ispišete, vidjet ćete prazan popis u izlazu:

Sada ste uklonili i spremnik u kojem se izvodi aplikacija i samu sliku. Saznajte više o uklanjanju Docker spremnika, slika i volumena prateći naš vodič.

Sada možemo ponoviti cijeli proces tako da prvo povučemo sliku s Docker Huba pomoću sljedeće naredbe. Zamijenite svoje Docker Hub korisničko ime na odgovarajući način:

sudo docker pull your_dockerhub_username/nodejs-express-image

1	sudo docker pull your_dockerhub_username/nodejs-express-image

Ponovno ispišite svoje Docker slike pomoću naredbe:

sudo docker images

1	sudo docker images

Trebali biste vidjeti sliku u izlazu:

Sada možete ponovno izgraditi svoj spremnik pomoću naredbe iz Koraka 3. Naravno, zamijenite svoje Docker Hub korisničko ime gdje je to prikladno:

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

Ispišite svoje spremnike kako biste potvrdili da su ponovno izgrađeni:

sudo docker ps

1	sudo docker ps

Trebali biste vidjeti sličan izlaz:

U svom pregledniku idite na javnu IP adresu svog poslužitelja i trebali biste vidjeti da vaša aplikacija radi.

Zaključak

Ako ste pratili vodič do ove točke, sada imate statičnu web stranicu izrađenu pomoću Expressa i Bootstrapa te implementiranu pomoću Dockera. Upotrijebili ste datoteke statične web stranice za izgradnju Docker slike i upotrijebili sliku za stvaranje spremnika. Zatim ste gurnuli sliku u registar Docker slika, Docker Hub, čineći je dostupnom za buduću upotrebu ili skaliranje. Kako biste testirali korištenje registra slika, uništili ste slike i spremnike, povukli slike iz registra i ponovno izgradili spremnike.

Ovaj vodič objašnjava kako implementirati Node.js aplikaciju. Ako želite naučiti kako koristiti drugačiji skup tehnologija za web razvoj, imamo vodič o Implementaciji Laravel aplikacije s Docker Composeom na Nginx.

Za više resursa o korištenju Dockera, pogledajte sljedeće vodiče:

Ugodan rad!

Hark Labs

Autor · CloudSigma

Preslav Dobrev je kreativni dizajner u CloudSigma, usredotočen na dosljedan poslovni identitet korištenjem tradicionalnih i inovativnih marketinških kanala. Vješt je u spajanju umjetničke vizije sa strateškim marketingom kako bi stvorio dojmljive brendirane priče.

Kako postaviti Node.js (Express.js) aplikaciju pomoću Dockera na Ubuntu 20.04

Uvod

Preduvjeti

Korak 1: Konfiguriranje ovisnosti aplikacije

Step 2: Adding Your Application Code Files

Korak 3: Kreiranje Dockerfile-a

Korak 4: Rad s repozitorijima Docker slika

Zaključak

Hark Labs

Komentari