نحوه استقرار یک برنامه 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 با موفقیت مستقر کردیم. ما از طریق مرورگر وب به آنها دسترسی پیدا کردیم. می توانید سورس کد کامل این آموزش را از اینجا دانلود کنید. اعزام مبارک!