de João Henrique

Cum să creați o aplicație completă React / Express / MongoDB utilizând Docker

Cum sa creati o aplicatie completa React
„Containere intermodale depuse în culori asortate” de Frank McKenna pe Unsplash

În acest tutorial, vă voi ghida prin procesul de containerizare a unui Reacţiona FrontEnd, a Nodul/Expres API și a MongoDB folosind baza de date Docher containere într-un mod foarte simplu.

Nu voi intra în prea multe detalii despre cum să lucrez cu oricare dintre tehnologii. În schimb, voi lăsa link-uri, în cazul în care doriți să aflați mai multe despre oricare dintre ele.

Obiectivul este de a vă oferi un ghid practic despre cum să containerizați această aplicație simplă Full-Stack, care să fie folosită ca punct de plecare, pentru a vă putea crea propriile aplicații.

De ce ar trebui să-ți pese Docher?

Docker este pur și simplu una dintre cele mai importante tehnologii din acest moment. Vă permite să rulați aplicații în containere care sunt în mare parte izolate de „orice”.

Fiecare container este ca o mașină virtuală individuală scoasă din tot ceea ce nu este necesar pentru a rula aplicația. Acest lucru face ca recipientele să fie foarte ușoare, rapide și sigure.

Recipientele sunt, de asemenea, menite să fie de unică folosință. Dacă cineva devine necinstit, îl poți ucide și să-l faci pe altul la fel fără nici un efort datorită sistem de imagini pentru containere.

Un alt lucru care face Docher minunat este că aplicația din containere va rula la fel în fiecare sistem (Windows, Mac sau Linux). Acest lucru este minunat dacă vă dezvoltați în mașină și apoi doriți să-l implementați la un furnizor de cloud cum ar fi GCP sau AWS.

Se pregateste!

  1. Asigura-te ca ai Nodul și Docher care rulează pe mașina dvs.
  2. Voi folosi aplicația React / Express pe care am construit-o în tutorialul anterior numit Creați un React FrontEnd, un Node / Express BackEnd și conectați-le împreună. Puteți urmări mai întâi acel tutorial sau puteți clona acest Depozitul GitHub cu boilerplate dacă nu sunteți interesat de procesul de creare Reacţiona și Expres aplicații.
  3. Dacă optați pentru utilizarea repo, nu uitați să instalare npm în interiorul Client și API dosare pentru a instala toate dependențele necesare.
  4. Și … cam atât. Sunteți gata să începeți containerizarea lucrurilor 🙂

Dockerfile

Conform documentației:

A Dockerfile este un document text care conține toate comenzile pe care un utilizator le poate apela pe linia de comandă pentru a asambla o imagine. Docher poate construi imagini automat citind instrucțiunile de la un Dockerfile.

Containere Docker peste tot!

Containerizarea aplicației dvs. cu Docher este la fel de simplu ca crearea unui Dockerfile pentru ca fiecare dintre aplicațiile dvs. să construiască mai întâi o imagine și apoi să ruleze fiecare imagine pentru a vă oferi containerele live.

Containerați-vă clientul

Pentru a construi imaginea Clientului nostru, veți avea nevoie de un Dockerfile. Să creăm unul:

  1. Deschide Aplicația React / Express în editorul de cod preferat (îl folosesc Cod VS).
  2. Navigați la Client pliant.
  3. Creați un fișier nou numit Dockerfile.
  4. Plasați acest cod în interiorul său:
# 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"]

Aceasta va instrui docker-ul să construiască o imagine (folosind aceste configurații) pentru Clientul nostru. Puteți citi totul despre Dokerfile aici.

Containerizați-vă API-ul

Pentru a construi imaginea noastră API veți avea nevoie de alta Dockerfile. Să-l creăm:

  1. Navigați la API pliant.
  2. Creați un fișier nou numit Dockerfile.
  3. Plasați acest cod în interiorul său:
# 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"]

Aceasta va instrui docker-ul să construiască o imagine (folosind aceste configurații) pentru API-ul nostru. Puteți citi totul despre Dokerfile aici.

Docker-Compose

Puteți rula fiecare container individual folosind Dokerfiles. În cazul nostru avem 3 containere de gestionat, așa că vom folosi în schimb docker-compose. Compune este un instrument pentru definirea și rularea aplicațiilor Docker cu mai multe containere.

Permiteți-mi să vă arăt cât de simplu este să-l folosiți:

  1. Deschide Aplicația React / Express în editorul de cod.
  2. În folderul principal al aplicației, creați un fișier nou și denumiți-l docker-compose.yml.
  3. Scrieți acest cod în docker-compose.yml fişier:
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

Ce vrăjitorie este asta?

Ar trebui să citiți totul despre docker-compune aici.

Practic, îi spun lui Docker că vreau să construiesc un container numit client, folosind imaginea webapp-client (care este imaginea pe care am definit-o pe fișierul nostru Docker Client) care va fi ascultat pe portul 3000. Apoi, îi spun că vreau să construiesc un container numit api folosind imaginea webapp-api (care este imaginea pe care am definit-o în fișierul Docker API) care va fi ascultată pe portul 9000.

Rețineți că există multe modalități de a scrie un docker-compose.yml fişier. Ar trebui să explorați documentația și să utilizați ceea ce se potrivește mai bine nevoilor dvs.

Adauga o MongoDB Bază de date

Pentru a adăuga un MongoDB baza de date este la fel de simplă ca adăugarea acestor linii de cod la docker-compose.yml fişier:

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

Aceasta va crea un container folosind imagine oficială MongoDB.

Creați o rețea partajată pentru containerele dvs.

Pentru a crea o rețea partajată pentru containerul dvs., trebuie doar să adăugați următorul cod în docker-compose.yml fişier:

networks:    webappnetwork:        driver: bridge

Observați că ați definit deja fiecare container al aplicației dvs. pentru a utiliza această rețea.

În cele din urmă, dvs. docker-compose.yml fișierul ar trebui să fie așa:

Cum sa creati o aplicatie completa React
docker-compose.yml

În docker-compose.yml dosar, indentarea contează. Fii conștient de asta.

Puneți în funcțiune containerele

  1. Acum că ai un docker-compose.yml fișier, să construim imaginile. Accesați terminalul și executați directorul principal al aplicației:
docker-compose build

2. Acum, pentru ca Docker să învârtă containerele, rulați:

docker-compose up

Și … la fel ca magia, aveți acum clientul, API-ul și baza de date, toate rulând în containere separate, cu o singură comandă. Cat de tare e asta?

Conectați-vă API-ul la MongoDB

  1. Mai întâi, să instalăm Mangustă pentru a ne ajuta cu conexiunea la MongoDB. Pe tipul de terminal:
npm install mongoose
  1. Acum creați un fișier numit testDB.js în folderul rutelor API și introduceți acest cod:
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;

Bine, să vedem ce face acest cod. În primul rând, import Express, ExpressRouter și Mangustă pentru a fi utilizat pe ruta noastră / testDB. Apoi creez o variabilă care va fi trimisă ca răspuns, spunând ce s-a întâmplat cu cererea. Apoi mă conectez la baza de date folosind Mongoose.connect (). Apoi verific dacă conexiunea funcționează sau nu și schimb variabila (am creat mai devreme) în consecință. În cele din urmă, folosesc module.exports pentru a exporta această rută, astfel încât să o pot folosi în fișierul app.js.

2. Acum trebuie să „spuneți” Expres să folosești traseul pe care tocmai l-ai creat. În folderul API, deschideți fișierul app.js și introduceți aceste două linii de cod:

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

Acest lucru „va spune” Expres că de fiecare dată când există o cerere către punctul final / testDB, ar trebui să utilizeze instrucțiunile din fișier testDB.js.

3. Acum, să testăm dacă totul funcționează corect. Mergeți la terminalul dvs. și apăsați control + C pentru a vă aduce containerele în jos. Atunci fugi docker-compune pentru a le aduce din nou înapoi. După ce totul funcționează, dacă navigați la http: // localhost: 9000 / testDB ar trebui să vedeți mesajul Conectat la baza de date.

În cele din urmă, dvs. app.js fișierul ar trebui să arate astfel:

1611328748 126 Cum sa creati o aplicatie completa React
api / app.js

Da … înseamnă că API-ul este acum conectat la baza de date. Dar FrontEnd-ul dvs. nu știe încă. Să lucrăm la asta acum.

Faceți o cerere de la Reacţiona la baza de date

Pentru a verifica dacă aplicația React poate accesa baza de date, să facem o solicitare simplă către punctul final pe care l-ați definit la pasul anterior.

  1. Du-te la Client folder și deschideți fișierul App.js fişier.
  2. Acum introduceți acest cod sub callAPI () metodă:
callDB() {    fetch("http://localhost:9000/testDB")        .then(res => res.text())        .then(res =>; this.setState({ dbResponse: res }))        .catch(err => err);}

Această metodă va prelua punctul final pe care l-ați definit anterior pe API și va prelua răspunsul. Apoi va stoca răspunsul în starea componentei.

4. Adăugați o variabilă la starea componentei pentru a stoca răspunsul:

dbResponse: ""

3. În interiorul metodei ciclului de viață componentDidMount (), introduceți acest cod pentru a executa metoda pe care tocmai ați creat-o când se montează componenta:

this.callDB();

4. În cele din urmă, adăugați altul ; p> etichetați după cea pe care trebuie să o afișați deja răspunsul din baza de date:

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

În cele din urmă, fișierul dvs. App.js ar trebui să sfârșească astfel:

1611328749 651 Cum sa creati o aplicatie completa React
client / App.js

În cele din urmă, să vedem dacă totul funcționează

În browser, accesați http: // localhost: 3000 / și dacă totul funcționează corect, ar trebui să vedeți aceste trei mesaje:

  1. Bine ați venit la React
  2. API funcționează corect
  3. Conectat la baza de date

Ceva de genul:

1611328749 503 Cum sa creati o aplicatie completa React
http: // localhost: 3000 /

Felicitări!!!

Acum aveți o aplicație completă de stivă cu React FrontEnd, un API Node / Express și o bază de date MongoDB. Toate rulează în containere Docker individuale care sunt orchestrate cu un fișier simplu de compunere docker.

Această aplicație poate fi utilizată ca un cazan pentru a vă construi aplicația mai robustă.

Puteți găsi tot codul pe care l-am scris în depozitul de proiecte.

Fii puternic și codifică-te !!!

… și nu uitați să fiți minunat astăzi;)