Πώς να αναπτύξετε μια εφαρμογή Node.js (Express.js) με το Docker στο Ubuntu 20.04

Hark Labs2021-10-15 · 39 min read

Πώς να αναπτύξετε μια εφαρμογή Node.js (Express.js) με το Docker στο Ubuntu 20.04

Εισαγωγή

Docker είναι μια πλατφόρμα κοντέινερ που αποτελεί ένα ελαφρύ, εικονικοποιημένο, φορητό, καθορισμένο από λογισμικό τυποποιημένο περιβάλλον. Επιτρέπει στο λογισμικό να εκτελείται απομονωμένο από άλλο λογισμικό που εκτελείται στον φυσικό κεντρικό υπολογιστή. Το Docker είναι ένα καθοριστικό στοιχείο της πτυχής της Συνεχούς Ανάπτυξης και Ενσωμάτωσης (Continuous Development and Integration) της Ανάπτυξης Λογισμικού. Προσφέρει μια ελαφριά εναλλακτική λύση στις εικονικές μηχανές και επιτρέπει στους προγραμματιστές να απολαμβάνουν κατανεμημένες αρχιτεκτονικές εφαρμογών. Για μια ενδελεχή επισκόπηση του οικοσυστήματος Docker, δείτε αυτό το άρθρο.

Η διαδικασία δημιουργίας μιας εφαρμογής με το Docker ξεκινά με έναν προγραμματιστή που δημιουργεί μια εικόνα για την εφαρμογή του. Στη συνέχεια, η εικόνα θα αναπτυχθεί μέσα σε ένα κοντέινερ. Η εικόνα περιέχει καθοριστικά στοιχεία μιας εφαρμογής, όπως τον κώδικα της εφαρμογής, βιβλιοθήκες, αρχεία ρυθμίσεων, μεταβλητές περιβάλλοντος και το περιβάλλον εκτέλεσης. Η εικόνα τυποποιεί το περιβάλλον μέσα σε ένα κοντέινερ, δίνοντας στη χρήση κοντέινερ (containerization) τα χαρακτηριστικά της φορητότητας. Node.js είναι ένα ανοιχτού κώδικα, cross-platform backend περιβάλλον εκτέλεσης JavaScript που μπορεί να εκτελέσει κώδικα JavaScript εκτός ενός προγράμματος περιήγησης ιστού. Είναι χτισμένο πάνω στη V8 JavaScript Engine. Express.js είναι ένα μινιμαλιστικό backend πλαίσιο JavaScript που τρέχει πάνω στο Node.js.

Σε αυτόν τον οδηγό, θα δημιουργήσουμε μια εικόνα για έναν ιστότοπο που τρέχει στο πλαίσιο Express. Θα χρησιμοποιήσουμε το Bootstrap, το οποίο είναι μια βιβλιοθήκη frontend, για να κάνουμε το frontend να φαίνεται καλύτερο. Μόλις δημιουργήσουμε την εικόνα, θα κατασκευάσουμε ένα κοντέινερ και θα το στείλουμε στο Docker Hub. Το Docker Hub επιτρέπει στους προγραμματιστές να φιλοξενούν εφαρμογές σε κοντέινερ για εύκολη ανάπτυξη σε οποιοδήποτε περιβάλλον Docker. Μόλις το κοντέινερ σας φιλοξενηθεί στο Docker Hub, θα το τραβήξουμε (pull) και θα δημιουργήσουμε μια άλλη εικόνα που θα εξυπηρετεί πραγματικά τον ιστότοπό μας.

Προαπαιτούμενα

Αυτός θα είναι ένας πρακτικός οδηγός. Θα πρέπει να δημιουργήσετε ένα περιβάλλον που θα σας επιτρέψει να τον παρακολουθήσετε.

Θα πρέπει να έχετε μια εγκατάσταση του Ubuntu 20.04 ως αρχικό λειτουργικό σας περιβάλλον και να δημιουργήσετε έναν μη-root χρήστη με δικαιώματα sudo. Συνδεθείτε με τον μη-root χρήστη και προχωρήστε με τα ακόλουθα βήματα.
Πρέπει να εγκαταστήσετε το Docker. Ακολουθήστε τα βήματα 1, 2, 3 και 4 του οδηγού μας για το πώς να εγκαταστήσετε και να λειτουργήσετε το Docker στο Ubuntu. Αυτό θα πρέπει να λειτουργεί για οποιαδήποτε διανομή Ubuntu.
Δημιουργήστε έναν λογαριασμό Docker Hub εάν δεν έχετε ήδη. Μπορείτε να ακολουθήσετε αυτόν τον σύνδεσμο για τον Docker Hub Quick start guide.
Εγκαταστήστε το Node.js και το NPM. Το NPM είναι ένας διαχειριστής πακέτων JavaScript. Μπορείτε να ακολουθήσετε αυτές τις οδηγίες για την εγκατάσταση του Node και του npm.

Βήμα 1: Διαμόρφωση εξαρτήσεων εφαρμογής

Πρέπει να δημιουργήσετε τον πηγαίο κώδικα της εφαρμογής σας προτού μπορέσετε να δημιουργήσετε την εικόνα. Ο πηγαίος κώδικας της εφαρμογής περιλαμβάνει κώδικα, στατικό περιεχόμενο και εξαρτήσεις που θα αντιγραφούν στο κοντέινερ. Ξεκινήστε δημιουργώντας έναν κατάλογο για το έργο σας στον αρχικό κατάλογο του μη-root χρήστη. Θα τον ονομάσουμε node_express, αλλά είστε ελεύθεροι να χρησιμοποιήσετε ένα όνομα καταλόγου που σας αρέσει:

mkdir node_express

1	mkdir node_express

Στη συνέχεια, μεταβείτε σε αυτόν τον κατάλογο:

cd node_express

1	cd node_express

Αυτός θα είναι ο ριζικός κατάλογος της εφαρμογής σας. Μια εφαρμογή node.js αναμένει ένα αρχείο package.json στον ριζικό φάκελο. Το Npm χρησιμοποιεί αυτό το αρχείο για να προσδιορίσει ποιες εξαρτήσεις χρειάζεται η εφαρμογή σας. Εισαγάγετε την ακόλουθη εντολή για να δημιουργήσετε αυτό το αρχείο:

nano package.json

1	nano package.json

Μετά από αυτό, προσθέστε το ακόλουθο απόσπασμα κώδικα στο αρχείο. Μπορείτε να ενημερώσετε το όνομα, τον δημιουργό, την περιγραφή και το αρχείο σημείου εισόδου όπως επιθυμείτε:

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

}

Όπως μπορείτε να δείτε, αυτό το αρχείο καθορίζει το όνομα του έργου, την έκδοση, τον δημιουργό και την άδεια χρήσης υπό την οποία θα κοινοποιηθεί ο κώδικας της εφαρμογής. Συνιστάται να χρησιμοποιήσετε ένα σύντομο και περιγραφικό όνομα για το έργο σας για να αποφύγετε διπλότυπα στο npm registry. Έχουμε καθορίσει την άδεια ISC για το έργο, η οποία επιτρέπει την ελεύθερη αντιγραφή, τροποποίηση ή διανομή του κώδικα της εφαρμογής.

Το πιο σημαντικό είναι ότι θα πρέπει να σημειώσετε τις ακόλουθες οδηγίες στο αρχείο:

“main”: αυτή η οδηγία καθορίζει το σημείο εισόδου της εφαρμογής, το οποίο ορίσαμε ως index.js. Θα δημιουργήσουμε αυτό το αρχείο σε λίγο.
“dependencies”: αυτή η οδηγία καθορίζει τις εξαρτήσεις της εφαρμογής που θα ληφθούν από το npm registry όταν εκτελέσουμε την εντολή npm, στην περίπτωσή μας, θέλουμε την έκδοση Express 4.17.1 και άνω.

Μπορείτε τώρα να αποθηκεύσετε το αρχείο πατώντας Ctrl + O. Στη συνέχεια, κλείστε το αρχείο πατώντας Ctrl + X. Έπειτα, θα εγκαταστήσουμε τις εξαρτήσεις εκτελώντας την ακόλουθη εντολή:

npm install

1	npm install

Η εντολή εγκαθιστά τις εξαρτήσεις της εφαρμογής που καθορίζονται στο αρχείο package.json μέσα στους καταλόγους node_modules. Δημιουργήθηκαν αυτόματα όταν εκτελέσατε για πρώτη φορά την εντολή. Με τις εξαρτήσεις της εφαρμογής μας εγκατεστημένες, μπορείτε τώρα να ξεκινήσετε την προσθήκη του κώδικα της εφαρμογής.

Βήμα 2: Προσθήκη των αρχείων κώδικα της εφαρμογής σας

Θα δημιουργήσουμε έναν βασικό ιστότοπο συνταγών, ευγενική προσφορά του allrecipes. Το κύριο σημείο εισόδου για την εφαρμογή είναι το αρχείο index.js. Θα προσθέσουμε έναν κατάλογο views που θα περιέχει τις διάφορες σελίδες και τα στατικά στοιχεία του έργου. Ο ιστότοπος θα έχει μια σελίδα προορισμού που θα περιέχει εισαγωγικές πληροφορίες και συνδέσμους προς ορισμένες συνταγές.

Ο κώδικας της σελίδας προορισμού μας θα τοποθετηθεί στο αρχείο home.html. Αρχικά, δημιουργήστε το αρχείο index.js εισάγοντας την ακόλουθη εντολή:

nano index.js

1	nano index.js

Προσθέστε τον ακόλουθο κώδικα, ο οποίος εισάγει και δημιουργεί μια εφαρμογή Express. Καθορίζει επίσης το αντικείμενο Router, τον βασικό κατάλογο και τη θύρα στην οποία θα εξυπηρετείται αυτή η εφαρμογή:

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 είναι μια συνάρτηση JavaScript που φορτώνει ένα module. Σε αυτήν την περίπτωση, φορτώνουμε το module express. Στη συνέχεια, θα χρησιμοποιήσουμε το εισαγόμενο module για να δημιουργήσουμε τα αντικείμενα express και router. Το αντικείμενο router εκτελεί τις λειτουργίες δρομολόγησης της εφαρμογής ανταποκρινόμενο σε κλήσεις μεθόδων HTTP που θα προστεθούν σε αυτό το αντικείμενο καθώς προχωράμε με τον οδηγό.

Έχουμε επίσης ορίσει τα path και port. Η σταθερά path ορίζει τον βασικό κατάλογο για τον κώδικα. Στην περίπτωσή μας είναι ο υποκατάλογος views μέσα στον ριζικό κατάλογο του έργου. Το port καθορίζει τη θύρα στην οποία θα πρέπει να ακούει η εφαρμογή express, στο παράδειγμά μας, την έχουμε ορίσει σε 8090.

Μόλις έχουμε τις σταθερές, μπορούμε να καθορίσουμε ορισμένες διαδρομές για την εφαρμογή χρησιμοποιώντας το αντικείμενο router. Προσθέστε τον ακόλουθο κώδικα στο αρχείο index.js για να καθορίσετε τις διαδρομές:

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

});

Μπορείτε να προσθέσετε ενδιάμεσο λογισμικό (middleware) στις διαδρομές χρησιμοποιώντας τη συνάρτηση router.use. Σε αυτήν την περίπτωση, προσθέτουμε μια συνάρτηση που καταγράφει τα αιτήματα του router πριν τα μεταβιβάσει στις διαδρομές της εφαρμογής. Ένα αίτημα GET στη βάση της εφαρμογής θα επιστρέψει ένα home.html σελίδα. Στη συνέχεια, προσθέσαμε σελίδες για τρεις συνταγές που θα ανακτηθούν επίσης χρησιμοποιώντας το αίτημα GET στη συγκεκριμένη σελίδα συνταγής.

Τέλος, προσθέστε τον ακόλουθο κώδικα για να προσαρτήσετε το router ενδιάμεσο λογισμικό και τα στατικά στοιχεία της εφαρμογής. Επιπλέον, πείτε στην εφαρμογή express να ακούει στη θύρα 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 ακούει στη θύρα ' + port)

})

Το πλήρες αρχείο σας index.js θα πρέπει να μοιάζει κάπως έτσι:

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 ακούει στη θύρα ' + port)

})

Μπορείτε να αποθηκεύσετε και να κλείσετε το αρχείο τώρα. Το επόμενο βήμα είναι να προσθέσετε τις στατικές ιστοσελίδες στον κατάλογο views . Ξεκινήστε εισάγοντας την ακόλουθη εντολή για να δημιουργήσετε τον κατάλογο:

mkdir views

1	mkdir views

Εισαγάγετε την ακόλουθη εντολή για να ανοίξετε το αρχείο της αρχικής σελίδας home.html υποδοχής:

nano views/home.html

1	nano views/home.html

Προσθέστε τον ακόλουθο κώδικα στο αρχείο. Ο κώδικας εισάγει το Bootstrap και προσφέρει στους επισκέπτες του ιστότοπου ορισμένες πληροφορίες σχετικά με το τι αφορά ο ιστότοπος:

<!DOCTYPE html>
<html lang="el">
<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>Φανταστικές Συνταγές</title>

<!-- Βασικό CSS του 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">Εναλλαγή πλοήγησης</span>
</button> <a class="navbar-brand" href="#">Φανταστικές Συνταγές</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">Αρχική</a>
</li>
<li class="nav-item">
<a href="/lasagna" class="nav-link">Λαζάνια</a>
</li>
<li class="nav-item">
<a href="/guacamole" class="nav-link">Γουακαμόλε</a>
</li>
<li class="nav-item">
<a href="/banana-bread" class="nav-link">Μπανανόψωμο</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">Φανταστική Συνταγή</h1>

<p class="lead text-muted">
Βρείτε και μοιραστείτε καθημερινή έμπνευση μαγειρικής από αυτές τις φανταστικές συνταγές. Ανακαλύψτε συνταγές, μάγειρες,
βίντεο και οδηγούς με βάση το φαγητό που αγαπάτε και τους φίλους που ακολουθείτε.
<br />
<em>(Τίποτα το σοβαρό, αυτό είναι απλώς για τη δοκιμαστική μας εφαρμογή node-express-docker image)</em>
</p>

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

<!DOCTYPE html>

<head>

<title>Φανταστικές Συνταγές</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">Εναλλαγή πλοήγησης</span>

</button> <a class="navbar-brand" href="#">Φανταστικές Συνταγές</a>

<a href="/" class="nav-link">Αρχική</a>

</li>

<a href="/lasagna" class="nav-link">Λαζάνια</a>

</li>

<a href="/guacamole" class="nav-link">Γουακαμόλε</a>

</li>

<a href="/banana-bread" class="nav-link">Μπανανόψωμο</a>

</li>

</ul>

</div>

</nav>

<main>

<h1 class="fw-light">Υπέροχη Συνταγή</h1>

Βρείτε και μοιραστείτε καθημερινή έμπνευση μαγειρικής από αυτές τις υπέροχες συνταγές. Ανακαλύψτε συνταγές, μάγειρες,

βίντεο και οδηγούς με βάση το φαγητό που αγαπάτε και τους φίλους που ακολουθείτε.

<br />

<em>(Τίποτα σοβαρό, αυτό είναι απλώς για την εφαρμογή επίδειξης node-express-docker image)</em>

</p>

</div>

</section>

</main>

</body>

</html>

Εκτός από την εισαγωγή του Bootstrap, η σελίδα προσθέτει επίσης ένα βασικό μενού πλοήγησης για να μας βοηθήσει να περιηγηθούμε στις σελίδες και να επιστρέψουμε στην αρχική σελίδα. Προσθέσαμε επίσης μια γραμμή για να εισαγάγουμε το προσαρμοσμένο αρχείο CSS μας:

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

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

Θα χρησιμοποιήσουμε αυτό το αρχείο για να προσθέσουμε προσαρμοσμένο στυλ στην εφαρμογή αργότερα. Τώρα, ας δημιουργήσουμε τις τρεις σελίδες για τις συνταγές. Ξεκινάμε πρώτα δημιουργώντας τη σελίδα λαζάνια. Ανοίξτε το αρχείο με τον επεξεργαστή nano χρησιμοποιώντας την ακόλουθη εντολή:

nano views/lasagna.html

1	nano views/lasagna.html

Στο αρχείο που ανοίξατε, προσθέστε τον ακόλουθο κώδικα. Αυτό το αρχείο θα εισαγάγει το Bootstrap, το αρχείο custom.css, θα καθορίσει ένα μενού πλοήγησης και θα προσφέρει μερικές πληροφορίες για τη συνταγή για Λαζάνια:

<!DOCTYPE html>
<html lang="el">
<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>Συνταγή για Λαζάνια</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">Εναλλαγή πλοήγησης</span>
</button> <a class="navbar-brand" href="#">Υπέροχες Συνταγές</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">Αρχική</a>
</li>
<li class="nav-item">
<a href="/lasagna" class="nav-link">Λαζάνια</a>
</li>
<li class="nav-item">
<a href="/guacamole" class="nav-link">Γουακαμόλε</a>
</li>
<li class="nav-item">
<a href="/banana-bread" class="nav-link">Ψωμί με Μπανάνα</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">Η Καλύτερη Συνταγή για Λαζάνια</h1>

<p class="lead text-muted">
Αυτά είναι τα καλύτερα λαζάνια που θα φτιάξετε ποτέ.
<br />
<em>(Τίποτα σοβαρό, αυτό είναι απλώς για την εφαρμογή επίδειξης node-express-docker image)</em>
</p>
<h3>Συστατικά</h3>
<ul class="list-group">
<li class="list-group-item">1 λίβρα γλυκό ιταλικό λουκάνικο</li>
<li class="list-group-item">¾ λίβρας άπαχος μοσχαρίσιος κιμάς</li>
<li class="list-group-item">½ φλιτζάνι ψιλοκομμένο κρεμμύδι</li>
<li class="list-group-item">2 σκελίδες σκόρδο, λιωμένες</li>
<li class="list-group-item">1 κονσέρβα (28 ουγγιών) τριμμένες ντομάτες</li>
<li class="list-group-item">2 κονσέρβες (6 ουγγιών) πελτές ντομάτας</li>
<li class="list-group-item">2 κονσέρβες (6.5 ουγγιών) έτοιμη σάλτσα ντομάτας</li>
<li class="list-group-item">½ φλιτζάνι νερό</li>
<li class="list-group-item">2 κουταλιές της σούπας λευκή ζάχαρη</li>
<li class="list-group-item">1 ½ κουταλάκι του γλυκού αποξηραμένα φύλλα βασιλικού</li>
<li class="list-group-item">½ κουταλάκι του γλυκού μαραθόσπορος</li>
<li class="list-group-item">1 κουταλάκι του γλυκού ιταλικό μείγμα μπαχαρικών</li>
<li class="list-group-item">1 ½ κουταλάκι του γλυκού αλάτι, σε δόσεις, ή κατά προτίμηση</li>
<li class="list-group-item">¼ κουταλάκι του γλυκού τριμμένο μαύρο πιπέρι</li>
<li class="list-group-item">4 κουταλιές της σούπας ψιλοκομμένος φρέσκος μαϊντανός</li>
<li class="list-group-item">12 φύλλα για λαζάνια</li>
<li class="list-group-item">16 ουγγιές τυρί ρικότα</li>
<li class="list-group-item">1 αυγό</li>
<li class="list-group-item">¾ λίβρας τυρί μοτσαρέλα, σε φέτες</li>
<li class="list-group-item">¾ φλιτζανιού τριμμένη παρμεζάνα</li>
</ul>
</div>
</div>
</section>
</main>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Συνταγή για Λαζάνια</title>

crossorigin="anonymous">

</head>

<body>

</button> <a class="navbar-brand" href="#">Υπέροχες Συνταγές</a>

<a href="/" class="nav-link">Αρχική</a>

</li>

<a href="/lasagna" class="nav-link">Λαζάνια</a>

</li>

<a href="/guacamole" class="nav-link">Γουακαμόλε</a>

</li>

<a href="/banana-bread" class="nav-link">Μπανανόψωμο</a>

</li>

</ul>

</div>

</nav>

<main>

<h1 class="fw-light">Η Καλύτερη Συνταγή για Λαζάνια</h1>

Αυτά είναι τα καλύτερα λαζάνια που θα φτιάξετε ποτέ.

<br />

<em>(Τίποτα σοβαρό, αυτό είναι απλώς για τη δοκιμαστική μας εφαρμογή node-express-docker image)</em>

</p>

<h3>Συστατικά</h3>

<li class="list-group-item">1 λίβρα γλυκό ιταλικό λουκάνικο</li>

<li class="list-group-item">¾ λίβρας άπαχος μοσχαρίσιος κιμάς</li>

<li class="list-group-item">½ φλιτζάνι ψιλοκομμένο κρεμμύδι</li>

<li class="list-group-item">2 σκελίδες σκόρδο, λιωμένες</li>

<li class="list-group-item">1 κονσέρβα (28 ουγγιών) τριμμένες ντομάτες</li>

<li class="list-group-item">2 κονσέρβες (6 ουγγιών) πελτές ντομάτας</li>

<li class="list-group-item">2 κονσέρβες (6.5 ουγγιών) έτοιμη σάλτσα ντομάτας</li>

<li class="list-group-item">½ φλιτζάνι νερό</li>

<li class="list-group-item">2 κουταλιές της σούπας λευκή ζάχαρη</li>

<li class="list-group-item">1 ½ teaspoons αποξηραμένα φύλλα βασιλικού</li>

<li class="list-group-item">½ κουταλάκι του γλυκού μαραθόσπορος</li>

<li class="list-group-item">1 κουταλάκι του γλυκού ιταλικό μείγμα μπαχαρικών</li>

<li class="list-group-item">1 ½ κουταλάκι του γλυκού αλάτι, χωρισμένο, ή κατά προτίμηση</li>

<li class="list-group-item">¼ κουταλάκι του γλυκού τριμμένο μαύρο πιπέρι</li>

<li class="list-group-item">4 κουταλιές της σούπας ψιλοκομμένος φρέσκος μαϊντανός</li>

<li class="list-group-item">12 φύλλα για λαζάνια</li>

<li class="list-group-item">16 ουγγιές τυρί ρικότα</li>

<li class="list-group-item">¾ λίβρας τυρί μοτσαρέλα, σε φέτες</li>

<li class="list-group-item">¾ φλιτζανιού τριμμένη παρμεζάνα</ul>

</div>

</section>

</main>

</body>

</html>

Ας ακολουθήσουμε την ίδια διαδικασία για να δημιουργήσουμε ένα αρχείο για τη σελίδα της συνταγής για

γουακαμόλε. Ανοίξτε το αρχείο με το nano εκτελώντας την ακόλουθη εντολή: nano views/guacamole.html

nano

1	viewsguacamole/html. Στη συνέχεια, προσθέστε αυτόν τον κώδικα στο αρχείο:

guacamole.html

<!DOCTYPE html>
<html lang="el">
<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>Συνταγή για Γουακαμόλε</title>

<!-- Κύριο CSS του 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">Εναλλαγή πλοήγησης</span>
</button> <a class="navbar-brand" href="#">Φανταστικές Συνταγές</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">Αρχική</a>
</li>
<li class="nav-item">
<a href="/lasagna" class="nav-link">Λαζάνια</a>
</li>
<li class="nav-item">
<a href="/guacamole" class="nav-link">Γουακαμόλε</a>
</li>
<li class="nav-item">
<a href="/banana-bread" class="nav-link">Ψωμί με Μπανάνα</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">Η Καλύτερη Συνταγή για Γουακαμόλε</h1>

<p class="lead text-muted">
Μπορείτε να φτιάξετε αυτή τη σαλάτα αβοκάντο λεία ή με κομμάτια, ανάλογα με τα γούστα σας.
<br />
<em>(Τίποτα σοβαρό, αυτό είναι απλώς για την εφαρμογή επίδειξης node-express-docker image)</em>
</p>
<h3>Συστατικά</h3>
<ul class="list-group">
<li class="list-group-item">3 αβοκάντο - ξεφλουδισμένα, χωρίς κουκούτσι και λιωμένα</li>
<li class="list-group-item">1 λάιμ, στημένο</li>
<li class="list-group-item">1 κουταλάκι του γλυκού αλάτι</li>
<li class="list-group-item">½ φλιτζάνι κρεμμύδι ψιλοκομμένο</li>
<li class="list-group-item">3 κουταλιές της σούπας ψιλοκομμένο φρέσκο κόλιανδρο</li>
<li class="list-group-item">2 ντομάτες roma (βελανίδια), κομμένες σε κύβους</li>
<li class="list-group-item">1 κουταλάκι του γλυκού λιωμένο σκόρδο</li>
<li class="list-group-item">1 πρέζα τριμμένο πιπέρι καγιέν (Προαιρετικά)</li>
</ul>
</div>
</div>
</section>
</main>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Συνταγή για Γουακαμόλε</title>

crossorigin="anonymous">

</head>

<body>

</button> <a class="navbar-brand" href="#">Φανταστικές Συνταγές</a>

<a href="/" class="nav-link">Αρχική</a>

</li>

<a href="/lasagna" class="nav-link">Λαζάνια</a>

</li>

<a href="/guacamole" class="nav-link">Γουακαμόλε</a>

</li>

<a href="/banana-bread" class="nav-link">Μπανανόψωμο</a>

</li>

</ul>

</div>

</nav>

<main>

<h1 class="fw-light">Η καλύτερη συνταγή για γουακαμόλε</h1>

Μπορείτε να φτιάξετε αυτή τη σαλάτα αβοκάντο λεία ή με κομμάτια, ανάλογα με τα γούστα σας.

<br />

<em>(Τίποτα σοβαρό, αυτό είναι απλώς για την εφαρμογή επίδειξης node-express-docker image)</em>

</p>

<h3>Υλικά</h3>

<li class="list-group-item">3 αβοκάντο - ξεφλουδισμένα, χωρίς κουκούτσι και λιωμένα</li>

<li class="list-group-item">1 λάιμ, στυμμένο</li>

<li class="list-group-item">1 κουταλάκι του γλυκού αλάτι</li>

<li class="list-group-item">½ φλιτζάνι ψιλοκομμένο κρεμμύδι</li>

<li class="list-group-item">3 κουταλιές της σούπας ψιλοκομμένο φρέσκο κόλιανδρο</li>

<li class="list-group-item">2 ντομάτες roma (plum), κομμένες σε κύβους</li>

<li class="list-group-item">1 κουταλάκι του γλυκού λιωμένο σκόρδο</li>

<li class="list-group-item">1 πρέζα τριμμένο πιπέρι καγιέν (Προαιρετικά)</ul>

</ul>

</div>

</section>

</main>

</body>

</html>

Τέλος, ας δημιουργήσουμε το banana_bread.html αρχείο εισάγοντας την εντολή:

nano views/banana_bread.html

1	nano views/banana_bread.html

Στη συνέχεια, προσθέστε τον ακόλουθο κώδικα HTML στο αρχείο:

<!DOCTYPE html>
<html lang="el">
<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>Συνταγή για Μπανανόψωμο</title>

<!-- Βασικό CSS του 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">Εναλλαγή πλοήγησης</span>
</button> <a class="navbar-brand" href="#">Φανταστικές Συνταγές</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">Αρχική</a>
</li>
<li class="nav-item">
<a href="/lasagna" class="nav-link">Λαζάνια</a>
</li>
<li class="nav-item">
<a href="/guacamole" class="nav-link">Γουακαμόλε</a>
</li>
<li class="nav-item">
<a href="/banana-bread" class="nav-link">Μπανανόψωμο</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">Η Καλύτερη Συνταγή για Μπανανόψωμο</h1>

<p class="lead text-muted">
Γιατί να συμβιβαστείτε στη γεύση της μπανάνας; Αυτό το μπανανόψωμο είναι ζουμερό και νόστιμο με πλούσια γεύση μπανάνας! Φίλοι και συγγενείς λατρεύουν τη συνταγή μου και λένε ότι είναι μακράν η καλύτερη! Είναι υπέροχο ψημένο!! Απολαύστε το!
<br />
<em>(Τίποτα σοβαρό, αυτό είναι απλώς για τη δοκιμαστική μας εφαρμογή node-express-docker image)</em>
</p>
<h3>Συστατικά</h3>
<ul class="list-group">
<li class="list-group-item">2 φλιτζάνια αλεύρι για όλες τις χρήσεις</li>
<li class="list-group-item">1 κουταλάκι του γλυκού μαγειρική σόδα</li>
<li class="list-group-item">¼ κουταλάκι του γλυκού αλάτι</li>
<li class="list-group-item">½ φλιτζάνι βούτυρο</li>
<li class="list-group-item">¾ φλιτζανιού καστανή ζάχαρη</li>
<li class="list-group-item">2 αυγά, χτυπημένα</li>
<li class="list-group-item">2⅓ φλιτζάνια λιωμένες πολύ ώριμες μπανάνες</li>
</ul>
</div>
</div>
</section>
</main>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Συνταγή για Μπανανόψωμο</title>

crossorigin="anonymous">

</head>

<body>

</button> <a class="navbar-brand" href="#">Φανταστικές Συνταγές</a>

<a href="/" class="nav-link">Αρχική</a>

</li>

<a href="/lasagna" class="nav-link">Λαζάνια</a>

</li>

<a href="/guacamole" class="nav-link">Γουακαμόλε</a>

</li>

<a href="/banana-bread" class="nav-link">Ψωμί Μπανάνας</a>

</li>

</ul>

</div>

</nav>

<main>

<h1 class="fw-light">Η Καλύτερη Συνταγή για Ψωμί Μπανάνας</h1>

Γιατί να συμβιβαστείτε στη γεύση της μπανάνας; Αυτό το ψωμί μπανάνας είναι ζουμερό και νόστιμο με πλούσια γεύση μπανάνας! Φίλοι και συγγενείς λατρεύουν τη συνταγή μου και λένε ότι είναι μακράν η καλύτερη! Είναι υπέροχο ψημένο!! Απολαύστε!

<br />

<em>(Τίποτα σοβαρό, αυτό είναι απλώς για την εφαρμογή επίδειξης node-express-docker image)</em>

</p>

<h3>Συστατικά</h3>

<li class="list-group-item">2 φλιτζάνια αλεύρι για όλες τις χρήσεις</li>

<li class="list-group-item">1 κουταλάκι του γλυκού μαγειρική σόδα</li>

<li class="list-group-item">¼ κουταλάκι του γλυκού αλάτι</li>

<li class="list-group-item">½ φλιτζάνι βούτυρο</li>

<li class="list-group-item">¾ φλιτζανιού καστανή ζάχαρη</li>

<li class="list-group-item">2 αυγά, χτυπημένα</li>

<li class="list-group-item">2⅓ φλιτζάνια λιωμένες πολύ ώριμες μπανάνες</li>

</ul>

</div>

</section>

</main>

</body>

</html>

Τώρα, έχουμε δημιουργήσει όλες τις σελίδες. Αν θυμάστε, πρέπει να προσθέσουμε το αρχείο css/custom.css. Εισαγάγετε την ακόλουθη εντολή για να δημιουργήσετε τον κατάλογο:

mkdir views/css

1	mkdir views/css

Στη συνέχεια, δημιουργήστε και ανοίξτε το αρχείο στον επεξεργαστή nano με την εντολή:

nano views/css/custom.css

1	nano views/css/custom.css

Μπορείτε να προσθέσετε περισσότερους κώδικες CSS για να διαμορφώσετε τον ιστότοπό σας όπως επιθυμείτε. Για συντομία, ας προσθέσουμε το ακόλουθο απόσπασμα κώδικα στο αρχείο:

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

}

Αποθηκεύστε και κλείστε το αρχείο όταν τελειώσετε.

Μπορείτε να ξεκινήσετε την εφαρμογή, καθώς τώρα έχουμε εγκαταστήσει τον πηγαίο κώδικα της εφαρμογής και τις εξαρτήσεις του έργου.

Είχαμε ορίσει την εφαρμογή να ακούει σε μια θύρα 8090, εκτελέστε την ακόλουθη εντολή για να δώσετε εντολή στο τείχος προστασίας (firewall) να επιτρέπει την κίνηση μέσω αυτής της θύρας. Εάν είχατε καθορίσει διαφορετική θύρα, αντικαταστήστε τον αριθμό της θύρας στην εντολή:

sudo ufw allow 8090

1	sudo ufw allow 8090

Τώρα, μπορείτε να ξεκινήσετε την εφαρμογή. Αλλά πρώτα, βεβαιωθείτε ότι βρίσκεστε στον ριζικό κατάλογο του έργου εκτελώντας την ακόλουθη εντολή:

cd ~/node_express

1	cd ~/node_express

Ξεκινήστε την εφαρμογή με node index.js. Εάν καθορίσατε διαφορετικό σημείο εισόδου, αντικαταστήστε το με το δικό σας σημείο εισόδου:

node index.js

1	node index.js

Εάν πλοηγηθείτε με το πρόγραμμα περιήγησής σας στο http://your_public_server_ip:8090, θα δείτε τη σελίδα προορισμού των Συνταγών όπως έχει οριστεί:

Μπορείτε να δείτε τους συνδέσμους προς τις διάφορες συνταγές στην πλοήγηση. Ας κάνουμε κλικ σε μερικούς. Παρακάτω έχουμε τη σελίδα της συνταγής για Lasagna:

Και εδώ έχουμε τη σελίδα της συνταγής για Guacamole:

Μέχρι αυτό το σημείο, έχετε δημιουργήσει την εφαρμογή σας και έχετε ελέγξει ότι λειτουργεί όπως αναμένεται. Μπορείτε να τερματίσετε τον διακομιστή πατώντας Ctrl + C και να προχωρήσετε στη δημιουργία του Dockerfile. Τα Dockerfiles βοηθούν στην επεκτασιμότητα, καθιστώντας δυνατή την αναδημιουργία ενός στιγμιότυπου της εφαρμογής όταν χρειάζεται.

Βήμα 3: Δημιουργία του Dockerfile

Το Docker διαβάζει τις οδηγίες που καθορίζονται σε ένα Dockerfile κατά τη δημιουργία εικόνων. Καθορίζει το περιβάλλον εκτέλεσης μιας εφαρμογής. Επομένως, βοηθά τους προγραμματιστές να αποφύγουν αποκλίσεις με εξαρτήσεις ή αλλαγές στις εκδόσεις χρόνου εκτέλεσης. Εισαγάγετε την ακόλουθη εντολή για να δημιουργήσετε το Dockerfile:

nano Dockerfile

1	nano Dockerfile

Μια εικόνα Docker δημιουργείται χρησιμοποιώντας διάφορα επίπεδα εικόνων που βασίζονται το ένα στο άλλο. Ξεκινάτε προσθέτοντας μια βασική εικόνα για να αποτελέσει το σημείο εκκίνησης για την εφαρμογή.

Εφόσον η εφαρμογή αναμένεται να εκτελεστεί σε ένα περιβάλλον node.js, θα ξεκινήσουμε προσθέτοντας την εικόνα node:10-alpine για το node.js. Επί του παρόντος, καθώς γράφουμε αυτόν τον οδηγό, αυτή είναι η συνιστώμενη έκδοση LTS του Node.js. Επιλέξαμε τη συγκεκριμένη εικόνα επειδή προέρχεται από το έργο Alpine Linux. Επομένως, θα βοηθήσει στη διατήρηση του μεγέθους της εικόνας μας στο ελάχιστο. Υπάρχουν διάφορες παραλλαγές εικόνων στη σελίδα Docker Hub Node images από τις οποίες μπορείτε να επιλέξετε ανάλογα με τις ανάγκες σας.

Προσθέστε τον ακόλουθο κώδικα για να ορίσετε τη βασική εικόνα της εφαρμογής χρησιμοποιώντας την οδηγία FROM:

FROM node:10-alpine

1	FROM node:10-alpine

Αυτή η εικόνα περιλαμβάνει το Node.js και το npm. Κάθε Dockerfile πρέπει να ξεκινά με μια οδηγία FROM. Η εικόνα Docker node συνοδεύεται από προεπιλογή με έναν μη-root χρήστη node που μπορείτε να χρησιμοποιήσετε για να εκτελέσετε το container της εφαρμογής σας ως root. Η ασφάλεια του Docker συνιστά να μην εκτελούνται τα containers ως root και να περιορίζονται τα προνόμια μόνο σε εκείνα που απαιτούνται για την εκτέλεση των πόρων του.

Σε αυτήν την περίπτωση, θα χρησιμοποιήσουμε τον αρχικό κατάλογο του χρήστη node ως κατάλογο εργασίας για την εφαρμογή καθώς και τον χρήστη μέσα στο container. Μπορείτε να ελέγξετε αυτόν τον οδηγό βέλτιστων πρακτικών για την εικόνα Docker Node για περισσότερες πληροφορίες.

Θα δημιουργήσουμε τον υποκατάλογο node_modules μέσα στο /home/node μαζί με τον κατάλογο app για να βοηθήσουμε στον εξορθολογισμό των δικαιωμάτων για τον κώδικα της εφαρμογής. Η δημιουργία αυτών των καταλόγων διασφαλίζει ότι έχουν τα σωστά δικαιώματα όταν εκτελούμε την εντολή npm install τοπικά μέσα στα containers. Αφού δημιουργήσετε τους καταλόγους, πρέπει να ορίσετε την ιδιοκτησία τους στον χρήστη node. Θα το κάνουμε αυτό μέσα στο Dockerfile προσθέτοντας την ακόλουθη γραμμή:

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

Στη συνέχεια, θα ορίσετε τον κατάλογο εργασίας προσθέτοντας την ακόλουθη γραμμή:

WORKDIR /home/node/app

1	WORKDIR /home/node/app

Είναι καλή ιδέα να ορίζετε πάντα το WORKDIR έτσι ώστε το Docker να μην χρειάζεται να δημιουργήσει ένα από προεπιλογή.

Προσθέστε την ακόλουθη γραμμή για να αντιγράψετε τα αρχεία package.json και package-lock.json:

COPY package*.json ./

1	COPY package*.json ./

Συνιστάται να προσθέσετε την οδηγία COPY πριν από την εκτέλεση του npm install ή την αντιγραφή του πηγαίου κώδικα της εφαρμογής. Αυτό σας επιτρέπει να επωφεληθείτε από τον μηχανισμό προσωρινής αποθήκευσης (caching) του Docker. Κατά τη διάρκεια της διαδικασίας δημιουργίας, το Docker ελέγχει αν έχει αποθηκευμένο ένα επίπεδο για κάθε οδηγία. Αυτό σημαίνει ότι εάν δεν έχετε αλλάξει το αρχείο package.json, τότε το Docker θα χρησιμοποιήσει το υπάρχον επίπεδο εικόνας και θα αποφύγει την επανεγκατάσταση των node modules, επομένως οι διαδικασίες δημιουργίας θα είναι ταχύτερες.

Πριν από την εκτέλεση του npm install, προσθέστε την ακόλουθη γραμμή για να αλλάξετε τον χρήστη σε node για να διασφαλίσετε ότι όλα τα αρχεία της εφαρμογής και ο κατάλογος node_modules ανήκουν στον μη-root χρήστη node:

USER node

USER node

Το container μας είναι τώρα έτοιμο να εκτελέσει την εντολή npm install. Προσθέστε την ακόλουθη γραμμή στο Dockerfile:

RUN npm install

1	RUN npm install

Μόλις εγκατασταθούν τα node_modules, προσθέστε την ακόλουθη γραμμή που θα πει στο Docker να αντιγράψει τον κώδικα της εφαρμογής στον κατάλογο της εφαρμογής στο container με τα σωστά δικαιώματα και ιδιοκτησία, δηλαδή στον μη-root χρήστη node:

COPY --chown=node:node . .

1	COPY --chown=node:node . .

Το τελευταίο βήμα είναι να εκθέσετε τη θύρα 8090 στο container, όπως είχαμε ορίσει στο αρχείο εισόδου μας index.js:

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

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

Το EXPOSE ορίζει ποιες θύρες στο container θα είναι ανοιχτές κατά το χρόνο εκτέλεσης. Το CMD εκτελεί την εντολή για την εκκίνηση της εφαρμογής, σε αυτήν την περίπτωση, node index.js.

Θα πρέπει να έχετε μόνο μία εντολή CMD στο Dockerfile, καθώς μόνο η τελευταία τίθεται σε ισχύ. Παρακαλούμε ελέγξτε το έγγραφο τεκμηρίωσης αναφοράς του Dockerfile για μια λίστα με πράγματα που μπορείτε να κάνετε με το Dockerfile.

Το πλήρες Dockerfile σας θα πρέπει να μοιάζει κάπως έτσι:

FROM node:10-alpine
RUN mkdir -p /home/node/app/node_modules && chown -R node:node /home/node/app
WORKDIR /home/node/app
COPY package*.json ./
USER node
RUN npm install
COPY --chown=node:node . .
EXPOSE 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" ]

Μπορείτε τώρα να αποθηκεύσετε και να κλείσετε το αρχείο.

Το επόμενο πράγμα που πρέπει να κάνετε είναι να προσθέσετε το .dockerignore αρχείο. Ακριβώς όπως το .gitignore αρχείο, το .dockerignore καθορίζει ποια αρχεία και κατάλογοι μέσα στον κατάλογο του έργου δεν πρέπει να αντιγραφούν στο κοντέινερ.

Ανοίξτε το αρχείο με τον επεξεργαστή nano:

nano .dockerignore

1	nano .dockerignore

Προσθέστε τις ακόλουθες γραμμές μέσα στο αρχείο:

node_modules
npm-debug.log
Dockerfile
.dockerignore

node_modules

npm-debug.log

Dockerfile

.dockerignore

Εάν εργάζεστε με ένα git αποθετήριο, τότε θα πρέπει επίσης να προσθέσετε τον .git κατάλογο και το .gitignore αρχείο. Αποθηκεύστε και κλείστε το αρχείο.

Αν όλα έχουν πάει καλά, ήρθε η ώρα να δημιουργήσετε την εικόνα της εφαρμογής χρησιμοποιώντας την εντολή docker build. Μπορείτε να προσθέσετε τη σημαία –t στην εντολή docker build για να επισημάνετε την εικόνα με ένα εύκολο στη μνήμη όνομα, σε αντίθεση με την τυχαία συμβολοσειρά που ορίζει το docker από προεπιλογή. Θα ανεβάσουμε επίσης την εικόνα στο Docker Hub, επομένως είναι καλύτερο να συμπεριλάβετε το όνομα χρήστη σας στο Docker Hub στην ετικέτα.

Θα χρησιμοποιήσουμε το nodejs-express-image ως όνομα ετικέτας. Είστε ελεύθεροι να επιλέξετε ένα όνομα ετικέτας που σας αρέσει. Εδώ είναι η εντολή για τη δημιουργία της εικόνας:

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

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

Θυμηθείτε να αντικαταστήσετε το your_dockerhub_username με το πραγματικό σας όνομα χρήστη στο Docker Hub. Η τελεία . (dot) στο τέλος καθορίζει ότι το πλαίσιο δημιουργίας είναι ο τρέχων κατάλογος.

Η διαδικασία δημιουργίας διαρκεί ένα ή δύο λεπτά. Μόλις ολοκληρωθεί, εισαγάγετε την εντολή για να ελέγξετε τις εικόνες σας:

sudo docker images

1	sudo docker images

Θα πρέπει να δείτε κάτι σαν αυτό:

Θυμηθείτε, αντικαταστήσαμε το your_dockerhub_username με ένα πραγματικό όνομα χρήστη.

Αφού επιβεβαιώσετε ότι η εικόνα σας έχει δημιουργηθεί, μπορείτε τώρα να δημιουργήσετε ένα κοντέινερ με την εικόνα χρησιμοποιώντας το docker run. Θα συμπεριληφθούν οι ακόλουθες σημαίες:

-p: δημοσιεύει τη θύρα στο κοντέινερ και την αντιστοιχίζει σε μια θύρα στο σύστημα υποδοχής. Θα χρησιμοποιήσουμε τη θύρα 80 στο σύστημα υποδοχής για λόγους επίδειξης. Ωστόσο, εάν έχετε άλλη διεργασία που εκτελείται σε αυτήν τη θύρα, μη διστάσετε να την τροποποιήσετε όπως απαιτείται. Μάθετε περισσότερα για τη σύνδεση θυρών από την τεκμηρίωση του Docker.
-d: για λειτουργία αποσύνδεσης. Επιτρέπει στο κοντέινερ να συνεχίσει να εκτελείται στο παρασκήνιο.
--name: μπορείτε να το χρησιμοποιήσετε για να ορίσετε ένα εύκολο στη μνήμη όνομα αντί να αφήσετε το Docker να εκχωρήσει μια τυχαία συμβολοσειρά.

Η εντολή για τη δημιουργία του κοντέινερ είναι η ακόλουθη. Αντικαταστήστε κατάλληλα το όνομα χρήστη σας στο 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

Περιμένετε να δημιουργηθεί το κοντέινερ και να αρχίσει να εκτελείται. Μπορείτε να χρησιμοποιήσετε αυτήν την εντολή για να επιθεωρήσετε όλα τα κοντέινερ που εκτελούνται:

sudo docker ps

1	sudo docker ps

Θα πρέπει να δείτε ένα αποτέλεσμα παρόμοιο με το ακόλουθο:

Όπως φαίνεται στο αποτέλεσμα, το κοντέινερ εκτελείται τώρα. Μπορείτε να το δείτε στο πρόγραμμα περιήγησης εάν επισκεφτείτε τη δημόσια διεύθυνση IP του διακομιστή σας χωρίς τη θύρα στο πρόγραμμα περιήγησης. Η αρχική σας σελίδα θα φορτώσει:

Έχετε αναπτύξει με επιτυχία έναν στατικό ιστότοπο Node Express με το Docker. Ας δούμε πώς μπορούμε να ανεβάσουμε αυτήν την εικόνα στο Docker Hub για μελλοντική χρήση και σκοπούς κλιμάκωσης.

Βήμα 4: Εργασία με αποθετήρια εικόνων Docker

Μπορείτε να προωθήσετε τις εικόνες σας σε μητρώα εικόνων όπως το Docker Hub και να τις αποθηκεύσετε για μελλοντική χρήση, να τις μοιραστείτε με άλλους προγραμματιστές ή να επιτρέψετε την κλιμάκωση των κοντέινερ σας. Μπορούμε να προωθήσουμε την εικόνα που δημιουργήσαμε στο Docker Hub και να τη χρησιμοποιήσουμε για να αναδημιουργήσουμε ένα κοντέινερ.

Χρησιμοποιήστε την ακόλουθη εντολή για να συνδεθείτε στον λογαριασμό σας στο Docker Hub. Αντικαταστήστε το με το πραγματικό σας όνομα χρήστη στο Docker Hub:

sudo docker login -u your_dockerhub_username

1	sudo docker login -u your_dockerhub_username

Εισαγάγετε τον κωδικό πρόσβασής σας όταν σας ζητηθεί. Μόλις συνδεθείτε, ένα ~/.docker/config.json αρχείο δημιουργείται στον αρχικό κατάλογο του χρήστη σας που περιέχει τα διαπιστευτήριά σας στο Docker Hub.

Έχοντας ορίσει αυτό, εισαγάγετε την ακόλουθη εντολή για να προωθήσετε την εικόνα στο Docker Hub, καθορίζοντας την ετικέτα που ορίσατε κατά τη δημιουργία της εικόνας νωρίτερα:

sudo docker push your_dockerhub_username/nodejs-express-image

1	sudo docker push your_dockerhub_username/nodejs-express-image

Αυτή η εντολή προωθεί την εικόνα docker στον λογαριασμό σας στο Docker Hub. Εάν επισκεφτείτε τον λογαριασμό σας, μπορείτε να δείτε την εικόνα που προωθήσατε πρόσφατα:

Μπορούμε να δοκιμάσουμε τη χρησιμότητα του αποθετηρίου εικόνων καταστρέφοντας το τρέχον κοντέινερ της εφαρμογής και ανακατασκευάζοντάς το χρησιμοποιώντας την εικόνα στο αποθετήριο.

Δείτε τη λίστα με τα τρέχοντα κοντέινερ σας εισάγοντας την εντολή:

sudo docker ps

1	sudo docker ps

Θα πρέπει να δείτε ένα αποτέλεσμα παρόμοιο με αυτό:

Σημειώστε το CONTAINER ID που αναφέρεται στο αποτέλεσμά σας, αντιγράψτε το και χρησιμοποιήστε το για να σταματήσετε το κοντέινερ σας με την εντολή, αντικαθιστώντας το ID με το δικό σας:

sudo docker stop 1bb2d65279bb

1	sudo docker stop 1bb2d65279bb

Εισαγάγετε την ακόλουθη εντολή για να δείτε τη λίστα με όλες τις εικόνες docker που είναι διαθέσιμες στο σύστημά σας:

sudo docker images –a

1	sudo docker images –a

Το αποτέλεσμα θα δείξει το όνομα της εικόνας σας, την εικόνα node.js και άλλες εικόνες από τη διαδικασία δημιουργίας.

Εισαγάγετε την ακόλουθη εντολή για να αφαιρέσετε τις εικόνες, συμπεριλαμβανομένων των μη χρησιμοποιούμενων ή εκκρεμών εικόνων:

sudo docker system prune

1	sudo docker system prune

Πληκτρολογήστε y για επιβεβαίωση. Αυτό αφαιρεί τα σταματημένα κοντέινερ και τις εικόνες. Εάν τα παραθέσετε σε λίστα, θα δείτε μια κενή λίστα στο αποτέλεσμα:

Τώρα, έχετε αφαιρέσει τόσο το κοντέινερ που εκτελεί την εφαρμογή, όσο και την ίδια την εικόνα. Μάθετε περισσότερα σχετικά με την αφαίρεση κοντέινερ, εικόνων και τόμων Docker ακολουθώντας τον οδηγό μας.

Μπορούμε τώρα να αναδημιουργήσουμε ολόκληρη τη διαδικασία κάνοντας πρώτα λήψη της εικόνας από το Docker Hub με την ακόλουθη εντολή. Αντικαταστήστε κατάλληλα το όνομα χρήστη σας στο Docker Hub:

sudo docker pull your_dockerhub_username/nodejs-express-image

1	sudo docker pull your_dockerhub_username/nodejs-express-image

Δείτε ξανά τη λίστα με τις εικόνες Docker σας με την εντολή:

sudo docker images

1	sudo docker images

Θα πρέπει να δείτε την εικόνα στο αποτέλεσμα:

Μπορείτε τώρα να ανακατασκευάσετε το κοντέινερ σας χρησιμοποιώντας την εντολή από το Βήμα 3. Φυσικά, αντικαταστήστε το όνομα χρήστη σας στο 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

Δείτε τη λίστα με τα κοντέινερ σας για να επιβεβαιώσετε ότι έχει ανακατασκευαστεί:

sudo docker ps

1	sudo docker ps

Θα πρέπει να δείτε ένα παρόμοιο αποτέλεσμα:

Στο πρόγραμμα περιήγησής σας, μεταβείτε στη δημόσια διεύθυνση IP του διακομιστή σας και θα πρέπει να δείτε την εφαρμογή σας να εκτελείται.

Συμπέρασμα

Εάν έχετε ακολουθήσει τον οδηγό μέχρι αυτό το σημείο, έχετε πλέον έναν στατικό ιστότοπο κατασκευασμένο με Express και Bootstrap, ο οποίος έχει αναπτυχθεί με το Docker. Χρησιμοποιήσατε τα αρχεία του στατικού ιστότοπου για να δημιουργήσετε μια εικόνα Docker και χρησιμοποιήσατε την εικόνα για να δημιουργήσετε ένα κοντέινερ. Στη συνέχεια, προωθήσατε την εικόνα σε ένα μητρώο εικόνων Docker, Docker Hub, καθιστώντας την διαθέσιμη για μελλοντική χρήση ή κλιμάκωση. Για να δοκιμάσετε τη χρήση του μητρώου εικόνων, καταστρέψατε τις εικόνες και τα κοντέινερ, κάνατε λήψη των εικόνων από το μητρώο και ανακατασκευάσατε τα κοντέινερ.

Αυτός ο οδηγός εξήγησε πώς να αναπτύξετε μια εφαρμογή Node.js. Εάν θέλετε να μάθετε πώς να χρησιμοποιείτε μια διαφορετική στοίβα ανάπτυξης ιστού, έχουμε έναν οδηγό σχετικά με την Ανάπτυξη μιας εφαρμογής Laravel με το Docker Compose στο Nginx.

Για περισσότερους πόρους σχετικά με τη χρήση του Docker, δείτε τους ακόλουθους οδηγούς:

Καλή συνέχεια!

Hark Labs

Συγγραφέας · CloudSigma

Ο Preslav Dobrev είναι Δημιουργικός Σχεδιαστής στην CloudSigma, με εστίαση στη συνεπή επιχειρηματική ταυτότητα μέσω παραδοσιακών και καινοτόμων καναλιών μάρκετινγκ. Διαθέτει την ικανότητα να συνδυάζει το καλλιτεχνικό όραμα με το στρατηγικό μάρκετινγκ για τη δημιουργία εντυπωσιακών αφηγήσεων επωνυμίας.

Πώς να αναπτύξετε μια εφαρμογή Node.js (Express.js) με το Docker στο Ubuntu 20.04

Εισαγωγή

Προαπαιτούμενα

Βήμα 1: Διαμόρφωση εξαρτήσεων εφαρμογής

Βήμα 2: Προσθήκη των αρχείων κώδικα της εφαρμογής σας

Βήμα 3: Δημιουργία του Dockerfile

Βήμα 4: Εργασία με αποθετήρια εικόνων Docker

Συμπέρασμα

Hark Labs

Σχόλια