نحوه ساختن یک برنامه Node.js با Docker [Quickstart]

مقدمه
این آموزش به شما ایجاد تصویر برنامه ای برای وب سایت استاتیک را می آموزد که از چارچوب Express و Bootstrap استفاده می کند. سپس می توانید با استفاده از آن تصویر یک کانتینر بسازید ، آن را به Docker Hub وارد کنید و از آن برای ساخت یک کانتینر دیگر استفاده کنید ، که نشان می دهد چگونه می توانید برنامه خود را مجدداً بسازید و مقیاس کنید.
برای نسخه دقیق تر این آموزش ، با توضیحات بیشتر درباره هر مرحله ، لطفاً به نحوه ساخت یک برنامه Node.js با Docker مراجعه کنید.
پیش نیازها
برای دنبال کردن این آموزش ، به موارد زیر نیاز دارید:
⦁ کاربر sudo در سرور مجازی یا در محیط محلی تان.
⦁ داکر.
⦁ Node.js و npm.
⦁ یک حساب کاربری Docker Hub.
مرحله 1 – نصب وابستگی های برنامه تان
ابتدا دایرکتوری برای پروژه خود در دیرکتوری اصلی کاربر غیر root خود ایجاد کنید:
⦁ $ mkdir node_project
به این دیرکتوری بروید:
⦁ $ cd node_project
⦁
این دایرکتوری اصلی پروژه خواهد بود.
در مرحله بعدی ، یک package.json با وابستگی های پروژه خود ایجاد کنید.
⦁ $ nano package.json
اطلاعات زیر در مورد پروژه را به فایل اضافه کنید. حتماً اطلاعات نویسنده را با نام و مشخصات تماس خود جایگزین کنید:
~/node_project/package.json
{
“name”: “nodejs-image-demo”,
“version”: “1.0.0”,
“description”: “nodejs image demo”,
“author”: “Sammy the Shark <sammy@example.com>”,
“license”: “MIT”,
“main”: “app.js”,
“scripts”: {
“start”: “node app.js”,
“test”: “echo \”Error: no test specified\” && exit 1″
},
“keywords”: [
“nodejs”,
“bootstrap”,
“express”
],
“dependencies”: {
“express”: “^4.16.4”
}
}

وابستگی های پروژه خود را نصب کنید:
⦁ $ npm install
⦁
مرحله 2 – ایجاد فایل های برنامه
ما وب سایتی ایجاد خواهیم کرد که اطلاعاتی در مورد کوسه ها به کاربران ارائه دهد.
app.js را در دیرکتوری اصلی پروژه برای تعریف مسیرهای پروژه باز کنید:
⦁ $ nano app.js
برای ایجاد برنامه Express و موضوعات روتر ، محتوای زیر را به فایل اضافه کنید ، دایرکتوری پایه ، پورت و هاست را به عنوان متغیر تعریف کنید ، مسیرها را تنظیم کرده و میان افزار router را به همراه دارایی های پایا در برنامه نصب کنید:
~/node_project/app.js
var express = require(“express”);
var app = express();
var router = express.Router();

var path = __dirname + ‘/views/’;

// Constants
const PORT = 8080;
const HOST = ‘0.0.0.0’;

router.use(function (req,res,next) {
console.log(“/” + req.method);
next();
});

router.get(“/”,function(req,res){
res.sendFile(path + “index.html”);
});

router.get(“/sharks”,function(req,res){
res.sendFile(path + “sharks.html”);
});

app.use(express.static(path));
app.use(“/”, router);

app.listen(8080, function () {
console.log(‘Example app listening on port 8080!’)
})

در مرحله بعد ، بیایید مقداری محتوای ثابت را به برنامه اضافه کنیم. دایرکتوری views را ایجاد کنید:
⦁ $ mkdir views
index.html باز کنید:
⦁ $ nano views/index.html
کد زیر را به فایل اضافه کنید ، که Boostrap را وارد می کند و یک مولفه jumbotron با پیوند به صفحه اطلاعات دقیقتر sharks.html ایجاد می کند:
~/node_project/views/index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>About Sharks</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”

https://maxcdn.bootstrapcdn.com/bootstrap

/3.3.7/css/bootstrap.min.css”>
<link href=”css/styles.css” rel=”stylesheet”>
<link href=’https://fonts.googleapis.com/css?family=Merriweather:400,700′

rel=’stylesheet’ type=’text/css’>
<script src=”https://ajax.googleapis.com/

ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/

bootstrap/3.3.7/js/bootstrap.min.js”></script>
</head>
<body>
<nav class=”navbar navbar-inverse navbar-static-top”>
<div class=”container”>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#bs-example-navbar-collapse-1″ aria-expanded=”false”>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a class=”navbar-brand” href=”#”>Everything Sharks</a>
</div>
<div class=”collapse navbar-collapse” id=”bs-example-navbar-collapse-1″>
<ul class=”nav navbar-nav mr-auto”>
<li class=”active”><a href=”/”>Home</a></li>
<li><a href=”/sharks”>Sharks</a></li>
</ul>
</div>
</div>
</nav>
<div class=”jumbotron”>
<div class=”container”>
<h1>Want to Learn About Sharks?</h1>
<p>Are you ready to learn about sharks?</p>
<br>
<p><a class=”btn btn-primary btn-lg” href=”/sharks” role=”button”>Get Shark Info</a></p>
</div>
</div>
<div class=”container”>
<div class=”row”>
<div class=”col-md-6″>
<h3>Not all sharks are alike</h3>
<p>Though some are dangerous, sharks generally do not attack humans. Out of the 500 species known to researchers, only 30 have been known to attack humans.</p>
</div>
<div class=”col-md-6″>
<h3>Sharks are ancient</h3>
<p>There is evidence to suggest that sharks lived up to 400 million years ago.</p>
</div>
</div>
</div>
</body>
</html>

سپس ، فایلی به نام sharks.html را باز کنید:
⦁ $ nano views/sharks.html
کد زیر را وارد کنید ، که Bootstrap و شیوه نامه سفارشی را وارد می کند و اطلاعات دقیق در مورد برخی کوسه ها را به کاربران ارائه می دهد:
~/node_project/views/sharks.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>About Sharks</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/

bootstrap/3.3.7/css/bootstrap.min.css”>
<link href=”css/styles.css” rel=”stylesheet”>
<link href=’https://fonts.googleapis.com/

css?family=Merriweather:400,700′ rel=’stylesheet’ type=’text/css’>
<script src=”https://ajax.googleapis.com/

ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com

/bootstrap/3.3.7

/js/bootstrap.min.js”></script>
</head>
<nav class=”navbar navbar-inverse navbar-static-top”>
<div class=”container”>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#bs-example-navbar-collapse-1″ aria-expanded=”false”>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a class=”navbar-brand” href=”#”>Everything Sharks</a>
</div>
<div class=”collapse navbar-collapse” id=”bs-example-navbar-collapse-1″>
<ul class=”nav navbar-nav mr-auto”>
<li><a href=”/”>Home</a></li>
<li class=”active”><a href=”/sharks”>Sharks</a></li>
</ul>
</div>
</div>
</nav>
<div class=”jumbotron text-center”>
<h1>Shark Info</h1>
</div>
<div class=”container”>
<div class=”row”>
<div class=”col-md-6″>
<p>
<div class=”caption”>Some sharks are known to be dangerous to humans, though many more are not. The sawshark, for example, is not considered a threat to humans.</div>
<img src=”https://assets.digitalocean.com/

articles/docker_node_image/sawshark.jpg” alt=”Sawshark”>
</p>
</div>
<div class=”col-md-6″>
<p>
<div class=”caption”>Other sharks are known to be friendly and welcoming!</div>
<img src=”https://assets.digitalocean.com/articles

/docker_node_image/sammy.png” alt=”Sammy the Shark”>
</p>
</div>
</div>
</div>
</body>
</html>

سرانجام با ایجاد یک پوشه css در دیرکتوری views ، ابتدا یک برگه سبک CSS سفارشی که به آنها در index.html و sharks.html لینک داده اید ایجاد کنید:
⦁ $ mkdir views/css
شیوه نامه را باز کنید و کد زیر را اضافه کنید ، که رنگ و فونت مورد نظر را برای صفحات ما تعیین می کند:
~/node_project/views/css/styles.css
.navbar {
margin-bottom: 0;
}

body {
background: #020A1B;
color: #ffffff;
font-family: ‘Merriweather’, sans-serif;
}
h1,
h2 {
font-weight: bold;
}
p {
font-size: 16px;
color: #ffffff;
}

.jumbotron {
background: #0048CD;
color: white;
text-align: center;
}
.jumbotron p {
color: white;
font-size: 26px;
}

.btn-primary {
color: #fff;
text-color: #000000;
border-color: white;
margin-bottom: 5px;
}

img, video, audio {
margin-top: 20px;
max-width: 80%;
}

div.caption: {
float: left;
clear: both;
}

برنامه را شروع کنید:
⦁ $ npm start
اگر به صورت محلی کار می کنید ، مرورگر خود را به آدرس http: // your_server_ip: 8080 یا localhost: 8080 هدایت کنید. صفحه زیر را مشاهده خواهید کرد:

بر روی دکمه Get Shark Info کلیک کنید. صفحه اطلاعات زیر را مشاهده خواهید کرد:

اکنون یک برنامه در حال اجرا دارید. اگر آماده هستید ، با تایپ کردن CTRL + C ، از سرور مجازی خارج شوید.
مرحله 3 – نوشتن Dockerfile
در دیرکتوری اصلی پروژه خود ، Dockerfile را ایجاد کنید:
⦁ $ nano Dockerfile
کد زیر را به فایل اضافه کنید:
~/node_project/Dockerfile

FROM node:10

RUN mkdir -p /home/node/app/node_modules && chown -R node:node /home/node/app

WORKDIR /home/node/app

COPY package*.json ./

RUN npm install

COPY . .

COPY –chown=node:node . .

USER node

EXPOSE 8080

CMD [ “npm”, “start” ]

این Dockerfile از یک تصویر پایه alpine استفاده می کند و اطمینان می دهد که فایل های برنامه متعلق به کاربر گره غیر ریشه است که به طور پیش فرض توسط تصویر Docker Node تهیه شده است.
سپس ، ماژول های گره محلی ، گزارش های npm ، Dockerfile و .dockerignore را به فایل .dockerignore خود اضافه کنید:
~/node_project/.dockerignore
node_modules
npm-debug.log
Dockerfile
.dockerignore

تصویر برنامه را با استفاده از دستور docker build بسازید:
⦁ $ docker build -t your_dockerhub_username/nodejs-image-demo .
نقطه (.) مشخص می کند که محتوای ساخته شده ، دیرکتوری فعلی است.
تصاویر خود را بررسی کنید:
⦁ $ docker images
⦁
خروجی زیر را مشاهده خواهید کرد:
Output
REPOSITORY TAG IMAGE ID CREATED SIZE
your_dockerhub_username/nodejs-image-demo latest 1c723fb2ef12 8 seconds ago 895MB
node 10 f09e7c96b6de 17 hours ago 893MB

دستور زیر را برای ساخت یک کانتینر با استفاده از این تصویر اجرا کنید:
⦁ $ docker run –name nodejs-image-demo -p 80:8080 -d your_dockerhub_username/nodejs-image-demo
⦁

لیست کانتینرهای در حال اجرای خود را با docker ps بررسی کنید:
⦁ $ docker ps
خروجی زیر را مشاهده خواهید کرد:
Output
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
e50ad27074a7 your_dockerhub_username/nodejs-image-demo “npm start” 8 seconds ago Up 7 seconds 0.0.0.0:80->8080/tcp nodejs-image-demo

با راه اندازی کانتینر ، اکنون می توانید با حرکت در مرورگر خود به http: // your_server_ip یا localhost ، برنامه خود را مشاهده کنید. یک بار دیگر صفحه فرود برنامه خود را مشاهده خواهید کرد:

اکنون که تصویری را برای برنامه خود ایجاد کرده اید ، می توانید آن را برای استفاده بعدی به Docker Hub وارد کنید.
مرحله 4 – استفاده از یک منبع برای کار با تصاویر
اولین قدم برای ارائه تصویر ورود به حساب Docker Hub تان است:
⦁ $ docker login -u your_dockerhub_username -p your_dockerhub_password
ورود به این روش ، یک فایل ~ / .docker / config.json را در دیکتوری هوم اصلی کاربر با اعتبار Docker Hub شما ایجاد می کند.
با استفاده از نام کاربری شخصی خود به جای your_dockerhub_username تصویر خود را وارد کنید:
⦁ $ docker push your_dockerhub_username/nodejs-image-demo
در صورت تمایل می توانید با از بین بردن کانتینر برنامه فعلی و تصویر و بازسازی مجدد آنها ، ابزار رجیستری تصویر را آزمایش کنید.
ابتدا ، کانتینرهای در حال اجرای خود را لیست کنید:
⦁ $ docker ps
خروجی زیر را مشاهده خواهید کرد:
Output
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
e50ad27074a7 your_dockerhub_username/nodejs-image-demo “npm start” 3 minutes ago Up 3 minutes 0.0.0.0:80->8080/tcp nodejs-image-demo

با استفاده از CONTAINER ID که در خروجی شما ذکر شده است ، کانتینر برنامه در حال اجرا را متوقف کنید. حتماً شناسه هایلایت شده زیر را با شناسه CONTAINER خود جایگزین کنید:
⦁ $ docker stop e50ad27074a7
تمام تصاویر خود را با فلگ -a لیست کنید:
⦁ $ docker images -a
خروجی زیر را با نام تصویر خود ، your_dockerhub_username / nodejs-image-demo به همراه تصویر node و سایر تصاویر حاصل از ساخت خود مشاهده خواهید کرد:
Output
REPOSITORY TAG IMAGE ID CREATED SIZE
your_dockerhub_username/nodejs-image-demo latest 1c723fb2ef12 7 minutes ago 895MB
<none> <none> e039d1b9a6a0 7 minutes ago 895MB
<none> <none> dfa98908c5d1 7 minutes ago 895MB
<none> <none> b9a714435a86 7 minutes ago 895MB
<none> <none> 51de3ed7e944 7 minutes ago 895MB
<none> <none> 5228d6c3b480 7 minutes ago 895MB
<none> <none> 833b622e5492 8 minutes ago 893MB
<none> <none> 5c47cc4725f1 8 minutes ago 893MB
<none> <none> 5386324d89fb 8 minutes ago 893MB
<none> <none> 631661025e2d 8 minutes ago 893MB
node 10 f09e7c96b6de 17 hours ago 893MB

کانتینر متوقف شده و تمام تصاویر ، از جمله تصاویر استفاده نشده یا در حال تعلیق را با دستور زیر حذف کنید:
⦁ $ docker system prune -a
با حذف همه تصاویر و کانتینرهای خود ، هم اکنون می توانید تصویر برنامه را از داکر هاب بیرون بکشید:
⦁ $ docker pull your_dockerhub_username/nodejs-image-demo
تصاویر خود را یک بار دیگر لیست کنید:

⦁ $ docker images
⦁
تصویر برنامه خود را مشاهده خواهید کرد:
Output
REPOSITORY TAG IMAGE ID CREATED SIZE
your_dockerhub_username/nodejs-image-demo latest 1c723fb2ef12 11 minutes ago 895MB

اکنون می توانید کانتینر خود را با استفاده از دستور مرحله 3 بازسازی کنید:
⦁ $ docker run –name nodejs-image-demo -p 80:8080 -d your_dockerhub_username/nodejs-image-demo
⦁
کانتینرهای در حال اجرای خود را لیست کنید:
⦁ $ docker ps
⦁
Output
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
f6bc2f50dff6 your_dockerhub_username/nodejs-image-demo “npm start” 4 seconds ago Up 3 seconds 0.0.0.0:80->8080/tcp nodejs-image-demo

برای مشاهده برنامه در حال اجرا یک بار دیگر به http: // your_server_ip یا localhost مراجعه کنید
آموزشهای مرتبط
در اینجا پیوندهایی با راهنماهای دقیق تر مربوط به این آموزش وجود دارد:
⦁ نحوه نصب Docker Compose در اوبونتو 18.04.
⦁ نحوه ارائه و مدیریت هاست از راه دور داکر با دستگاه داکر در اوبونتو 18.04.
⦁ نحوه به اشتراک گذاشتن داده ها بین کانتینرهای داکر.
⦁ نحوه به اشتراک گذاری داده ها بین کانتینر داکر و هاست.
همچنین می توانید مجموعه های طولانی تر را از Containers to Kubernetes با Node.js جستجو کنید ، که این آموزش از آن اقتباس شده است.
علاوه بر این ، برای اطلاعات بیشتر در Docker ، به کتابخانه کامل منابع Docker ما مراجعه کنید.

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

نحوه نصب Nginx در CentOS 8 – استفاده از Cron برای خودکارسازی کارها در اوبونتو 18

پکیج کردن و انتشار برنامه Snap در اوبونتو 18 – نصب و استفاده ازRadamsa برای فوز کردن برنامه ها روی Ubuntu 18

استقرارهای تولید Node.js خود را با Shipit در CentOS 7 – نحوه راه اندازی Eclipse Theia Cloud IDE Platform در Debian 10

چگونگی استفاده از migrations و seeders دیتابیس – نحوه نصب Docker Compose در Debian 10

نحوه نصب R روی اوبونتو 18.04 – چگونه می توان با کتابخانه (library) درخواست ها در پایتون شروع به کار کرد

چگونه می توان هاست های مجازی Apache را در اوبونتو 18.04 – نحوه اجرای صفحه گذاری در MySQL با PHP روی اوبونتو 18.04

نصب پشته Nginx، MySQL، PHP LEMP در CentOS 8 – نحوه تنظیم پلتفرم Eclipse Theia Cloud IDE در CentOS 7

نحوه نصب پشته یا استک Nginx ، MySQL ، PHP LEMP – بسته بندی برنامه Laravel 6 برای توسعه با Docker Compose

مراحل ایمن سازی Apache HTTP در FreeBSD 12 – بهینه سازی درخواست های MySQL با ذخیره سازی ProxySQL در اوبونتو 16

درک Objectهای Map و Set در JavaScript – استفاده از Ansible برای نصب و راه اندازی وردپرس با LAMP در اوبونتو 18

نحوه راه اندازی Eclipse Theia Cloud IDE در اوبونتو – چگونه می توان پلتفرم كد سرور Cloud IDE را در اوبونتو 18.04