Рубрики
Без рубрики

Как создать полное приложение ract / express / mongodb, используя docker

João Henrique Как создать полное приложение ract / express / mongodb, используя приложение Docker “Assorted-foliced bytermondal” Frank McKenna на Unsplashin в этом руководстве, я проведу вас через процесс контейнера RACTEND, узел / экспресс API и база данных MongoDB с использованием контейнеров докеров в

Автор оригинала: FreeCodeCamp Community Member.

Джоу Хенрике

В этом руководстве я направляю вас через процесс контейнера Реагировать Frontend, A. Узел / выражать API и Монгодб Используя базу данных Докер Контейнеры очень просто.

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

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

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

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

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

Готовиться!

  1. Убедитесь, что у вас есть Узел и Докер работает на вашей машине.
  2. Я буду использовать приложение React/Express, которое мы построили в предыдущем руководстве под названием Создайте React Wordend, узел/экспресс-бэкэнд и подключить их вместе Отказ Вы можете сначала следовать этому руководству или вы можете клон это Github Repository С котельной, если вы не заинтересованы в процессе создания Реагировать и Экспресс Программы.
  3. Если вы выбираете использование репо, не забудьте NPM установить внутри Клиент и API Папки для установки всех необходимых зависимостей.
  4. И … вот об этом. Вы все намерены начать контейнерные материалы:)

Dockerfile.

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

Контейнеры докеров везде!

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

Контейнеризировать свой клиент

Чтобы построить наш клиентский образ вам понадобится Dockerfile Отказ Давайте создадим один:

  1. Открыть React/Express App В вашем любимом редакторе кода (я использую VS код ).
  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, вам нужно будет другой Dockerfile Отказ Давайте создадим это:

  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 здесь Отказ

Докер-состав

Вы можете запустить каждый отдельный контейнер, используя DokerFiles. В нашем случае у нас есть 3 контейнера для управления, поэтому мы будем использовать докер-составное вместо. Создатель – это инструмент для определения и управления многофункциональными приложениями докера.

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

  1. Открыть React/Express App в вашем редакторе кода.
  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 здесь Отказ

В основном я говорю докер, что хочу построить контейнер под названием клиент Используя изображение WebApp-Client (который является изображением, который мы определили на нашем клиенте DockerFile) Это будет слушать порта 3000. Тогда я говорю, что хочу построить контейнер под названием API Использование изображения webapp-api (который является изображением, который мы определили на нашем API Dockerfile), которые будут слушать порта 9000.

Добавить базу данных 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 Файл должен быть что-то вроде этого:

В Docker-Compose.yml Файл, вдавшись. Будьте в курсе этого.

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

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

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

docker-compose up

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

Подключите API для Mongodb

  1. Во-первых, давайте установим Мангуст Чтобы помочь нам с подключением к Монгодб Отказ На вашем терминале типа:
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 и Мангуст Для использования на нашем маршруте/TestDB. Затем я создаю переменную, которая будет отправлена как ответ, рассказывая, что произошло с запросом. Затем я подключаюсь к базе данных с помощью Mongoose.Connect (). Затем я проверяю, работает ли соединение или нет, и изменить переменную (я создал ранее) соответственно. Наконец, я использую Module.exports, чтобы экспортировать этот маршрут, чтобы я мог использовать его в файле App.js.

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

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

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

3. Теперь давайте проверим, если все будет работать должным образом. Перейти к вашему терминалу и нажмите Контроль + C принести ваши контейнеры. Затем запустите Docker-Compose Up Чтобы вернуть их снова. После того, как все работает и работает, если вы перейдите к http://localhost: 9000/testdb Вы должны увидеть сообщение Подключен к базе данных.

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

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

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

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

  1. Перейти к себе Клиент папка и открыть App.js файл.
  2. Теперь вставьте этот код ниже callapi () Метод:
callDB() {    fetch("http://localhost:9000/testDB")        .then(res => res.text())        .then(res =>; this.setState({ dbResponse: res }))        .catch(err => err);}

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

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

dbResponse: ""

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

this.callDB();

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

;{this.state.dbResponse}

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

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

На вашем браузере отправляйтесь на http://localhost: 3000/ И если все работает должным образом, вы должны увидеть эти три сообщения:

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

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

Поздравляю !!!

Теперь у вас есть полное приложение для стека с aDe/Express API и базой данных Node/Express API и базой данных MongoDB. Все работает внутри отдельных контейнеров докеров, которые организуются простым файлом Pocker-Compose.

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

Вы можете найти весь код, который я написал В репозитории проекта Отказ

… и не забудьте быть удивительным сегодня;)

Читайте ещё по теме: