نحوه استقرار یک برنامه React.js و Node.js چند کانتینری با Docker Compose

Docker Compose یک ابزار قدرتمند Docker برای توسعه و اجرای برنامه‌های Dockerized چند کانتینری است. داکر یک پلتفرم منبع باز برای توسعه و اجرای برنامه ها در یک محیط ایزوله به نام کانتینر است. کانتینر یک بسته اجرایی مستقل است که شامل کتابخانه ها، کد منبع و وابستگی های مورد نیاز برای اجرای یک برنامه کاربردی است.

با Docker Compose، یک را ایجاد می کنید docker-compose.yml فایل برای اجرای تمام کانتینرهای پروژه شما به عنوان یک برنامه واحد. فایل شامل تمام تنظیمات کانتینر مانند حجم ها، نام کانتینرها و نگاشت پورت خواهد بود. همچنین Dockerfiles را برای ساخت تصاویر Docker مشخص می کند.

در این آموزش، با استفاده از Node.js یک سرور Express Backend ایجاد می کنیم. سپس با استفاده از React.js یک برنامه front-end ایجاد می کنیم و آن را به سرور backend متصل می کنیم.

سپس از Docker Compose برای استقرار این دو برنامه استفاده می کنیم. همچنین در مرورگر وب به آنها دسترسی خواهیم داشت. بیایید شروع به کار روی برنامه های خود کنیم!

پیش نیازها

این آموزش فرض می کند که شما با موارد زیر آشنا هستید:

برای اجرای این آموزش، به موارد زیر نیاز دارید که قبلاً بر روی رایانه شما نصب شده باشد:

ایجاد Backend Express Server با استفاده از Node.js

برای ایجاد سرور Express با استفاده از Node.js، مراحل نشان داده شده در زیر را دنبال کنید:

مرحله 1: یک پوشه کاری با نام ایجاد کنید docker-compose-app و با VS Code آن را باز کنید.
در دایرکتوری کاری، یک پوشه/پوشه جدید با نام ایجاد کنید node و cd به درون node فهرست راهنما. این فهرست شامل کتابخانه ها، کد منبع و وابستگی های مورد نیاز برای ایجاد برنامه خواهد بود.

گام 2: برنامه را با استفاده از کد زیر راه اندازی کنید:

npm init --y

دستور برنامه را مقداردهی اولیه کرده و آن را تولید می کند package.json فایل. مرحله بعدی نصب تمام وابستگی ها برای برنامه به شرح زیر است:

npm i -g nodemon
npm i express

پس از اجرای دستور در ترمینال شما، نصب خواهد شد express و nodemon. ما از نصب شده استفاده خواهیم کرد express بسته برای ایجاد سرور

ما استفاده خواهیم کرد nodemon برای تماشا و نظارت بر فایل های باطن. Nodemon تغییرات را در فایل های باطن تشخیص داده و به طور خودکار سرور را راه اندازی مجدد می کند. پس از ایجاد تغییرات در برنامه، ما را از راه اندازی مجدد سرور باطن به صورت دستی جلوگیری می کند.

مرحله 3: بعد، را باز کنید package.json فایل و موارد زیر npm اسکریپت برای nodemon برای شروع کار:

"dev": "nodemon -L app.js"

مرحله 4: در node دایرکتوری، یک فایل جدید به نام ایجاد کنید server.js. این فایل منطق ایجاد سرور باطن ما را خواهد داشت.

مرحله 5: قطعه کد زیر را کپی و در قسمت پیست کنید server.js فایل:

const express = require('express')
const cors = require('cors')

const app = express()

app.use(cors())

app.get("https://dev.to/", (req, res) => {
  res.json([
    {
      "id":"1",
      "title":"Album Review: When we all Fall asleep where do we go?"
    },
    {
      "id":"2",
      "title":"Book Review: How can we escape this labyrinth of suffering?"
    },
    {
      "id":"3",
      "title":"Documentary Review: How can we escape the rat race?"
    }
  ])
})

app.listen(4000, () => {
  console.log('connected on port 4000')
})

قطعه کد بالا یک را ایجاد می کند get مسیر اپلیکیشن frontend عناوین بررسی را از این مسیر دریافت می کند.

اجرای سرور Backend Express

برای اجرای برنامه Backend Express Server، موارد زیر را اجرا کنید npm دستور در ترمینال شما:

npm run dev

این npm دستور شروع می شود و سرور ما را اجرا می کند http://localhost:4000/همانطور که در تصویر زیر نشان داده شده است:

تصویر نشان می دهد که باطن در حال اجرا است و بررسی ها را نمایش می دهد. بیایید شروع به کار روی برنامه React.js frontend خود کنیم.

ایجاد برنامه frontend React.js

برای ایجاد اپلیکیشن React.js frontend، مراحل نشان داده شده در زیر را دنبال کنید:

مرحله 1: در docker-compose-app پوشه کاری زیر را اجرا کنید npx دستور ایجاد boilerplate برای برنامه React.js

npx create-react-app react

این npx دستور بالا یک دایرکتوری جدید به نام ایجاد می کند react در docker-compose-app دایرکتوری کار اکنون، cd به درون react فهرست راهنما.

گام 2: در داخل react دایرکتوری، و باز کنید src فهرست راهنما.

مرحله 3: در حالی که در src دایرکتوری را باز کنید App.js فایل و قطعه کد زیر را اضافه کنید:

import { useEffect, useState } from 'react'
import './App.css';

function App() {
  const [reviews, setReviews] = useState([])
  useEffect(() => {
    fetch('http://localhost:4000/')
      .then(res => res.json())
      .then(data => setReviews(data))
  }, [])

  return (
    <div className="App">
      <header className="App-header">
        <h1>all Reviews</h1>
        {reviews && reviews.map(blog => (
          <div key={blog.id}>{blog.title}</div>
        ))}
      </header>
    </div>
  );
}

export default App;

قطعه کد اضافه شده، یک برنامه frontend react ایجاد می کند. خواهد شد fetch عناوین بررسی از این باطن get مسیر برنامه باطن ما در حال اجرا است http://localhost:4000/. گام بعدی این است که برنامه frontend React.js را به صورت زیر اجرا کنید:

اجرای برنامه frontend React.js

برای اجرای برنامه frontend React.js، دستور زیر را در ترمینال خود اجرا کنید:

npm start

این npm دستور شروع می شود و برنامه frontend React.js را روی آن اجرا می کند http://localhost:3000/همانطور که در تصویر زیر نشان داده شده است:

تصویر برنامه frontend React.js را در حال اجرا و دریافت عناوین بررسی از باطن نشان می دهد. بیایید Dockerfiles را برای این دو برنامه ایجاد کنیم. Docker Compose از Dockerfiles برای ساخت و اجرای کانتینرها استفاده می کند.

Dockerfile را برای سرور Backend Express ایجاد کنید

Dockerfile شامل تمام دستورات ساخت تصویر Docker برای برنامه سرور باطن است. در حالی که در node دایرکتوری/پوشه، یک فایل جدید به نام ایجاد کنید Dockerfile. در ایجاد شده Dockerfile دستورات زیر را برای ایجاد یک تصویر Docker اضافه کنید.

# It uses node:18-alpine as the base image for the Node.js application
FROM node:18-alpine

# It installs the nodemon package globally for monitoring and watching the backend Express server
RUN npm install -g nodemon

# Creating the working directory named `app`
WORKDIR /app

# Copying all the tools and dependencies in the package.json file to the working directory `app`
COPY package.json .

#Installing all the tools and dependencies in the container
RUN npm install

#Copying all the application source code and files to the working directory `app`
COPY . .

#Exposing the container to run on this port 4000
EXPOSE 4000

#Command to start the Docker container for the backed server application
CMD ["npm", "run", "dev"]

مرحله بعدی ایجاد یک است Dockerfile برای برنامه Frontend React.js.

Dockerfile را برای برنامه frontend React.js ایجاد کنید

در react دایرکتوری/پوشه، یک فایل جدید به نام ایجاد کنید Dockerfile. در ایجاد شده Dockerfile دستورات زیر را برای ایجاد یک تصویر Docker اضافه کنید.

# It uses node:18-alpine as the base image for the frontend React.js application
FROM node:18-alpine

# Creating the working directory named `app`
WORKDIR /app

# Copying all the tools and dependencies in the package.json file to the working directory `app`
COPY package.json .

#Installing all the tools and dependencies in the container
RUN npm install

#Copying all the application source code and files to the working directory `app`
COPY . .

#Exposing the container to run on this port 3000
EXPOSE 3000

#Command to start the Docker container for the frontend React.js application
CMD ["npm", "start"]

اکنون که هر دو Dockerfiles را داریم، گام بعدی ایجاد یک است docker-compose.yml فایلی که شامل تمام تنظیمات کانتینر است.

ایجاد یک docker-compose.yml فایل

این فایل ما را قادر می سازد تا دو کانتینر را با استفاده از Docker Compose اجرا و مستقر کنیم. ظروف را به صورت a اضافه می کنیم service.

این docker-compose.yml فایل دو سرویس خواهد داشت. با استفاده از فایل ایجاد شده، دو ظرف را چرخش می کنیم. آنها را به عنوان یک برنامه واحد اجرا می کند.

برای ایجاد دو سرویس Docker Compose، مراحل زیر را دنبال کنید:

مرحله 1: در docker-compose-app پوشه کاری، یک فایل جدید ایجاد کنید docker-compose.yml فایل.

گام 2: در مرحله بعد، اولین سرویس نامگذاری شده را اضافه کنید node با استفاده از قطعه کد زیر:

# Version of Docker-compose
version: '3.9'
services:
  # Add the node-js service
  node:
  # Location to the node.js dockerfile
    build: 
      context: ./node
        # Name of the dockerfile
      dockerfile: Dockerfile
    container_name: node-container
    ports:
       # Host port:Container port
      - '4000:4000'
    volumes:
      # Bind-mounts configuration
      - ./node:/app
      # Ignoring any changes made in the "node_modules" folder
      - ./app/node_modules

کد بالا سرویسی به نام ایجاد می کند node. همچنین مکان Dockerfile Node.js را نشان می دهد.

نام ظرف را به صورت نشان می دهد node-container و نقشه برداری پورت این node-container روی پورت اجرا خواهد شد 4000.

ما همچنین برای این سرویس حجم اضافه می کنیم. این حجم، پوشه پروژه محلی را به دایرکتوری کاری در ظرف نگاشت می کند. هر تغییری که در پوشه پروژه محلی ایجاد شود به طور خودکار در ظرف به روز می شود. در زمان تغییر فایل ها در پوشه پروژه محلی، در زمان بازسازی کل کانتینر از ابتدا صرفه جویی می شود.

مرحله 3: در مرحله بعد، بیایید سرویس نامگذاری شده را اضافه کنیم react برای ظرف برنامه React.js.

بعد از node سرویس، قطعه کد زیر را اضافه کنید:

 react:
  # Location to the react.js dockerfile
    build: 
      context: ./react
        # Name of the dockerfile
      dockerfile: Dockerfile
    container_name: react-container
    ports:
     # Host port:Container port
      - '3000:3000'
    stdin_open: true

کد بالا سرویسی به نام ایجاد می کند react. همچنین مکان React.js Dockerfile را نشان می دهد.

نام ظرف را به صورت نشان می دهد react-container و نقشه برداری پورت این react-container روی پورت اجرا خواهد شد 3000.

اگر مراحل بالا را به درستی دنبال کنید، مرحله نهایی است docker-compose.yml مانند شکل زیر خواهد بود:

# Version of Docker-compose
version: '3.9'
services:
  # Add the node-js service
  node:
  # Location to the node.js dockerfile
    build: 
      context: ./node
        # Name of the dockerfile
      dockerfile: Dockerfile
    container_name: node-container
    ports:
       # Host port:Container port
      - '4000:4000'
    volumes:
      # Bind-mounts configuration
      - ./node:/app
      # Ignoring any changes made in "node_modules" folder
      - ./app/node_modules
  react:
  # Location to the react.js dockerfile
    build: 
      context: ./react
        # Name of the dockerfile
      dockerfile: Dockerfile
    container_name: react-container
    ports:
     # Host port:Container port
      - '3000:3000'
    stdin_open: true

اکنون که همه سرویس های خود را به فایل اضافه کرده ایم، مرحله بعدی ساخت و اجرای دو کانتینر است.

اجرای دو کانتینر با استفاده از Docker Compose

برای ساخت و اجرای دو Container با استفاده از Docker Compose، دستور زیر را در ترمینال خود اجرا کنید:

docker-compose up --build

این دستور دو کانتینر را اجرا می کند و خروجی زیر را در ترمینال شما نمایش می دهد:

خروجی هر دو را نشان می دهد node-container و react-container در حال دویدن. ما می توانیم به node-container بر http://localhost:4000/ و react-container بر http://localhost:3000/. تصاویر زیر کانتینرهای مستقر شده در حال اجرا در مرورگر وب را نشان می دهد:

• node-container
  

• react-container
  

نتیجه

در این آموزش، نحوه استقرار React.js و Node.js Application چند کانتینری را با استفاده از Docker Compose یاد گرفته‌اید. ما یک سرور Express Backend با استفاده از Node.js ایجاد کردیم. سپس با استفاده از React.js یک برنامه front-end ایجاد کردیم. پس از انجام این مراحل، Dockerfiles را برای این دو اپلیکیشن ایجاد کردیم. ما همچنین یک را ایجاد کردیم docker-compose.yml فایل.

ما استفاده کردیم docker-compose.yml برای ساخت و اجرای دو کانتینر برنامه. ما کانتینرهای Docker را با استفاده از Docker Compose با موفقیت مستقر کردیم. ما از طریق مرورگر وب به آنها دسترسی پیدا کردیم. می توانید سورس کد کامل این آموزش را از اینجا دانلود کنید. اعزام مبارک!