Как создать полный стек программы React/Express/MongoDB с помощью Docker

kak sozdat polnyj stek programmy reactexpressmongodb s pomoshhyu docker?v=1656520094

от Жоао Энрике

3lYdCwR8Znpx4ARlPMjX00Lf6XPQZtXj-ZYZ
«Интермодальные контейнеры разного цвета» от Фрэнка Маккенны на Unsplash

В этом учебнике я проведу вас через процесс контейнерирования React FrontEnd, Node/Express API и базы данных MongoDB с помощью контейнеров Docker очень простым способом.

Я не буду вдаваться в подробности, как работать с какой-либо технологией. Вместо этого я оставлю ссылку, если вы хотите узнать больше о любом из них.

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

Почему вы должны заботиться о Docker?

Docker просто одна из важнейших технологий на данный момент. Это позволяет запускать программы внутри контейнеров, преимущественно изолированных от «всего».

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

Контейнеры также предназначены для одноразового использования. Если один окажется мошенническим, вы можете убить его и сделать другого, как он, без труда благодаря системе изображений контейнеров.

Еще одна вещь, которая делает Docker отличным, это то, что приложение внутри контейнеров будет работать одинаково в каждой системе (Windows, Mac или Linux). Это прекрасно, если вы разрабатываете на своей машине, а затем хотите развернуть ее на каком-нибудь облачном поставщике, например GCP или AWS.

Готовиться, собираться!

  1. Убедитесь, что на компьютере запущены Node и Docker.
  2. Я буду использовать программу React/Express, которую мы создали в предыдущем учебнике Создайте React FrontEnd, Node/Express BackEnd и соедините их вместе. Вы можете сначала следовать этому учебнику или клонировать его Репозиторий GitHub с шаблоном, если вас не интересует процесс создания программ React и Express.
  3. Если вы решили использовать репо, не забудьте npm установить внутри Клиент и API папки для установки всех необходимых зависимостей.
  4. И… вот и все. Вы готовы начать контейнерировать вещи 🙂

Dockerfile

Согласно документации:

Dockerfile – это текстовый документ, содержащий все команды, которые пользователь может вызвать в командной строке для сбора изображения. Docker может автоматически создавать изображения, читая инструкции из файла Docker.

Контейнеры Docker повсюду!

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

Контейнеризуйте клиента

Для создания образа нашего клиента вам понадобится файл Dockerfile. Давайте создадим один:

  1. Откройте приложение React/Express в любимом редакторе кода (я использую VS Code).
  2. Перейдите к Клиент папку.
  3. Создайте новый файл с именем Dockerfile.
  4. Разместите в нем этот код:
# Use a lighter version of Node as a parent imageFROM mhart/alpine-node:8.11.4
# Set the working directory to /clientWORKDIR /client
# copy package.json into the container at /clientCOPY package*.json /client/
# install dependenciesRUN npm install
# Copy the current directory contents into the container at /clientCOPY . /client/
# Make port 3000 available to the world outside this containerEXPOSE 3000
# Run the app when the container launchesCMD ["npm", "start"]

Это позволит докеру создать образ (используя эти конфигурации) для нашего Клиента. Вы можете прочитать все о Dokerfile здесь.

Контейнеризуйте свой API

Чтобы создать образ API, вам понадобится другой файл Docker. Давайте создадим его:

  1. Перейдите к API папку.
  2. Создайте новый файл с именем Dockerfile.
  3. Разместите в нем этот код:
# Use a lighter version of Node as a parent imageFROM mhart/alpine-node:8.11.4
# Set the working directory to /apiWORKDIR /api
# copy package.json into the container at /apiCOPY package*.json /api/
# install dependenciesRUN npm install
# Copy the current directory contents into the container at /apiCOPY . /api/
# Make port 80 available to the world outside this containerEXPOSE 80
# Run the app when the container launchesCMD ["npm", "start"]

Это позволит докеру создать образ (с помощью этих конфигураций) для нашего API. Вы можете прочитать все о Dokerfile здесь.

Docker-Compose

Вы можете запустить каждый отдельный контейнер с помощью Dokerfiles. В нашем случае у нас есть 3 контейнера для управления, поэтому вместо этого мы будем использовать docker-compose. Compose – это инструмент для определения и запуска многоконтейнерных программ Docker.

Позвольте мне показать вам, как просто им воспользоваться:

  1. Откройте приложение React/Express в редакторе кода.
  2. В главной папке приложения создайте новый файл и назовите его docker-compose.yml.
  3. Напишите этот код в docker-compose.yml файл:
version: "2"
services:    client:        image: webapp-client        restart: always        ports:            - "3000:3000"        volumes:            - ./client:/client            - /client/node_modules        links:            - api        networks:            webappnetwork
    api:        image: webapp-api        restart: always        ports:            - "9000:9000"        volumes:            - ./api:/api            - /api/node_modules        depends_on:            - mongodb        networks:            webappnetwork

Что это за колдовство?

Вы должны прочитать все о docker-compose здесь.

В сущности, я говорю Docker, что хочу создать контейнер под названием клиентаиспользуя изображение webapp-клиент (это изображение, которое мы определили в файле Docker-файла клиента) который будет прослушивать порт 3000. Затем я говорю ему, что хочу создать контейнер под названием api используя изображение webapp-api (это изображение, которое мы определили в нашем файле Docker API), которое будет прослушивать порт 9000.

Имейте в виду, что существует много способов написания а docker-compose.yml файл. Вы должны изучить документацию и использовать то, что лучше отвечает вашим потребностям.

Добавьте базу данных MongoDB

Добавить базу данных MongoDB так же просто, как добавить эти строки кода в свой docker-compose.yml файл:

    mongodb:        image: mongo        restart: always        container_name: mongodb        volumes:            - ./data-node:/data/db        ports:            - 27017:27017        command: mongod --noauth --smallfiles        networks:            - webappnetwork

Это создаст контейнер с использованием официального образа MongoDB.

Создайте общую сеть для своих контейнеров

Чтобы создать общую сеть для своего контейнера, просто добавьте следующий код в контейнер. docker-compose.yml файл:

networks:    webappnetwork:        driver: bridge

Обратите внимание, что вы уже определили каждый контейнер программы для использования этой сети.

В конце концов, ваш docker-compose.yml файл должен быть примерно таким:

g-sJXjQARQ5DUglNTrgUia77fRELTh8dqyPU
docker-compose.yml

В docker-compose.yml файл, отступление имеет значение. Будьте в курсе этого.

Запустите свои контейнеры

  1. Теперь, когда у вас есть docker-compose.yml файл, давайте создадим ваши изображения. Перейдите к терминалу и в главном каталоге программы запустите:
docker-compose build

2. Теперь, чтобы заставить Docker раскрутить контейнеры, просто запустите:

docker-compose up

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

Подключите свой API к MongoDB

  1. Сначала давайте установим Mongoose, чтобы помочь нам в подключении к MongoDB. В вашем типе терминала:
npm install mongoose
  1. Теперь создайте файл под названием testDB.js в папке маршрутов API и вставьте этот код:
const express = require("express");const router = express.Router();const mongoose = require("mongoose");
// Variable to be sent to Frontend with Database statuslet databaseConnection = "Waiting for Database response...";
router.get("/", function(req, res, next) {    res.send(databaseConnection);});
// Connecting to MongoDBmongoose.connect("mongodb://mongodb:27017/test");
// If there is a connection error send an error messagemongoose.connection.on("error", error => {    console.log("Database connection error:", error);    databaseConnection = "Error connecting to Database";});
// If connected to MongoDB send a success messagemongoose.connection.once("open", () => {    console.log("Connected to Database!");    databaseConnection = "Connected to Database";});
module.exports = router;

Ладно, давайте посмотрим, что делает этот код. Сначала я импортирую Express, ExpressRouter и Mongoose для использования на нашем маршруте /testDB. Затем я создаю переменную, которая будет отправлена ​​как ответ, рассказывающий, что произошло с запросом. Затем я подключаюсь к базе данных с помощью Mongoose.connect(). Затем я проверяю, работает ли соединение или нет, и соответственно меняю переменную (я создал раньше). Наконец, я использую module.exports для экспорта этого маршрута, чтобы я мог использовать его в app.js файл.

2. Теперь вы должны «сказать» Express использовать тот маршрут, который вы только что создали. В папке API откройте файл app.js файл и вставьте эти две строки кода:

var testDBRouter = require("./routes/testDB");app.use("/testDB", testDBRouter);

Это «скажет» Express, что каждый раз, когда поступает запрос в конечную точку /testDBон должен использовать инструкции из файла testDB.js.

3. Теперь проверим, работает ли все правильно. Выделите свой терминал и нажмите контроль + C чтобы снести контейнеры. Тогда беги docker-compose up чтобы вернуть их снова. После того, как все будет запущено, если вы перейдете к нему, вы увидите сообщение Подключен к базе данных.

В конце концов, ваш app.js файл должен выглядеть так:

khTJL10Rc2DfF0brSn2DLzIuWNbnP45RWa93
api/app.js

Да… это означает, что API теперь подключен к базе данных. Но ваш FrontEnd еще не знает. Давайте сейчас над этим поработаем.

Сделайте запрос от React в базу данных

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

  1. Перейдите к своему Клиент папку и откройте App.js файл.
  2. Теперь вставьте этот код ниже callAPI() метод:
callDB() {    fetch("")        .then(res => res.text())        .then(res =>; this.setState({ dbResponse: res }))        .catch(err => err);}

Этот метод получит конечную точку, которую вы определили ранее в API и получит ответ. Затем он сохранит ответ в состоянии компонента.

4. Добавьте переменную в состояние компонента для сохранения ответа:

dbResponse: ""

3. Внутри метода жизненного цикла componentDidMount(), вставьте этот код, чтобы выполнить метод, который вы только что создали при монтаже компонента:

this.callDB();

4. Наконец, добавьте еще один <;p> после того, как вы уже должны отобразить ответ из базы данных:

<p className="App-intro">;{this.state.dbResponse}</p>

В конце концов, ваш файл App.js должен закончиться следующим образом:

DIpuBT8d3achTYZWQr-fl00UKzGCpPHVQaD0
client/App.js

Наконец, давайте посмотрим, все ли работает

В своем браузере перейдите к и если все работает должным образом, вы должны увидеть эти три сообщения:

  1. Добро пожаловать на React
  2. API работает должным образом
  3. Подключен к базе данных

Что-то вроде этого:

L0dS1-hvjlZspmeZt6KXVrZmvcd2jBZ0xPDK

Приветствую!!!

Теперь у вас есть программа с полным стеком с React FrontEnd, Node/Express API и базой данных MongoDB. Все они работают внутри отдельных контейнеров Docker, организованных с помощью простого файла docker-compose.

Это приложение можно использовать в качестве шаблона для создания более надежного приложения.

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

Будьте сильными и кодируйте!!!

…и не забудьте быть прекрасными сегодня 😉

Добавить комментарий

Ваш адрес email не будет опубликован.