Как использовать Docker в приложениях Node.js и React

В этой статье поговорим о том, как разработать и запустить бэкэнд на Node.js-Express и фронтенд на React в контейнере Docker.

Published in JavaScript in Plain

Docker дает разработчикам возможность помещать свои приложения в контейнеры. Эти контейнеры могут работать на любом устройстве, на котором установлен Docker, и приложения будут идентичны. С помощью этого сервиса можно клонировать кодовую базу на нескольких системах – везде будет одинаковый результат.

В рабочих процессах CI/CD и средах тестирования DevOps широко используется Docker: по сути, он представляет собой набор программных инструментов, которые можно использовать совместно. Kubernetes — это инструмент, который используется для работы с несколькими контейнерами Docker, но в гораздо большем масштабе.

Разберём, как разработать и запустить бэкэнд на Node.js-Express и фронтенд на React внутри контейнера Docker.

Запуск бэкенда на Node.js-Express в Docker

Когда убедились, что на компьютере установлен и запущен Docker, переходим к следующему шагу.

Используя командную строку, переходим в каталог, например на рабочий стол, а затем выполняем следующие команды.

mkdir my-app-docker
cd my-app-docker
touch docker-compose.yml
mkdir api
cd api
npm init -y
npm i express
touch app.js Dockerfile .dockerignore
cd ..

Мы настроили серверную часть – api и создали несколько файлов Docker. Теперь откройте проект в редакторе кода и добавьте приведенный ниже код в соответствующие файлы.

Это нужно поместить в файл docker-compose.yml. Обращайте внимание на форматирование YAML, иначе при запуске Docker выдаст ошибку.

version: '3.8'
services:  
  api:    
    build: ./api    
    container_name: api_backend    
    ports:      
      - '4000:4000'    
    volumes:     
      - ./api:/app      
      - ./app/node_modules

Следующий код нужно добавить в файл app.js:

const express = require('express');
const app = express();
const port = process.env.PORT || 4000;
app.get('/', (req, res) => {
  res.send('Home Route');
});
app.listen(port, () =>
  console.log(`Server running on port ${port}, http://localhost:${port}`)
);

Эту строку – в файл .dockerignore :

node_modules

Этот код – в файл Dockerfile:

FROM node:16-alpine
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
EXPOSE 4000
CMD ["node", "app.js"]

Наконец, в файл package.json:

"scripts": {
"start": "node app.js"
},

Использование Nodemon для автоматического перезапуска сервера при внесении изменений.

Если вы хотите, чтобы сервер перезагружался каждый раз, когда вы вносите изменения в файлы в бэкэнде, вы можете настроить его на использование Nodemon. Вам нужно лишь обновить файлы Dockerfile и package.json внутри папки api.

Обновите файл Dockerfile, используя приведенный ниже код. Мы установим Nodemon при запуске и используем dev в качестве команды запуска.

FROM node:16-alpine
RUN npm install -g nodemon
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
EXPOSE 4000
CMD ["npm", "run", "dev"]

Добавьте в файл package.json скрипт для Nodemon.

"scripts": {
"start": "node app.js",
"dev": "nodemon -L app.js"
},

Мы только что создали базовое приложение Node.js-Express, которое работает на порте 4000. Этот порт также связан с 4000 в Docker, что позволяет нам запускать его в Docker-контейнере.

Запуск серверов

Чтобы запустить сервер вне контейнера Docker как обычно на Node, просто запустите приведенный ниже код в командной строке. Вы должны быть уверены, что находитесь внутри папки api. Если вы перейдете на http://localhost:4000, вы должны увидеть основной пусть (home route) в окне браузера.

npm run start

Для запуска приложения Node.js-Express внутри Docker требуется другая команда. Во-первых, вам нужно находиться в корневой папке, где находится файл docker-compose.yml. Теперь запустите приведенную ниже команду, и она должна работать внутри контейнера Docker.

Важно отследить, что сервер узла не запущен, потому что на порте 4000 может работать только один сервер.

docker-compose up

По адресу http://localhost:4000 вы должны видеть основной (домашний) путь.

Вы можете остановить сервер с помощью приведенной ниже команды либо перейти в приложение Docker и остановить запуск контейнера.

docker-compose down

Запуск фронтенда на React в Docker

Теперь давайте создадим фронтенд на React. Используя командную строку, переместитесь в корневую папку для my-app-docker. Запустите приведенные ниже команды, чтобы настроить проект.

npx create-react-app client
cd client
touch .dockerignore Dockerfile

Теперь добавьте код ниже в соответствующие файлы.

Эту строку – в файл .dockerignore .

node_modules

Этот код – в файл Dockerfile .

FROM node:17-alpine
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

Наконец, добавьте в файл docker-compose.yml в корневой папке приведенный ниже код. Таким образом мы добавили клиентский раздел внизу с настройками для запуска React внутри контейнера Docker. Обращайте внимание на форматирование YAML, иначе при запуске Docker выдаст ошибку.

version: '3.8'
services:
  api:
    build: ./api
    container_name: api_backend
    ports:
      - '4000:4000'
    volumes:
      - ./api:/app
      - ./app/node_modules
  client:
    build: ./client
    container_name: client_frontend
    ports:
      - '3000:3000'
    volumes:
      - ./client:/app
      - ./app/node_modules
    stdin_open: true
    tty: true

Чтобы запустить сервер вне контейнера Docker как обычно на Node, запустите приведенный ниже код в командной строке. Убедитесь, что вы находитесь внутри папки клиента. По адресу http://localhost:3000 вы должны увидеть основной (домашний) путь в окне браузера.

npm run start

Для запуска приложения React внутри Docker требуется другая команда. Во-первых, вам нужно находиться в корневой папке, где расположен файл docker-compose.yml. Теперь запустите приведенную ниже команду, и она должна работать внутри контейнера Docker.

Важно отследить, что сервер приложения React не запущен, потому что на порте 3000 может работать только один сервер.

docker-compose up

По адресу http://localhost:3000 вы должны увидеть основной (домашний) путь в окне браузера.

Вы можете остановить сервер с помощью приведенной ниже команды либо перейти в приложение Docker и остановить запуск контейнера.

docker-compose down

С такими настройками вы можете одновременно запускать бэкенд Node.js и фронтенд React внутри Docker. Если вы столкнулись с какими-либо ошибками, возможно, поможет открыть настольное приложение Docker и удалить все образы, связанные с этим проектом. Затем попробуйте снова запустить команду docker-compose up – на этот раз все должно работать как положено.

Надеемся, этот перевод был для вас полезен!