Файловая архитектура и инструменты
Используем Visual Code Studio в качестве редактора кода. Операционная система любая. Обязательно установите Docker.
Для начала создадим вот такую файловую архитектуру:
По мере чтения статьи файлов у нас прибавится. Что мы создали: .env
будет содержать переменные среды окружения, в папке app будет контейнер с Node.js, в папке static
будет статика, а в Nginx — Nginx-конфигурация. Для начала этого хватит.
Docker и docker-compose.yml
У нас будет два docker-compose.yml
: dev
и production
. Начнем с dev-версии:
Здесь стоит обратить внимание на четыре вещи:
- Контейнеры
app
иnginx
связаны со статикой. Для Node.js папка со статикой будет ниже уровнем отapp.js
(главным файлом, чуть позже создадим), на одном уровне с папкой app. - Контейнер с базой данных содержит
${DB_USER}
и${DB_PASSWORD}
. Это переменные из .env-файла, мы его начнем заполнять спустя пару мгновений. - Контейнер с Pgadmin содержит такие строки:
PGADMIN_DEFAULT_EMAIL
иPGADMIN_DEFAULT_PASSWORD
. Вы можете там указать свою почту и свой пароль, он будет использоваться для входа в Pgadmin. - В контейнере с Node.js есть раздел
build
. Там естьtarget dev
. Просто пока обратите внимание.
Теперь перейдем к production-версии:
Здесь стоит отметить, что файлы отличаются между собой только настройками для app
контейнера.
Во-первых, мы монтируем папку node_modules
внутри контейнера специально, чтобы не было проблем между dev
и production
версией.
Во-вторых, мы исполняем команду npm run start
, которая будет запускать наше приложение (позже ее напишем).
В-третьих, в разделе build
у нас другой target
– production
. И вот сейчас мы плавно переходим дальше…
Как Docker поймет, какой файл запускать
Идем в .env
файл и вставляем следующее содержимое:
В самом начале в переменную NODE_ENV
мы записываем в каком режиме мы будем сейчас работать: dev
или production
. В самом низу мы объединяем COMPOSE_FILE
и NODE_ENV
. Особо внимательные догадались, что будет происходить в зависимости от содержимого переменной NODE_ENV
при команде:
Будет использоваться тот или иной файл. То есть, если в NODE_ENV
указана строка dev
, мы активируем файл docker-compose.dev.yml
. Если указана строка production
, то мы активируем файл docker-compose.production.yml
.
Также в файле есть другие переменные для базы данных. Можете поменять их содержимое, если хотите. Главное — помните: DB_HOST
должен содержать в себе название контейнера с базой данных из docker-compose.yml
.
Контейнер с Node.js
Пора создавать наше приложение на Node.js. Если подумать, мы провели много подготовительной работы, но это только лишь ⅓ из всего того, что нам еще нужно сделать.
Для начала перейдем в папку app
и создадим там файл Dockerfile с таким содержимым:
Чтобы класс new Date()
в Node.js возвращал корректное для вас время, можно поменять таймзону контейнера. Например, если хотите установить уральское время, вместо Europe/Moscow
напишите Asia/Yekaterinburg
.
Контейнер с Nginx
Прежде чем продолжить, надо еще добавить в папку nginx
конфиг. Для этого внутри папки nginx
создайте файл nginx.conf
со следующим содержимым:
Запускаем сборку
Вот теперь можно все запустить. Из основной папки стартуем нашу сборку командой:
После того как все будет готово, и в терминале появятся четыре заветных зеленых done можно продолжать. Теперь-то уже можно начать непосредственно работу с Node.js.
Работаем с Node.js в контейнере
Давайте перейдем в контейнер с Node.js командой:
Если вы все сделали правильно, в терминале появится у строки ввода приписка opt/server
.
В этом режиме вы можете выполнять команды внутри контейнера. Чтобы выйти из контейнера, напишите команду:
Теперь, давайте напишем немного Node.js кода (войдите в контейнер, если вышли). Сначала надо инициализировать проект командой:
Далее, давайте создадим файл app.js
внутри папки app
. Создаем его самым обычным способом (можете через терминал, как хотите). Когда файл появится в VS Code, вы можете проверить, появился ли он в контейнере, для этого достаточно написать команду:
У нас должно быть сейчас 3 файла в контейнере: Dockerfile
, app.js
, package.json
.
После установим нужные нам пакеты командой:
Поместим следующий код в app/app.js
:
И создадим команду start
в package.json
:
Команда start
:
Теперь можно запустить внутри контейнера команду:
В консоль вы получите сообщение «Сервер запущен». Если перейдете в своем браузере по адресу http://localhost/, то увидите что-то подобное:
Если создадите файл внутри папки app
с окончание js
или json
– nodemon
подхватит изменения и перезапустит проект. Аналогично, если вы просто поменяете содержимое какого-нибудь файла с данными расширениями.
Если отключите nodemon
командой ctrl + c, то по прошлому адресу можно увидеть сообщение от Nginx: 502 Bad Gateway. Если поместите в папку static
любой файл, он будет доступен по указанному маршруту. Например, static/file.txt
=> http://localhost/file.txt. Даже если nodemon не работает. Помним, за работу со статикой у нас отвечает Nginx.
Устанавливаем Linter для JavaScript
Ну а как без этого? Для начала, перейдите в VS Code в раздел с плагинами, скачайте и активируйте плагин Eslint:
Вот теперь можно установить сам Eslint в проект командой:
Сначала выбираем To check syntax and find problems, после Common JS, на вопрос о фреймворке выбираем None of these, на вопрос про TypeScript отвечаем No. Платформу выбираем Node, галочку снимаем с Browser (все через пробел). Настройки сохранять будем в JSON, соглашаемся с установкой последней версии eslint и выбираем в конце npm.
Если у вас все получилось сделать правильно, будет работать подсветка:
Это все благодаря тому, что мы монтируем всю папку app
(вместе с node_modules) в dev-режиме. Осталось добавить команду для тестового (dev) запуска nodemon, который сначала будет парсить проект с помощью Eslit. Для этого добавьте еще две команды в package.json
:
dev:
lint:
Сохраните и запустите внутри контейнера команду:
Допустите какую-нибудь ошибку в коде и сохраните файл:
Если получили ошибку, то вы все настроили верно. Поздравляю, теперь ваш код будет чище.
Подключаемся к базе данных
Выходим на финишную прямую: осталось лишь подключить Node.js к базе данных.
В контейнере устанавливаем пакет для соединения с базой данных:
Добавляем код в app/app.js
:
Должно получиться как-то так:
Если вы сейчас сохраните и запустите проект, nodemon выбросит ошибку. А все потому, что у нас нет базы данных под названием api (если вы не меняли название). Для этого переходите по адресу http://localhost/pgadmin, и вводите данные из docker-compose.yml
для входа. Если вдруг получили ошибку от Nginx после авторизации, то просто нажмите F5.
Нам нужно создать новый сервер:
Во вкладке General введите любое название. Во вкладке Connection введите наши данные для подключения:
Базы api еще нет, поэтому вместо нее введите postgres
. Создайте новую базу под названием api
:
Теперь запускайте nodemon. Поздравляем, вы подключились к базе данных:
Финальная сборка
Так как мы написали все нужные команды, теперь можем поменять NODE_ENV
в .env
на production
и запустить наш проект в другом режиме командой:
В данный момент production
сборка от dev
отличается тем, что node_modules
контейнер создает свои, и они больше не прокинуты через volumes
между контейнером и ПК. Поэтому команда npm i
(не забываем про разные таргеты) из Dockerfile установит node_modules
только в контейнер. То есть, если вы удалите свои node_modules
, то теперь на контейнер это не повлияет.
Поэтому эту команду можно использовать для того, чтобы быстро тянуть файлы с GitHub и запускать проект на сервере. Мы же не храним node_modules
в git-репозиториях.
Как вернуться в dev
Для работы в dev-режиме вам просто потребуется вернуть NODE_ENV
в dev
режим, перезапустить проект через композ:
Зайти в контейнер командой:
Установить пакеты:
Запустить внутри команду:
Это обеспечит вам гибкость при разработке и разделит production от dev, позволит работать с линтером и подсветкой в VS Code. А также, разработка внутри контейнера обезопасит ваш компьютер от всяких вредоносных валварей.
Напоследок
Для работы с базой данных автор рекомендует Sequelize. Плюс, разделенные docker-compose.yml
позволят вам создавать разные Nginx конфиги для production и dev. Например, в боевую сборку можно добавить образ gordonchan/auto-letsencrypt и открыть 443 порт в nginx для https.
И вот ссылка на репозиторий GitHub. Там можно найти весь код проекта.
Комментарии