Стаття також доступна російською (перейти до перегляду).

Зміст:

• Вихідні положення
• Розгортання середовища виконання
• Встановлення залежностей
• Створення файлів додатку
• Створення Docker-шаблону
• Побудова контейнеру

У одній із наших попередніх робіт ми розглядали процес створення та запуску PHP-додатку у Docker. Тепер спробуємо продемонструвати у середовищі Docker роботу із додаткомтипу Node.js. Нашим основним завданням буде отримання «зафіксованого» у Docker-контейнері ізольованого середовища для створення, редагування та запуску Node.js додатку. Потім такий контейнер можна «переправити» на будь-який інший хост або помістити у Docker Hub репозиторій для подальшого використання та / або «роздачі» у відкритому доступі.         

Вихідні положення

Наш додаток буде складатися із кількох взаємопов’язаних статичних html-сторінок веб-сайту, побудованого із використанням фреймворків Bootstrap и Express. Додаток буде створений та розміщений на VPS-сервері під управлінням ОС Debian 12 із наперед розгорнутим Docker-середовищем. 

Для виконання нашого завдання ми повинні отримати повністю працездатний Node.js-додаток, після чого створити на його базі Docker-шаблон. І вже потім запустити процес формування готового контейнера із відповідними залежностями. Це і буде нашою кінцевою метою

Розіб’ємо процес на кілька окремих етапів:

• Розгортання середовища виконання JavaScript;

• Встановлення залежностей;

• Створення файлів додатку;

• Запуск веб-додатку;

• Створення Docker-шаблону;

• Побудова контейнеру

Нижче буде виконаний кожен із зазначених етапів.

Розгортання середовища виконання

Встановити Node.js можна з репозиторію Debian або з альтернативного репозиторію PPA (Personal Package Archive), де є широкий вибір версій програми. Скористаємося останнім способом. Це дозволить уникнути окремого встановлення менеджеру пакетів npm, оскільки він включений до пакету NodeSource nodejs.

Перейдемо до домашнього каталогу користувача testing_node із правами sudo та введемо команду curl для отримання скрипта, необхідного для встановлення потрібної версії Node.js. Для цього введемо в терміналі:

$ cd ~
$ curl -sL https://deb.nodesource.com/setup_20.x -o nodesource_setup.sh

Перевіримо вміст скрипта nodesource_setup.sh за допомогою редактору, щоб переконатися у його безпечності:

$ nano nodesource_setup.sh

Вийдемо з редактору (Ctrl+X). 

Тепер ми можемо запустити сценарій засобами командної оболонки bash. При цьому PPA-репозиторій  буде доданий до конфігурації нашої системи та буде оновлений локальний кеш пакетів:

$ sudo bash nodesource_setup.sh

Вихід команди: 2025-04-05 18:00:41 - Repository configured successfully. Це означає, що сценарій коректно виконав свою роботу.

Встановимо Node.js:

$ sudo apt install nodejs

Вихід команди: Setting up nodejs (20.19.0-1nodesource1) ... . Отже, програма встановлена. 

Перевіримо її версію:

$ node -v

Результат: v20.19.0

Отже, Node.js та npm коректно встановлені у нашій системі і тому можна переходити до наступного етапу.

Встановлення залежностей

Файли веб-додатку будуть містити код, статичний контент та залежності. Нам потрібно звести ці залежності в окремий файл у форматі json. Але перед тим створимо каталог проекту із назвою node_docker. 

Введемо в терміналі:

$ mkdir node_docker
$ cd node_docker

Створимо файл package.json, котрий буде містити залежності проекту та інші ідентифікаційні дані: 

$ nano package.json

Вміст файлу буде наступним:

{
  "name": "nodejs-image-application",
  "version": "1.0.0",
  "description": "nodejs image new application",
  "author": "Alexander R. <alexandr7500@meta.ua>",
  "license": "MIT",
  "main": "app.js",
  "keywords": [
    "nodejs",
    "bootstrap",
    "express"
  ],
  "dependencies": {
    "express": "^4.16.4"
  }

Тут відповідні поля містять назву проекту, його версію, опис, ім’я автора, ліцензію, точку входу, ключові слова та залежності. 

Вставимо наведений код у вікно редактору nano, як показано нижче.

 

Збережемо внесені зміни та вийдемо з редактору.

 

Для встановлення залежностей, перерахованих у файлі package.json у каталог проекту, виконаємо наступну команду:

$ npm install

Пакети встановлені. Переходимо до наступного етапу.

Створення файлів додатку

У кореневому каталогу проекту створимо файл додатку із ім’ям app.js. Для цього введемо в терміналі:

$ nano app.js

Код файлу наведений нижче:

const express = require('express');
const app = express();
const router = express.Router();
const path = __dirname + '/performances/';
const port = 8080;
router.use(function (req,res,next) {
  console.log('/' + req.method);
  next();
});
router.get('/', function(req,res){
  res.sendFile(path + 'index.html');
});
router.get('/newinfo', function(req,res){
  res.sendFile(path + 'newinfo.html');
});
app.use(express.static(path));
app.use('/', router);
app.listen(port, function () {
  console.log('New port listening application')
})

За допомогою конструкцій const будуть створені об’єкти роутеру та програми Express, а також визначені базова директорія та порт.

За допомогою конструкції router визначені маршрути додатку.

Остання частина коду поєднує між собою програму роутера та статичні дані. Також для додатку включається режим прослуховування визначеного порту.

Вставимо наведений код у файл app.js: 

Збережемо файл на диску та вийдемо з редактору.

Тепер перейдемо до створення файлів зі статичним контентом. Але перед тим треба створити директорію для їх розміщення. 

Введемо в терміналі: 

$ mkdir performances

Відкриємо головний індексний файл для внесення контенту:

$ nano performances/index.html

Нижче наведений код вказаного файлу, котрий буде імпортований Bootstrap:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>About new cases in building mobile communications</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link href="css/styles.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Merriweather:400,700" rel="stylesheet" type="text/css">
</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">View Control</span>
            </button> <a class="navbar-brand" href="#">All about mobile communications</a>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav mr-auto">
                    <li class="active nav-item"><a href="/" class="nav-link">Home</a>
                    </li>
                    <li class="nav-item"><a href="/newinfo" class="nav-link"> Mobile communications</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="jumbotron">
        <div class="container">
            <h1>New methods of building mobile communications</h1>
            <p>Let's start our training</p>
            <br>
            <p><a class="btn btn-primary btn-lg" href="/newinfo" role="button">Additional information about mobile communications</a>
            </p>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <h3>What types of data transmission systems exist?</h3>
                <p> Currently, there are more than a dozen known solutions for designing data transmission systems using radio waves.
                </p>
            </div>
            <div class="col-lg-6">
                <h3>What is the effectiveness of existing solutions?</h3>
                <p>The effectiveness of a particular solution depends on the conditions in which it is applied.
                </p>
            </div>
        </div>
    </div>
</body>
</html>

Як бачимо, код містить посилання на веб-сторінку newinfo.html, котру ми також будемо створювати. 

У вікні редактора код виглядає наступним чином:

Збережемо зміни та закриємо файл. 

Тепер перейдемо до створення файлу newinfo.html, котрий містить більш детальну інформацію про мобільні технології.

Викличемо редактор:  

$ nano performances/newinfo.html

Код файлу наведений нижче: 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Digital Communications News</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link href="css/styles.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Merriweather:400,700" rel="stylesheet" type="text/css">
</head>
<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">View Control</span>
        </button> <a class="navbar-brand" href="/">All about mobile communications</a>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav mr-auto">
                <li class="nav-item"><a href="/" class="nav-link">Home</a>
                </li>
                <li class="active nav-item"><a href="/newinfo" class="nav-link">Mobile communications</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="jumbotron text-center">
    <h1>Mobile communications New Info</h1>
</div>
<div class="container">
    <div class="row">
        <div class="col-lg-6">
            <p>
                <div class="caption">New technologies for data transmission using ultra-high frequencies are emerging.
                </div>
                <img src="https://assets.digitalocean.com/articles/docker_node_image/sawshark.jpg" alt="Photo1">
            </p>
        </div>
        <div class="col-lg-6">
            <p>
                <div class="caption">New approaches to managing data encryption are emerging</div>
                <img src="https://assets.digitalocean.com/articles/docker_node_image/sammy.png" alt="Photo2">
            </p>
        </div>
    </div>
</div>
</html>

Вставимо код у файл:

Збережемо файл на диску та вийдемо з редактору.

Код кожного зі створених нами файлів містить посилання на таблицю стилів CSS. Створимо її та каталог css, у якому вона буде міститися:  

$ mkdir performances/css

.navbar {
    margin-bottom: 1;
}
body {
    background: #030B3A;
    color: #ffffff;
    font-family: 'Merriweather', sans-serif;
}
h1,
h2 {
    font-weight: normal;
}
p {
    font-size: 17px;
    color: #ffffff;
}
.jumbotron {
    background: #1247AC;
    color: white;
    text-align: center;
}
.jumbotron p {
    color: white;
    font-size: 24px;
}
.btn-primary {
    color: #fff;
    text-color: #120000;
    border-color: white;
    margin-bottom: 10px;
}
img,
video,
audio {
    margin-top: 10px;
    max-width: 90%;
}
div.caption: {
    float: left;
    clear: both;
}

Вставимо код у вікно редактору:

Збережемо дані та закриємо файл.

Робота зі статичним контентом додатку завершена і тому можна переходити до його використання. 

Запуск веб-додатку

Перед запуском програми налаштуємо брандмауер нашої системи, котрий, зазвичай, дозволяє трафік через SSH, але для портів необхідно змінювати налаштування. Дозволимо   трафік на порт 8080:

$ sudo ufw allow 8080

Вихід команди: Rules updated . Отже, трафік через порт дозволено.

Переконаємося, що знаходимося у головній директорії проекту та здійснимо його перший запуск:

$ node app.js

Тепер додаток буде знаходитися у режимі прослуховування порту 8080, як і було нами визначено у налаштуваннях проекту.

Для перевірки правильності роботи додатку перейдемо до перегляду вмісту індексного файлу зі статичним контентом. Для цього введемо в адресній строчці браузеру наступну адресу:  

http://<ip>:8080

Результат показаний нижче.

Для здійснення переходу на веб-сторінку із ім’ям newinfo.html натиснемо кнопку миші по назві «Additional information about mobile communications», після чого сторінка завантажиться у вікні, як показано нижче: 

Отже, ми маємо працездатний додаток і тому перейдемо до етапу створення його Docker-шаблону. 

Створення Docker-шаблону

Перед тим, як створювати шаблон програми необхідно підготувати Dockerfile, що дозволить нам у подальшому відновити її або внести будь-які зміни. 

Викличемо редактор:

$ nano Dockerfile
Код файла будет следующим:
FROM node:10-alpine
RUN mkdir -p /home/node/app/node_modules && chown -R node:node /home/node/app
WORKDIR /home/node/app
COPY package*.json ./
USER node
RUN npm install
COPY --chown=node:node . .
EXPOSE 8080
CMD [ "node", "app.js" ]

Сохраним файл на диске. 

После этого создадим файл с именем .dockerignore, который будет использоваться для блокировки копирования определенных файлов в контейнер проекта. К ним, в частности, относятся npm-журналы, модули узлов и другие.  

Введем в терминале:

$ nano .dockerignore
node_modules
npm-debug.log
Dockerfile
.dockerignore

Збережемо файл на диску. 

Після цього створимо файл із ім’ям .dockerignore, котрий буде використовуватися для блокування копіювання визначених файлів до контейнеру проекту. До них, зокрема, відносяться npm-журнали, модулі вузлів та інші.  

Введемо в терміналі:

$ nano .dockerignore
node_modules
npm-debug.log
Dockerfile
.dockerignore

Збережемо внесені зміни та повернемося до командної строчки.

Після цього створимо шаблон додатку із ім’ям nodejs-image-application. 

$ sudo docker build -t alexandr7500/nodejs-image-application 

Тут alexandr7500 – ім’я власника облікового запису в Docker Hub.

Побудова контейнеру

Після створення шаблону можна переходити до створення контейнеру додатку. Для цього виконаємо в терміналі наступну команду: 

$ sudo docker run --name nodejs-image-application -p 80:8080 -d alexandr7500/nodejs-image-application

В результаті, ми отримали контейнер із Node.js-додатком, котрий можна запускати та масштабувати за нашим бажанням у будь-якому середовищі, а також завантажувати у Docker Hub репозиторій. 

Для перевірки його роботи достатньо ввести в адресній строчці браузеру IP-адресу вашого серверу без зазначення порту

Результат роботи додатку наведений нижче.

Підписуйтесь на наш телеграм-канал https://t.me/freehostua, щоб бути в курсі нових корисних матеріалів.

Дивіться наш канал Youtube на https://www.youtube.com/freehostua.

Ми у чомусь помилилися, чи щось пропустили?

Напишіть про це у коментарях, ми з задоволенням відповімо та обговорюємо Ваші зауваження та пропозиції.

Дата: 10.04.2025 Автор: Олександр Ровник #debian#docker#linux

Голосування 1 2 3 4 5