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

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

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}, https://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 с помощью Node, как обычно, просто запустите приведенный ниже код в командной строке. Вы должны быть уверены, что находитесь внутри папки API. Если вы перейдете на https://localhost:4000, вы должны увидеть домашний маршрут в окне браузера.

npm run start

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

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

docker-compose up

Если вы перейдете на https://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, как обычно, просто запустите приведенный ниже код в командной строке. Убедитесь, что вы находитесь внутри папки клиента. Если вы перейдете на https://localhost:3000, вы должны увидеть домашний маршрут в окне браузера.

npm run start

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

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

docker-compose up

Если вы перейдете на https://localhost:3000, вы должны увидеть домашний маршрут в окне браузера.

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

docker-compose down

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

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.