نحوه اضافه کردن عکسهای پیشرفته در Node و Express

مقدمه
گاهی در هنگام ساختن برنامه Node خود با آپلود یک عکس (معمولاً از یک فرم) روبرو شده ایم که به عنوان عکس پروفایل برای کاربر در برنامه ما استفاده شود. علاوه بر این ، معمولاً برای دسترسی آسان باید عکس را در سیستم فایل محلی (در حین توسعه) یا حتی در ابر ذخیره کنیم. از آنجایی که این یک کار بسیار متداول است ، ابزارهای زیادی در دسترس است که می توانیم برای کنترل تک تک قسمتهای این فرآیند ، اهرم کنیم.
در این آموزش خواهیم دید که چگونه عکس را آپلود کرده و آن را قبل از نوشتن آن برای ذخیره سازی دستکاری کنید (تغییر اندازه ، کراپ ، سیاه سفید و غیره). ما برای سادگی خود را به ذخیره سازی فایل ها در سیستم فایل محلی محدود خواهیم کرد.
پیش نیازها
برای ساخت برنامه خود از بسته های زیر استفاده خواهیم کرد:
⦁ Express: یک سرور مجازی Node بسیار محبوب.
⦁ Lodash: یک کتابخانه بسیار مشهور JavaScript با بسیاری از کارکردهای مفید برای کار با آرایه ها ، رشته ها ، اشیاء و برنامه نویسی کاربردی.
⦁ Multer: بسته ای برای اکسترکت فایل ها از درخواست های multipart/form-data.
⦁ Jimp: بسته دستکاری تصویر.
⦁ Dotenv: بسته ای برای اضافه کردن متغیرهای .env به process.env.
⦁ Mkdirp: بسته ای برای ایجاد ساختار دایرکتوری تو در تو.
⦁ concat-stream: بسته ای برای ایجاد یک جریان قابل نوشتار که همه داده ها را از یک جریان جمع می کند و با نتیجه یک callback را فراخوانی میکند.
⦁ Streamifier : بسته ای برای تبدیل یک بافر / رشته به یک جریان قابل خواندن است.
اهداف پروژه
ما می خواهیم جریان فایل بارگذاری شده را از Multer دریافت کنیم و سپس بافر جریان (تصویر) را دستکاری کنیم ، اما می خواهیم قبل از نوشتن تصویر برای ذخیره سازی (سیستم فایل محلی) از Jimp استفاده کنیم . این امر مستلزم این است که یک موتور ذخیره سازی سفارشی ایجاد کنیم تا از Multer استفاده کند – که ما در این آموزش انجام خواهیم داد.
در این لینک، نتیجه نهایی آنچه در این آموزش خواهیم ساخت آمده است:
مرحله 1 – شروع کار
ما با ایجاد یک برنامه Express جدید با استفاده از ژنراتور Express شروع خواهیم کرد. اگر ژنراتور Express را از قبل ندارید ، باید ابتدا با اجرای دستور زیر در ترمینال خط فرمان خود آن را نصب کنید:
⦁ $ npm install express-generator -g
⦁

پس از تولید ژنراتور Express ، اکنون می توانید دستورات زیر را برای ایجاد یک برنامه Express جدید اجرا کنید و متعلقات Express را نصب کنید. ما از ejs به عنوان موتور نمایش استفاده خواهیم کرد:
⦁ $ express –view=ejs photo-uploader-app
⦁
⦁ $ cd photo-uploader-app
⦁
⦁ $ npm install

در مرحله بعد ، ما باقی مانده های متعلقات مورد نیاز برای پروژه خود را نصب خواهیم کرد:
⦁ $ npm install –save lodash multer jimp dotenv concat-stream streamifier mkdirp
⦁

مرحله 2 – پیکربندی اصول
قبل از ادامه ، برنامه ما به پیکربندی فرم نیاز دارد. یک فایل .env را در دیرکتوری اصلی پروژه خود ایجاد می کنیم و برخی از متغیرهای محیط را اضافه می کنیم. فایل .env باید مانند زیر باشد.
AVATAR_FIELD=avatar
AVATAR_BASE_URL=/uploads/avatars
AVATAR_STORAGE=uploads/avatars

در مرحله بعد ، متغیرهای محیطی خود را با استفاده از dotenv به process.env لود خواهیم کرد تا بتوانیم در برنامه خود به آنها دسترسی پیدا کنیم. برای این کار خط زیر را به فایل app.js اضافه خواهیم کرد. اطمینان حاصل کنید که این خط را در نقطه ای که اضافه کنید که متعلقات لود میشوند. باید قبل از ورودی دادن به تمام مسیرها و قبل از ایجاد نمونه برنامه Express اضافه شود.
app.js
var dotenv = require(‘dotenv’).config();

اکنون می توانیم با استفاده از process.env به متغیرهای محیطی خود دسترسی پیدا کنیم. به عنوان مثال: process.env.AVATAR_STORAGE باید دارای مقدار uploads/avatars باشد. ما در ادامه به ویرایش فایل مسیر ایندکس routes/index.js میپردازیم تا برخی متغیرهای محلی را که از نظر ما به آنها نیاز خواهیم داشت ، اضافه کنیم. دو متغیر محلی اضافه خواهیم کرد:
• title: عنوان صفحه فهرست ما: Upload Avatar
• avatar_field: نام فیلد ورودی برای عکس avatar ما. ما این را از process.env.AVATAR_FIELD دریافت خواهیم کرد .
مسیر GET / را به شرح زیر اصلاح کنید:
routes/index.js
router.get(‘/’, function(req, res, next) {
res.render(‘index’, { title: ‘Upload Avatar’, avatar_field: process.env.AVATAR_FIELD });
});

مرحله 3 – آماده سازی نما
بیایید با ایجاد نشانه گذاری پایه در فرم آپلود عکس خود با تغییر فایل views/index.ejs شروع کنیم. به خاطر سادگی ، سبک ها را مستقیماً به نمای خود اضافه خواهیم کرد تا ظاهری کمی زیبا به آن بخشیده شود. برای نشانه گذاری صفحه کد زیر را مشاهده کنید.
views/index.ejs
<html class=”no-js”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title><%= title %></title>
<style type=”text/css”>
* {
font: 600 16px system-ui, sans-serif;
}
form {
width: 320px;
margin: 50px auto;
text-align: center;
}
form > legend {
font-size: 36px;
color: #3c5b6d;
padding: 150px 0 20px;
}
form > input[type=file], form > input[type=file]:before {
display: block;
width: 240px;
height: 50px;
margin: 0 auto;
line-height: 50px;
text-align: center;
cursor: pointer;
}
form > input[type=file] {
position: relative;
}
form > input[type=file]:before {
content: ‘Choose a Photo’;
position: absolute;
top: -2px;
left: -2px;
color: #3c5b6d;
font-size: 18px;
background: #fff;
border-radius: 3px;
border: 2px solid #3c5b6d;
}
form > button[type=submit] {
border-radius: 3px;
font-size: 18px;
display: block;
border: none;
color: #fff;
cursor: pointer;
background: #2a76cd;
width: 240px;
margin: 20px auto;
padding: 15px 20px;
}
</style>
</head>
<body>
<form action=”/upload” method=”POST” enctype=”multipart/form-data”>
<legend>Upload Avatar</legend>
<input type=”file” name=”<%= avatar_field %>”>
<button type=”submit” class=”btn btn-primary”>Upload</button>
</form>
</body>
</html>

توجه کنید که چگونه از متغیرهای محلی در نمای خود استفاده کرده ایم تا عنوان و نام قسمت ورودی آواتار را تنظیم کنیم. متوجه می شوید که از enctype = “multipart / form-data” روی فرم خود استفاده می کنیم زیرا ما آپلود یک فایل را انجام خواهیم داد. همچنین خواهید دید که ما فرمی را تنظیم کرده ایم که درخواست POST را در حین ارائه به مسیر /upload بدهد (بعداً اجرا خواهیم کرد).
اکنون بیایید اولین بار برنامه را با استفاده از شروع npm شروع کنیم.
⦁ $ npm start
⦁
اگر به طور صحیح دنبال کرده باشید ، همه چیز بدون خطا باید اجرا شود. فقط از localhost: 3000 در مرورگر خود بازدید کنید. صفحه باید مانند تصویر زیر باشد:

مرحله 4 – ایجاد موتور ذخیره سازی Multer
تا اینجا ، تلاش برای بارگذاری عکس از طریق فرم ما منجر به خطایی خواهد شد زیرا ما نگه دارنده ای را برای درخواست بارگذاری ایجاد نکرده ایم. ما قصد داریم مسیر /upload را اجرا کنیم تا در واقع آپلود را مدیریت کنیم و برای آن از بسته Multer استفاده خواهیم کرد. اگر قبلاً با بسته Multer آشنا نبودید می توانید بسته Multer را در Github بررسی کنید.
ما باید یک موتور ذخیره سازی سفارشی ایجاد کنیم تا از آن با Multer استفاده کنیم. بیایید یک پوشه جدید در ریشه پروژه خود با نام helpers ایجاد کنیم و یک فایل جدید AvatarStorage.js در داخل آن برای موتور ذخیره سازی سفارشی ایجاد نماییم. فایل باید حاوی قطعه کد زیر باشد:
helpers/AvatarStorage.js
// Load dependencies
var _ = require(‘lodash’);
var fs = require(‘fs’);
var path = require(‘path’);
var Jimp = require(‘jimp’);
var crypto = require(‘crypto’);
var mkdirp = require(‘mkdirp’);
var concat = require(‘concat-stream’);
var streamifier = require(‘streamifier’);

// Configure UPLOAD_PATH
// process.env.AVATAR_STORAGE contains uploads/avatars
var UPLOAD_PATH = path.resolve(__dirname, ‘..’, process.env.AVATAR_STORAGE);

// create a multer storage engine
var AvatarStorage = function(options) {

// this serves as a constructor
function AvatarStorage(opts) {}

// this generates a random cryptographic filename
AvatarStorage.prototype._generateRandomFilename = function() {}

// this creates a Writable stream for a filepath
AvatarStorage.prototype._createOutputStream = function(filepath, cb) {}

// this processes the Jimp image buffer
AvatarStorage.prototype._processImage = function(image, cb) {}

// multer requires this for handling the uploaded file
AvatarStorage.prototype._handleFile = function(req, file, cb) {}

// multer requires this for destroying file
AvatarStorage.prototype._removeFile = function(req, file, cb) {}

// create a new instance with the passed options and return it
return new AvatarStorage(options);

};

// export the storage engine
module.exports = AvatarStorage;

بیایید شروع به اضافه کردن دستورات برای توابع ذکر شده در موتور ذخیره سازی کنیم. با تابع سازنده شروع خواهیم کرد.
// this serves as a constructor
function AvatarStorage(opts) {

var baseUrl = process.env.AVATAR_BASE_URL;

var allowedStorageSystems = [‘local’];
var allowedOutputFormats = [‘jpg’, ‘png’];

// fallback for the options
var defaultOptions = {
storage: ‘local’,
output: ‘png’,
greyscale: false,
quality: 70,
square: true,
threshold: 500,
responsive: false,
};

// extend default options with passed options
var options = (opts && _.isObject(opts)) ? _.pick(opts, _.keys(defaultOptions)) : {};
options = _.extend(defaultOptions, options);

// check the options for correct values and use fallback value where necessary
this.options = _.forIn(options, function(value, key, object) {

switch (key) {

case ‘square’:
case ‘greyscale’:
case ‘responsive’:
object[key] = _.isBoolean(value) ? value : defaultOptions[key];
break;

case ‘storage’:
value = String(value).toLowerCase();
object[key] = _.includes(allowedStorageSystems, value) ? value : defaultOptions[key];
break;

case ‘output’:
value = String(value).toLowerCase();
object[key] = _.includes(allowedOutputFormats, value) ? value : defaultOptions[key];
break;

case ‘quality’:
value = _.isFinite(value) ? value : Number(value);
object[key] = (value && value >= 0 && value <= 100) ? value : defaultOptions[key];
break;

case ‘threshold’:
value = _.isFinite(value) ? value : Number(value);
object[key] = (value && value >= 0) ? value : defaultOptions[key];
break;

}

});

// set the upload path
this.uploadPath = this.options.responsive ? path.join(UPLOAD_PATH, ‘responsive’) : UPLOAD_PATH;

// set the upload base url
this.uploadBaseUrl = this.options.responsive ? path.join(baseUrl, ‘responsive’) : baseUrl;

if (this.options.storage == ‘local’) {
// if upload path does not exist, create the upload path structure
!fs.existsSync(this.uploadPath) && mkdirp.sync(this.uploadPath);
}

}

در اینجا ، تابع سازنده خود را برای پذیرش چند گزینه تعریف کردیم. همچنین در صورت عدم ارائه یا عدم اعتبار ، مقادیر پیش فرض (برگشت پذیر) را برای این گزینه ها اضافه کردیم. می توانید بسته به آنچه می خواهید ، گزینه های بیشتری را برای این کار تنظیم کنید ، اما برای این آموزش ما گزینه های زیر را برای موتور ذخیره سازی خود استفاده خواهیم کرد.
⦁ storage: سیستم فایل ذخیره سازی است. مقدار مجاز برای سیستم فایل محلی فقط local است. پیش فرض “local” قرار دارد. در صورت تمایل می توانید سایر سیستم های ذخیره سازی فایل (مانند Amazon S3) را پیاده سازی کنید.
⦁ output: فرمت خروجی تصویر است. می تواند “jpg” یا “png” باشد. پیش فرض”png” است.
⦁ Greyscale: در صورت تنظیم روی true ، تصویر خروجی سیاه سفید خواهد بود. پیش فرض روی false است.
⦁ quality: عددی بین 0تا 100 که کیفیت تصویر خروجی را تعیین می کند. پیش فرض 70 است.
⦁ square: اگر روی true باشد ، تصویر به یک مربع بریده می شود. پیش فرض روی false است.
⦁ threshold: عددی که کوچکترین بعد (برحسب پیکسل) تصویر خروجی را محدود می کند. مقدار پیش فرض 500 است. اگر کوچکترین بعد تصویر از این عدد تجاوز کند ، اندازه تغییر می کند به طوری که کوچکترین ابعاد برابر آستانه است.
⦁ responsive: در صورت تنظیم روی true ، سه تصویر خروجی در اندازه های مختلف (lg ، md و sm) در پوشه های مربوطه خود ایجاد و ذخیره می شوند. پیش فرض روی false است.
بیایید روش های ایجاد نام فایل های تصادفی و جریان خروجی را برای نوشتن روی فایل ها را پیاده کنیم:
// this generates a random cryptographic filename
AvatarStorage.prototype._generateRandomFilename = function() {
// create pseudo random bytes
var bytes = crypto.pseudoRandomBytes(32);

// create the md5 hash of the random bytes
var checksum = crypto.createHash(‘MD5’).update(bytes).digest(‘hex’);

// return as filename the hash with the output extension
return checksum + ‘.’ + this.options.output;
};

// this creates a Writable stream for a filepath
AvatarStorage.prototype._createOutputStream = function(filepath, cb) {

// create a reference for this to use in local functions
var that = this;

// create a writable stream from the filepath
var output = fs.createWriteStream(filepath);

// set callback fn as handler for the error event
output.on(‘error’, cb);

// set handler for the finish event
output.on(‘finish’, function() {
cb(null, {
destination: that.uploadPath,
baseUrl: that.uploadBaseUrl,
filename: path.basename(filepath),
storage: that.options.storage
});
});

// return the output stream
return output;
};

در اینجا ، ما از crypto برای ایجاد یک hash md5 تصادفی استفاده می کنیم تا از نام فایل استفاده شود و خروجی را از گزینه ها به عنوان پسوند فایل ضمیمه کنیم. همچنین روش کمکی خود را برای ایجاد جریان قابل نوشتار از filepath مشخص شده تعریف کرده و سپس جریان را برگردانده ایم. توجه داشته باشید که یک تابع callback لازم است ، زیرا ما از آن در مدیریت رویداد جریان استفاده می کنیم.
در ادامه روش _processImage () را که پردازش تصویر واقعی را انجام می دهد ، پیاده خواهیم کرد. در اینجا این پیاده سازی آمده است:
// this processes the Jimp image buffer
AvatarStorage.prototype._processImage = function(image, cb) {

// create a reference for this to use in local functions
var that = this;

var batch = [];

// the responsive sizes
var sizes = [‘lg’, ‘md’, ‘sm’];

var filename = this._generateRandomFilename();

var mime = Jimp.MIME_PNG;

// create a clone of the Jimp image
var clone = image.clone();

// fetch the Jimp image dimensions
var width = clone.bitmap.width;
var height = clone.bitmap.height;
var square = Math.min(width, height);
var threshold = this.options.threshold;

// resolve the Jimp output mime type
switch (this.options.output) {
case ‘jpg’:
mime = Jimp.MIME_JPEG;
break;
case ‘png’:
default:
mime = Jimp.MIME_PNG;
break;
}

// auto scale the image dimensions to fit the threshold requirement
if (threshold && square > threshold) {
clone = (square == width) ? clone.resize(threshold, Jimp.AUTO) : clone.resize(Jimp.AUTO, threshold);
}

// crop the image to a square if enabled
if (this.options.square) {

if (threshold) {
square = Math.min(square, threshold);
}

// fetch the new image dimensions and crop
clone = clone.crop((clone.bitmap.width: square) / 2, (clone.bitmap.height: square) / 2, square, square);
}

// convert the image to greyscale if enabled
if (this.options.greyscale) {
clone = clone.greyscale();
}

// set the image output quality
clone = clone.quality(this.options.quality);

if (this.options.responsive) {

// map through the responsive sizes and push them to the batch
batch = _.map(sizes, function(size) {

var outputStream;

var image = null;
var filepath = filename.split(‘.’);

// create the complete filepath and create a writable stream for it
filepath = filepath[0] + ‘_’ + size + ‘.’ + filepath[1];
filepath = path.join(that.uploadPath, filepath);
outputStream = that._createOutputStream(filepath, cb);

// scale the image based on the size
switch (size) {
case ‘sm’:
image = clone.clone().scale(0.3);
break;
case ‘md’:
image = clone.clone().scale(0.7);
break;
case ‘lg’:
image = clone.clone();
break;
}

// return an object of the stream and the Jimp image
return {
stream: outputStream,
image: image
};
});

} else {

// push an object of the writable stream and Jimp image to the batch
batch.push({
stream: that._createOutputStream(path.join(that.uploadPath, filename), cb),
image: clone
});

}

// process the batch sequence
_.each(batch, function(current) {
// get the buffer of the Jimp image using the output mime type
current.image.getBuffer(mime, function(err, buffer) {
if (that.options.storage == ‘local’) {
// create a read stream from the buffer and pipe it to the output stream
streamifier.createReadStream(buffer).pipe(current.stream);
}
});
});

};

در این روش کارهای زیادی در حال انجام است اما خلاصه ای از کارهایی که انجام می شود در اینجا آمده است:
⦁ یک نام فایل تصادفی ایجاد می کند ، نوع mime تصویر خروجی Jimp را برطرف می کند و ابعاد تصویر را بدست می آورد.
⦁ در صورت لزوم ، براساس نیازهای ابعاد آستانه ، اندازه را تغییر میدهد تا اطمینان حاصل شود که کوچکترین ابعاد از آستانه تجاوز نمی کند.
⦁ اگر در گزینه ها فعال باشد ، تصویر را به یک مربع برش میدهد.
⦁ در صورت فعال بودن در گزینه ها ، تصویر را به مقیاس خاکستری تبدیل کنید.
⦁ کیفیت خروجی تصویر را از گزینه ها تنظیم کنید.
⦁ در صورت فعال بودن گزینه پاسخگو ، تصویر برای هر یک از اندازه های پاسخگو (lg ، md و sm) کلون شده و مقیاس بندی می شود و سپس یک جریان خروجی با استفاده از روش _createOutputStream () برای هر فایل تصویر در اندازه های مربوطه ایجاد می شود. نام فایل برای هر اندازه ، قالب [random_filename_hash]_[size].[output_extension] را می گیرد. سپس کلون تصویر و جریان در دسته ای برای پردازش قرار می گیرند.
⦁ اگر گزینه پاسخگو غیرفعال باشد ، فقط تصویر فعلی و یک جریان خروجی برای آن در دسته ای برای پردازش قرار می گیرد.
⦁ سرانجام ، با تبدیل یک بافر تصویر Jimp  به یک جریان قابل خواندن با استفاده از streamifier و سپس لوله زنی جریان قابل خواندن به جریان خروجی ، هر مورد در دسته ای پردازش می شود.
اکنون روش های باقی مانده را پیاده سازی می کنیم و با موتور ذخیره سازی کار را به پایان میرسانیم.
// multer requires this for handling the uploaded file
AvatarStorage.prototype._handleFile = function(req, file, cb) {

// create a reference for this to use in local functions
var that = this;

// create a writable stream using concat-stream that will
// concatenate all the buffers written to it and pass the
// complete buffer to a callback fn
var fileManipulate = concat(function(imageData) {

// read the image buffer with Jimp
// it returns a promise
Jimp.read(imageData)
.then(function(image) {
// process the Jimp image buffer
that._processImage(image, cb);
})
.catch(cb);
});

// write the uploaded file buffer to the fileManipulate stream
file.stream.pipe(fileManipulate);

};

// multer requires this for destroying file
AvatarStorage.prototype._removeFile = function(req, file, cb) {

var matches, pathsplit;
var filename = file.filename;
var _path = path.join(this.uploadPath, filename);
var paths = [];

// delete the file properties
delete file.filename;
delete file.destination;
delete file.baseUrl;
delete file.storage;

// create paths for responsive images
if (this.options.responsive) {
pathsplit = _path.split(‘/’);
matches = pathsplit.pop().match(/^(.+?)_.+?\.(.+)$/i);

if (matches) {
paths = _.map([‘lg’, ‘md’, ‘sm’], function(size) {
return pathsplit.join(‘/’) + ‘/’ + (matches[1] + ‘_’ + size + ‘.’ + matches[2]);
});
}
} else {
paths = [_path];
}

// delete the files from the filesystem
_.each(paths, function(_path) {
fs.unlink(_path, cb);
});

};

موتور ذخیره سازی ما اکنون آماده استفاده با Multer است.
مرحله 5 – اجرای مسیر POST /upload
قبل از اینکه مسیر را تعیین کنیم ، باید Multer را برای استفاده در مسیر خود تنظیم کنیم. بیایید برای ویرایش فایل routes/index.js پیش برویم و موارد زیر را اضافه کنیم:
routes/index.js
var express = require(‘express’);
var router = express.Router();

/**
* CODE ADDITION
*
* The following code is added to import additional dependencies
* and setup Multer for use with the /upload route.
*/

// import multer and the AvatarStorage engine
var _ = require(‘lodash’);
var path = require(‘path’);
var multer = require(‘multer’);
var AvatarStorage = require(‘../helpers/AvatarStorage’);

// setup a new instance of the AvatarStorage engine
var storage = AvatarStorage({
square: true,
responsive: true,
greyscale: true,
quality: 90
});

var limits = {
files: 1, // allow only 1 file per request
fileSize: 1024 * 1024, // 1 MB (max file size)
};

var fileFilter = function(req, file, cb) {
// supported image file mimetypes
var allowedMimes = [‘image/jpeg’, ‘image/pjpeg’, ‘image/png’, ‘image/gif’];

if (_.includes(allowedMimes, file.mimetype)) {
// allow supported image files
cb(null, true);
} else {
// throw error for invalid files
cb(new Error(‘Invalid file type. Only jpg, png and gif image files are allowed.’));
}
};

// setup multer
var upload = multer({
storage: storage,
limits: limits,
fileFilter: fileFilter
});

/* CODE ADDITION ENDS HERE */

در اینجا ، قادر به برش مربع ، تصاویر پاسخگو و تنظیم ابعاد آستانه برای موتور ذخیره سازی خود هستیم. همچنین برای اطمینان از حداکثر اندازه 1 مگابایت و اطمینان از عدم بارگذاری فایل های غیر تصویری ، محدودیت هایی در تنظیمات Multer خود اضافه می کنیم.
اکنون بیایید مسیر POST /upload را به شرح زیر اضافه کنیم:
/* routes/index.js */

/**
* CODE ADDITION
*
* The following code is added to configure the POST /upload route
* to upload files using the already defined Multer configuration
*/

router.post(‘/upload’, upload.single(process.env.AVATAR_FIELD), function(req, res, next) {

var files;
var file = req.file.filename;
var matches = file.match(/^(.+?)_.+?\.(.+)$/i);

if (matches) {
files = _.map([‘lg’, ‘md’, ‘sm’], function(size) {
return matches[1] + ‘_’ + size + ‘.’ + matches[2];
});
} else {
files = [file];
}

files = _.map(files, function(file) {
var port = req.app.get(‘port’);
var base = req.protocol + ‘://’ + req.hostname + (port ? ‘:’ + port : ”);
var url = path.join(req.file.baseUrl, file).replace(/[\\\/]+/g, ‘/’).replace(/^[\/]+/g, ”);

return (req.file.storage == ‘local’ ? base : ”) + ‘/’ + url;
});

res.json({
images: files
});

});

/* CODE ADDITION ENDS HERE */

توجه کنید که چگونه ما از میان افزار بارگذاری Multer قبل از کنترل مسیر خود عبور کردیم. روش single () به ما اجازه می دهد تا فقط یک فایل را که در req.file ذخیره می شود بارگذاری کنیم. به عنوان اولین پارامتر ، نام فیلد ورودی فایل را میگیرد که از process.env.AVATAR_FIELD به آن دسترسی پیدا می کنیم.
اکنون بیایید برنامه را با استفاده از شروع npm دوباره شروع کنیم.
⦁ $ npm start
⦁
به localhost: 3000 در مرورگر خود مراجعه کرده و سعی کنید عکسی بارگذاری کنید. در اینجا نمونه ای از عکسی از تست مسیر بارگذاری در Postman با استفاده از گزینه های تنظیمات فعلی ما اسکرین شات گرفته ام آمده است:

می توانید گزینه های پیکربندی موتور ذخیره سازی را در تنظیمات Multer مورد نظر خود قرار دهید تا نتایج مختلفی کسب کنید.
نتیجه
در این آموزش ، ما توانسته ایم موتور ذخیره سازی سفارشی را برای استفاده با Multer ایجاد کنیم که تصاویر بارگذاری شده را با استفاده از Jimp دستکاری کرده و سپس آنها را برای ذخیره سازی می نویسد. برای نمونه کامل کد این آموزش ، منبع  advanced-multer-node-sourcecode در Github را بررسی کنید.

 

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

استفاده از nsh برای دستورات از راه دور اوبونتو 18 –  میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18  –  ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4  –  ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta –  ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) –  با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django –  دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express  –  با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید  –  ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع  –  می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta  –   مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL  –  ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور  –  احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel  –  ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan  –  استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue  –  ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو  –  ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express  –  ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18  –  تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8  –  استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18  –  نصب Linux، Nginx، MariaDB،PHP در Debian 10

 

 

کلمات کلیدی خرید سرور

خرید vps – خرید سرور مجازی – خرید سرور – سرور هلند – فروش vps – سرور مجازی آمریکا – خریدvps – سرور مجازی هلند – فروش سرور مجازی – سرور آمریکا – vps – سرور مجازی انگلیس – سرور مجازی آلمان – سرور مجازی کانادا – خرید vps آمریکا – خرید وی پی اس – سرور – خرید سرور مجازی هلند – vps خرید – سرور مجازی فرانسه – سرور مجازی هلند – خرید vps آمریکا – خرید سرور مجازی ارزان هلند – vps – خرید vps هلند – خرید سرور مجازی آمریکا – خرید vps فرانسه – تست vps – سرور مجازی تست – سرور مجازی ویندوز – ارزانترین vps – خرید وی پی اس – vps ارزان – 

 

برچسب‌ها:concat-stream, Dotenv, Express, Jimp, Lodash, Mkdirp, Multer, Node, Streamifier

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید

مقدمه
برنامه های تک صفحه ای یک روش محبوب برای ساخت برنامه های مدرن وب هستند. وقتی صحبت از SPA می شود ، دو روش وجود دارد که می توانید محتوای برنامه را به کاربران خود ارائه دهید: رندر سمت کلاینت یا ارائه سمت سرور مجازی.
با ارائه سمت کلاینت ، هر زمان که کاربر برنامه را باز کند ، درخواستی برای بارگذاری طرح ، HTML ، CSS و JavaScript ارسال می شود. در مواردی که محتوای برنامه به اتمام بارگذاری موفقیت آمیز اسکریپت های JS وابسته باشد ، این مسئله می تواند یک مشکل باشد. این بدان معنی است که کاربران در حالی که منتظر پایان بارگذاری اسکریپت ها هستند ، مجبور به مشاهده پیش بارگذاری می شوند.
رندرگیری سمت-سرور مجازی متفاوت عمل میکند. با SSR ، درخواست اولیه شما ابتدا صفحه ، طرح ، CSS ، JavaScript و محتوا را بارگذاری می کند. SSR اطمینان می دهد که داده ها به درستی در زمان ارائه تنظیم می شوند. رندر سمت سرور مجازی نیز برای بهینه سازی موتور جستجو مناسب تر است.
در این آموزش نحوه ساخت یک برنامه رندر شده توسط سرور مجازی با Preact را بررسی میکنید- روتر preact برای مسیریابی ، unistore برای مدیریت برای ناحیه ای و Webpack برای بسته بندی JS استفاده خواهد شد.
ممکن است به مقداری دانش درباره Preact ، Unistore و Webpack نیاز باشد.
فن آوری ها
در این آموزش از فناوری زیر برای ساخت برنامه Server-Send Rendered استفاده خواهید کرد:
⦁ Preact – جایگزینی برای React با همان API. یک تجربه توسعه شبیه به React ارائه میدهد ، البته با برخی از ویژگی های از بین رفته مانند  ⦁ PropTypes and Children .
⦁ Unistore – یک کانتینر حالت متمرکز با اتصالات مؤلفه برای React and Preact.
⦁ Preact Router – به مدیریت مسیر در برنامه های Preact کمک می کند. مؤلفه <Router /> را فراهم می کند که به طور مشروط CHILDREN را هنگام مطابقت URL با مسیر آن ها ارائه می دهد.
⦁ Webpack – بسته نرم افزاری برای کمک به بسته بندی فایل های JavaScript برای استفاده در یک مرورگر.
ساختن یک برنامه SSR با Preact
ساخت این برنامه به دو بخش تقسیم خواهد شد. ابتدا سرور مجازی کدی را که در Node و Express قرار دارد ، می سازید. پس از آن قسمت Preact را کد می کنید.
ایده این کار این است که یک برنامه Preact را مانند گذشته ایجاد کنید و آن را با استفاده از بسته preact-rend-to-string به سرور مجازی Node وصل کنید. این امکان را به شما می دهد تا اجزای JSX و Preact را به یک رشته HTML ارائه دهید که سپس در یک سرور مجازی قابل استفاده باشد. این بدان معنی است که ما می خواهیم اجزای Preact را در یک پوشه src ایجاد کنیم و سپس آن را به فایل سرور مجازی Node وصل کنیم.
اولین کاری که باید بکنید ایجاد فهرست برای پروژه و پوشه های مختلفی است که نیاز دارید. پوشه ای بنام preact-unistore-ss ایجاد کنید و دستور npm init- -y را در داخل پوشه اجرا کنید. این باعث می شود یک package.json جزیی و یک package-lock.json کمکی ایجاد کنید.
در مرحله بعد برخی از ابزاری را که برای این پروژه استفاده خواهید کرد ، نصب کنید. فایل pack.json را باز کنید و با کد زیر ویرایش کنید ، سپس دستور npm i را اجرا کنید.
{
“name”: “preact-unistore-ssr”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“devDependencies”: {
“babel-cli”: “^6.26.0”,
“babel-core”: “^6.26.0”,
“babel-loader”: “^7.1.2”,
“babel-plugin-transform-react-jsx”: “^6.24.1”,
“babel-preset-env”: “^1.6.1”,
“file-loader”: “^1.1.11”,
“url-loader”: “^1.0.1”,
“webpack”: “^3.11.0”,
“webpack-cli”: “^2.0.13”
},
“dependencies”: {
“express”: “^4.16.2”,
“preact”: “^8.2.6”,
“preact-render-to-string”: “^3.7.0”,
“preact-router”: “^2.6.0”,
“unistore”: “^3.0.4”
}
}

این کد تمام بسته های مورد نیاز این برنامه را نصب می کند. در آبجکت devDependency تعدادی بسته Babel وجود دارد که با تعویض کد ES6 به شما کمک می کند. file-loader و url-loader افزونه های Webpack هستند که به وارد کردن فایل ها ، دارایی ها ، ماژول ها و موارد دیگر کمک می کنند.
در آبجکت dependencies بسته هایی مانند Express، Preact، preact-rendering-to-string، preact-router و unistore را نصب می کنید.
سپس ، یک فایل پیکربندی Webpack ایجاد کنید. فایلی به نام webpack.config.js را در ریشه پروژه ایجاد کنید و آن را با کد زیر ویرایش کنید:
const path = require(“path”);

module.exports = {
entry: “./src/index.js”,
output: {
path: path.join(__dirname, “dist”),
filename: “app.js”
},
module: {
rules: [
{
test: /\.js$/,
loader: “babel-loader”,
}
]
}
};

در پیکربندی وب صفحه بالا ، نقطه ورود به src / index.js و خروجی را به صورت dist / app.js تعریف کردید. همچنین قوانین استفاده از Babel را تعیین کرده اید. فایل ورود به سیستم هنوز وجود ندارد ، اما بعداً آن را ایجاد خواهید کرد.
از آنجا که از Babel استفاده می کنید ، باید یک فایل .babelrc را در ریشه پروژه ایجاد کرده و پیکربندی کنید.
//.babelrc
{
“plugins”: [
[“transform-react-jsx”, { “pragma”: “h” }]
],
“presets”: [
[“env”, {
“targets”: {
“node”: “current”,
“browsers”: [“last 2 versions”]
}
}]
]
}

ساخت برنامه Preact
در مرحله بعد ، شروع به ایجاد فایل هایی برای سمت Preact موارد خواهید کرد. یک پوشه src ایجاد کنید و فایل های زیر را در آن ایجاد کنید:
⦁ store/store.js
⦁ About.js
⦁ App.js
⦁ index.js
⦁ router.js
اکنون می توانید فایل ها را با کد لازم ویرایش کنید. با فایل store.js شروع کنید. شامل داده ها و فعالیت های فروشگاه می باشد.
import createStore from ‘unistore’

export let actions = store => ({
increment(state) {
return { count: state.count + 1 }
},
decrement(state) {
return { count: state.count – 1 }
}
})

export default initialState => createStore(initialState)

در بلوک کد فوق مجموعه ای از اقدامات را صادر می کنید که مقدار count را با 1 افزایش و کاهش می دهد. فعالیت ها همیشه state را به عنوان اولین پارامتر حالت دریافت می کنند و پارامترهای دیگر ممکن است بعد از آن بیایند. تابع createStore که برای مقدار دهی اولیه فروشگاه در Unistore استفاده می شود نیز صادر می شود.
سپس ، فایل router.js را ویرایش کنید. شامل تنظیم مسیرهایی است که شما در برنامه استفاده خواهید کرد.
import { h } from ‘preact’
import Router from ‘preact-router’

import { App } from “./App”;
import { About } from “./About”;

export default () => (
<Router>
<App path=”/” />
<About path=”/about” />
</Router>
)

این کد از preact-router برای تعریف مسیرها استفاده می کند. برای این کار ، مسیرها را وارد کرده و آنها را فرزندان مؤلفه روتر قرار دهید. سپس می توانید ویژگی مسیر را برای هر مؤلفه تنظیم کنید تا preact-router بداند کدام مؤلفه را برای یک مسیر سرویس می دهد.
دو برنامه اصلی در برنامه وجود دارد: مولفه App.js ، که به عنوان مسیر هوم سرویس می دهد ، و مؤلفه About.js ، که به عنوان صفحه مورد استفاده قرار می گیرد.
سپس About.js را با موارد زیر ویرایش کنید:
import { h } from “preact”;
import { Link } from “preact-router/match”;

export const About = () => (
<div>
<p>This is a Preact app being rendered on the server. It uses Unistore for state management and preact-router for routing.</p>
<Link href=”/”>Home</Link>
</div>
);

این مولفه ای است که دارای توضیحات مختصر و یک مؤلفه Link است که به مسیر هوم منتهی می شود.
App.js به عنوان مسیر هوم سرویس می دهد. آن فایل را باز کرده و با کد لازم ویرایش کنید:
import { h } from ‘preact’
import { Link } from ‘preact-router’
import { connect } from ‘unistore/preact’

import { actions } from ‘./store/store’

export const App = connect(‘count’, actions)(
({ count, increment, decrement }) => (
<div class=”count”>
<p>{count}</p>
<button class=”increment-btn” onClick={increment}>Increment</button>
<button class=”decrement-btn” onClick={decrement}>Decrement</button>
<Link href=”/about”>About</Link>
</div>
)
)

در این کد ، تابع connect وارد می شود ، و همچنین تابع actions است. در مؤلفه app ، مقدار حالت count و همچنین اقدامات increment و decrement در معرض آن قرار میگیرد. اقدامات increment و decrement هر دو با رویداد onClick به دکمه های مختلف وصل شده اند.
فایل index.js نقطه ورود Webpack است. این برنامه به عنوان مؤلفه اصلی سایر مؤلفه های برنامه Preact خدمت می کند. فایل را باز کنید و با کد زیر ویرایش کنید.
// index.js
import { h, render } from ‘preact’
import { Provider } from ‘unistore/preact’
import Router from ‘./router’

import createStore from ‘./store/store’

const store = createStore(window.__STATE__)

const app = document.getElementById(‘app’)

render(
<Provider store={store}>
<Router />
</Provider>,
app,
app.lastChild
)

در بلوک کد بالا ، مؤلفه Provider وارد می شود. تعیین شرایط کاری که آیا Preact  است یا React ، مهم است. ما همچنین مولفه روتر را از فایل router.js وارد می کنیم و عملکرد createStore نیز از فایل store.js وارد می شود.
از خط const store = createStore(window.__STATE__) برای انتقال حالت اولیه از سرور مجازی به کلاینت استفاده می شود زیرا در حال ساختن برنامه SSR هستید.
سرانجام ، در تابع render ، کامپوننت Router را درون قسمت Provider می پیچید تا فروشگاه در دسترس همه مولفه های کودک باشد.
این باعث می شود سمت کلاینت آیتم ها تکمیل شود. اکنون به سمت سرور مجازی برنامه خواهیم رفت.
ساخت سرور مجازی Node
با ایجاد یک فایل server.js شروع کنید. این برنامه Node را که برای رندر سمت سرور مجازی استفاده می شود ، در خود جای می دهد.
// server.js
const express = require(“express”);
const { h } = require(“preact”);
const render = require(“preact-render-to-string”);
import { Provider } from ‘unistore/preact’
const { App } = require(“./src/App”);
const path = require(“path”);

import Router from ‘./src/router’
import createStore from ‘./src/store/store’

const app = express();

const HTMLShell = (html, state) => `
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css”>
<title> SSR Preact App </title>
</head>
<body>
<div id=”app”>${html}</div>
<script>window.__STATE__=${JSON.stringify(state).replace(/<|>/g, ”)}</script>
<script src=”./app.js”></script>
</body>
</html>`

app.use(express.static(path.join(__dirname, “dist”)));

app.get(‘**’, (req, res) => {
const store = createStore({ count: 0, todo: [] })

let state = store.getState()

let html = render(
<Provider store={store}>
<Router />
</Provider>
)

res.send(HTMLShell(html, state))
})

app.listen(4000);

بیایید آن را تجزیه کنیم:
const express = require(“express”);
const { h } = require(“preact”);
const render = require(“preact-render-to-string”);
import { Provider } from ‘unistore/preact’
const { App } = require(“./src/App”);
const path = require(“path”);

import Router from ‘./src/router’
import createStore from ‘./src/store/store’

const app = express();

در بلوک کد بالا بسته های مورد نیاز سرور مجازی Node مانند express و path را وارد می کنید. همچنین preact ، مؤلفه Provider را از unistore وارد می کنید ، و از همه مهمتر ، بسته preact-rend-to-string است که شما را قادر به انجام رندر سمت سرور مجازی می کند. مسیرها و فروشگاه نیز از فایل های مربوطه آنها وارد می شود.
const HTMLShell = (html, state) => `
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css”>
<title> SSR Preact App </title>
</head>
<body>
<div id=”app”>${html}</div>
<script>window.__STATE__=${JSON.stringify(state).replace(/<|>/g, ”)}</script>
<script src=”./app.js”></script>
</body>
</html>`

در بلوک کد بالا HTML پایه ای را ایجاد می کنید که برای برنامه استفاده خواهد شد. در کد HTML ، حالت در بخش اسکریپت آغاز می شود. تابع HTMLShell دو پارامتر را می پذیرد. پارامتر html خروجی دریافتی از preact-rendering-to-string خواهد بود و سپس html درون کد HTML تزریق می شود. پارامتر دوم حالت است.
app.use(express.static(path.join(__dirname, “dist”)));

app.get(‘**’, (req, res) => {
const store = createStore({ count: 0})

let state = store.getState()

let html = render(
<Provider store={store}>
<Router />
</Provider>
)

res.send(HTMLShell(html, state))
})

app.listen(4000);

در اولین خط کد ، شما به اکسپرس می گویید که هنگام استفاده از فایل های استاتیک از dist استفاده کند. همانطور که قبلاً ذکر شد ، app.js در داخل پوشه dist قرار دارد.
در مرحله بعد ، مسیری را برای هر درخواستی که با app.get وارد برنامه شود ، تنظیم می کنید (**).اولین کاری که باید انجام دهید این است که فروشگاه و حالت آن را مقداردهی اولیه کنید و سپس یک متغیر ایجاد کنید که دارای مقدار ناحیه باشد.
پس از آن ، preact-rend-to-string (که به عنوان رندر وارد شده است) برای رندر کردن برنامه کلاینت Preact در کنار روتر ، که مسیر را نگه داشته است استفاده میشود، و Provider که فروشگاه را برای هر یک از مولفه های کودک فراهم می کند ، استفاده می گردد.
با انجام این کار ، سرانجام می توانید برنامه را اجرا کنید و ببینید که چگونه به نظر می رسد. قبل از انجام این کار ، بلوک کد زیر را به فایل pack.json اضافه کنید.
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″,
“start:client”: “webpack -w”,
“start:server”: “babel-node server.js”,
“dev”: “npm run start:client & npm run start:server”
},

این اسکریپت هایی هستند که به شما امکان می دهد برنامه را فعال و اجرا کنید. دستور npm run dev را در ترمینال خود اجرا کنید و به http: // localhost: 4000 بروید. برنامه باید به روز و اجرا شود و تصویری مشابه آنچه در زیر می بینید دریافت کنید.

اضافه کردن یک ظاهر طراحی شده CSS
اکنون که بازدیدها انجام شده و کلاینت به سرور مجازی وصل شده است می توانید یک ظاهر طراحی را به برنامه اضافه کنید. باید به Webpack اطلاع دهید که به پیوند دادن فایل های CSS نیاز دارد.
برای انجام این کار ، style-loader و css-loader باید به برنامه اضافه شود. هر دو با اجرای این دستور قابل نصب هستند:
⦁ $ npm i css-loader style-loader –save-dev
⦁
پس از اتمام نصب ، به فایل webpack.config.js بروید و کد زیر را در داخل آرایه rules اضافه کنید.
{
test: /\.css$/,
use: [ ‘style-loader’, ‘css-loader’ ]
}

اکنون می توانید یک فایل index.css را در داخل پوشه src ایجاد کرده و با کد زیر ویرایش کنید:
body {
background-image: linear-gradient(to right top, #2b0537, #820643, #c4442b, #d69600, #a8eb12);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
a {
display: block;
color: white;
text-decoration: underline;
}
p {
color: white
}
.count p {
color: white;
font-size: 60px;
}
button:focus {
outline: none;
}
.increment-btn {
background-color: #1A2C5D;
border: none;
color: white;
border-radius: 3px;
padding: 10px 20px;
font-size: 14px;
margin: 0 10px;
}
.decrement-btn {
background-color: #BC1B1B;
border: none;
color: white;
border-radius: 3px;
padding: 10px 20px;
font-size: 14px;
margin: 0 10px;
}

در فایل index.js ، این کد را در بالای فایل اضافه کنید:
import ‘./index.css’;`
…

اکنون صفحه شما دارای استایل خواهد شد:

نتیجه
در این آموزش ، شما یک برنامه Preact رندر شده در سمت سرور مجازی ایجاد کرده اید و مزایای ساخت برنامه های ارائه شده توسط سرور مجازی را بررسی کرده اید. شما همچنین از Unistore برای مدیریت حالت پایه استفاده کردید و با استفاده از window.__STATE__ وضعیت را از سرور مجازی به frontend  وصل کرده اید .
اکنون باید اطلاعات کافی در مورد نحوه ارائه یک برنامه Preact در سرور مجازی داشته باشید. به طور خلاصه ، ایده این است که ابتدا برنامه را روی سرور مجازی ارائه داده و سپس اجزای آن را در مرورگر ارائه دهید.
کد این آموزش را می توان در GitHub مشاهده کرد.

 

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

استفاده از nsh برای دستورات از راه دور اوبونتو 18 –  میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18  –  ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4  –  ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta –  ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) –  با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django –  دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express  –  با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید  –  ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع  –  می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta  –   مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL  –  ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور  –  احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel  –  ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan  –  استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue  –  ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو  –  ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express  –  ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18  –  تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8  –  استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18  –  نصب Linux، Nginx، MariaDB،PHP در Debian 10

 

 

کلمات کلیدی خرید سرور

خرید vps – خرید سرور مجازی – خرید سرور – سرور هلند – فروش vps – سرور مجازی آمریکا – خریدvps – سرور مجازی هلند – فروش سرور مجازی – سرور آمریکا – vps – سرور مجازی انگلیس – سرور مجازی آلمان – سرور مجازی کانادا – خرید vps آمریکا – خرید وی پی اس – سرور – خرید سرور مجازی هلند – vps خرید – سرور مجازی فرانسه – سرور مجازی هلند – خرید vps آمریکا – خرید سرور مجازی ارزان هلند – vps – خرید vps هلند – خرید سرور مجازی آمریکا – خرید vps فرانسه – تست vps – سرور مجازی تست – سرور مجازی ویندوز – ارزانترین vps – خرید وی پی اس – vps ارزان – 

 

برچسب‌ها:CSS, devDependency, package.json, React and Preact, Webpack

اشکال زدایی JavaScript در تولید با نقشه های منبع

امروزه، کدی که شما برای نوشتن برنامه خود استفاده می کنید معمولاً همان کدی نیست که در تولید به کار گرفته شده و توسط مرورگرها تفسیر شده است. شاید شما در حال نوشتن کد منبع خود به زبانی باشید که به JavaScript کامپایل میشود مانند “CafeScript” ، “TypeScript” یا جدیدترین نسخه تأیید شده استاندارد JavaScript ، یعنی ECMAScript 2015 (ES6) “. یا حتی به احتمال زیاد ، برای کاهش اندازه فایل اسکریپت های مستقر شده خود ، کد منبع خود را کوچک می کنید. احتمالاً از ابزاری مانند UglifyJS یا کامپایلر Google Closure استفاده می کنید.
از این ابزارهای تبدیل اغلب به عنوان transpilers یاد می شود – ابزاری که کد منبع را از یک زبان به همان زبان یا یک زبان سطح بالای مشابه تبدیل می کنند. خروجی آنها یک کد تعریفی است که ، در حالی که در محیط هدف (مانند JavaScript سازگار با مرورگر) عملکردی دارد ، معمولاً شباهت کمی با کدی که از آن تولید شده وجود دارد.
این یک مشکل ایجاد می کند: هنگام اشکال زدایی کد در مرورگر یا بازرسی پشته های ایجاد شده از خطاها در برنامه ، به کد جاوا اسکریپت تبدیلی و (معمولاً) ناخوانا نگاه میکنید ، نه کد منبع اصلی که برای نوشتن برنامه خود استفاده کرده اید. این همچنین می تواند ردیابی خطای JavaScript را دشوار کند.
راه حل این مشکل یک ویژگی مرورگر به نام نقشه های منبع است.
نقشه های منبع، فایل های JSON هستند که حاوی اطلاعاتی در مورد چگونگی نقشه کشی منبع مبدل شده شما به منبع اصلی آن هستند. اگر تاکنون برنامه نویسی را با زبانی کامپایل شده مانند Objective-C انجام داده اید ، می توانید به نقشه های منبع به عنوان نسخه جاوا اسکریپت نمادهای اشکال زدایی فکر کنید.
در اینجا یک نقشه منبع مثال آمده است:
{
version : 3,
file: “app.min.js”,
sourceRoot : “”,
sources: [“foo.js”, “bar.js”],
names: [“src”, “maps”, “are”, “fun”],
mappings: “AAgBC,SAAQ,CAAEA”
}

احتمالاً هرگز مجبور نخواهید شد این فایل ها را خودتان ایجاد کنید ، اما درک محتوای داخل آن ها خالی از لطف نیست:
⦁ version: نسخه مشخصات نقشه منبع که این فایل نشان میدهد (باید “3” باشد)
⦁ file: نام فایل تولید شده که نقشه منبع به آن مرتبط است
⦁ sourceRoot: ریشه URL که از آن تمام منابع نسبی هستند (اختیاری)
⦁ sources: مجموعه ای از URL ها به فایل های منبع اصلی
⦁ Names: آرایه ای از نام های متغیر / روش موجود در کد شما
⦁ mappings: نگاشت کد منبع واقعی ، به عنوان مقادیر VLQ رمزگذاری شده با پایه 64 ، نشان داده شده است
اگر به خاطر سپردن این موارد سخت به نظر می رسد ، نگران نباشید. ما نحوه استفاده از ابزارهای تولید این فایلها را برای شما توضیح خواهیم داد.
SourceMappingURL (URL نگاشت منبع)
برای اینکه به مرورگرها بگویید که یک نقشه منبع برای یک فایل تعویضی در دسترس است ، باید دستورالعمل SourceMappingURL به انتهای آن فایل اضافه شود:
// app.min.js
$(function () {
// your application …
});
//# sourceMappingURL=/path/to/app.min.js.map

وقتی مرورگرهای مدرن دستورالعمل SourceMappingURL را می بینند ، نقشه منبع را از محل ارائه شده دانلود می کنند و از اطلاعات نقشه برداری در داخل استفاده می کنند تا کد مشتری در حال اجرا را با کد منبع اصلی تأیید کنند. وقتی از کد Sentry اصلی ES6 + JSX در Firefox با استفاده از نقشه های منبع استفاده می کنیم، به صورت زیر خواهد بود (توجه داشته باشید: مرورگرها فقط هنگام باز بودن ابزارهای برنامه نویس، نقشه های منبع را دانلود و استفاده می کنند. هیچ تأثیر عملکردی برای کاربران عادی وجود ندارد):

تهیه نقشه منبع
شما می دانید که نقشه های منبع چگونه کار می کنند و چگونه می توانید مرورگر را برای دانلود و استفاده از آنها به کار بگیرید. اما چگونه می توانید درواقع آنها را تولید کرده و آنها را از فایل های تعویض شده خود ارجاع دهید؟
هر transpiler مدرن جاوا اسکریپت دارای گزینه خط فرمان برای تولید نقشه منبع مرتبط است. بیایید نگاهی به چند گزینه رایج بیندازیم.
UglifyJS
UglifyJS ابزاری محبوب برای کوچک کردن کد منبع شما برای تولید است. می تواند با از بین بردن فضای سفید ، بازنویسی نام متغیرها ، حذف شاخه های کد مرده و موارد دیگر ، اندازه فایل های شما را بطور چشمگیری کاهش دهد.
اگر از UglifyJS برای به حداقل رساندن سایز کد منبع خود استفاده می کنید ، دستور زیر از UglifyJS 3.3.x علاوه بر این ، نقشه منبع را تهیه می کند که کدهای کوچک شده را به منبع اصلی برگرداند:
⦁ $ uglifyjs app.js -o app.min.js –source-map
⦁
اگر به فایل خروجی تولید شده ، app.min.js نگاهی بیندازید ، متوجه خواهید شد که خط نهایی شامل دستورالعمل SourceMappingURL است که به نقشه منبع جدید ما اشاره دارد.
//# sourceMappingURL=app.min.js.map

توجه داشته باشید که این یک URL نسبی است. برای اینکه مرورگر بتواند نقشه منبع مرتبط را دانلود کند ، باید از همان دیرکتوری مقصد به عنوان فایل Uglified ، app.min.js. ، آپلود و سرویس دهی شود. این بدان معناست که اگر app.min.js از http://example.org/static/app.min.js سرویس دهی می شود ، بنابراین باید نقشه منبع شما از http://example.org/static/app.min.js.map نیز ارائه شود.
URL های نسبی تنها راه مشخص کردن SourceMappingURL نیستند. می توانید از طریق گزینه –source-map-url <url> به Uglify ، یک URL مطلق بدهید. یا حتی می توانید کل نقشه منبع را بصورت درون خطی وارد کنید ، اگرچه توصیه نمی شود. برای اطلاعات بیشتر به گزینه های خط فرمان Uglify نگاهی بیندازید.
Webpack
Webpack ابزاری برای ساخت قدرتمند است که ماژول های JavaScript را در فایل های مناسب برای اجرا در مرورگر ، مقرر و تنظیم می کند. پروژه Sentry خود از Webpack (همراه بابل) برای مونتاژ و تبادل پایه کدهای ES6 + JSX در JavaScript سازگار با مرورگر استفاده می کند.
تهیه نقشه های منبع با Webpack بسیار ساده است. در Webpack 4 خاصیت devtool را در پیکربندی خود مشخص کنید:
webpack.config.js
module.exports = {
// …
entry: {
“app”: “src/app.js”
},
output: {
path: path.join(__dirname, ‘dist’),
filename: “[name].js”,
sourceMapFilename: “[name].js.map”
},
devtool: “source-map”
// …
};
حالا وقتی برنامه خط فرمان webpack را اجرا می کنید ، Webpack فایل های خود را جمع آوری میکند ، یک نقشه منبع تهیه میکند و آن نقشه منبع را در فایل جاوا اسکریپت ساخته شده از طریق بخشنامه SourceMappingUrl ارجاع میدهد.
نقشه منبع های خصوصی
تا این مرحله ، تمام مثالهای ما بر این فرض بوده اند که نقشه های منبع شما به طور عمومی در دسترس هستند و از همان سرور مجازی همانند اجرای کد JavaScript در خدمت شما هستند. در این حالت ، هر توسعه دهنده می تواند از نقشه های منبع شما برای به دست آوردن کد منبع اصلی شما استفاده کند.
برای جلوگیری از این امر ، شما می توانید به جای تهیه یک sourceMappingURL در دسترس عموم، نقشه های منبع خود را از سرور مجازی هایی تهیه کنید که فقط برای تیم توسعه شما قابل دسترسی باشد. به عنوان مثال سرور مجازی ی خواهد بود که فقط از VPN شرکت شما قابل دسترسی است.
//# sourceMappingURL: http://company.intranet/app/static/app.min.js.map

هنگامی که یک عضو غیر تیمی با استفاده از ابزارهای توسعه دهنده از برنامه شما بازدید می کند ، سعی خواهد کرد این نقشه منبع را دانلود کند اما خطای 404 (یا 403) HTTP را دریافت می کند و نقشه منبع به کار گرفته نمی شود.
نقشه های منبع و Sentry
اگر از Sentry برای ردیابی استثنائات در برنامه های JavaScript در سمت کلاینت خود استفاده می کنید ، Sentry بطور خودکار نقشه های منبع را برای پشته ایجاد شده توسط خطاها واکشی میکند و به کار میگیرد. این بدان معناست که شما کد منبع اصلی خود را مشاهده می کنید و کد کوچک شده و یا کد تعویضی را از بین نمی برید. در اینجا ظاهر رد پشته کد unified شما در Sentry آمده است:

اگر مراحل این راهنمای مختصر را دنبال کرده اید و استقرار شما اکنون ایجاد شده است، نقشه های منبع آپلود شده و فایل های انتقالی با دستورالعمل SourceMappingURL که به آن نقشه های منبع اشاره دارند ، بارگذاری کرده اید ، کار دیگری وجود ندارد. Sentry بقیه را انجام می دهد.
روش دیگر ، به جای میزبانی نقشه های منبع ، می توانید آنها را مستقیماً در Sentry آپلود کنید.
چرا می توانید این کار را انجام دهید؟ به چند دلیل:
⦁ در مواردی که Sentry در دستیابی به سرور مجازی های شما مشکل داشته باشد (به عنوان مثال ، نقشه های منبع در VPN میزبانی شوند).
⦁ غلبه بر تأخیر – نقشه های منبع قبل از بروز استثناء در داخل Sentry قرار می گیرند.
⦁ شما برنامه ای را ایجاد می کنید که بصورت بومی روی یک دستگاه اجرا شود (به عنوان مثال ، با استفاده از React Native یا PhoneGap ، که کد / نقشه های منبع آن از طریق اینترنت قابل دسترسی نیستند)
⦁ از عدم همخوانی نسخه در جایی که نقشه منبع گرفته شده با کدی که خطا در آن قرار گرفته مطابقت ندارد ، خودداری کنید.
نتیجه
در این مقاله ، آموختید که چگونه نقشه های منبع می توانند کد منتقل شده شما را برای اولین بار در تولید راحت تر اشکال زدایی کنند. از آنجا که ابزارهای ساخت شما احتمالاً از تولید نقشه منبع پشتیبانی می کنند ، پیکربندی آن خیلی طولانی نخواهد بود و نتایج حاصل بسیار ارزش این کار را دارد.

 

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

استفاده از nsh برای دستورات از راه دور اوبونتو 18 –  میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18  –  ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4  –  ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta –  ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) –  با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django –  دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express  –  با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید  –  ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع  –  می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta  –   مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL  –  ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور  –  احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel  –  ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan  –  استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue  –  ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو  –  ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express  –  ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18  –  تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8  –  استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18  –  نصب Linux، Nginx، MariaDB،PHP در Debian 10

 

 

کلمات کلیدی خرید سرور

خرید vps – خرید سرور مجازی – خرید سرور – سرور هلند – فروش vps – سرور مجازی آمریکا – خریدvps – سرور مجازی هلند – فروش سرور مجازی – سرور آمریکا – vps – سرور مجازی انگلیس – سرور مجازی آلمان – سرور مجازی کانادا – خرید vps آمریکا – خرید وی پی اس – سرور – خرید سرور مجازی هلند – vps خرید – سرور مجازی فرانسه – سرور مجازی هلند – خرید vps آمریکا – خرید سرور مجازی ارزان هلند – vps – خرید vps هلند – خرید سرور مجازی آمریکا – خرید vps فرانسه – تست vps – سرور مجازی تست – سرور مجازی ویندوز – ارزانترین vps – خرید وی پی اس – vps ارزان – 

 

برچسب‌ها:CafeScript, Google Closure, SourceMappingURL, transpilers, TypeScript, UglifyJS

استفاده از ویژوال استودیو از راه دور

مقدمه
در طی چند سال گذشته ، Docker به لطف نحوه ساده سازی و اجرای برنامه ها در کانتینرهای زودگذر ، به یک راه حل متداول برای استقرار برنامه های کاربردی تبدیل شده است. به عنوان مثال ، هنگام استفاده از یک پشته برنامه LEMP ، با PHP ، Nginx ، MySQL و چارچوب Laravel ،Docker می تواند روند تنظیم را بطور قابل توجهی ساده کند.
Docker Compose با اجازه دادن به توسعه دهندگان ، برای معرفی زیرساخت های خود از جمله خدمات برنامه ، شبکه ها و حجم ها را در یک فایل واحد ، فرایند توسعه را ساده تر کرده است. Docker Compose یک گزینه جایگزین کارآمد برای اجرای چندین دستور docker container create و docker container run ارائه می دهد.
در این آموزش شما یک برنامه وب با استفاده از چارچوب Laravel ایجاد می کنید ، و Nginx به عنوان وب سرور مجازی و MySQL به عنوان بانک اطلاعات ، همه در داخل کانتینرهای Dockerشما قرار دارند. کل پیکربندی پشته را در یک فایل docker-compose ، همراه با فایل های پیکربندی برای PHP ، MySQL و Nginx تعریف خواهید کرد.
پیش نیازها
قبل از شروع ، به موارد زیر نیاز دارید:
⦁ یک سرور Ubuntu 18.04 و یک کاربر غیر ریشه با امتیازات sudo. برای انجام این تنظیمات ، راه اندازی سرور اولیه را با آموزش اوبونتو 18.04 دنبال کنید.
⦁ Docker نصب شده ، طبق مراحل 1 و 2 نحوه نصب و استفاده از Docker در اوبونتو 18.04.
⦁ Docker Compose نصب شده طبق مرحله 1 نحوه نصب Docker Compose در اوبونتو 18.04.
مرحله 1 – دانلود Laravel و نصب متعلقات
به عنوان اولین مرحله ، آخرین نسخه Laravel را گرفته و متعلقات مربوط به پروژه از جمله Composer ، یعنی مدیر بسته برنامه های کاربردی برای PHP را نصب می کنیم. ما این متعلقات را با Docker نصب خواهیم کرد تا از نصب Composer در سطح جهانی جلوگیری کنید.
ابتدا بررسی کنید که در دیرکتوری هوم خود قرار دارید و آخرین نسخه Laravel را به دیرکتوری به نام laravel-app کلون کنید:
⦁ $ cd ~
⦁
⦁ $ git clone https://github.com/laravel/laravel.git laravel-app

به دیرکتوری laravel-app بروید:
⦁ $ cd ~/laravel-app
⦁
در مرحله بعدی ، از تصویر composer Docker برای سوار کردن دایرکتوری هایی که برای پروژه Laravel نیاز دارند استفاده کنید و از نصب composer در سطح جهانی جلوگیری کنید:
⦁ $ docker run –rm -v $(pwd):/app composer install
⦁
استفاده از فلگ های -v و – rm با اجرای docker run ، کانتینری زودگذر ایجاد می کند که قبل از حذف ، به دیرکتوری فعلی شما وصل خواهد شد. با این کار محتویات دیرکتوری ~ / laravel-app خود را در کانتینر کپی می کنید و همچنین اطمینان حاصل می کنید که پوشه vendor کامپوزر که در داخل کانتینر ایجاد شده در دیرکتوری فعلی شما کپی می شود.
به عنوان مرحله آخر ، مجوزها را در دایرکتوری پروژه تنظیم کنید تا متعلق به کاربر غیر ریشه شما باشد:
⦁ $ sudo chown -R $USER:$USER ~/laravel-app
⦁
این مسئله هنگامی که Dockerfile را برای تصویر برنامه خود در مرحله 4 می نویسید مهم خواهد بود ، زیرا به شما امکان می دهد با کد برنامه خود کار کنید و فرآیندهای موجود در کانتینر خود را به عنوان کاربر غیر ریشه اجرا کنید.
با استفاده از کد برنامه خود می توانید در تعریف خدمات خود با Docker Compose پیش بروید.
مرحله 2 – ایجاد فایل Docker Compose
ساخت برنامه های کاربردی خود با Docker Compose روند تنظیم و نسخه سازی زیرساخت های شما را ساده می کند. برای راه‌اندازی برنامه Laravel ، ما یک فایل docker-compose را برای معرفی سرور مجازی ، بانک اطلاعاتی و خدمات برنامه خود خواهیم نوشت.
فایل را باز کنید:
⦁ $ nano ~/laravel-app/docker-compose.yml
⦁
در فایل docker-compose ، شما سه سرویس را تعریف خواهید کرد: app ، webserver و db. کد زیر را به فایل اضافه کنید ، حتماً رمز اصلی را برای MYSQL_ROOT_PASSWORD که به عنوان یک متغیر محیط تحت سرویس db تعریف شده است ، با یک رمز عبور قوی به انتخاب خود جایگزین کنید:
~/laravel-app/docker-compose.yml
version: ‘3’
services:

#PHP Service
app:
build:
context: .
dockerfile: Dockerfile
image: vpsgol.net/php
container_name: app
restart: unless-stopped
tty: true
environment:
SERVICE_NAME: app
SERVICE_TAGS: dev
working_dir: /var/www
networks:
– app-network

#Nginx Service
webserver:
image: nginx:alpine
container_name: webserver
restart: unless-stopped
tty: true
ports:
– “80:80”
– “443:443”
networks:
– app-network

#MySQL Service
db:
image: mysql:5.7.22
container_name: db
restart: unless-stopped
tty: true
ports:
– “3306:3306”
environment:
MYSQL_DATABASE: laravel
MYSQL_ROOT_PASSWORD: your_mysql_root_password
SERVICE_TAGS: dev
SERVICE_NAME: mysql
networks:
– app-network

#Docker Networks
networks:
app-network:
driver: bridge

خدمات تعریف شده در اینجا شامل موارد زیر است:
⦁ app: این تعریف سرویس شامل برنامه Laravel است و یک تصویر Docker سفارشی ، vpsgol.net/php را اجرا می کند ، که در مرحله 4 آن را تعریف خواهید کرد. این کار همچنین work_dir را در کانتینر برابر / var / www قرار میدهد.
⦁ Webserver: این تعریف سرویس تصویر nginx: alpine را از Docker میگیرد و پورت های 80 و 443 را در معرض دید شما قرار می دهد.
⦁ Db: این تعریف سرویس ، تصویر mysql: 5.7.22 را از Docker گرفته و چند متغیر محیطی از جمله پایگاه داده ای به نام laravel را برای برنامه شما و رمز عبور اصلی برای پایگاه داده تعریف می کند. شما می توانید بانک اطلاعاتی را هر چه می خواهید ، بنامید و باید کلمه عبور your_mysql_root_pass را با رمزعبور قوی خود جایگزین کنید. این تعریف سرویس همچنین پورت 3306 روی هاست به پورت 3306 روی کانتینر نگاشت می کند.
هر یک از ویژگی های container_name یک نام برای کانتینر تعریف می کند ، که با نام سرویس مطابقت دارد. اگر این ویژگی را تعریف نکنید ، Docker با ترکیب یک نام مشهور از نظر تاریخی و یک کلمه تصادفی که با آندرلاین جدا شده است ، به هر کانتینر یک نام می دهد.
برای تسهیل ارتباط بین کانتینرها ، سرویس ها به شبکه پلی به نام app-network وصل می شوند. یک شبکه پلی از یک پل نرم افزاری استفاده می کند که به کانتینرهای متصل به یک شبکه پلی اجازه می دهد تا با یکدیگر ارتباط برقرار کنند. درایور پل به طور خودکار قوانینی را در دستگاه هاست نصب می کند تا کانتینرها در شبکه های مختلف پل نتوانند مستقیماً با یکدیگر ارتباط برقرار کنند. این باعث می شود سطح امنیتی بیشتری برای برنامه ها ایجاد شود و اطمینان حاصل شود که فقط خدمات مرتبط می توانند با یکدیگر ارتباط برقرار کنند. همچنین این امکان وجود دارد که بتوانید چندین شبکه و سرویس متصل به توابع مرتبط را تعریف کنید: به عنوان مثال سرویس های برنامه front-end می توانند از یک شبکه frontend ، و سرویس های back-end می توانند از یک شبکه backend استفاده کنند.
بیایید ببینیم که چگونه می توان حجم ها را اضافه کرد و نصب ها را به تعاریف سرویس خود اضافه کرد تا داده های برنامه شما ثابت شود
مرحله 3 – داده های ماندگار
Docker دارای ویژگی های قدرتمند و مناسبی برای داده های پایدار است. در برنامه ما از volumes و bind mounts  برای پایداری پایگاه داده و فایلهای برنامه و پیکربندی استفاده خواهیم کرد. volumes قابلیت انعطاف پذیری را برای تهیه نسخه پشتیبان و ماندگاری فراتر از چرخه حیات یک کانتینر ارائه می دهند ، در حالی که bind mounts باعث تغییر کد در طول توسعه می شوند و تغییراتی را در فایل ها یا دایرکتوری های هاست شما ایجاد می کنند که فوراً در کانتینرهای شما موجود است. ستاپ ما از هر دو استفاده خواهد کرد.
هشدار: با استفاده از bind mounts، می توانید سیستم فایل هاست را از طریق فرآیندهای در حال اجرا در یک کانتینر ، از جمله ایجاد ، اصلاح یا حذف فایل های مهم سیستم یا دایرکتوری ها ، تغییر دهید. این یک توانایی قدرتمند با پیامدهای امنیتی است و می تواند فرآیندهای غیر Docker را روی سیستم میزبان تحت تأثیر بگذارد. با دقت از bind mounts استفاده کنید.

در فایل docker-compose ، یک والیوم به نام dbdata را تحت تعریف سرویس db تعریف کنید تا پایگاه داده MySQL را ماندگار کنید:
~/laravel-app/docker-compose.yml
…
#MySQL Service
db:
…
volumes:
– dbdata:/var/lib/mysql
networks:
– app-network
…

والیوم به نام dbdata ، محتوای پوشه / var / lib / mysql موجود در داخل کانتینر را ادامه می دهد. این به شما امکان می دهد سرویس db را بدون از دست دادن داده متوقف کرده و مجدداً راه اندازی کنید.
در انتهای فایل ، تعریف مربوط به حجم dbdata را اضافه کنید:
~/laravel-app/docker-compose.yml
…
#Volumes
volumes:
dbdata:
driver: local

با استفاده از این تعریف ، می توانید از این حجم در سرویس ها استفاده کنید.
در مرحله بعد ، یک bind mount به سرویس db برای فایل های پیکربندی MySQL که در مرحله 7 ایجاد خواهید کرد اضافه کنید:
~/laravel-app/docker-compose.yml
…
#MySQL Service
db:
…
volumes:
– dbdata:/var/lib/mysql
– ./mysql/my.cnf:/etc/mysql/my.cnf
…

این bind mount ، ~ / laravel-app / mysql / my.cnf را به /etc/mysql/my.cnf در کانتینر متصل می کند.
سپس ، bind mount را به سرویس webserver اضافه کنید. دو مورد وجود دارد: یکی برای کد برنامه شما و دیگری برای تعریف پیکربندی Nginx که در مرحله 6 ایجاد خواهید کرد:
~/laravel-app/docker-compose.yml
#Nginx Service
webserver:
…
volumes:
– ./:/var/www
– ./nginx/conf.d/:/etc/nginx/conf.d/
networks:
– app-network

اولین bind mount کد برنامه را در دیرکتوری ~ / laravel-app به دیرکتوری / var / www داخل کانتینر وصل می کند. فایل پیکربندی که به ~ / laravel-app / nginx / conf.d / اضافه خواهید کرد نیز در / enc/nginx/conf.d/ در کانتینر نصب می شود و به شما امکان می دهد تا در صورت لزوم محتوای دیرکتوری تنظیمات را اضافه کنید یا تغییر دهید. .
در آخر ، bind mount زیر را برای کد برنامه و فایل های پیکربندی به سرویس app اضافه کنید:
~/laravel-app/docker-compose.yml
#PHP Service
app:
…
volumes:
– ./:/var/www
– ./php/local.ini:/usr/local/etc/php/conf.d/local.ini
networks:
– app-network

سرویس app پوشه var / laravel-app ، که شامل کد برنامه است را به پوشه / var / www موجود در کانتینر وصل می شود. این کار روند توسعه را سرعت می بخشد ، زیرا هرگونه تغییر در دیرکتوری برنامه محلی شما فوراً داخل کانتینر منعکس می شود. همچنین فایل پیکربندی PHP خود، ~ / laravel-app / php / local.ini ، را به /usr/local/etc/php/conf.d/local.ini در داخل کانتینر اتصال می دهید. در مرحله 5 فایل پیکربندی PHP محلی را ایجاد خواهید کرد.
فایل docker-compose شما اکنون چنین خواهد بود:
~/laravel-app/docker-compose.yml
version: ‘3’
services:

#PHP Service
app:
build:
context: .
dockerfile: Dockerfile
image: vpsgol.net/php
container_name: app
restart: unless-stopped
tty: true
environment:
SERVICE_NAME: app
SERVICE_TAGS: dev
working_dir: /var/www
volumes:
– ./:/var/www
– ./php/local.ini:/usr/local/etc/php/conf.d/local.ini
networks:
– app-network

#Nginx Service
webserver:
image: nginx:alpine
container_name: webserver
restart: unless-stopped
tty: true
ports:
– “80:80”
– “443:443”
volumes:
– ./:/var/www
– ./nginx/conf.d/:/etc/nginx/conf.d/
networks:
– app-network

#MySQL Service
db:
image: mysql:5.7.22
container_name: db
restart: unless-stopped
tty: true
ports:
– “3306:3306”
environment:
MYSQL_DATABASE: laravel
MYSQL_ROOT_PASSWORD: your_mysql_root_password
SERVICE_TAGS: dev
SERVICE_NAME: mysql
volumes:
– dbdata:/var/lib/mysql/
– ./mysql/my.cnf:/etc/mysql/my.cnf
networks:
– app-network

#Docker Networks
networks:
app-network:
driver: bridge
#Volumes
volumes:
dbdata:
driver: local

پس از اتمام ایجاد تغییرات ، فایل را ذخیره کنید و از ویرایشگر خود خارج شوید.
با نوشتن فایل docker-compose ، اکنون می توانید تصویر دلخواه خود را برای برنامه خود بسازید.
مرحله 4 – ایجاد Dockerfile
Docker به شما امکان می دهد محیط داخلی کانتینرهای منفرد را با Dockerfile مشخص کنید. Dockerfile به شما امکان می دهد تصاویر سفارشی ایجاد کنید که می توانید از آنها برای نصب نرم افزار مورد نیاز برنامه تان استفاده کنید و تنظیمات را بر اساس نیاز خود انجام دهید. می توانید تصاویر سفارشی را که ایجاد می کنید به Docker Hub یا هرگونه رجیستری خصوصی وارد کنید.
Dockerfile ما در دیرکتوری ~ / laravel-app قرار خواهد گرفت. فایل را ایجاد کنید:
⦁ $ nano ~/laravel-app/Dockerfile
⦁
این Dockerfile تصویر پایه را تنظیم کرده و فرمان ها و دستورالعمل های لازم را برای ساخت تصویر برنامه Laravel مشخص می کند. کد زیر را به فایل اضافه کنید:
~/laravel-app/php/Dockerfile
FROM php:7.2-fpm

# Copy composer.lock and composer.json
COPY composer.lock composer.json /var/www/

# Set working directory
WORKDIR /var/www

# Install dependencies
RUN apt-get update && apt-get install -y \
build-essential \
libpng-dev \
libjpeg62-turbo-dev \
libfreetype6-dev \
locales \
zip \
jpegoptim optipng pngquant gifsicle \
vim \
unzip \
git \
curl

# Clear cache
RUN apt-get clean && rm -rf /var/lib/apt/lists/*

# Install extensions
RUN docker-php-ext-install pdo_mysql mbstring zip exif pcntl
RUN docker-php-ext-configure gd –with-gd –with-freetype-dir=/usr/include/ –with-jpeg-dir=/usr/include/ –with-png-dir=/usr/include/
RUN docker-php-ext-install gd

# Install composer
RUN curl -sS https://getcomposer.org/installer | php — –install-dir=/usr/local/bin –filename=composer

# Add user for laravel application
RUN groupadd -g 1000 www
RUN useradd -u 1000 -ms /bin/bash -g www www

# Copy existing application directory contents
COPY . /var/www

# Copy existing application directory permissions
COPY –chown=www:www . /var/www

# Change current user to www
USER www

# Expose port 9000 and start php-fpm server
EXPOSE 9000
CMD [“php-fpm”]

ابتدا Dockerfile تصویری را در بالای تصویر php: 7.2-fpm Docker ایجاد می کند. این یک تصویر مبتنی بر دبیان است که پیاده سازی PHP FastCGI PHP-FPM را نصب کرده است. این فایل همچنین بسته‌های پیش نیاز لاراول را نصب می کند: mcrypt ، pdo_mysql ، mbstring و imagick با composer.
دستورالعمل RUN دستورات را برای به روزرسانی ، نصب و پیکربندی تنظیمات درون کانتینر از جمله ایجاد یک کاربر و گروه اختصاصی به نام www مشخص می کند. دستورالعمل WORKDIR دیرکتوری / var / www را به عنوان دایرکتوری کاربری برنامه مشخص می کند.
ایجاد یک کاربر و گروه اختصاصی با مجوزهای محدود ، آسیب پذیری ذاتی هنگام اجرای کانتینرهای Docker را کاهش می دهد ، که به صورت پیش فرض به عنوان root اجرا می شود. ما به جای اینکه این کانتینر را به عنوان ریشه اجرا کنیم ، کاربر www را ایجاد کرده ایم که به لطف دستورالعمل COPY که با فلگ –chown برای پرینت مجوزهای پوشه برنامه استفاده می کنیم ، دسترسی خواندن / نوشتن به پوشه / var / www را دارد.
سرانجام ، دستور EXPOSE درگاهی را در کانتینر 9000 در اختیار سرور مجازی php-fpm قرار می دهد. CMD فرمانی را که باید هنگام ایجاد کانتینر ، اجرا شود ، مشخص می کند. در اینجا ، CMD “php-fpm” را مشخص می کند ، که سرور مجازی را شروع می کند.
فایل را ذخیره کنید و هنگام پایان تغییرات ، از ویرایشگر خود خارج شوید.
اکنون می توانید پیکربندی PHP خود را تغییر دهید.
مرحله 5 – پیکربندی PHP
اکنون که زیرساخت خود را در فایل docker-compose تعریف کرده اید ، می توانید سرویس PHP را پیکربندی کنید تا به عنوان پردازنده PHP برای درخواست های دریافتی از Nginx عمل کند.
برای پیکربندی PHP ، فایل local.ini را در پوشه php ایجاد خواهید کرد. این فایلی است که شما در مرحله 2 به /usr/local/etc/php/conf.d/local.ini در داخل کانتینر وصل کرده اید. ایجاد این فایل به شما امکان می دهد فایل پیش فرض php.ini را که PHP هنگام شروع خوانده است، باطل کنید.
دایرکتوری php ایجاد کنید:
⦁ $ mkdir ~/laravel-app/php
⦁

سپس ، فایل local.ini را باز کنید:
⦁ $ nano ~/laravel-app/php/local.ini
⦁

برای نشان دادن نحوه پیکربندی PHP ، ما کد زیر را برای تعیین محدودیت های اندازه برای فایل های بارگذاری شده اضافه خواهیم کرد:
~/laravel-app/php/local.ini
upload_max_filesize=40M
post_max_size=40M

دستور العمل های upload_max_filesize و post_max_size حداکثر اندازه مجاز را برای فایل های آپلود شده تعیین می کنند ، و نشان می دهد که چگونه می توانید پیکربندی های php.ini را از فایل local.ini خود تنظیم کنید. می توانید هر پیکربندی مخصوص PHP را که می خواهید در فایل local.ini باطل کنید.
فایل را ذخیره کنید و از ویرایشگر خود خارج شوید.
با استفاده از فایل local.ini در PHP ، می توانید به پیکربندی Nginx بروید.
مرحله 6 – پیکربندی Nginx
با پیکربندی سرویس PHP ، می توانید سرویس Nginx را تغییر دهید تا از PHP-FPM به عنوان سرور مجازی FastCGI برای ارائه محتوای پویا استفاده کنید. سرور مجازی FastCGI بر پایه یک پروتکل دودویی برای ارتباط بین برنامه های تعاملی با یک سرور مجازی وب میباشد. برای اطلاعات بیشتر ، لطفا به این مقاله در مورد درک و اجرای Proxying FastCGI در Nginx مراجعه کنید.
برای پیکربندی Nginx ، یک فایل app.conf را با پیکربندی سرویس در پوشه ~ / laravel-app / nginx / conf.d / ایجاد خواهید کرد.
ابتدا دیرکتوری nginx / conf.d / را ایجاد کنید:
⦁ $ mkdir -p ~/laravel-app/nginx/conf.d
⦁
سپس ، فایل پیکربندی app.conf را ایجاد کنید:
⦁ $ nano ~/laravel-app/nginx/conf.d/app.conf
⦁
برای مشخص کردن پیکربندی Nginx ، کد زیر را به فایل اضافه کنید:
~/laravel-app/nginx/conf.d/app.conf
server {
listen 80;
index index.php index.html;
error_log /var/log/nginx/error.log;
access_log /var/log/nginx/access.log;
root /var/www/public;
location ~ \.php$ {
try_files $uri =404;
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass app:9000;
fastcgi_index index.php;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PATH_INFO $fastcgi_path_info;
}
location / {
try_files $uri $uri/ /index.php?$query_string;
gzip_static on;
}
}

بلوک سرور مجازی پیکربندی وب سرور مجازی Nginx را با دستورالعمل های زیر تعریف می کند:
⦁ listen: این دستورالعمل پورتی را که سرور مجازی به درخواستهای دریافتی گوش می دهد تعریف می کند.
⦁ error_log و access_log: این دستورالعمل ها فایل ها را برای نوشتن ورودها مشخص می کنند.
⦁ Root: این دستورالعمل مسیر پوشه root را تشکیل می دهد ، و مسیر کاملی را برای هر فایل درخواست شده در سیستم فایل محلی تشکیل می دهد.
در بلوک محل php ، دستورالعمل fastcgi_pass مشخص می کند که سرویس app در حال شنود سوکت TCP در پورت 9000 است. این باعث می شود سرور مجازی PHP-FPM به جای یک سوکت یونیکس از طریق شبکه گوش کند. اگرچه یک سوکت یونیکس نسبت به سوکت TCP از سرعت کمی برخوردار است ، اما پروتکل شبکه ندارد و بنابراین پشته شبکه را از دست می دهد. برای مواردی که هاست ها در یک دستگاه قرار دارند ، سوکت یونیکس ممکن است معنا پیدا کند ، اما در مواردی که شما دارای سرویس هایی هستید که روی هاست های مختلفی کار می کنند ، یک سوکت TCP این مزیت را دارد که به شما امکان اتصال به سرویس های توزیع شده را می دهد. از آنجا که کانتینر برنامه ما روی یک هاست متفاوت از کانتینرهای وب سرور مجازی ما اجرا می شود ، یک سوکت TCP برای پیکربندی ما معقول تر است.
پس از اتمام ایجاد تغییرات ، فایل را ذخیره کنید و از ویرایشگر خود خارج شوید.
به لطف bind mount که در مرحله 2 ایجاد کردید ، هرگونه تغییر در داخل nginx / conf.d / پوشه مستقیماً درون کانتینر سرور مجازی منعکس می شود.
در مرحله بعدی ، بیایید تنظیمات MySQL ما را بررسی کنیم.
مرحله 7 – پیکربندی MySQL
با پیکربندی PHP و Nginx ، می توانید MySQL را فعال کنید تا به عنوان بانک اطلاعاتی برنامه تان عمل کند.
برای پیکربندی MySQL ، فایل my.cnf را در پوشه mysql ایجاد خواهید کرد. این فایلی است که شما در مرحله 2 به /etc/mysql/my.cnf داخل کانتینر وصل کرده اید. این bind mount به شما امکان می دهد تنظیمات my.cnf را در صورت لزوم باطل کنید.
برای نشان دادن نحوه کار این ، تنظیمات را به فایل my.cnf اضافه خواهیم کرد که ورود درخواست عمومی را فعال می کند و فایل ورود را مشخص می کند.
ابتدا دایرکتوری mysql را ایجاد کنید:
⦁ $ mkdir ~/laravel-app/mysql
⦁
سپس ، فایل my.cnf را ایجاد کنید:
⦁ $ nano ~/laravel-app/mysql/my.cnf
⦁
در این فایل ، کد زیر را اضافه کنید تا گزارش ورود فعال شود و محل فایل log را تنظیم کنید:
~/laravel-app/mysql/my.cnf
[mysqld]
general_log = 1
general_log_file = /var/lib/mysql/general.log

این فایل my.cnf گزارش ها را فعال می سازد ، تنظیمات General_log را به روی 1 تعریف می کند تا اجازه ورود به سیستم های عمومی را بدهد. تنظیمات General_log_file مکان های ذخیره log ها را مشخص می کند.
فایل را ذخیره کنید و از ویرایشگر خود خارج شوید.
قدم بعدی ما شروع به کار کانتینرها خواهد بود.
مرحله 8 – اصلاح تنظیمات محیط و اجرای کانتینرها
اکنون که همه خدمات خود را در فایل docker-compose خود تعریف کرده اید و فایل های پیکربندی را برای این سرویس ها ایجاد کرده اید ، می توانید کانتینرهای را شروع کنید. با این حال ، به عنوان آخرین مرحله ، از فایل .env.example کپی تهیه خواهیم کرد که Laravel به طور پیش فرض آن را دارد و نام آن کپی را.env را میگذاریم، که فایلی است که Laravel انتظار دارد محیط آن را تعریف کند:
⦁ $ cp .env.example .env
⦁
اکنون می توانید فایل .env را در کانتینر برنامه تغییر دهید تا جزئیات خاصی در مورد راه اندازی شما را شامل شود.
فایل را با استفاده از nano یا ویرایشگر متن مورد نظر خود باز کنید:
⦁ $ nano .env
⦁
بلوکی را پیدا کنید که DB_CONNECTION را مشخص می کند و آن را به روز کنید تا مشخصات ستاپ شما را منعکس کند. زمینه های زیر را تغییر خواهید داد:
⦁ DB_HOST : کانتینر پایگاه داده db شما خواهد بود.
⦁ DB_DATABASE : پایگاه داده laravel خواهد بود.
⦁ DB_USERNAME : نام کاربری خواهد بود که شما برای پایگاه داده خود استفاده خواهید کرد. در این حالت از laraveluser استفاده خواهیم کرد.
⦁ DB_PASSWORD : رمز عبور ایمنی خواهد بود که می خواهید برای این حساب کاربری استفاده کنید.

/var/www/.env
DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=laraveluser
DB_PASSWORD=your_laravel_db_password

تغییرات خود را ذخیره کنید و از ویرایشگر خود خارج شوید.
با تعریف تمام سرویس های خود در فایل docker-compose، فقط باید یک فرمان واحد صادر کنید تا همه کانتینرهای را شروع کنید ، حجم ها را ایجاد کنید و شبکه ها را تنظیم کنید:
⦁ $ docker-compose up -d
⦁
هنگامی که برای اولین بار docker-composerی را اجرا می کنید ، تمام تصاویر لازم Docker را دانلود می کند ، که ممکن است مدتی طول بکشد. پس از دانلود تصاویر و ذخیره شدن در دستگاه محلی شما ، composer کانتینرهای شما را ایجاد می کند. فلگ -d فرایند را فریبنده می کند ، کانتینرهای شما را در پس زمینه اجرا می کند.
پس از اتمام فرآیند ، از فرمان زیر برای لیست تمام کانتینرهای در حال اجرا استفاده کنید:
⦁ $ docker ps
⦁
خروجی زیر را با جزئیات مربوط به کانتینرهای app ، webserver و db مشاهده خواهید کرد:
Output
CONTAINER ID NAMES IMAGE STATUS PORTS
c31b7b3251e0 db mysql:5.7.22 Up 2 seconds 0.0.0.0:3306->3306/tcp
ed5a69704580 app vpsgol.net/php Up 2 seconds 9000/tcp
5ce4ee31d7c0 webserver nginx:alpine Up 2 seconds 0.0.0.0:80->80/tcp, 0.0.0.0:443->443/tcp

ID CONTAINER در این خروجی یک شناسه منحصر به فرد برای هر کانتینر است ، در حالی که NAMES نام سرویس مربوط به هر یک را لیست می کند. برای دسترسی به کانتینرها می توانید از هر دو این شناسه استفاده کنید. IMAGE نام هر تصویر را برای هر کانتینر تعریف می کند ، در حالی که STATUS اطلاعاتی در مورد وضعیت کانتینر ارائه می دهد: چه در حال اجرا ، راه اندازی مجدد یا توقف باشد.
اکنون برای تنظیم کلید برنامه برنامه Laravel از docker-compose exec استفاده خواهیم کرد. دستور docker-compose exec به شما امکان می دهد دستورات خاصی را در کانتینرها اجرا کنید.
دستور زیر یک کلید تولید می کند و آن را در فایل .env شما کپی می کند ، اطمینان حاصل کنید که بخش های کاربر و داده های رمزگذاری شده شما ایمن باقی می مانند :
⦁ $ docker-compose exec app php artisan key:generate
⦁
اکنون تنظیمات محیطی لازم برای اجرای برنامه خود را دارید. برای ذخیره این تنظیمات در یک فایل ، که باعث افزایش سرعت بارگذاری برنامه شما می شود ، این دستور را اجرا کنید:
⦁ $ docker-compose exec app php artisan config:cache
⦁
تنظیمات پیکربندی شما در /var/www/bootstrap/cache/config.php روی کانتینر لود می شود.
به عنوان مرحله آخر ، از http: // your_server_ip در مرورگر بازدید کنید. صفحه اصلی برنامه کاربردی Laravel خود را مشاهده خواهید کرد:

با فعال شدن کانتینرها و اطلاعات پیکربندی شده خود ، می توانید پیکربندی اطلاعات کاربر خود را برای پایگاه داده Laravel موجود در کانتینر db پیش ببرید.
مرحله 9 – ایجاد یک کاربر برای MySQL
نصب پیش فرض MySQL فقط باعث ایجاد حساب کاربری ریشه ای می شود که دارای امتیازات نامحدودی در سرور مجازی پایگاه داده است. به طور کلی ، بهتر است هنگام تعامل با بانک اطلاعاتی ، از استفاده از حساب ادمین ریشه خودداری کنید. در عوض ، یک کاربر پایگاه داده اختصاصی برای بانک اطلاعاتی Laravel برنامه خود ایجاد کنیم.
برای ایجاد یک کاربر جدید ، یک پوسته تعاملی bash را در کانتینر db با docker-compose اجرا کنید:
⦁ $ docker-compose exec db bash
⦁
داخل کانتینر ، وارد حساب ادمین ریشه MySQL شوید:
⦁ root@c31b7b3251e0:/# mysql -u root -p
⦁

هنگام نصب در فایل docker-compose از شما گذرواژه‌ای که برای حساب root MySQL تعیین کرده اید خواسته میشود.
کار را با بررسی بانک اطلاعاتی به نام laravel که در فایل docker-compose خود تعریف کرده اید ، شروع کنید. فرمان show databases را برای بررسی پایگاه های داده موجود اجرا کنید:
⦁ mysql> show databases;
⦁
بانک اطلاعاتی laravel که در خروجی لیست شده است را مشاهده خواهید کرد:
Output
+——————–+
| Database |
+——————–+
| information_schema |
| laravel |
| mysql |
| performance_schema |
| sys |
+——————–+
5 rows in set (0.00 sec)

در مرحله بعد ، حساب کاربری ایجاد کنید که اجازه دسترسی به این پایگاه داده را داشته باشد. نام کاربری ما Laraveluser خواهد بود ، اگرچه در صورت دلخواه میتوانید این نام را با نام دیگری جایگزین کنید. فقط مطمئن شوید که نام کاربری و رمزعبور شما در اینجا با جزئیاتی که در فایل .env خود در مرحله قبل تعیین کرده اید مطابقت داشته باشد:
⦁ mysql> GRANT ALL ON laravel.* TO ‘laraveluser’@’%’ IDENTIFIED BY ‘your_laravel_db_password’;
⦁
امتیازات را برای اطلاع دادن به سرور مجازی MySQL در مورد تغییرات خالی کنید:
⦁ mysql> FLUSH PRIVILEGES;
⦁
از MySQL خارج شوید:
⦁ mysql> EXIT;
⦁
در آخر ، از کانتینر خارج شوید:
⦁ root@c31b7b3251e0:/# exit
⦁

شما حساب کاربری را برای پایگاه داده برنامه Laravel خود پیکربندی کرده اید و آماده انتقال اطلاعات خود و کار با کنسول Tinker هستید.
مرحله 10 – انتقال داده ها و کار با کنسول Tinker
با اجرای برنامه ، می توانید داده های خود را انتقال داده و با دستور tinker آزمایش کنید ، که یک کنسول PsySH دارای Laravel از پیش لود شده است. PsySH یک کنسول توسعه دهنده زمان اجزا و یک اشکال زدای تعاملی برای PHP است و Tinker یک REPL مخصوص Laravel است. استفاده از دستور tinker به شما امکان می دهد تا با برنامه Laravel خود از خط فرمان در یک پوسته تعاملی ارتباط برقرار کنید.
ابتدا اتصال به MySQL را با اجرای دستور artisan Laravel که از داخل کانتینر یک جدول migrations در پایگاه داده ایجاد می کند ، آزمایش نمایید:
⦁ $ docker-compose exec app php artisan migrate
⦁
این دستور جداول پیش فرض Laravel را منتقل می کند. خروجی تأیید جا به جایی به شرح زیر است:
Output

Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated: 2014_10_12_000000_create_users_table
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated: 2014_10_12_100000_create_password_resets_table

پس از پایان نقل و انتقال ، می توانید یک درخواست اجرا کنید تا بررسی کنید که آیا به درستی با استفاده از دستور tinker به بانک اطلاعاتی وصل شده اید یا خیر:
⦁ $ docker-compose exec app php artisan tinker

اتصال MySQL را با دریافت داده هایی که اخیراً جا به جا کرده اید ، آزمایش کنید:
⦁ <<< \DB::table(‘migrations’)->get();
⦁
خروجی را مشاهده خواهید کرد که به شکل زیر است:
Output
=> Illuminate\Support\Collection {#2856
all: [
{#2862
+”id”: 1,
+”migration”: “2014_10_12_000000_create_users_table”,
+”batch”: 1,
},
{#2865
+”id”: 2,
+”migration”: “2014_10_12_100000_create_password_resets_table”,
+”batch”: 1,
},
],
}

برای تعامل با بانکهای اطلاعاتی خود و آزمایش سرویس ها و مدلها می توانید از tinker استفاده کنید.
با استفاده از برنامه Laravel در محل خود ، آماده توسعه و آزمایش بیشتر هستید.
نتیجه
اکنون یک برنامه پشته LEMP دارید که روی سرور مجازی تان در حال اجرا است که با دسترسی به صفحه استقبال Laravel و ایجاد جا به جایی در پایگاه داده MySQL ، آن را آزمایش کرده اید.
کلید سادگی این نصب Docker Compose است که به شما امکان می دهد گروهی از کانتینرهای Docker را که در یک فایل واحد تعریف شده، با یک دستور واحد ایجاد کنید. اگر دوست دارید درباره نحوه انجام CI با Docker Compose اطلاعات بیشتری کسب کنید به راهنمای پیکربندی یک محیط آزمایش یکپارچه سازی مداوم با Docker و Docker Compose در اوبونتو 16.04 نگاهی بیاندازید. اگر می خواهید روند استقرار برنامه Laravel خود را ساده تر کنید ، راهنمای چگونگی به کارگیری برنامه های کاربردی Laravel با Deployer در Ubuntu 16.04 ، منبع مرتبطی خواهد بود.

 

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

استفاده از nsh برای دستورات از راه دور اوبونتو 18 –  میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18  –  ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4  –  ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta –  ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) –  با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django –  دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express  –  با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید  –  ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع  –  می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta  –   مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL  –  ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور  –  احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel  –  ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan  –  استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue  –  ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو  –  ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express  –  ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18  –  تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8  –  استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18  –  نصب Linux، Nginx، MariaDB،PHP در Debian 10

 

 

کلمات کلیدی خرید سرور

خرید vps – خرید سرور مجازی – خرید سرور – سرور هلند – فروش vps – سرور مجازی آمریکا – خریدvps – سرور مجازی هلند – فروش سرور مجازی – سرور آمریکا – vps – سرور مجازی انگلیس – سرور مجازی آلمان – سرور مجازی کانادا – خرید vps آمریکا – خرید وی پی اس – سرور – خرید سرور مجازی هلند – vps خرید – سرور مجازی فرانسه – سرور مجازی هلند – خرید vps آمریکا – خرید سرور مجازی ارزان هلند – vps – خرید vps هلند – خرید سرور مجازی آمریکا – خرید vps فرانسه – تست vps – سرور مجازی تست – سرور مجازی ویندوز – ارزانترین vps – خرید وی پی اس – vps ارزان – 

 

برچسب‌ها:Docker, Docker Compose, LEMP, MySQL, Nginx, PHP

راه اندازی یک پروژه React با Parcel

مقدمه
وقتی صحبت از بسته نرم افزار وب است ، ParcelJS یک بسته نرم افزاری نسبتاً جدید است. Parcel خود را به عنوان یک مجموعه برنامه وب سریع و با پیکربندی صفر توصیف می کند.
Parcel بر این اساس کار میکند که ساختن برنامه های کاربردی با بسته های JavaScript می تواند آسان تر باشد. Webpack مسلماً محبوب ترین مجموعه در حال حاضر است ، که یک ابزار عالی میباشد و قدرت تنظیم را به شما می دهد. اما گاهی اوقات تنها چیزی که شما نیاز دارید یک ابزار حداقل است که به شما کمک کند در سریعترین زمان کار را شروع کنید.
این جاست که Parcel به کار می آید. Parcel خود را به عنوان یک ابزار سریع بسته بندی نرم افزاری با پیکربندی صفر تبلیغ می کند – تمام آنچه نیاز دارید اشاره روی آن در قسمت ورودی برنامه تان خواهد بود. Parcel همچنین ویژگی های زیر را ارائه می دهد:
• زمان سریع بسته بندی – Parcel به صورت قابل توجهی سریعتر از سایر ابزارهای بسته بندی است. در زیر تصویری از صفحه Parcel در Github آورده شده است.

• بسته بندی دارایی ها – Parcel شامل پشتیبانی خارج از جعبه برای دارایی های فایلی JS ، CSS ، HTML میباشد.
• تبدیل خودکار – تمام کدهای شما با استفاده از Babel ، PostCSS و PostHTML بطور خودکار تبدیل می شوند.
• تقسیم کد – Parcel به شما امکان می دهد تا بسته خروجی خود را با استفاده از import () dynmaic تقسیم کنید.
• جایگزینی ماژول دست اول (HMR) – همانطور که شما در طول توسعه تغییراتی ایجاد می کنید ، Parcel به طور خودکار ماژول ها را در مرورگر به روز می کند، و هیچگونه پیکربندی لازم نیست.
• ورود همراه با خطا – وقتی Parcel با خطا مواجه می شود ، فریم های کد برجسته شده دستور را چاپ می کند تا به شما در یافتن مشکل کمک کند.
نکته دیگری که در مورد Parcel باید به آن توجه کرد این است که برخلاف ماژول های JS به توسعه دهندگان این امکان را می دهد که از یک فایل index.html به عنوان نقطه ورود استفاده کنند.
در این آموزش یک برنامه React web را با Parcel تنظیم می کنید.
مرحله 1 – شروع کار با Parcel
برای شروع ، یک دیرکتوری کار جدید ایجاد کنید و با اجرای دستور زیر در ترمینال خود Parcel را نصب کنید:
⦁ $ npm install -g parcel-bundler
⦁
کار بعدی ایجاد فایل pack.json در دایرکتوری است. می توانید این کار را با اجرای دستور زیر انجام دهید:
⦁ $ npm init -y
⦁
این دستور یک package.jsonکاری برای شما تولید می کند.

ممکن است Parcel هر نوع فایلی را به عنوان نقطه ورود خود بپذیرد ، اما یک فایل HTML یا JavaScript نقطه مناسبی برای شروع است. اگر فایل اصلی JavaScript خود را در HTML با استفاده از یک مسیر نسبی پیوند می دهید ، Parcel نیز آن را برای شما پردازش می کند. فایل های index.html و index.js را ایجاد کرده و محتوای زیر را به آنها اضافه کنید:
index.html
<html>
<body>
<script src=”./index.js”></script>
</body>
</html>
Copy
index.js
console.log(“hello world”);

اکنون که فایل ها ایجاد شده اند ، شما آماده اجرای برنامه هستید. Parcel  با سرور مجازی توسعه ای همراه است که در آن به طور خودکار برنامه شما را با تغییر فایل ها بازسازی می کند و از جایگزینی ماژول دست اول برای توسعه سریع پشتیبانی می کند. برای اجرای برنامه ، دستور ترمینال زیر را اجرا کنید:
⦁ $ parcel index.html
⦁
اکنون می توانید http: // localhost: 1234 / را در مرورگر خود باز کرده و کنسول را برای خروجی در کنسول بررسی کنید.

مرحله 2 – تنظیم یک پروژه با Parcel  و React
در مرحله بعد شما یک پروژه React را با parcel تنظیم می کنید. قبل از ادامه ، باید برخی از متعلقات را نصب کنید:
⦁ $ npm i react
⦁
⦁ $ npm i react-dom
متعلقات بالا React و react-dom را در برنامه شما نصب می کند. از آنجا که React در ES6 نوشته شده است ، ما به راهی برای تغییر کد احتیاج خواهیم داشت. parcel این کار را برای شما بدون نیاز به تنظیمات انجام می دهد. تمام کاری که شما باید انجام دهید اینست که نصب تنظیمات اولیه را انجام دهید و parcel کار اصلی را برای شما انجام می دهد.
⦁ $ npm i babel-preset-env babel-preset-react –save-dev
⦁
پس از اتمام این کار ، یک فایل .babelrc ایجاد کرده و آن را با موارد زیر ویرایش کنید:
.babelrc
{
“presets”: [“env”, “react”]
}

اکنون Babel پیکربندی شده است تا ES6 / ES7 JavaScript را به یک مجموعهJavaScript با معنی برای مرورگرها تبدیل کند.
اکنون می توانید شروع به ایجاد برنامه React و مؤلفه های آن کنید. فایل index.html را باز کنید و آن را با کد زیر جایگزین کنید.
index.html
<!DOCTYPE html>
<html>
<head>
<title>React starter app</title>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css”>
</head>
<body>
<div id=”app”></div>
<script src=”./src/index.js”></script>
</body>
</html>

در مرحله بعد پوشه ای با عنوان src ایجاد کنید و در آن یک فایل index.js ایجاد کنید و آن را با موارد زیر ویرایش کنید:
src/index.js
import React from “react”;
import ReactDOM from “react-dom”;
import Header from ‘./components/Header’

class HelloMessage extends React.Component {
render() {
return <div>
<Header/>
<div className=”container”>
<h1>Hello {this.props.name}</h1>
</div>
</div>
}
}

let App = document.getElementById(“app”);

ReactDOM.render(<HelloMessage name=”Yomi” />, App);

این یک برنامه شروع اولیه React است. مؤلفه HelloMessage در فایل index.html در div با شناسه app ارائه می شود.
سپس ، یک مولفه Header ایجاد کنید. یک پوشه component ایجاد کنید و در آن ، یک فایل JS با عنوان Header.js ایجاد کنید و آن را با کد زیر ویرایش نمایید.
component/Header.js
import React from ‘react’
import ParcelLogo from “../img/parcel-logo.svg”;

const Header = () => (
<header>
<nav className=”navbar” role=”navigation” aria-label=”main navigation”>
<div className=”navbar-brand”>
<a className=”navbar-item” href=”/”>
<img width=”120″ src={ParcelLogo} alt=””/>
</a>
</div>
</nav>
</header>
)

export default Header

parcel همچنین از ورودی هایی مانند تصاویر پشتیبانی می کند. نکته دیگری که باید به آن توجه داشته باشید اینست که ، parcel همچنین با پشتیبانی SCSS نقل و انتقال انجام می دهد. برای استفاده از آن ، node-sass را نصب کنید:
⦁ $ npm i node-sass

پس از نصب node-sass ، می توانید فایل های SCSS را از فایل های JavaScript وارد کنید. در فایل index.js خود ، برای وارد کردن فایل SCSS ، خط کد زیر را در بالای فایل اضافه کنید:
index.js
import ‘./scss/app.scss’
…
همچنین بیایید فایل app.scss را نیز ایجاد کنیم. یک پوشه با عنوان scss ایجاد کنید و فایلی با عنوان app.scss آماده کنید و آن را با موارد زیر ویرایش کنید:
scss/app.scss
body {
background-color: #fefefe;
text-align: center;
.navbar {
background: #21374B;
color: #E7DACB;
height: 50px;
}
h1 {
font-size: 40px;
margin-top: 30px;
}
}

اکنون که تنظیم برنامه React را انجام داده اید ، آن را اجرا کنید و ببینید که آیا کار می کند یا خیر. برای انجام این کار ، باید یک سرور مجازی dev را راه اندازی کنید و package.json را پیکربندی نمایید. خط کد زیر را به فایل pack.json اضافه کنید:
package.json
“scripts”: {
“start”: “parcel index.html”
},

این بدان معناست که هر وقت فرمان npm start را اجرا کردید ، به Parcel می گویید که یک سرور مجازی توسعه را با استفاده از فایل index.html به عنوان یک فایل ورودی شروع کند. فرمان شروع npm را اجرا کنید و هم اکنون می توانید برنامه React را در http: // localhost: 1234 با پشتیبانی از لود مجدد ماژول دست اول مشاهده کنید.

مرحله 3 – ساختاربندی برای تولید
برای تهیه برنامه خود برای تولید با Parcel ، باید دستور parcel build index.html را اجرا کنید. آن را به آبجکت اسکریپت ها در فایل pack.json اضافه کنید.
package.json
“scripts”: {
“start”: “parcel index.html”,
“build”: “parcel build index.html”
},
هنگامی که دستور npm run build را اجرا کردید ، Parcel ممکن است حالت تماشا و تعویض ماژول را غیرفعال کند تا فقط یک بار ساخته شود. همچنین کوچک کننده را برای کلیه بسته های خروجی فعال می سازد تا اندازه فایل را کاهش دهد. فرمان build همچنین حالت تولید را فعال می سازد که متغیر محیط NODE_ENV=production را نیز تنظیم می کند.
Parcel همچنین برخی گزینه ها را در اختیار شما قرار می دهد تا بتوانید نحوه انتخاب برنامه خود را برای حالت تولید انتخاب کنید.
اگر دایرکتوری دیگری را برای Parcel ترجیح می دهید که فایل های تولیدی را در آن قرار دهد (dist دیرکتوری پیش فرض میباشد) ، می توانید با اضافه کردن –out-dir-name-name در انتهای کلید build در pack.json آن را مشخص کنید. شبیه به زیر خواهد بود:
package.json
“scripts”: {
“start”: “parcel index.html”,
“build”: “parcel build index.html –out-dir directory-name”
},
Copy
If you’d like to disable minification w

اگر مایل هستید کوچک سازی را که تنظیم پیش فرض است غیرفعال کنید ، می توانید این کار را با افزودن –no-minify در انتهای کلید build در package.json انجام دهید. بنابراین اینگونه به نظر می رسد:
package.json
“scripts”: {
“start”: “parcel index.html”,
“build”: “parcel build index.html –no-minify”
},

اگر می خواهید حافظه نهانگاه سیستم را غیرفعال کنید ، می توانید این کار را با افزودن no-cache به انتهای کلید build در pack.json انجام دهید ، بنابراین اینگونه خواهد بود:
package.json
“scripts”: {
“start”: “parcel index.html”,
“build”: “parcel build index.html –no-cache”
},

می توانید اطلاعات بیشتر در مورد گزینه های مختلف را در اینجا بخوانید.
نتیجه
در این آموزش ، شما یک برنامه وب را با Parcel بسته بندی کرده اید. Parcel هنوز هم نسبتاً جدید است و حمایت از آن هر روز در حال افزایش است. مورد استفاده از آن ممکن است با Webpack متفاوت باشد ، اما این یک ابزار بسته نرم افزاری است که می تواند در توسعه وب روزمره شما مورد توجه قرار گیرد.
برای دیدن مشکلات و ارسال PRها می توانید به Parcel repo در این لینک مراجعه کنید.
کد پایه این آموزش را می توان در GitHub بیابید.

 

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

استفاده از nsh برای دستورات از راه دور اوبونتو 18 –  میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18  –  ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4  –  ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta –  ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) –  با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django –  دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express  –  با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید  –  ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع  –  می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta  –   مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL  –  ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور  –  احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel  –  ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan  –  استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue  –  ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو  –  ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express  –  ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18  –  تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8  –  استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18  –  نصب Linux، Nginx، MariaDB،PHP در Debian 10

 

 

کلمات کلیدی خرید سرور

خرید vps – خرید سرور مجازی – خرید سرور – سرور هلند – فروش vps – سرور مجازی آمریکا – خریدvps – سرور مجازی هلند – فروش سرور مجازی – سرور آمریکا – vps – سرور مجازی انگلیس – سرور مجازی آلمان – سرور مجازی کانادا – خرید vps آمریکا – خرید وی پی اس – سرور – خرید سرور مجازی هلند – vps خرید – سرور مجازی فرانسه – سرور مجازی هلند – خرید vps آمریکا – خرید سرور مجازی ارزان هلند – vps – خرید vps هلند – خرید سرور مجازی آمریکا – خرید vps فرانسه – تست vps – سرور مجازی تست – سرور مجازی ویندوز – ارزانترین vps – خرید وی پی اس – vps ارزان – 

 

برچسب‌ها:Babel, index.html, index.js, PostCSS, PostHTML, Webpack

ساختن یک ربات تلگرام با Laravel و BotMan

مقدمه
ربات های خودکار راهی برای ارائه داده های سفارشی بر اساس درخواست های کاربران است. چارچوب Laravel و Botman ابزارهایی را برای ایجاد رباتهای مفید ارائه می دهند. در این آموزش با استفاده از Dog API یک ربات تلگرام برای دوستداران سگ ایجاد خواهید کرد و این ربات اینگونه خواهد بود:

نصب Laravel و Botman
اولین قدمی که ما برای ایجاد این ربات برمیداریم ، نصب Laravel و Botman است. اما قبل از انجام این کار ابتدا اجازه دهید نگاهی سریعی بیندازیم که Botman چیست و چگونه کار می کند:
BotMan یک چارچوب کتابخانه PHP است که به منظور ساده سازی کار ایجاد ربات های نوآورانه برای سیستم عامل های مختلف پیام رسانی از جمله Slack ، Telegram ، Microsoft Bot Framework ، Nexmo ، HipChat ، Facebook Messenger و WeChat طراحی شده است.
$botman->hears(‘Bot, What’s the best Web Development training website?’, function (BotMan $bot) {
$bot->reply(‘vpsgol for sure. Give me a harder question!!’);
});

نصب Botman Studio
مارسل پوسیوت ، خالق Botman ، در حال حاضر با ایجاد Botman Studio که یک برنامه کاربردی و به روز لاراول همراه با Botman و سایر ابزارهای آزمایش میباشد (بعداً معرفی میشوند) ، در وقت ما صرفه جویی کرده است.
پیش بروید و یک پروژه جدید ایجاد کنید:
composer create-project –prefer-dist botman/studio ilovedogs
Copy

اکنون که نصب جدیدی از Laravel و Botman داریم ، بررسی خواهیم کرد که آیا همه چیز خوب کار میکند یا خیر. پایانه خود را باز کنید و این دستور را اجرا کنید:
php artisan botman:tinker
Copy
اگر “Hi” را تایپ کردید و ربات با “Hello” پاسخ داد ، آماده پیشروی هستید.

ایجاد دستورات
ربات ما باید بتواند به انواع مختلف پیام پاسخ دهد و این لیستی از ویژگی هایی است که ما به اجرا در می آوریم ، اما مطمئناً همیشه می توانید هر دستور دیگری را که دوست دارید ربات شما به آن گوش دهد، اضافه کنید:
• ارسال تصادفی عکس سگ از همه نژادها.
•ارسال تصادفی عکس سگ به وسیله نژادش.
•ارسال تصادفی عکس سگ به وسیله نژادش و زیر نژاد آن.
• برقراری مکالمه و ارائه کمک.
•پاسخ به دستورات ناشناس.
بیایید فایل مسیر / botman.php را پاک کنیم و از ابتدا شروع کنیم.
ارسال یک عکس تصادفی سگ از همه نژادها
به منظور دریافت یک عکس تصادفی سگ از ربات باید /random را به آن ارسال کنید و به این صورت است که ما به آن می گوییم به آن دستور دقیق پاسخ دهد:
در فایل مسیر / botman.php شما:
<?php

use App\Conversations\StartConversation;

$botman = resolve(‘botman’);

$botman->hears(‘/random’, ‘App\Http\Controllers\AllBreedsController@random’);

پیش بروید و یک کنترلر ایجاد کنید:
php artisan make:controller AllBreedsController
Copy
باید به این شکل باشد:
<?php

namespace App\Http\Controllers;

use App\Services\DogService;
use App\Http\Controllers\Controller;

class AllBreedsController extends Controller
{
/**
* Controller constructor
*
* @return void
*/
public function __construct()
{
$this->photos = new DogService;
}

/**
* Return a random dog image from all breeds.
*
* @return void
*/
public function random($bot)
{
// $this->photos->random() is basically the photo URL returned from the service.
// $bot->reply is what we will use to send a message back to the user.
$bot->reply($this->photos->random());
}

}

ما برای اولین بار نمونه ای از DogService (app//services/DogService.php) خود را ایجاد کردیم که وظیفه برقراری تماس های API به نقاط انتهایی و واکشی تصویر را خواهد داشت ، و این همان شکلی است که به نظر می رسد:
<?php

namespace App\Services;

use Exception;
use GuzzleHttp\Client;

class DogService
{
// The endpoint we will be getting a random image from.
const RANDOM_ENDPOINT = ‘https://dog.ceo/api/breeds/image/random’;

/**
* Guzzle client.
*
* @var GuzzleHttp\Client
*/
protected $client;

/**
* DogService constructor
*
* @return void
*/
public function __construct()
{
$this->client = new Client;
}

/**
* Fetch and return a random image from all breeds.
*
* @return string
*/
public function random()
{
try {
// Decode the json response.
$response = json_decode(
// Make an API call an return the response body.
$this->client->get(self::RANDOM_ENDPOINT)->getBody()
);

// Return the image URL.
return $response->message;
} catch (Exception $e) {
// If anything goes wrong, we will be sending the user this error message.
return ‘An unexpected error occurred. Please try again later.’;
}
}
}

ارسال یک عکس تصادفی سگ به وسیله نژادش
برای این مورد ، ما از دستور / b {breed} استفاده می کنیم و همانند بالا ، فایل routes/botman.php را باز می کنیم و به ربات می گوییم که با اضافه کردن این خط ، آن دستور را گوش دهد:
$botman->hears(‘/b {breed}’, ‘App\Http\Controllers\AllBreedsController@byBreed’);
Copy

ما از همان کنترلر قبلی استفاده می کنیم. AllBreedsController را باز کنید و این روش را به آن اضافه کنید:
/**
* Return a random dog image from a given breed.
*
* @return void
*/
public function byBreed($bot, $name)
{
// Because we used a wildcard in the command definition, Botman will pass it to our method.
// Again, we let the service class handle the API call and we reply with the result we get back.
$bot->reply($this->photos->byBreed($name));
}

بیایید با باز کردن کلاس DogService و اضافه کردن این روش به آن ، در کلاس سرویس خود روش byBreed را تعریف کنیم:
/**
* Fetch and return a random image from a given breed.
*
* @param string $breed
* @return string
*/
public function byBreed($breed)
{
try {
// We replace %s in our endpoint with the given breed name.
$endpoint = sprintf(self::BREED_ENDPOINT, $breed);

$response = json_decode(
$this->client->get($endpoint)->getBody()
);

return $response->message;
} catch (Exception $e) {
return “Sorry I couldn\”t get you any photos from $breed. Please try with a different breed.”;
}
}

و فراموش نکنید که علامت انتهایی const مورد استفاده در بالا را به همان فایل اضافه کنید:
// The endpoint we will hit to get a random image by a given breed name.
const BREED_ENDPOINT = ‘https://dog.ceo/api/breed/%s/images/random’;

ارسال یک عکس تصادفی سگ به وسیله نژادش و زیر نژاد آن
برای عکس های زیر نژاد ، اجازه دهید از دستور /s {breed}:{subBreed} استفاده کنیم :
$botman->hears(‘/s {breed}:{subBreed}’, ‘App\Http\Controllers\SubBreedController@random’);
Copy

کنترلر را ایجاد میکند:
php artisan make:controller SubBreedController
Copy

و روش random را به شکل زیر معرفی میکنیم:
<?php

namespace App\Conversations;

use App\Services\DogService;
use App\Http\Controllers\Controller;

class SubBreedController extends Controller
{
/**
* Controller constructor
*
* @return void
*/
public function __construct()
{
$this->photos = new DogService;
}

/**
* Return a random dog image from all breeds.
*
* @return void
*/
public function random($bot, $breed, $subBreed)
{
$bot->reply($this->photos->bySubBreed($breed, $subBreed));
}
}

و نقطه پایانی و روش مورد نیاز را به کلاس DogService اضافه می کنیم:
// The endpoint we will hit to get a random image by a given breed name and its sub-breed.
const SUB_BREED_ENDPOINT = ‘https://dog.ceo/api/breed/%s/%s/images/random’;

/**
* Fetch and return a random image from a given breed and its sub-breed.
*
* @param string $breed
* @param string $subBreed
* @return string
*/
public function bySubBreed($breed, $subBreed)
{
try {
$endpoint = sprintf(self::SUB_BREED_ENDPOINT, $breed, $subBreed);

$response = json_decode(
$this->client->get($endpoint)->getBody()
);

return $response->message;
} catch (Exception $e) {
return “Sorry I couldn\”t get you any photos from $breed. Please try with a different breed.”;
}
}

برقراری مکالمه و ارائه کمک
مکالمه همان چیزی است که شما معمولاً هنگام ساختن رباتهای خود از آن استفاده می کنید و مطالب آن را اینوگنه توصیف می کند:
وقتی صحبت از ربات های چت می شود ، احتمالاً نمی خواهید به کلمات کلیدی تکی واکنش نشان دهید ، بلکه در عوض ، ممکن است نیاز داشته باشید که با استفاده از مکالمه ، اطلاعات را از کاربر جمع آوری کنید. بیایید بگوییم که شما می خواهید ربات چت شما یک تجربه جذاب را برای کاربران برنامه شما فراهم کند.
بیایید مکالمه خود را با اضافه کردن این خط به فایل routes/botman.php ایجاد کنیم:
$botman->hears(‘Start conversation’, ‘App\Http\Controllers\ConversationController@index’);

کنترلر ایجاد کنید:
php artisan make:controller ConversationController
Copy

و یک روش index را در داخل آن کلاس تعریف کنید:
<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use App\Conversations\DefaultConversation;

class ConversationController extends Controller
{
/**
* Create a new conversation.
*
* @return void
*/
public function index($bot)
{
// We use the startConversation method provided by botman to start a new conversation and pass
// our conversation class as a param to it.
$bot->startConversation(new DefaultConversation);
}
}

اگر از Botman Studio استفاده می کنید ، باید قبلاً یک پوشه Conversations را در داخل پوشه برنامه قرار دهید ، بنابراین پیش بروید و یک کلاس جدید در داخل آن پوشه ایجاد کنید و آن را DefaultConversation.php بنامید:
<?php

namespace App\Conversations;

use BotMan\BotMan\Messages\Incoming\Answer;
use BotMan\BotMan\Messages\Outgoing\Question;
use BotMan\BotMan\Messages\Outgoing\Actions\Button;
use BotMan\BotMan\Messages\Conversations\Conversation;

class DefaultConversation extends Conversation
{
/**
* First question to start the conversation.
*
* @return void
*/
public function defaultQuestion()
{
// We first create our question and set the options and their values.
$question = Question::create(‘Huh – you woke me up. What do you need?’)
->addButtons([
Button::create(‘Random dog photo’)->value(‘random’),
Button::create(‘A photo by breed’)->value(‘breed’),
Button::create(‘A photo by sub-breed’)->value(‘sub-breed’),
]);

// We ask our user the question.
return $this->ask($question, function (Answer $answer) {
// Did the user click on an option or entered a text?
if ($answer->isInteractiveMessageReply()) {
// We compare the answer to our pre-defined ones and respond accordingly.
switch ($answer->getValue()) {
case ‘random’:
$this->say((new App\Services\DogService)->random());
break;
case ‘breed’:
$this->askForBreedName();
break;
case ‘sub-breed’:
$this->askForSubBreed();
break;
}
}
});
}

/**
* Ask for the breed name and send the image.
*
* @return void
*/
public function askForBreedName()
{
$this->ask(‘What\’s the breed name?’, function (Answer $answer) {
$name = $answer->getText();

$this->say((new App\Services\DogService)->byBreed($name));
});
}

/**
* Ask for the breed name and send the image.
*
* @return void
*/
public function askForSubBreed()
{
$this->ask(‘What\’s the breed and sub-breed names? ex:hound:afghan’, function (Answer $answer) {
$answer = explode(‘:’, $answer->getText());

$this->say((new App\Services\DogService)->bySubBreed($answer[0], $answer[1]));
});
}

/**
* Start the conversation
*
* @return void
*/
public function run()
{
// This is the boot method, it’s what will be excuted first.
$this->defaultQuestion();
}
}

پاسخ به دستورات ناشناس:
در آخر ، ما باید به کاربر اطلاع دهیم که وقتی پیامی را ارسال می کند ، ربات ما تشخیص نمی دهد و ما می توانیم با استفاده از روش fallback این کار را انجام دهیم . routes/botman.php و این خط را باز کنید:
$botman->fallback(‘App\Http\Controllers\FallbackController@index’);
Copy

کنترلر را ایجاد کنید:
php artisan make:controller FallbackController
Copy

و به سادگی پیامی را که می خواهیم کاربر ببیند برمی گردانیم:
<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;

class FallbackController extends Controller
{
/**
* Respond with a generic message.
*
* @param Botman $bot
* @return void
*/
public function index($bot)
{
$bot->reply(‘Sorry, I did not understand these commands. Try: \’Start Conversation\”);
}
}

تست ربات
• ارسال تصادفی عکس سگ از همه نژادها.

•ارسال تصادفی عکس سگ به وسیله نژادش.

•ارسال تصادفی عکس سگ به وسیله نژادش و زیر نژاد آن.

• برقراری مکالمه و ارائه کمک.

•پاسخ به دستورات ناشناس.

نصب درایور تلگرام
پس از ایجاد و تست موفقیت آمیز و دستورات اکنون زمان آن است که آن را با تلگرام ادغام کنیم. برای این کار باید درایور تلگرام را که توسط Botman تهیه شده است در اختیار بگیریم:
composer require botman/driver-telegram
Copy

ایجاد ربات تلگرام
ما ربات خود را با موفقیت ایجاد کردیم ، دستورات را تعریف کردیم و آن را آزمایش کردیم اکنون وقت آن رسیده که بات تلگرام را بسازیم. برنامه را باز کنید و BotFather را جستجو کنید، / newbot را تایپ کنید ، نام کاربری را برای ربات خود وارد کنید و پیش بروید.

این را به فایل .env خود اضافه کنید و YOUR_TOKEN را با نشانه ای که Telegram به شما داد ، جایگزین کنید:
TELEGRAM_TOKEN=YOUR_TOKEN
Copy

نصب و اجرای ngrok
از آنجا که Telegram برای راه اندازی webhooks و دریافت پیام از کاربران شما به یک URL معتبر و ایمن نیاز دارد ، ما از ngrok استفاده خواهیم کرد یا می توانید برنامه خود را روی یک سرور مجازی به کار بگیرید و یک گواهی SSL تنظیم کنید ، اما برای نسخه ی نمایشی ما از ngrok استفاده مینماییم. به صفحه دانلود آنها بروید و روی دکمه دانلود که با سیستم عامل شما مطابقت دارد کلیک کنید.
اکنون cd را در پوشه برنامه خود وارد کرده و php artisan service را اجرا کنید

اجرای ngrok را تایم بگیرید، در پوشه ای که ngrok در آن قرار دارد cd کنید و./ngrok http 8000 را اجرا نمایید.

ربات را به تلگرام وصل کنید
مرحله آخر ، پیوند دادن برنامه با Telegram Bot است که قبلاً ایجاد کرده ایم و برای انجام این کار ، یک درخواست POST را به این URL ارسال می کنیم و URL ngrok ایجاد می شده را میفرستیم :
https://api.telegram.org/bot{TOKEN}/setWebhook
Copy

با اجرای این دستور می توانید این کار را با Postman یا CURL انجام دهید:
curl -X POST -F ‘url=https://{YOU_URL}/botman’ https://api.telegram.org/bot{TOKEN}/setWebhook

اگر این کار را به درستی انجام داده باشید ، باید این پاسخ دقیق JSON را دریافت کنید:
{
“ok”: true,
“result”: true,
“description”: “Webhook was set”
}

آن را در تلگرام امتحان کنید
• ارسال تصادفی عکس سگ از همه نژادها.

•ارسال تصادفی عکس سگ به وسیله نژادش.

•ارسال تصادفی عکس سگ به وسیله نژادش و زیر نژاد آن.

• برقراری مکالمه و ارائه کمک.

•پاسخ به دستورات ناشناس.

نتیجه
امیدوارم اگر مطالب را دنبال کردید و ربات خود را ایجاد کرده اید این آموزش برایتان مفید بوده باشد.

 

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

استفاده از nsh برای دستورات از راه دور اوبونتو 18 –  میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18  –  ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4  –  ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta –  ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) –  با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django –  دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express  –  با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید  –  ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع  –  می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta  –   مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL  –  ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور  –  احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel  –  ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan  –  استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue  –  ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو  –  ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express  –  ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18  –  تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8  –  استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18  –  نصب Linux، Nginx، MariaDB،PHP در Debian 10

 

 

کلمات کلیدی خرید سرور

خرید vps – خرید سرور مجازی – خرید سرور – سرور هلند – فروش vps – سرور مجازی آمریکا – خریدvps – سرور مجازی هلند – فروش سرور مجازی – سرور آمریکا – vps – سرور مجازی انگلیس – سرور مجازی آلمان – سرور مجازی کانادا – خرید vps آمریکا – خرید وی پی اس – سرور – خرید سرور مجازی هلند – vps خرید – سرور مجازی فرانسه – سرور مجازی هلند – خرید vps آمریکا – خرید سرور مجازی ارزان هلند – vps – خرید vps هلند – خرید سرور مجازی آمریکا – خرید vps فرانسه – تست vps – سرور مجازی تست – سرور مجازی ویندوز – ارزانترین vps – خرید وی پی اس – vps ارزان – 

 

برچسب‌ها:Botman, Botman Studio, Laravel

چگونه می توان موتور جستجوی زمان واقعی را با Vue

مقدمه
Elasticsearch یک موتور جستجو و تجزیه و تحلیل RESTful توزیع شده است که قادر به حل تعداد فزاینده ای موارد استفاده است. Elasticsearch در ورای Apache Lucene ساخته شده است که یک کتابخانه موتور جستجوگر متن میباشد.
در این آموزش ، شما با استفاده از Node.js ،Elasticsearch و Vue.js.s یک موتور جستجوی زمان واقعی ایجاد خواهید کرد. در نتیجه ، درک پایه از Vue.js و Node.js (Express) برای دنبال کردن این آموزش لازم است.

مرحله 1 – آماده سازی محیط
بیایید با تنظیم محیط این بخش را شروع کنیم. از آنجا که شما از Node.js استفاده خواهید کرد ، ساده ترین راه برای شروع ایجاد پوشه جدید و اجرای npm init است. پوشه جدیدی به نام elastic-node ایجاد کنید ، دیرکتوری را در پوشه جدید تغییر دهید و npm init را اجرا کنید:
یک دیرکتوری جدید به نام elastic-node ایجاد کنید:
⦁ $ mkdir elastic-node
⦁
به پوشه جدید بروید:
⦁ $ cd elastic-node
⦁
npm init را برای ایجاد فایل pack.json اجرا کنید:
⦁ $ npm init
⦁
دستورات فوق شما را به فرآیند ایجاد فایل pack.json هدایت میکند، که برای اجرای هر کتابخانه Node.js لازم است.
در مرحله بعد ، باید کتابخانه هایی را که برای موتور جستجوی زمان واقعی مورد نیاز است ، نصب کنید. کتابخانه ها را با دستور زیر نصب کنید:
⦁ $ npm install express body-parser elasticsearch
⦁
کتابخانه express ، سرور مجازی را اجرا می کند ، در حالی که کتابخانه body-parser با express کار میکند تا درخواست های بدن را دنبال کند. elasticsearch کتابخانه رسمی Node.js برای Elasticsearch است که موتوری است که جستجو در زمان واقعی بر روی آن ساخته خواهد شد.
اکنون قسمت اول محیط شما تنظیم شده است. با این حال ، خود Elasticsearch در ستاپ شما نیست. شما نیاز به نصب Elasticsearch دارید که می تواند به چند روش مختلف انجام شود. اگر از سیستم عامل Debian Linux استفاده می کنید ، می توانید فایل .deb را دانلود کرده و با استفاده از dpkg نصب کنید.
دستور زیر را برای دانلود فایل .deb اجرا کنید:
⦁ $ curl -L -O https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-5.6.4.deb
⦁
اکنون بسته deb را با استفاده از dpkg نصب کنید:
⦁ $ sudo dpkg -i elasticsearch-5.6.4.deb
⦁
برای سایر توزیع ها / سیستم عامل ها ، می توانید راهنمایی در مورد نحوه نصب Elasticsearch را در اینجا بیابید.
Elasticsearch پس از نصب به صورت خودکار شروع نمی شود. Elasticsearch را می توان با استفاده از فرمان service شروع و متوقف کرد.
موارد زیر را برای شروع سرویس elasticsearch اجرا کنید:
⦁ $ sudo -i service elasticsearch start
⦁
می توانید با این دستور سرویس elasticsearch را متوقف کنید:
⦁ $ sudo -i service elasticsearch stop
⦁
برای پیکربندی Elasticsearch جهت شروع خودکار پس از بوت شدن سیستم ، این دستور را اجرا کنید تا Daemon systemctl مجدد لود شود:
⦁ $ sudo /bin/systemctl daemon-reload
⦁
سپس elasticsearch  را فعال کنید تا بتوان آن را به عنوان سرویس نامگذاری کرد:
⦁ $ sudo /bin/systemctl enable elasticsearch.service
⦁
بعد از اجرای دستور فوق ، می توانید Elasticsearch را با این دستور شروع کنید:
⦁ $ sudo systemctl start elasticsearch.service
⦁
و با دستور زیر متوقف کنید:
⦁ $ sudo systemctl stop elasticsearch.service
⦁
همچنین می توانید وضعیت Elasticsearch را بررسی کنید:
⦁ $ sudo service elasticsearch status
⦁
مرحله 2 – ایندکس کردن داده ها در Elasticsearch
یک فایل data.js را در پوشه root خود ایجاد کنید و کد زیر را اضافه کنید:
data.js

//require the Elasticsearch librray
const elasticsearch = require(‘elasticsearch’);
// instantiate an Elasticsearch client
const client = new elasticsearch.Client({
hosts: [ ‘http://localhost:9200’]
});
// ping the client to be sure Elasticsearch is up
client.ping({
requestTimeout: 30000,
}, function(error) {
// at this point, eastic search is down, please check your Elasticsearch service
if (error) {
console.error(‘Elasticsearch cluster is down!’);
} else {
console.log(‘Everything is ok’);
}
});

این کد ابتدا به کتابخانه Elasticsearch نیاز دارد و سپس یک کلاینت جدید Elasticsearch را راه اندازی می کند ، و یک آرایه هاست را وارد میکند ، http: // localhost: 9200 . دلیل این است که ، به طور پیش فرض ، Elasticsearch به 9200 گوش می کند. در مرحله بعد ، کلاینت Elasticsearch را پینگ می کنید تا مطمئن شوید سرور مجازی آماده است. اگر node data.jsرا اجرا کنید ، پیامی دریافت خواهید کرد که می گوید Everything is ok.
مرحله 3 – درک ایندکس ها
بر خلاف بانک های اطلاعاتی عادی ، ایندکس Elasticsearch مکانی برای ذخیره اسناد مرتبط است. به عنوان مثال ، برای ذخیره کردن داده ها از نوع cities_list، یک ایندکس با نام scotch.io-tutorialایجاد خواهید کرد. به این صورت در Elasticsearch انجام می شود:
data.js
// create a new index called scotch.io-tutorial. If the index has already been created, this function fails safely
client.indices.create({
index: ‘scotch.io-tutorial’
}, function(error, response, status) {
if (error) {
console.log(error);
} else {
console.log(“created a new index”, response);
}
});

این قطعه کد را بعد از تابع ping  که قبلاً نوشته بودید اضافه کنید. اکنون دوباره node data.js را اجرا کنید. دو پیام دریافت خواهید کرد:
⦁ Everything is okay
⦁ Created a new index (Elasticsearch با پاسخ از)
مرحله 4 – اضافه کردن اسناد به ایندکس ها
می توانید با API Elasticsearch اسناد را به ایندکس های موجود اضافه کنید. برای این کار از کد زیر استفاده کنید:
// add a data to the index that has already been created
client.index({
index: ‘scotch.io-tutorial’,
id: ‘1’,
type: ‘cities_list’,
body: {
“Key1”: “Content for key one”,
“Key2”: “Content for key two”,
“key3”: “Content for key three”,
}
}, function(err, resp, status) {
console.log(resp);
});

body به سندی که می خواهید به ایندکس scotch.io-tutour اضافه کنید اشاره می کند ، در حالی که نوع، بیشتر برای دسته بندی است. با این حال ، توجه داشته باشید که اگر کلید id حذف شود ، Elasticsearch یکی از آنها را به صورت خودکار تولید می کند.
در این آموزش ، سند شما لیستی از تمام شهرهای جهان خواهد بود. اگر قرار باشد هر شهر را یکی یکی اضافه کنید ، ممکن است روزها طول بکشد تا همه آنها فهرست شوند. خوشبختانه ، Elasticsearch تابع bulk دارد که می تواند داده های فله ای را پردازش کند.
ابتدا فایل JSON را که شامل تمام شهرهای جهان است ، دریافت کنید و آن را در پوشه root خود به عنوان names.json ذخیره کنید.
زمان آن است که از API بالک برای وارد کردن مجموعه داده های بزرگ استفاده کنید:
data.js
// require the array of cities that was downloaded
const cities = require(‘./cities.json’);
// declare an empty array called bulk
var bulk = [];
//loop through each city and create and push two objects into the array in each loop
//first object sends the index and type you will be saving the data as
//second object is the data you want to index
cities.forEach(city =>{
bulk.push({index:{
_index:”scotch.io-tutorial”,
_type:”cities_list”,
}
})
bulk.push(city)
})
//perform bulk indexing of the data passed
client.bulk({body:bulk}, function( err, response ){
if( err ){
console.log(“Failed Bulk operation”.red, err)
} else {
console.log(“Successfully imported %s”.green, cities.length);
}
});

در اینجا ، شما در فایل JSON خود میان تمام شهرها حلقه زده اید ، و در هر حلقه ، یک آبجکت را با index  و type  سندی که در آن فهرست بندی می کنید ، به کار میگیرید. دو ورودی برای آرایه در حلقه وجود دارد زیرا API bulk در مرحله اول یک آبجکت حاوی تعریف ایندکس را انتظار دارد و سپس سندی را که می خواهید آن را ایندکس کنید. برای کسب اطلاعات بیشتر در این مورد ، می توانید این مقاله را بررسی کنید.
در مرحله بعدی ، تابع client.bulk را فراخوانی میکنید ، و به قسمت جدید آرایه bulk وارد میکنید. این کار با ایندکس کردن scotch.io-tutorial و cities_list، تمام داده های شما را به Elasticsearch  ایندکس میکند.
مرحله 5 – استفاده از Express برای ارائه صفحه فرود
نمونه Elasticsearch شما در حال اجراست و می توانید با استفاده از Node.js. با آن ارتباط برقرار کنید. زمان آن رسیده است که از Express برای ارائه یک صفحه فرود استفاده کرده و از ستاپ راه اندازی شده استفاده کنید.
فایلی با نام index.js ایجاد کنید و کد زیر را اضافه کنید:
index.js
//require the Elasticsearch librray
const elasticsearch = require(‘elasticsearch’);
// instantiate an elasticsearch client
const client = new elasticsearch.Client({
hosts: [ ‘http://localhost:9200’]
});
//require Express
const express = require( ‘express’ );
// instanciate an instance of express and hold the value in a constant called app
const app = express();
//require the body-parser library. will be used for parsing body requests
const bodyParser = require(‘body-parser’)
//require the path library
const path = require( ‘path’ );

// ping the client to be sure Elasticsearch is up
client.ping({
requestTimeout: 30000,
}, function(error) {
// at this point, eastic search is down, please check your Elasticsearch service
if (error) {
console.error(‘elasticsearch cluster is down!’);
} else {
console.log(‘Everything is ok’);
}
});

// use the bodyparser as a middleware
app.use(bodyParser.json())
// set port for the app to listen on
app.set( ‘port’, process.env.PORT || 3001 );
// set path to serve static files
app.use( express.static( path.join( __dirname, ‘public’ )));
// enable CORS
app.use(function(req, res, next) {
res.header(“Access-Control-Allow-Origin”, “*”);
res.header(‘Access-Control-Allow-Methods’, ‘PUT, GET, POST, DELETE, OPTIONS’);
res.header(“Access-Control-Allow-Headers”, “Origin, X-Requested-With, Content-Type, Accept”);
next();
});

// defined the base route and return with an HTML file called tempate.html
app.get(‘/’, function(req, res){
res.sendFile(‘template.html’, {
root: path.join( __dirname, ‘views’ )
});
})

// define the /search route that should return elastic search results
app.get(‘/search’, function (req, res){
// declare the query object to search elastic search and return only 200 results from the first result found.
// also match any data where the name is like the query string sent in
let body = {
size: 200,
from: 0,
query: {
match: {
name: req.query[‘q’]
}
}
}
// perform the actual search passing in the index, the search query and the type
client.search({index:’scotch.io-tutorial’, body:body, type:’cities_list’})
.then(results => {
res.send(results.hits.hits);
})
.catch(err=>{
console.log(err)
res.send([]);
});

})
// listen on the specified port
app .listen( app.get( ‘port’ ), function(){
console.log( ‘Express server listening on port ‘ + app.get( ‘port’ ));
} );

با نگاهی به کد بالا ، می بینید که کد موارد زیر را انجام داده است:
• کتابخانه های Express ، body-parser و path را درخواست کرده است.
• یک نمونه جدید از Express را روی ثابتی به نام app تنظیم کرده است.
• برنامه را تنظیم کرده تا از میان افزار bodyParser استفاده کند.
• بخش استاتیک برنامه را روی پوشه ای به نام public تنظیم کرده است. این پوشه هنوز ایجاد نشده است
• یک میان افزار تعریف کرده است که عنوان CORS را به برنامه اضافه می کند.
• یک مسیر GET برای URL ریشه برنامه تعریف کرده است ، که توسط / نشان داده میشود. در این مسیر ، کد فایلی به نام template.html را که در پوشه views قرار دارد ، باز می گرداند.
•یک مسیر GET برای URL سرچ برنامه تعریف کرده است ، که از جستجوی آبجکت برای یافتن مطابقت داده های منتقل شده از طریق رشته پرس و جو استفاده می کند. جستجوی اصلی در موضوع پرس و جو گنجانده شده است. می توانید جستارهای سرچ مختلف را به این آبجکت اضافه کنید. برای این جستجو، یک کلید با پرس و جو اضافه می کنید و یک آبجکت را برمیگردانید که به آن میگویید نام سندی که به دنبال آن هستید باید با req.query [‘q’] مطابقت داشته باشد.
علاوه بر موضوع پرس و جو ، بدنه جستجو می تواند شامل سایر خصوصیات اختیاری از جمله size و from باشد. ویژگی size تعداد اسنادی را که باید در پاسخ شامل شوند را تعیین می کند. اگر این مقدار موجود نباشد ، به طور پیش فرض 10 سند بازگردانده می شوند. ویژگی from، شاخص شروع اسناد برگشتی را تعیین می کند. این برای صفحه بندی مفید است.
مرحله 6 – درک پاسخ API جستجو
اگر مجبور باشید پاسخ را از API جستجو وارد کنید ، اطلاعات زیادی را در بر می گیرد. در زیر مثالی آورده شده است:
Output
{ took: 88,
timed_out: false,
_shards: { total: 5, successful: 5, failed: 0 },
hits:
{ total: 59,
max_score: 5.9437823,
hits:
[ {“_index”:”scotch.io-tutorial”,
“_type”:”cities_list”,
“_id”:”AV-xjywQx9urn0C4pSPv”,
“_score”:5.9437823,”
_source”:{“country”:”ES”,”name”:”A Coruña”,”lat”:”43.37135″,”lng”:”-8.396″}},
[Object],
…
[Object] ] } }

پاسخ شامل یک ویژگی took برای تعداد میلی ثانیه هایی است که برای یافتن نتایج طول میکشد ، timed_out ، که فقط درصورتی درست است که هیچ نتیجه ای در حداکثر زمان مجاز یافت نشود ، برای اطلاعات پیرامون وضعیت گره های مختلف (در صورت به کارگیری به عنوان خوشه گره ها) ، _shards میباشد و hits که شامل نتایج جستجو میباشد.
⦁ در خاصیت hits ، یک آبجکت با خصوصیات زیر خواهید داشت:
⦁ total تعداد کل موارد مطابقت یافته را نشان می دهد.
⦁ max_score حداکثر امتیاز از موارد یافت شده است.
⦁ hits آرایه ای است که شامل موارد یافت شده میباشد.
به همین دلیل شما در مسیر جستجو ، response.hits.hits را در بر می گردانید ، که جایگاه نتایج یافت شده است.
مرحله 7 – ایجاد الگوی HTML
ابتدا دو پوشه جدید را در پوشه root خود با نام views و public ایجاد کنید که در مرحله قبل به آنها ارجاع داده شده است. در مرحله بعدی ، یک فایل با نام pattern.html در پوشه views ایجاد کنید و کد زیر را پیست کنید:
template.html
<!– template.html –>
<link rel=”stylesheet” type=”text/css” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
<script src=”https://unpkg.com/axios/dist/axios.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/vue”></script>
<div class=”container” id=”app”>
<div class=”row”>
<div class=”col-md-6 col-md-offset-3″>
<h1>Search Cities around the world</h1>
</div>
</div>
<div class=”row”>
<div class=”col-md-4 col-md-offset-3″>
<form action=”” class=”search-form”>
<div class=”form-group has-feedback”>
<label for=”search” class=”sr-only”>Search</label>
<input type=”text” class=”form-control” name=”search” id=”search” placeholder=”search” v-model=”query” >
<span class=”glyphicon glyphicon-search form-control-feedback”></span>
</div>
</form>
</div>
</div>
<div class=”row”>
<div class=”col-md-3″ v-for=”result in results”>
<div class=”panel panel-default”>
<div class=”panel-heading”>
<!– display the city name and country –>
{{ result._source.name }}, {{ result._source.country }}
</div>
<div class=”panel-body”>
<!– display the latitude and longitude of the city –>
<p>lat:{{ result._source.lat }}, long: {{ result._source.lng }}.</p>
</div>
</div>
</div>
</div>
</div>
<!— some styling for the page –>
<style>
.search-form .form-group {
float: right !important;
transition: all 0.35s, border-radius 0s;
width: 32px;
height: 32px;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
border-radius: 25px;
border: 1px solid #ccc;
}

.search-form .form-group input.form-control {
padding-right: 20px;
border: 0 none;
background: transparent;
box-shadow: none;
display: block;
}

.search-form .form-group input.form-control::-webkit-input-placeholder {
display: none;
}

.search-form .form-group input.form-control:-moz-placeholder {
/* Firefox 18- */
display: none;
}

.search-form .form-group input.form-control::-moz-placeholder {
/* Firefox 19+ */
display: none;
}

.search-form .form-group input.form-control:-ms-input-placeholder {
display: none;
}

.search-form .form-group:hover,
.search-form .form-group.hover {
width: 100%;
border-radius: 4px 25px 25px 4px;
}

.search-form .form-group span.form-control-feedback {
position: absolute;
top: -1px;
right: -2px;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
color: #3596e0;
left: initial;
font-size: 14px;
}
</style>

در قسمت قطعه کد بالا دو بخش اصلی وجود دارد: کد HTML و CSS.
در بخش HTML ، شما به سه کتابخانه مختلف نیاز دارید:
1- Bootstrap CSS برای استایل صفحه.
2- Axios js برای درخواست های HTTP به سرور مجازی ما.
3- Vue.js که یک چارچوب حداقلی است که شما برای نما استفاده خواهید کرد.
در بخش CSS از یک طراحی استفاده کرده اید تا هنگامی که روی نماد جستجو می روید ، ورودی جستجو را مخفی کرده و خود را نشان دهد.
در مرحله بعد ، یک ورودی برای جعبه جستجو وجود دارد که شما v-model آن را برای query اختصاص داده اید (این مورد توسط Vue.js استفاده خواهد شد). بعد از این ، در تمام نتایج ما حلقه می زنید.
دستور node index.js را اجرا کنید و سپس از یک مرورگر به http: // localhost: 3001 / بروید. صفحه فرود برنامه را مشاهده خواهید کرد.

در مرحله بعد ، برچسب اسکریپت را در فایل template.html خود اضافه کنید:
template.html
// create a new Vue instance
var app = new Vue({
el: ‘#app’,
// declare the data for the component (An array that houses the results and a query that holds the current search string)
data: {
results: [],
query: ”
},
// declare methods in this Vue component. here only one method which performs the search is defined
methods: {
// make an axios request to the server with the current search query
search: function() {
axios.get(“http://127.0.0.1:3001/search?q=” + this.query)
.then(response => {
this.results = response.data;

})
}
},
// declare Vue watchers
watch: {
// watch for change in the query string and recall the search method
query: function() {
this.search();
}
}

})

در این بخش نمونه جدیدی از Vue را اعلام کردید که آن را با id برنامه بر روی المان، نصب میکنید. خواص داده را اعلام کردید که شامل query است ، که به ورودی جستجو پیوست کرده اید ، و results ، که مجموعه ای از تمام نتایج یافت شده است.
در بخش روشها ، فقط یک تابع به نام search دارید ، که یک درخواست GET را به مسیر جستجو میفرستد. از ورودی جعبه جستجو می گذرد. و به نوبه خود پاسخی را که در بلوک کد HTML حلقه شده است برمی گرداند.
سرانجام ، در Vue.js از watchers استفاده می کنید ، که در هر زمان که داده ها تغییرات را دیدند ، کاری انجام می دهد. در اینجا ، در حال مشاهده تغییر در داده query هستید و پس از تغییر ، روش search کنار گذاشته می شود.
اگر فرمان node index.js را مجدداً اجرا کنید و به http: // localhost: 3001 / بروید ، باید مطابق زیر کار کند:

مرحله 8 – جستجو از سمت کلاینت
اگر نمی خواهید در هر بار جستجو یک درخواست به سرور مجازی ارسال کنید ، می توانید موتور Elasticsearch را از طرف کلاینت جستجو کنید. ممکن است برخی از توسعه دهندگان مایل به استفاده از سرور مجازی های خود برای هر اصطلاح جستجو نباشند ، در حالی که برخی احساس می کنند جستجو از طرف سرور مجازی امن تر است.
Elasticsearch یک ساختار مرورگر پیشنهاد میکند که می تواند جستجو کند. این مرحله شما را در مورد جستجوی سمت کلاینت مرورگر راهنمایی می کنیم.
ابتدا مسیر جدیدی را به فایل Express خود اضافه کنید و سرور مجازی خود را مجدداً راه اندازی کنید:
index.js
// decare a new route. This route serves a static HTML template called template2.html
app.get(‘/v2’, function(req, res){
res.sendFile(‘template2.html’, {
root: path.join( __dirname, ‘views’ )
});
})

در این بلاک کد ، مسیر جدیدی را برای URL در / v2 ایجاد کرده اید تا یک فایل HTML استاتیک به نام template2.html را برگردانید. به زودی این فایل را ایجاد خواهید کرد.
در مرحله بعد ، باید کتابخانه کلاینت را برای Elasticsearch از اینجا دانلود کنید. بعد از دانلود ، elasticsearch.min.js را در پوشه عمومی در ریشه برنامه خود اکسترکت و کپی کنید.
توجه: اگر بعد از اتصال به موتور Elasticsearch از طرف کلاینت و دنبال کردن قطعه کد زیر تا انتهای فایل پیکربندی Elasticsearch ، با مشکلات CORS روبرو شدید، با مرور مطالب مرجع Elasticsearch می توانید این فایل را جایگذاری کنید.
/etc/elasticsearch/elasticsearch.yml

http.cors.enabled : true
http.cors.allow-origin : “*”

بعد از انجام این کار ، نمونه Elasticsearch خود را مجدداً راه اندازی کنید:
⦁ sudo service elasticsearch restart
⦁

سپس ، یک فایل با نام pattern2.html در پوشه views و این کد را ایجاد کنید:
template2.html
<!– template2.html –>
<link rel=”stylesheet” type=”text/css” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
<script src=”https://unpkg.com/axios/dist/axios.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/vue”></script>
<div class=”container” id=”app”>
<div class=”row”>
<div class=”col-md-6 col-md-offset-3″>
<h1>Search Cities around the world</h1>
</div>
</div>
<div class=”row”>
<div class=”col-md-4 col-md-offset-3″>
<form action=”” class=”search-form”>
<div class=”form-group has-feedback”>
<label for=”search” class=”sr-only”>Search</label>
<input type=”text” class=”form-control” name=”search” id=”search” placeholder=”search” v-model=”query” >
<span class=”glyphicon glyphicon-search form-control-feedback”></span>
</div>
</form>
</div>
</div>
<div class=”row”>
<div class=”col-md-3″ v-for=”result in results”>
<div class=”panel panel-default”>
<div class=”panel-heading”>
<!– display the city name and country –>
{{ result._source.name }}, {{ result._source.country }}
</div>
<div class=”panel-body”>
<!– display the latitude and longitude of the city –>
<p>lat:{{ result._source.lat }}, long: {{ result._source.lng }}.</p>
</div>
</div>
</div>
</div>
</div>
<script src=”/elasticsearch.min.js”></script>
<style>
.search-form .form-group {
float: right !important;
transition: all 0.35s, border-radius 0s;
width: 32px;
height: 32px;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
border-radius: 25px;
border: 1px solid #ccc;
}

.search-form .form-group input.form-control {
padding-right: 20px;
border: 0 none;
background: transparent;
box-shadow: none;
display: block;
}

.search-form .form-group input.form-control::-webkit-input-placeholder {
display: none;
}

.search-form .form-group input.form-control:-moz-placeholder {
/* Firefox 18- */
display: none;
}

.search-form .form-group input.form-control::-moz-placeholder {
/* Firefox 19+ */
display: none;
}

.search-form .form-group input.form-control:-ms-input-placeholder {
display: none;
}

.search-form .form-group:hover,
.search-form .form-group.hover {
width: 100%;
border-radius: 4px 25px 25px 4px;
}

.search-form .form-group span.form-control-feedback {
position: absolute;
top: -1px;
right: -2px;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
color: #3596e0;
left: initial;
font-size: 14px;
}
</style>

سپس، یک تگ اسکریپت در فایل template2.html خود ایجاد کرده و این کد را اضافه کنید:
template2.html
// instantiate a new Elasticsearch client like you did on the client
var client = new elasticsearch.Client({
hosts: [‘http://127.0.0.1:9200’]
});
// create a new Vue instance
var app = new Vue({
el: ‘#app’,
// declare the data for the component (An array that houses the results and a query that holds the current search string)
data: {
results: [],
query: ”
},
// declare methods in this Vue component. here only one method which performs the search is defined
methods: {
// function that calls the elastic search. here the query object is set just as that of the server.
//Here the query string is passed directly from Vue
search: function() {
var body = {
size: 200,
from: 0,
query: {
match: {
name: this.query
}
}
}
// search the Elasticsearch passing in the index, query object and type
client.search({ index: ‘scotch.io-tutorial’, body: body, type: ‘cities_list’ })
.then(results => {
console.log(`found ${results.hits.total} items in ${results.took}ms`);
// set the results to the result array we have
this.results = results.hits.hits;
})
.catch(err => {
console.log(err)

});

}
},
// declare Vue watchers
watch: {
// watch for change in the query string and recall the search method
query: function() {
this.search();
}
}

})

قطعه HTML و JavaScript در بالا شبیه به مرحله قبل است که تفاوت های اصلی آن به شرح زیر است:
• شما به Axios احتیاج نداشتید ، در عوض به elasticsearch.js نیاز داشتید.
• در بالای برچسب اسکریپت ، کلاینت Elasticsearch را همانطور که در سمت سرور مجازی انجام شد ، آغاز کردید.
• روش جستجو درخواست HTTP را انجام نمی دهد ، بلکه موتور Elasticsearch را همانطور که در مسیر جستجو در سمت سرور مجازی انجام می شود جستجو می کند.
اگر در http: // localhost: 3001 / v2 جستجو می کنید ، باید مطابق شکل زیر کار کند:

نتیجه
در این آموزش ، شما از Elasticsearch برای نمایه سازی داده ها استفاده کرده اید. همچنین با استفاده از کتابخانه کلاینت برای Elasticsearch یک جستجوی زمان واقعی انجام داده اید.

 

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

استفاده از nsh برای دستورات از راه دور اوبونتو 18 –  میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18  –  ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4  –  ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta –  ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) –  با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django –  دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express  –  با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید  –  ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع  –  می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta  –   مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL  –  ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور  –  احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel  –  ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan  –  استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue  –  ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو  –  ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express  –  ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18  –  تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8  –  استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18  –  نصب Linux، Nginx، MariaDB،PHP در Debian 10

 

 

کلمات کلیدی خرید سرور

خرید vps – خرید سرور مجازی – خرید سرور – سرور هلند – فروش vps – سرور مجازی آمریکا – خریدvps – سرور مجازی هلند – فروش سرور مجازی – سرور آمریکا – vps – سرور مجازی انگلیس – سرور مجازی آلمان – سرور مجازی کانادا – خرید vps آمریکا – خرید وی پی اس – سرور – خرید سرور مجازی هلند – vps خرید – سرور مجازی فرانسه – سرور مجازی هلند – خرید vps آمریکا – خرید سرور مجازی ارزان هلند – vps – خرید vps هلند – خرید سرور مجازی آمریکا – خرید vps فرانسه – تست vps – سرور مجازی تست – سرور مجازی ویندوز – ارزانترین vps – خرید وی پی اس – vps ارزان – 

 

برچسب‌ها:Apache Lucene, Elasticsearch, Vue

استفاده از اشتراک زنده با کد ویژوال استودیو

Live Share افزونه ای برای کد VS (ویژوال استودیو) است که امکان همکاری زمان واقعی بین توسعه دهندگان را فراهم می کند. این امکان را به کاربران می دهد تا یک جلسه را با شخص دیگری به اشتراک بگذارند ، به آنها امکان می دهد کدها را ویرایش کنند و همچنین سرور مجازی و بخش اشکال زدایی را به اشتراک بگذارند.
شروع
1- افزونه Live Share (اشتراک گذاری زنده) را نصب کنید
2- پالت فرمان را باز کنید
3- اشتراک گذاری زنده را شروع کنید
4- پیوند به اشتراک بگذارید
با پیش رفتن در طول این مقاله ، اسکرین شات دو رایانه مختلف را مشاهده می کنید تا نمونه ای از عملکرد Live Share به شما نشان داده شود. برای اهداف شفاف سازی ، این آموزش به ترتیب به شخصی اشاره دارد که دعوت جلسه را ارسال می کند و شخصی که دعوت نامه را میپذیرد یعنی دعوت کننده و دعوت شونده.
مرحله 1 – دانلود افزونه
اولین قدم برای استفاده از Live Share نصب آن به عنوان افزونه است. در VS Code می توانید سربرگ افزونه ها را باز کنید ، Live Share را جستجو کنید، روی نصب کلیک کنید و بعد از اتمام نصب مجدد لود کنید.

پس از آن ، باید وارد سیستم شوید. از همین حالا ، می توانید وارد حساب کاربری Microsoft یا Github شوید.
برای ورود به سیستم ، از دکمه sign in در پایین نوار وضعیت با آیکون شخصی استفاده کنید.
مرحله 2 – اشتراک گذاری و پیوستن به یک جلسه
پس از ورود به سیستم ، آماده ایجاد جلسه برای به اشتراک گذاشتن با دیگران هستید. مطمئن شوید که فقط جلسات زنده را با افرادی که به آنها اعتماد دارید به اشتراک بگذارید. همانطور که خواهید دید ، شما دسترسی خاصی را به کاربران اعطا می کنید که در صورت استفاده نادرست می توانند مخرب باشند.
با کلیک کردن روی نام کاربری خود در نوار وضعیت پایین شروع کرده و از گزینه های موجود Start Collaboration Session را انتخاب کنید. از طرف دیگر ، می توانید پالت فرمان (CMD + SHIFT + P را در Mac ، CTRL + SHIFT + P در ویندوز) را باز کنید و Start Collaboration Session را تایپ کنید.

به شما اطلاع داده می شود که لینک دعوت شما در کلیپ بورد کپی شده است.

این لینک را با شخصی به اشتراک بگذارید تا آنها را به جلسه خود دعوت کنید.
به عنوان دعوت شونده ، برای پذیرش دعوت نامه ، روی نام کاربری خود در نوار وضعیت پایین کلیک کنید و Join Collaborative Session را انتخاب کنید. روش دیگر ، مانند بالا ، می توانید پالت فرمان را باز کرده و Join Collaborative Session را تایپ کنید.

وقتی از شما خواسته شد ، لینک جلسه مشارکتی را که توسط دعوت کننده برای شما ارسال شده است وارد کنید. با ورود به جلسه به دعوت کننده اطلاع داده می شود.

به طور پیش فرض ، پیوستن به یک جلسه باعث می شود که دعوت شونده به دلیل همراهی کد ، دعوت کننده را دنبال کند. این اتفاق تا زمانی خواهد افتاد که دعوت شونده خود حرکت انجام دهد. از آنجا به بعد، هر دو طرف برای حرکت و ویرایش کد بنا بر صلاحدیدشان آزاد هستند. علاوه بر این ، هر دو طرف یک نشانگر را مشاهده میکنند که ویرایشگر نفر مقابل را مطابق تصویر زیر نشان میدهد.

همچنین می توانید یک قطعه کد انتخاب کنید تا در رایانه کاربر دیگر هایلایت شود. برای مثال می توانید برای جلب توجه آنها به بخشی از کد استفاده کنید.

مرحله 3 – محدود کردن همکاری
به طور پیش فرض ، هنگام به اشتراک گذاشتن یک جلسه با شخصی ، آنها قادر به ویرایش کلیه فایل ها در فضای کاری خواهند بود. این یکی از دلایلی است که باید به شخصی که ممکن است چند فایل را ویرایش کند اعتماد داشته باشید ، اما باز کردن کل فضای کاری تان برای آنها توصیه نمیشود. خوشبختانه ، Live Share این امکان را به شما می دهد تا فایل هایی که می توانند مشاهده و ویرایش کنند را محدود کنید.
برای محدود کردن همکاری ، یک فایل .vsls.json ایجاد کنید. پیکربندی اصلی چیزی شبیه به این خواهد بود:
.vsls.json
{
“$schema”: “http://json.schemastore.org/vsls”,
“gitignore”: “none”,
“excludeFiles”: [],
“hideFiles”: []
}

دو کلید که بیشتر به آنها اهمیت می دهیم عبارتند از: excludeFiles  و hideFiles. excludFiles مجموعه ای از نام فایل ها است که نمی خواهید کاربران به آنها دسترسی داشته باشند. hideFiles بسیار مشابه است به جز اینکه همکاران در شرایط خاصی قادر به دیدن فایل های مخفی خواهند بود. برای اطلاعات بیشتر درباره امنیت ، اینجا کلیک کنید.
مرحله 4 – به اشتراک گذاری سرور مجازی
به اشتراک گذاشتن با دیگران هنگام کار در یک برنامه محلی می تواند چالش برانگیز باشد. می توانید کد را در GitHub بررسی کرده و شخص دیگری آن را کلون کند، اما هنوز هم آنها باید متعلقات را نصب کرده و خودشان سرور مجازی را راه اندازی کنند. با Live Share می توانید سرور مجازی را بصورت محلی شروع کنید و شخص دیگر می تواند به همان برنامه در حال اجرا دسترسی پیدا کند.
به عنوان دعوت کننده ، سرور مجازی خود را به طور عادی شروع کنید. سپس بر روی نام کاربری در نوار وضعیت پایین کلیک کرده و Share Server را انتخاب کنید. روش دیگر این است که پالت فرمان را باز کرده و Share Server را تایپ کنید.

به عنوان دعوت شونده ، می توانید برای دیدن سرور مجازی بهlocalhost  در پورت مناسب بروید.

مرحله 5 – به اشتراک گذاری ترمینال
ممکن است دلیلی وجود داشته باشد که بخواهید دستورات ترمینال را به فردی آموزش دهید ، مانند نحوه پیمایش فایل سیستم ، کار با npm ، راه اندازی سرور مجازی dev خود و غیره. همانند ویژگی های فوق ، ممکن است این کار از راه دور پیچیده باشد. Live Share همچنین یک ویژگی اشتراک گذاری پایانه برای حل این مشکل دارد.
اشتراک گذاری ترمینال شبیه به اشتراک گذاری سرور مجازی شماست. مشابه سایر ویژگی ها ، گزینه Share Terminal را انتخاب کنید. پس از آن ، بین مجوز read only یا read/write برای همکاران یکی را انتخاب کنید.

پس از به اشتراک گذاری ترمینال ، همکاران می توانند ترمینال را مشاهده کرده و ویرایش کنند. تصویر زیر چیزی است که دعوت شونده بعد از ارسال پیام به نمایشگر توسط دعوت کننده، میبیند.

از اینجا ، همانطور که در بالا ذکر شد ، می توانید به دعوت شونده نحوه شروع یک سرور مجازی توسعه ، ساخت سیستم یا هر چیز دیگری که ممکن است مرتبط باشد را نشان دهید.
نتیجه
بسیاری از ویژگی های مفید دراین افزونه وجود دارند. با استفاده از ویژوال استودیو کد که به سرعت تبدیل به یک ویرایشگر مورد علاقه برای توسعه دهندگان وب شده است ، این افزونه به طور بالقوه شیوه آموزش ، راهنمایی ، همکاری ، رفع اشکال و غیره را تغییر می دهد.

 

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

استفاده از nsh برای دستورات از راه دور اوبونتو 18 –  میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18  –  ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4  –  ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta –  ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) –  با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django –  دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express  –  با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید  –  ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع  –  می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta  –   مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL  –  ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور  –  احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel  –  ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan  –  استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue  –  ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو  –  ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express  –  ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18  –  تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8  –  استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18  –  نصب Linux، Nginx، MariaDB،PHP در Debian 10

 

 

کلمات کلیدی خرید سرور

خرید vps – خرید سرور مجازی – خرید سرور – سرور هلند – فروش vps – سرور مجازی آمریکا – خریدvps – سرور مجازی هلند – فروش سرور مجازی – سرور آمریکا – vps – سرور مجازی انگلیس – سرور مجازی آلمان – سرور مجازی کانادا – خرید vps آمریکا – خرید وی پی اس – سرور – خرید سرور مجازی هلند – vps خرید – سرور مجازی فرانسه – سرور مجازی هلند – خرید vps آمریکا – خرید سرور مجازی ارزان هلند – vps – خرید vps هلند – خرید سرور مجازی آمریکا – خرید vps فرانسه – تست vps – سرور مجازی تست – سرور مجازی ویندوز – ارزانترین vps – خرید وی پی اس – vps ارزان – 

 

برچسب‌ها:Microsoft, ویژوال استودیو

نحوه نصب Discourse روی Ubuntu 18

Discourse یک بستر بحث و گفتگوی منبع آزاد است. می تواند به عنوان یک لیست پستی ، یک انجمن بحث و گفتگو یا یک چت روم طولانی استفاده شود. در این آموزش ، Discourse را در یک محیط جداگانه با استفاده از Docker ، یک برنامه کانتینریزاسیون نصب خواهیم کرد.
پیش نیازها
قبل از شروع کار ، مواردی وجود دارد که ابتدا باید آنها را تنظیم کنیم:
یک سرور مجازی Ubuntu 18.04 با حداقل 2 گیگابایت رم ، که با دنبال کردن راهنمای راه اندازی اولیه اوبونتو 18.04 تنظیم شده باشد، و شامل یک کاربر sudo غیر ریشه و فایروال تنظیم شده باشد.
Docker نصب شده بر روی سرور مجازی، که می توانید با دنبال کردن مرحله 1 آموزش نصب Docker برای اوبونتو 18.04 انجام دهید.
نام دامنه ای که بر روی سرور مجازی شما ایجاد شود ، که می توانید با دنبال کردن این آموزش نام میزبان ، آن را تنظیم کنید.
سرور مجازی پستی SMTP . اگر نمی خواهید سرور مجازی پست الکترونیکی خود را اجرا کنید ، می توانید از یک سرویس دیگر مانند سرویس رایگان Mailgun استفاده کنید.
توجه: اگر از 1 گیگابایت رم استفاده می کنید ، Discourse نیاز به فایل swap دارد. اگرچه swap برای سیستمهای در حال استفاده از هارد دیسک های چرخشی قدیمی توصیه میشود ، اما استفاده از swap با SSD ها می تواند با گذشت زمان مشکلاتی را برای تخریب سخت افزار ایجاد کند. با توجه به این نکته ، ما فعال کردن swap در vpsgol یا هر ارائه دهنده دیگری که از حافظه SSD استفاده می کند را توصیه نمی کنیم. انجام این کار می تواند بر قابلیت اطمینان سخت افزار اصلی برای شما و همسایگانتان تأثیر بگذارد. از این رو ، حداقل 2 گیگ رم را برای اجرای Discourse روی یک دراپلت vpsgol توصیه می کنیم. برای جزئیات بیشتر در مورد استفاده از Discourse ، به نحوه اضافه کردن فضای Discourse در اوبونتو 18.04 مراجعه کنید.
مرحله 1 – دانلود Discourse
با داشتن تمام پیش شرط های موجود ، می توانید مستقیماً به سراغ نصب Discourse بروید.
باید در بقیه مراحل تنظیم و راه اندازی به عنوان root وارد شوید، بنابراین ابتدا به یک پوسته root بروید.
$ sudo -s

در مرحله بعد ، دیرکتوری /var/discourse را ایجاد کنید ، جایی که تمام فایل های مربوط به Discourse در آن قرار دارند.
# mkdir /var/discourse

سرانجام ، تصویر رسمی Discourse Docker را به /var/discourse کلون کنید.
# git clone https://github.com/discourse/discourse_docker.git /var/discourse

با استفاده از فایل هایی که به آنها نیاز داریم ، می توانیم به سراغ پیکربندی و راه اندازی مجدد برویم.
مرحله 2 – پیکربندی و را ه اندازی Discourse
به دیرکتوری / var / discourse بروید جایی که فایل های Discourse قرار دارند.
# cd /var/discourse

از اینجا ، می توانید اسکریپت راه اندازی موجود را راه اندازی کنید.
# ./discourse-setup

سوالات زیر از شما پرسیده خواهد شد:
• نام میزبان برای Discourse ؟
نام میزبان مورد نظر خود را برای Discourse وارد کنید، مثلاً discourse.your_domain.com که نام دامنه شما جایگزین your_domain.com خواهد شد. لازم نیست از نام دامنه استفاده کنید زیرا یک آدرس IP هنگام ارسال ایمیل کار نمی کند.
• آدرس ایمیل برای حساب کاربری ادمین؟
آدرس ایمیلی را که می خواهید برای حساب کاربری ادمین Discourse استفاده کنید ، انتخاب کنید. این می تواند کاملاً بی ارتباط به دامنه Discourse شما باشد و می تواند هر آدرس ایمیلی که مناسب میبینید باشد.
توجه داشته باشید که وقتی اولین کاربر با آن ایمیل ثبت نام می کند ، این آدرس ایمیل به صورت پیش فرض مدیر Discourse را ایجاد میکند. بعداً هنگام تنظیم Discourse از پنل کنترل وب ، به این آدرس ایمیل نیاز خواهید داشت.
• آدرس سرور مجازی SMTP؟
• نام کاربر SMTP؟
• پورت SMTP؟
• رمز عبور SMTP؟
جزئیات سرور مجازی SMTP خود را برای این سؤالات وارد کنید. اگر از Mailgun استفاده می کنید ، آدرس سرور مجازی SMTP smtp.mailgun.org خواهد بود ، نام کاربر و رمز عبور، اعتبار SMTP برای دامنه شما در زیر دامنه ها هستند.
در آخر از شما خواسته می شود تمام تنظیماتی را که تازه وارد کرده اید تأیید کنید. بعد از تأیید تنظیمات ، اسکریپت یک فایل پیکربندی به نام app.yml تولید می کند و سپس فرایند راه اندازی شروع می شود.
توجه: اگر بعد از راه اندازی مجدد (Bootstrapping) نیاز بود این تنظیمات را تغییر دهید یا آنها را برطرف کنید ، فایل /containers/app.yml خود را ویرایش کرده و ./launcher rebuild app را اجرا کنید. در غیر این صورت ، تغییرات شما مؤثر واقع نمی شوند.
Bootstrapping بین 2-8 دقیقه طول می کشد ، پس از آن نمونه شما اجرا خواهد شد! بیایید به سراغ ایجاد یک حساب ادمین برویم.
مرحله 3 – ثبت نام حساب کاربری ادمین
برای مشاهده صفحه وب Discourse ، از دامنه Discourse خود در مرورگر وب مورد علاقه خود بازدید کنید.
اگر یک خطای 502 Bad Gateway دریافت کردید ، یک یا دو دقیقه منتظر بمانید و سپس ریفرش کنید. ممکن است Discourse هنوز شروع نشده باشد.
هنگامی که صفحه لود می شود ، روی دکمه آبی Register کلیک کنید. یک فرم با عنوان Register Admin Account با فیلدهای زیر مشاهده خواهید کرد:
• ایمیل: آدرس ایمیلی را که قبلاً ارائه کرده اید از فهرست کشویی انتخاب کنید.
• نام کاربری: نام کاربری را انتخاب کنید.
• رمز عبور: یک رمز عبور قوی انتخاب کنید.
سپس بر روی دکمه آبی رنگ Register روی فرم کلیک کنید تا ارسال شود. اعلانی را می بینید که می گوید ایمیل خود را تأیید کنید. صندوق ورودی ایمیل خود را برای تأیید بررسی کنید. اگر آن را دریافت نکردید ، روی دکمه Resend Activation Email کلیک کنید. اگر هنوز قادر به ثبت نام یک حساب ادمین جدید نیستید ، لطفاً به لیست بررسی عیب یابی ایمیل Discourse مراجعه کنید.
پس از ثبت ادمین خود ، setup wizard راه اندازی میشود و شما را برای پیکربندی اصلی Discourse راهنمایی می کند. اکنون می توانید در آن چرخ بزنید یا برای رد کردن روی گزینه Maybe Later کلیک کنید.

پس از تکمیل یا رد setup wizard ، برخی از مباحث و راهنمای شروع سریع ادمین (با عنوان READ ME FIRST را مشاهده خواهید کرد) ، که حاوی نکاتی برای شخصی سازی بیشتر نصب Discours میباشد.

همه را تنظیم کرده اید! اگر در آینده نیاز داشتید Discours را به روز کنید، می توانید با دریافت آخرین نسخه کد از Git repo و ساخت مجدد برنامه ، مانند خط زیر ، آن را از خط فرمان انجام دهید:
# cd /var/discourse

# git pull

# ./launcher rebuild app
همچنین می توانید با مراجعه به سایت http://discourse.your_domain.com/admin/upgrade ، کلیک بر روی Upgrade to the Latest Version و دنبال کردن دستورالعمل ها ، آن را در مرورگر خود به روز کنید.
نتیجه
اکنون می توانید مدیریت انجمن Discourse خود را شروع کرده و به کاربران اجازه دهید ثبت نام کنند. در صفحه جزییات Discourse ، در مورد ویژگی های Discourse بیشتر بیاموزید.

 

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

استفاده از nsh برای دستورات از راه دور اوبونتو 18 –  میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18  –  ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4  –  ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta –  ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) –  با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django –  دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express  –  با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید  –  ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع  –  می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta  –   مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL  –  ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور  –  احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel  –  ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan  –  استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue  –  ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو  –  ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express  –  ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18  –  تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8  –  استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18  –  نصب Linux، Nginx، MariaDB،PHP در Debian 10

 

 

کلمات کلیدی خرید سرور

خرید vps – خرید سرور مجازی – خرید سرور – سرور هلند – فروش vps – سرور مجازی آمریکا – خریدvps – سرور مجازی هلند – فروش سرور مجازی – سرور آمریکا – vps – سرور مجازی انگلیس – سرور مجازی آلمان – سرور مجازی کانادا – خرید vps آمریکا – خرید وی پی اس – سرور – خرید سرور مجازی هلند – vps خرید – سرور مجازی فرانسه – سرور مجازی هلند – خرید vps آمریکا – خرید سرور مجازی ارزان هلند – vps – خرید vps هلند – خرید سرور مجازی آمریکا – خرید vps فرانسه – تست vps – سرور مجازی تست – سرور مجازی ویندوز – ارزانترین vps – خرید وی پی اس – vps ارزان – 

 

برچسب‌ها:Discourse, Docker, Mailgun, swap

نحوه نصب MySQL در CentOS 8

MySQL یک سیستم مدیریت پایگاه داده منبع باز است که معمولاً به عنوان بخشی از پشته محبوب LEMP (Linux، Nginx ، MySQL / MariaDB ، PHP / Python / Perl) نصب می شود. این سیستم، مدل رابطه ای و زبان ساختار یافته جستجو (SQL) را برای مدیریت و پرس و جوی داده ها پیاده سازی می کند.
در این آموزش نحوه نصب نسخه 8 MySQL در سرور مجازی CentOS 8 توضیح داده شده است.
پیش نیازها
برای تکمیل این آموزش ، به سرور مجازی دارای CentOS 8 نیاز خواهید داشت. این سرور مجازی باید دارای کاربر غیر ریشه با امتیازات ادمین و فایروال تنظیم شده با firewalld باشد. برای انجام این کارها، راهنمای تنظیم اولیه سرور مجازی برای CentOS 8 را مشاهده کنید.
مرحله 1 – نصب MySQL
در CentOS 8 ، نسخه 8 MySQL از منابع پیش فرض در دسترس است.
برای نصب بسته mysql-server و تعدادی از متعلقات آن ، دستور زیر را اجرا کنید:
$ sudo dnf install mysql-server

هنگامی که از شما خواسته شد ، برای تأیید ادامه روی y کلیک کرده و enter بزنید :
utput
. . .
Install 49 Packages

Total download size: 46 M
Installed size: 252 M
Is this ok [y/N]: y

با این کار MySQL روی سرور مجازی شما نصب شده است اما هنوز عملیاتی نشده است. بسته ای که تازه نصب کردید MySQL را پیکربندی می کند تا به عنوان یک سرویس سیستمی به نام mysqld.service اجرا شود. برای استفاده از MySQL ، باید آن را با دستور systemctl شروع کنید:
$ sudo systemctl start mysqld.service

برای بررسی صحت عملکرد سرویس ، دستور زیر را اجرا کنید. توجه داشته باشید که برای بسیاری از دستورات systemctl از جمله start  و ، همانطور که در اینجا نشان داده شده است ، status  – لازم نیست خدمات پس از نام سرویس .service را وارد کنید:
$ sudo systemctl status mysqld

اگر MySQL با موفقیت شروع شد ، خروجی نشان می دهد که سرویس MySQL فعال است:
Output
● mysqld.service – MySQL 8.0 database server
Loaded: loaded (/usr/lib/systemd/system/mysqld.service; enabled; vendor preset: disabled)
Active: active (running) since Thu 2020-03-12 14:07:41 UTC; 1min 7s ago
Main PID: 15723 (mysqld)
Status: “Server is operational”
Tasks: 38 (limit: 5056)
Memory: 474.2M
CGroup: /system.slice/mysqld.service
└─15723 /usr/libexec/mysqld –basedir=/usr

Mar 12 14:07:32 cent-mysql-3 systemd[1]: Starting MySQL 8.0 database server…
Mar 12 14:07:32 cent-mysql-3 mysql-prepare-db-dir[15639]: Initializing MySQL database
Mar 12 14:07:41 cent-mysql-3 systemd[1]: Started MySQL 8.0 database server.

سپس با اجرای دستور زیر MySQL را تنظیم کنید تا پس از بوت شدن سرور مجازی راه اندازی شود.
$ sudo systemctl enable mysqld

توجه: اگر می خواهید این رفتار را تغییر داده و MySQL را از شروع کار هنگام بوت شدن بازدارید ، می توانید این دستور را اجرا کنید:
$ sudo systemctl disable mysqld

اکنون MySQL روی سرور مجازی شما نصب ، اجرا و فعال شده است. در مرحله بعدی ، به سراغ نحوه بالا بردن امنیت پایگاه داده شما را با استفاده از اسکریپت پوسته ای میرویم که با نمونه MySQL از قبل نصب شده همراه است.
مرحله 2 – ایمن سازی MySQL
MySQL شامل یک اسکریپت امنیتی است که به شما امکان می دهد برای بهبود امنیت MySQL برخی گزینه های پیکربندی پیش فرض را تغییر دهید.
برای استفاده از اسکریپت امنیتی ، دستور زیر را اجرا کنید:
$ sudo mysql_secure_installation

این امر شما را با مجموعه ای از سؤالات مواجه می کند که آیا می خواهید در گزینه های امنیتی نصب MySQL خود تغییرات خاصی ایجاد کنید یا خیر. اولین سؤال از شما میپرسد که آیا شما می خواهید افزونه Validate Password را تنظیم کنید ، که می توانید از آن برای تست قوی بودن پسورد MySQL استفاده کنید.
اگر تنظیم افزونه اعتبار سنجی گذرواژه را انتخاب کنید ، اسکریپت از شما می خواهد که یک سطح اعتبار رمز عبور را انتخاب کنید. قوی ترین سطح – که شما با وارد کردن 2 انتخاب می کنید – حداقل 8 کاراکتر برای پسورد نیاز دارد و باید ترکیبی از حروف بزرگ ، حروف کوچک ، عدد و کاراکترهای خاص را شامل شود:
Output
Securing the MySQL server deployment.

Connecting to MySQL using a blank password.

VALIDATE PASSWORD COMPONENT can be used to test passwords
and improve security. It checks the strength of password
and allows the users to set only those passwords which are
secure enough. Would you like to setup VALIDATE PASSWORD component?

Press y|Y for Yes, any other key for No: Y

There are three levels of password validation policy:

LOW Length >= 8
MEDIUM Length >= 8, numeric, mixed case, and special characters
STRONG Length >= 8, numeric, mixed case, special characters and dictionary file

Please enter 0 = LOW, 1 = MEDIUM and 2 = STRONG: 2

صرف نظر از این که آیا شما می خواهید افزونه رمز عبور معتبر را انتخاب کنید ، اعلان بعدی تعیین رمز عبور برای کاربر ریشه MySQL خواهد بود. رمز عبور ایمن را انتخاب و تأیید کنید:
Output
Please set the password for root here.

New password:

Re-enter new password:

اگر از افزونه اعتبار سنجی گذرواژه استفاده کرده اید ، در مورد قدرت رمزعبور جدید خود بازخورد خواهید گرفت. سپس اسکریپت از شما سؤال می کند که آیا می خواهید رمز عبوری را که وارد کرده اید ادامه دهید یا می خواهید یک رمز جدید را وارد کنید. با فرض اینکه از قدرت رمز عبوری که تازه وارد کرده اید راضی هستید ، Y را برای ادامه وارد کنید:
Output
Estimated strength of the password: 100
Do you wish to continue with the password provided?(Press y|Y for Yes, any other key for No) : Y

پس از آن ، می توانید Y و سپس ENTER را فشار دهید تا پیش فرض برای همه سؤالات بعدی را بپذیرید. با این کار برخی از کاربران ناشناس و بانک اطلاعاتی آزمایشی حذف می شوند ، ورود root به سیستم از راه دور غیرفعال می شود و این قوانین جدید را لود می کند تا MySQL فوراً با تغییراتی که ایجاد کرده اید منطبق شود.
با این کار ، MySQL را روی سرور مجازی CentOS 8 خود نصب و ایمن کرده اید. به عنوان مرحله آخر ، آزمایش خواهیم کرد که بانک اطلاعاتی همانطور که انتظار می رود در دسترس بوده و کار می کند.
مرحله 3 – تست MySQL
می توانید با اتصال به ابزار mysqladmin ، کلاینتی که به شما امکان اجرای دستورات ادمین را می دهد ، نصب خود را تأیید کنید و در مورد آن اطلاعات کسب کنید. از دستور زیر برای اتصال به MySQL به عنوان root (-u root) ، اعلان رمز عبور (-p) و بازگردانی نسخه نصب استفاده کنید:
$ mysqladmin -u root -p version

خروجی مشابه این را مشاهده خواهید کرد:
Output
mysqladmin Ver 8.0.17 for Linux on x86_64 (Source distribution)
Copyright (c) 2000, 2019, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Server version 8.0.17
Protocol version 10
Connection Localhost via UNIX socket
UNIX socket /var/lib/mysql/mysql.sock
Uptime: 2 hours 52 min 37 sec

Threads: 2 Questions: 20 Slow queries: 0 Opens: 131 Flush tables: 3 Open tables: 48 Queries per second avg: 0.001

این نشان می دهد که نصب شما موفقیت آمیز بود.
اگر می خواهید به MySQL وصل شوید و داده های خود را به آن اضافه کنید ، دستور زیر را اجرا کنید:
$ mysql -u root -p

مانند دستور mysqladmin قبلی ، این دستور شامل گزینه -u می باشد که به شما امکان می دهد تا کاربر مورد نظر برای اتصال ( به عنوان root در این حالت) و گزینه -p را مشخص کنید ، که به دستور می گوید رمز عبور کاربر که در مرحله قبل تنظیم کرده اید را از شما بخواهد.
پس از وارد کردن رمز کاربری MySQL ریشه خود ، اعلان MySQL را مشاهده می کنید:
mysql>
از آنجا ، می توانید با استفاده از نصب MySQL خود برای ایجاد و لود پایگاه داده و شروع اجرای جستارها استفاده کنید.
نتیجه
با دنبال کردن این آموزش ، MySQL را روی یک سرور مجازی CentOS 8 نصب و ایمن کرده اید. از اینجا ، می توانید Nginx و PHP را نصب کنید تا یک پشته LEMP کاملاً عملی روی سرور مجازی خود داشته باشید.
برای کسب اطلاعات بیشتر در مورد استفاده از MySQL ، ما شما را به مرور مطالب رسمی تشویق می کنیم.

 

 

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

استفاده از nsh برای دستورات از راه دور اوبونتو 18 –  میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18  –  ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4  –  ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta –  ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) –  با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django –  دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express  –  با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید  –  ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع  –  می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta  –   مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL  –  ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور  –  احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel  –  ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan  –  استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue  –  ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو  –  ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express  –  ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18  –  تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8  –  استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18  –  نصب Linux، Nginx، MariaDB،PHP در Debian 10

 

 

کلمات کلیدی خرید سرور

خرید vps – خرید سرور مجازی – خرید سرور – سرور هلند – فروش vps – سرور مجازی آمریکا – خریدvps – سرور مجازی هلند – فروش سرور مجازی – سرور آمریکا – vps – سرور مجازی انگلیس – سرور مجازی آلمان – سرور مجازی کانادا – خرید vps آمریکا – خرید وی پی اس – سرور – خرید سرور مجازی هلند – vps خرید – سرور مجازی فرانسه – سرور مجازی هلند – خرید vps آمریکا – خرید سرور مجازی ارزان هلند – vps – خرید vps هلند – خرید سرور مجازی آمریکا – خرید vps فرانسه – تست vps – سرور مجازی تست – سرور مجازی ویندوز – ارزانترین vps – خرید وی پی اس – vps ارزان – 

 

برچسب‌ها:8 MySQL, MariaDB, Python, SQL