.js يك محيط زمان اجراي جاواسكريپت منبع باز است كه مي توانيد برنامه هاي شبكه و سرور مجازي را به راحتي بسازيد. اين پلتفرم روي لينوكس ، OS X ، FreeBSD و ويندوز اجرا مي شود و برنامه هاي آن به زبان JavaScript نوشته شده اند. برنامه هاي Node.js را مي توان در خط فرمان اجرا كرد اما ما به شما ياد مي دهيم كه چگونه آنها را به عنوان يك سرويس اجرا كنيد ، بنابراين به صورت خودكار در هنگام ريبوت يا خرابي مجدداً راه اندازي مي شوند ، و مي توانيد از آنها در يك محيط توليد استفاده كنيد.
در اين آموزش ، تنظيم محيط Node.js آماده توليد را كه از دو سرور مجازي CentOS 7 تشكيل شده است ، پوشش خواهيم داد. يك سرور مجازي برنامه هاي Node.js را مديريت مي كند كه توسط PM2 اداره مي شود ، و ديگري دسترسي به برنامه را از طريق يك پروكسي معكوس Nginx به سرور مجازي برنامه فراهم مي كند.
نسخه اوبونتو اين آموزش را مي توان در اين لينك پيدا كرد.
پيش نيازها
اين راهنما از دو سرور مجازي CentOS 7 با شبكه خصوصي (در يك مركز داده) استفاده مي كند. شبكه هاي خصوصي را مي توان در هنگام ايجاد (در بخش Select additional options) روي سرور مجازي هاي جديد پيكربندي كرد. با نامهاي زير را به آنها ميدهيم:
app: سرور مجازي ي كه در آن Node.js ، برنامه Node.js و PM2 را نصب خواهيم كرد .
web: سرور مجازيي كه در آن سرور مجازي وب Nginx را نصب خواهيم كرد ، كه به عنوان يك پروكسي معكوس براي برنامه شما عمل مي كند. كاربران براي دريافت برنامه Node.js شما به آدرس IP عمومي اين سرور مجازي دسترسي پيدا مي كنند.
توجه: -گر قصد داريد از يك سرور مجازي موجود كه در حال حاضر شبكه هاي خصوصي پيكربندي شده ندارد ، استفاده كنيد، به مستندات vpsgol تحت عنوان نحوه فعال سازي شبكه خصوي روي دراپلت مراجعه كنيد .
قبل از شروع اين راهنما ، بايد يك كاربر معمولي غير ريشه داشته باشيد كه داراي امتيازات sudo و روي هر دو سرور مجازي شما تنظيم شده باشد – اين همان كاربري است كه بايد با آن به سرور مجازي خود وارد شويد. با پيروي از راهنماي تنظيم اوليه سرور مجازي CentOS 7 مي توانيد نحوه پيكربندي يك حساب كاربري معمولي را ياد بگيريد.
دستورات اجرا شده بر روي سرور مجازي app:
⦁ $ an_example_command_on_app
⦁
دستورات اجرا شده بر روي سرور مجازي web:
⦁ $ an_example_command_on_web
⦁
استفاده از يك سرور مجازي واحد براي اين آموزش امكان پذير است ، اما بايد در طول مسير چند تغيير ايجاد كنيد. هر جايي كه از آدرس IP خصوصي سرور مجازي app استفاده ميشود، به سادگي از آدرس IP localhost ، يعني 127.0.0.1 استفاده كنيد.
در اينجا نموداري از تنظيمات شما پس از دنبال كردن اين آموزش آورده شده است:

اگر مي خواهيد به جاي آدرس IP عمومي آن ، از طريق نام دامنه به سرور مجازي وب خود دسترسي پيدا كنيد ، يك نام دامنه خريداري كنيد و سپس اين آموزش ها را دنبال كنيد:
• نحوه تنظيم نام ميزبان با vpsgol
• چگونه از ثبت كنندگان دامنه به نام سرور مجازي vpsgol اشاره كنيم
بياييد با نصب ران تايم Node.js در سرور مجازي app شروع كنيم.
مرحله 1 – نصب Node.js
آخرين نسخه LTS Node.js را بر روي سرور مجازي app نصب خواهيم كرد.
با استفاده از كاربر معمولي و غير ريشه با امتيازات sudo به سرور مجازي app خود SSH كنيد.
در سرور مجازي app ، اجازه دهيد براي دانلود فايل پيكربندي مخزن NodeSource RPM از Curl استفاده كنيم:
⦁ $ curl -L -o nodesource_setup.sh https://rpm.nodesource.com/setup_10.x
⦁
CURL از پروتكل HTTPS براي دانلود اسكريپت ستاپ بر روي سرور مجازي شما استفاده مي كند ، و خروجي شامل اطلاعات مربوط به دانلود ميباشد:
Output
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 11109 100 11109 0 0 70128 0 –:–:– –:–:– –:–:– 70757

در مرحله بعد ، بايد محتواي اسكريپت را بازرسي كنيد. دستور زير اسكريپت راه اندازي NodeSource را در كنسول سرور مجازي هاي شما باز مي كند ، كه مي توانيد با استفاده از اسكريپت راه اندازي NodeSource (از مخزن Github توزيع هاي NodeSource) براي تأييد صحت اسكريپتي كه به درستي دانلود كرده است ، cross-reference انجام دهيد:
⦁ $ vi nodesource_setup.sh
⦁
پس از رضايت از فايل ، با تايپ كردن: q از vi خارج شويد تا به خط فرمان بازگرديد.
اكنون بياييد اسكريپت تنظيم را اجرا كنيم تا مخزن NodeSource RPM را نصب كنيم. اين كار ما را قادر مي سازد از داخل مدير بسته yum به مخزن NodeSource دسترسي پيدا كنيم:
⦁ $ sudo -E bash nodesource_setup.sh
⦁
اسكريپت براي مرجع ما اطلاعات مربوط به ستاپ را صادر مي كند:
Output
## Installing the NodeSource Node.js 10.x repo…

## Inspecting system…

+ rpm -q –whatprovides redhat-release || rpm -q –whatprovides centos-release || rpm -q –whatprovides cloudlinux-release || rpm -q –whatprovides sl-release
+ uname -m

## Confirming “el7-x86_64” is supported…

+ curl -sLf -o /dev/null ‘https://rpm.nodesource.com/pub_10.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm’

## Downloading release setup RPM…

+ mktemp
+ curl -sL -o ‘/tmp/tmp.2aCcULVx8n’ ‘https://rpm.nodesource.com/pub_10.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm’

## Installing release setup RPM…

+ rpm -i –nosignature –force ‘/tmp/tmp.2aCcULVx8n’

## Cleaning up…

+ rm -f ‘/tmp/tmp.2aCcULVx8n’

## Checking for existing installations…

+ rpm -qa ‘node|npm’ | grep -v nodesource

## Run `sudo yum install -y nodejs` to install Node.js 10.x and npm.
## You may also need development tools to build native addons:
sudo yum install gcc-c++ make
## To install the Yarn package manager, run:
curl -sL https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
sudo yum install yarn

قبل از نصب Node.js مهم است كه تمام اطلاعات ذخيره شده از yum را پاك كنيد. پاك كردن حافظه نهان اطمينان حاصل خواهد كرد كه yum از اتصال شبكه براي دريافت Node.js از مخازن جديد NodeSource ما استفاده مي كند (كه از بروز هرگونه درگيري احتمالي ناشي از بسته هاي منسوخ شده جلوگيري مي كند):
⦁ $ sudo yum clean all
⦁
در مرحله بعد همه ابرداده ها را براي repo هاي yum فعال شده دانلود و استفاده خواهيم كرد. اين كار اطمينان حاصل مي كند كه جستارهاي yum ما در اسرع وقت تكميل ميشوند:
⦁ $ sudo yum makecache fast
⦁
براي كامپايل و نصب add-ons بومي از npm نيز بايد ابزارهاي ساخت را نصب كنيم:
⦁ $ sudo yum install -y gcc-c++ make
⦁
اكنون مي توانيم آخرين نسخه بسته Node.js را نصب كنيم:
⦁ $ sudo yum install -y nodejs
⦁
با بررسي نسخه خود با اين دستور ، تأييد كنيد كه Node نصب شده است:
⦁ $ node -v
⦁

خروجي شما شماره نسخه شما را نشان مي دهد:
اكنون ران تايم Node.js نصب شده است و آماده اجراي يك برنامه است. بياييد يك برنامه Node.js بنويسيم.
مرحله 2 – ايجاد برنامه Node.js
اكنون يك برنامه Hello World ايجاد خواهيم كرد كه به سادگي “Hello World” را به هر درخواست HTTP باز مي گرداند. اين يك برنامه نمونه است كه به شما در راه اندازي Node.js كمك مي كند ، كه مي توانيد برنامه خود را جايگزين آن كنيد فقط مطمئن شويد كه برنامه خود ر به گونه اي اصلاح كرده ايد كه به آدرس هاي IP و پورت هاي مناسب گوش دهيد.
از آنجا كه مي خواهيم برنامه Node.js ما درخواستهايي را كه از سرور مجازي پروكسي معكوس (web) مي آيند ، ارائه كند ، ما از رابط شبكه خصوصي سرور مجازي app خود براي ارتباطات بين سرور مجازي استفاده خواهيم كرد. آدرس شبكه خصوصي سرور مجازي app خود را جستجو كنيد.
اگر از يك دراپلت vpsgol به عنوان سرور مجازي خود استفاده مي كنيد ، مي توانيد آدرس IP خصوصي سرور مجازي را از طريق سرويس Metadata جستجو كنيد. در سرور مجازي app ، از دستور curl براي بازيابي آدرس IP استفاده كنيد:
⦁ $ curl -sw “n” http://169.254.169.254/metadata/v1/interfaces/private/0/ipv4/address
⦁
بهتر است خروجي (آدرس IP خصوصي) را كپي كنيد ، زيرا براي پيكربندي برنامه Node.js استفاده خواهد شد.
در مرحله بعد ، برنامه Node.js خود را براي ويرايش ايجاد و باز كنيد. براي اين آموزش از vi براي ويرايش يك برنامه نمونه به نام hello.js استفاده خواهيم كرد:
⦁ $ vi hello.js
⦁
كد زير را در فايل وارد كنيد و حتما آدرس IP خصوصي سرور مجازي app را براي هر دو مورد هايلايت شده APP_PRIVATE_IP_ADDRESS جايگزين كنيد. در صورت تمايل ، مي توانيد در هر دو مكان ، پورت هايلايت شده ، 8080 را جايگزين كنيد (حتما از پورت غير ادمين ، يعني 1024 يا بالاتر استفاده كنيد):
hello.js
var http = require(‘http’);
http.createServer(function (req, res) {
res.writeHead(200, {‘Content-Type’: ‘text/plain’});
res.end(‘Hello Worldn’);
}).listen(8080, ‘APP_PRIVATE_IP_ADDRESS’);
console.log(‘Server running at http://APP_PRIVATE_IP_ADDRESS:8080/’);

اكنون با فشار دادن ESC براي خروج از حالت –INSERT—فايل را ذخيره كنيد و از آن خارج شويد ، و پس از آن: wq را براي نوشتن و ترك برنامه در يك فرمان واحد وارد كنيد.
اين برنامه Node.js به سادگي آدرس و پورت IP مشخص شده را دنبال مي دهد و “Hello World” را با يك كد موفقيت 200 HTTP برمي گرداند. بدان معنا كه برنامه فقط از سرور مجازي هاي همان شبكه خصوصي مانند سرور مجازي وب ما قابل دسترسي است.
اگر مي خواهيد تست كنيد كه برنامه شما كار مي كند ، اين دستور node را روي سرور مجازي app اجرا كنيد:
⦁ $ node hello.js
⦁
توجه: اجراي يك برنامه Node.js به اين روش ، دستورات اضافي را مسدود مي كند تا اينكه با فشار دادن CTRL + C ، برنامه بسته شود.

اگر براي اولين بارآزمايش كنيم كه سرور مجازي web ما قادر به برقراري ارتباط با برنامه Node.js در app است ، مقدار زيادي از اشكال زدايي Nginx ذخيره مي شود.
براي تست برنامه ، بخش ترمينال ديگري را باز كرده و به سرور مجازي web خود متصل شويد. از آنجا كه سرور مجازي web در همان شبكه خصوصي قرار دارد ، بايد بتواند با استفاده از curl به آدرس IP خصوصي سرور مجازي app برسد. حتماً در آدرس IP سرور مجازي app ، APP_PRIVATE_IP_ADDRESS و پورت را در صورت تغيير جايگزين كنيد:
⦁ $ curl http://APP_PRIVATE_IP_ADDRESS:8080
⦁
اگر خروجي زير را مشاهده كنيد ، برنامه به درستي كار مي كند و آدرس و پورت IP مناسب را گوش مي دهد:
Node Application Output
Hello World

اگر خروجي مناسب را نمي بينيد ، مطمئن شويد كه برنامه Node.js شما در حال اجرا است و براي گوش دادن به آدرس IP و درگاه مناسب پيكربندي شده است.
در سرور مجازي app ، با فشار دادن CTRL + C ، برنامه را به اجبار ببنديد.
مرحله 3 – نصب و استفاده از PM2
اكنون PM2 را نصب خواهيم كرد كه يك مدير پروسه براي برنامه هاي Node.js است. PM2 روشي آسان براي مديريت و daemon كردن برنامه ها (اجراي آنها به عنوان يك سرويس) فراهم مي كند.
ما براي نصب PM2 روي سرور مجازي app خود از ماژول هاي بسته بندي شده Node (NPM) استفاده خواهيم كرد كه در واقع يك مدير بسته براي ماژول هاي Node است كه با Node.js نصب مي كند. براي نصب PM2 از اين دستور استفاده كنيد:
⦁ $ sudo npm install pm2@latest -g
⦁
ما چند كاربرد اصلي PM2 را پوشش خواهيم داد.
اولين كاري كه بايد انجام دهيد اينست كه از دستور pm2 start براي اجراي برنامه خود ، hello.js ، در پس زمينه استفاده كنيد:
⦁ $ pm2 start hello.js
⦁

اين كار همچنين برنامه شما را به ليست فرآيند PM2 اضافه مي كند ، كه با هر بار شروع برنامه، خروجي به بيرون ميفرستد:
Output
┌──────────┬────┬──────┬───────┬────────┬─────────┬────────┬─────────────┬──────────┐
│ App name │ id │ mode │ pid │ status │ restart │ uptime │ memory │ watching │
├──────────┼────┼──────┼───────┼────────┼─────────┼────────┼─────────────┼──────────┤
│ hello │ 0 │ fork │ 30099 │ online │ 0 │ 0s │ 14.227 MB │ disabled │
└──────────┴────┴──────┴───────┴────────┴─────────┴────────┴─────────────┴──────────┘

همانطور كه مشاهده مي كنيد ، PM2 بطور خودكار نام برنامه (بر اساس نام فايل ، بدون پسوند .js) و شناسه PM2 را اختصاص مي دهد. PM2 همچنين اطلاعات ديگري مانند PID روند ، وضعيت فعلي آن و استفاده از حافظه را نگه ميدارد.
برنامه هايي كه تحت PM2 در حال اجرا هستند در صورت خراب شدن برنامه يا بسته شدن برنامه به صورت خودكار مجدداً راه اندازي مي شوند ، اما براي شروع برنامه (بوت يا ريبوت)، بايد يك گام ديگر انجام شود. خوشبختانه ، PM2 با فرمان startup  راهي آسان براي انجام اين كار فراهم مي كند.
فرمان فرعي startup  براي راه اندازي PM2 و فرآيندهاي مديريت شده آن روي بوت هاي سرور مجازي ، يك اسكريپت راه اندازي ايجاد و پيكربندي مي كند. در مورد مثال ما ، بايد سيستم اوليه در حال اجرا كه systemd است را مشخص كنيد:
⦁ $ sudo pm2 startup systemd
⦁

خروجي مانند زير را مشاهده خواهيد كرد ، كه نشان مي دهد سرويس PM2 نصب شده است:
Output
[PM2] Generating system init script in /etc/systemd/system/pm2.service
[PM2] Making script booting at startup…
[PM2] -systemd- Using the command:
su root -c “pm2 dump && pm2 kill” && su root -c “systemctl daemon-reload && systemctl enable pm2 && systemctl start pm2”
[PM2] Dumping processes
[PM2] Stopping PM2…
[PM2] All processes have been stopped and deleted
[PM2] PM2 stopped
[PM2] Done.

براي اطمينان از اينكه PM2 مي داند از چه برنامه هايي براي شروع كار استفاده مي كند ، بايد ليست روند فعلي را ذخيره كنيم. براي ذخيره ليست:
⦁ $ pm2 save
⦁
خروجي مانند زير را مشاهده خواهيد كرد ، كه نشان مي دهد ليست فرآيند PM2 ذخيره شده است:
Output
[PM2] Saving current process list…
[PM2] Successfully saved in /home/deployer/.pm2/dump.pm2

اكنون برنامه هاي مديريت شده PM2 شما بايد بطور خودكار در بوت شروع شوند.
PM2 فرمان هاي فرعي زيادي را در اختيار شما قرار مي دهد تا بتوانيد اطلاعات مربوط به برنامه هاي خود را مديريت و جستجو كنيد. توجه داشته باشيد كه اجراي PM2 بدون هيچگونه آرگوماني ، صفحه راهنمايي شامل استفاده مثال را نمايش مي دهد كه استفاده از PM2 را با جزئيات بيشتر از اين بخش از آموزش پوشش مي دهد.
يك برنامه را با اين دستور متوقف كنيد (نام برنامه يا شناسه PM2 برنامه را مشخص كنيد):
⦁ $ pm2 stop example
⦁
برنامه را با اين دستور مجدداً راه اندازي كنيد (نام برنامه يا شناسه PM2 برنامه را مشخص كنيد):
⦁ $ pm2 restart example
⦁
ليست برنامه هايي كه در حال حاضر توسط PM2 مديريت مي شوند را مي توان با فرمان فرعي list جستجو كرد:
⦁ $ pm2 list
⦁

با استفاده از فرمان فرعي info مي توانيد اطلاعات بيشتري در مورد يك برنامه خاص را پيدا كنيد (نام يا شناسه برنامه PM2 را مشخص كنيد):
⦁ $ pm2 info example
⦁
مانيتور فرآيند PM2 را مي توان با فرمان فرعي monit انجام داد. اين كار وضعيت برنامه ، CPU و استفاده از حافظه را نشان مي دهد:
⦁ $ pm2 monit
⦁

توجه: اجراي دستور monit PM2 دستورات اضافي را مسدود مي كند تا برنامه با فشار دادن CTRL + C بسته شود.
اكنون كه برنامه Node.js شما در حال اجرا و توسط PM مديريت مي شود، بياييد پروكسي معكوس را تنظيم كنيم.
مرحله 4 – تنظيم سرور مجازي پروكسي معكوس Nginx
اكنون كه برنامه شما در حال اجراست و يك آدرس IP خصوصي را شنود ميكنيد، بايد راهي براي دسترسي كاربران خود تنظيم كنيد. ما يك سرور مجازي وب Nginx را به عنوان يك پروكسي معكوس براي اين منظور تنظيم مي كنيم. اين آموزش يك سرور مجازي Nginx را از scratchتنظيم مي كند. اگر قبلاً تنظيمات سرور مجازي Nginx را انجام داده ايد ، مي توانيد فقط بلوك location را در بلوك سرور مجازي مورد نظر خود كپي كنيد (اطمينان حاصل كنيد كه location با هيچ بخشي از محتواي موجود سرور مجازي وب شما مغايرت نداشته باشد).
در سرور مجازي web ، بياييد بسته epel-releaseرا با استفاده از yum نصب كنيم:
⦁ $ sudo yum install epel-release
⦁
سپس Nginx را نصب كنيد:
⦁ $ sudo yum install nginx
⦁

اكنون فايل پيكربندي Nginx را براي ويرايش باز كنيد:
⦁ $ sudo vi /etc/nginx/nginx.conf
⦁

ابتدا خطي را كه server_name تعريف شده است ، در بلوك پيش فرض سرور مجازي پيدا كنيد. بايد چيزي شبيه به اين باشد:
nginx.conf excerpt — server_name (before)
server_name _;

نام سرور مجازي را به روز كنيد تا زيرنويس (_) را با نام دامنه خود براي دستور server_name جايگزين كنيد (يا اگر آدرس دامنه نداريد آدرس IP را جايگزين كنيد).
nginx.conf excerpt — server_name (after)
server_name your-domain;

سپس خطي را كه location/ تعريف شده است (معمولاً چند خط زير server_name) ، در همان بلوك پيش فرض سرور مجازي پيدا كنيد. بايد چيزي شبيه به اين باشد:
nginx.conf excerpt — location / (before)
location / {
}

آن را با بلوك كد زير جايگزين كنيد و مطمئن شويد آدرس IP خصوصي سرور مجازي app را جايگزين APP_PRIVATE_IP_ADDRESS كنيد. علاوه بر اين ، در صورت تنظيم برنامه براي گوش دادن به پورت هاي مختلف، پورت (8080) را تغيير دهيد:
/etc/nginx/nginx.conf excerpt — location / (after)
location / {
غير مجاز مي باشد_pass http://APP_PRIVATE_IP_ADDRESS:8080;
غير مجاز مي باشد_http_version 1.1;
غير مجاز مي باشد_set_header Upgrade $http_upgrade;
غير مجاز مي باشد_set_header Connection ‘upgrade’;
غير مجاز مي باشد_set_header Host $host;
غير مجاز مي باشد_cache_bypass $http_upgrade;
}

اين كار سرور مجازي web را پيكربندي مي كند تا به عنوان ريشه به درخواست ها پاسخ دهد. با فرض اينكه سرور مجازي ما در your-domain موجود است ، دسترسي به http://your-domain/ از طريق يك مرورگر وب ، درخواست را به آدرس IP خصوصي سرور مجازي app در پورت 8080 ارسال مي كند ، كه توسط Node.js دريافت و به آن پاسخ داده ميشود.
براي دسترسي به ساير برنامه ها در همان سرور مجازي web ، مي توانيد بلوك هاي location بيشتري را به همان سرور مجازي اضافه كنيد. به عنوان مثال ، اگر برنامه node.js ديگري را در سرور مجازي app در پورت 8081 اجرا كرده ايد ، مي توانيد اين بلوك location را اضافه كنيد تا از طريق http: // your-domain / app2 به آن دسترسي داشته باشيد:
Nginx Configuration — Additional Locations
location /app2 {
غير مجاز مي باشد_pass http://APP_PRIVATE_IP_ADDRESS:8081;
غير مجاز مي باشد_http_version 1.1;
غير مجاز مي باشد_set_header Upgrade $http_upgrade;
غير مجاز مي باشد_set_header Connection ‘upgrade’;
غير مجاز مي باشد_set_header Host $host;
غير مجاز مي باشد_cache_bypass $http_upgrade;
}

پس از انجام ويرايش بلوك (هاي) مكان براي برنامه (هاي) خود ، آن را ذخيره كنيد با فشار دادن ESC از حالت –INSERT– ، خارج شويد ، به دنبال آن: wq را براي نوشتن و ترك كردن در يك فرمان واحد تايپ كنيد.
در سرور مجازي وب ، Nginx را مجدداً راه اندازي كنيد:
$ sudo systemctl start nginx
⦁
سپس مي خواهيم اطمينان حاصل كنيم كه Nginx هر زمان كه سرور مجازي ريستارت شود ، اجرا خواهد شد:
⦁ $ sudo systemctl enable nginx
⦁

دستور enable بايد خروجي زير را ارائه دهد
Output
Created symlink from /etc/systemd/system/multi-user.target.wants/nginx.service to /usr/lib/systemd/system/nginx.service.

همچنين با درخواست وضعيت آن از systemctl مي توانيد تأييد كنيد كه Nginx در حال اجرا و فعال است.
⦁ $ sudo systemctl status nginx
⦁
دستور وضعيت اطلاعات پيكربندي را براي سرويس Nginx ارائه مي دهد
Output
● nginx.service – The nginx HTTP and reverse غير مجاز مي باشد server
Loaded: loaded (/usr/lib/systemd/system/nginx.service; enabled; vendor preset: disabled)
Active: active (running) since Mon 2019-10-14 09:37:23 UTC; 3min 29s ago
Main PID: 12818 (nginx)
CGroup: /system.slice/nginx.service
├─12818 nginx: master process /usr/sbin/nginx
└─12819 nginx: worker process

Oct 14 09:37:23 centos-s-1vcpu-1gb-sgp1-01 systemd[1]: Starting The nginx HTTP and reverse غير مجاز مي باشد server…
Oct 14 09:37:23 centos-s-1vcpu-1gb-sgp1-01 nginx[12814]: nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
Oct 14 09:37:23 centos-s-1vcpu-1gb-sgp1-01 nginx[12814]: nginx: configuration file /etc/nginx/nginx.conf test is successful
Oct 14 09:37:23 centos-s-1vcpu-1gb-sgp1-01 systemd[1]: Failed to read PID from file /run/nginx.pid: Invalid argument
Oct 14 09:37:23 centos-s-1vcpu-1gb-sgp1-01 systemd[1]: Started The nginx HTTP and reverse غير مجاز مي باشد server.

سرانجام ، امكان انتقال مجدد ترافيك از طريق لينوكس با امنيت بالا (SELinux) را به Nginx ارائه ميدهد. SELinux يك لايه امنيتي را فراهم مي كند كه كنترل دسترسي اجباري (MAC) را در هسته لينوكس پياده سازي مي كند. هر شيء سيستم عامل (پردازش ، توصيف كننده فايل ، فايل و غيره) با يك مفهوم SELinux برچسب گذاري شده است كه مجوزها و عملكردهايي را كه شي مي تواند انجام دهد ، مشخص مي كند.
Nginx با متن httpd_t برچسب گذاري شده است و در نتيجه ، پيكربندي هايي دارد توسط SELinux مسدود شده است ، مگر اينكه صريحاً مجاز باشد. براي نشان دادن اين مسئله، دستور زير را اجرا كنيد تا تأييد كنيد كه سرويس Nginx داراي برچسب httpd_t است:
⦁ $ ps -eZ
⦁
اين دستور اطلاعات مربوط به وضعيت فرآيند را ارائه مي دهد ، اطلاعات مربوط به فرآيند خاص Nginx را براي ديدن برچسب جستجو ميكند. شما httpd_t را به روشي مشابه زير مشاهده خواهيد كرد:
Output
…
system_u:system_r:httpd_t:s0 10208 ? 00:00:00 nginx
system_u:system_r:httpd_t:s0 10209 ? 00:00:00 nginx
…

اكنون بياييد وضعيت بولي هاي پيش فرض (متغير دو بايتي) مربوط به برچسب httpd_t SELinux را بررسي كنيم. مي توانيم با اجراي دستور زير اين اطلاعات را نشان دهيم:
⦁ $ $ getsebool -a
⦁

براي اين آموزش فقط به بولي هاي مربوط به httpd علاقه مند هستيم:
Output
…
httpd_anon_write –> off
httpd_builtin_scripting –> on
httpd_can_check_spam –> off
httpd_can_connect_ftp –> off
httpd_can_connect_ldap –> off
httpd_can_connect_mythtv –> off
httpd_can_connect_zabbix –> off
httpd_can_network_connect –> off
httpd_can_network_connect_cobbler –> off
httpd_can_network_connect_db –> off
httpd_can_network_memcache –> off
httpd_can_network_relay –> off
httpd_can_sendmail –> off
httpd_dbus_avahi –> off
httpd_dbus_sssd –> off
httpd_dontaudit_search_dirs –> off
httpd_enable_cgi –> on
httpd_enable_ftp_server –> off
httpd_enable_homedirs –> off
httpd_execmem –> off
httpd_graceful_shutdown –> on
httpd_manage_ipa –> off
httpd_mod_auth_ntlm_winbind –> off
httpd_mod_auth_pam –> off
httpd_read_user_content –> off
httpd_run_ipa –> off
httpd_run_preupgrade –> off
httpd_run_stickshift –> off
httpd_serve_cobbler_files –> off
httpd_setrlimit –> off
httpd_ssi_exec –> off
httpd_sys_script_anon_write –> off
httpd_tmp_exec –> off
httpd_tty_comm –> off
httpd_unified –> off
httpd_use_cifs –> off
httpd_use_fusefs –> off
httpd_use_gpg –> off
httpd_use_nfs –> off
httpd_use_openstack –> off
httpd_use_sasl –> off
httpd_verify_dns –> off
…

اين دو بولي خاص ، httpd_can_network_connect و httpd_can_network_relay هستند. مستندات Redhat جزئيات مربوط به هر يك از بولي هاي httpd و عملكرد مرتبط با آنها را ارائه مي دهد (در صورتي كه تمايل به كسب اطلاعات بيشتر در مورد هر بولي داريد) ، اگرچه در زير توضيحات دو بولي كه مربوط به اين آموزش است آورده شده است:
…
httpd_can_network_connect: When disabled, this Boolean prevents HTTP scripts and modules from initiating a connection to a network or remote port. Enable this Boolean to allow this access.
httpd_can_network_relay: Enable this Boolean when httpd is being used as a forward or reverse غير مجاز مي باشد.
…

از آنجا كه پيكربندي ما فقط ترافيك را رله مي كند ، فقط بايد به SELinux بگوييم كه سرور مجازي httpd ، در مورد ما Nginx ، مي تواند از شبكه براي رله ترافيك در پيكربندي پروكسي معكوسي كه تنظيم كرده ايم استفاده كند. ما از پرچم -P استفاده خواهيم كرد ، تا اطمينان حاصل شود كه تغييرات دائمي هستند (حذف اين پرچم منجر به بازگشت httpd_can_network_relay به حالت پيش فرض آن ، يعني خاموش ، با راه اندازي مجدد سرور مجازي خواهد شد):
⦁ $ sudo setsebool -P httpd_can_network_relay on
⦁

با فرض اينكه برنامه Node.js شما در حال اجرا است ، و برنامه شما و تنظيمات Nginx صحيح هستند ، بايد بتوانيد از طريق پروكسي معكوس سرور مجازي web به برنامه خود دسترسي پيدا كنيد. با دسترسي به URL سرور مجازي web خود (آدرس IP عمومي يا نام دامنه) آن را امتحان كنيد.
توجه: اگر همچنين قصد داشتيد از سرور مجازي web خود براي ميزباني سايتهاي ديگر (به عنوان ميزبان مجازي معمولي) استفاده كنيد ، لازم است كه httpd_can_network_connect را روشن كنيد.

نتيجه
اكنون برنامه Node.js شما در پس يك پروكسي معكوس Nginx در حال اجرا است. اين تنظيم پروكسي معكوس به اندازه كافي انعطاف پذير است تا دسترسي كاربران شما به ديگر برنامه ها يا محتواي وب استاتيك را كه مي خواهيد به اشتراك بگذاريد ، فراهم نمايد.
همچنين اگر به دنبال انتقالات رمزگذاري شده بين سرور مجازي وب و كاربران خود هستيد ، در اينجا آموزشي مطرح شده است كه به شما كمك مي كند تا پشتيباني HTTPS (TLS / SSL) را تنظيم كنيد

سرور مجازي Apache HTTP پركاربردترين وب سرور مجازي در جهان است. اين سرور مجازي بسياري از ويژگي هاي قدرتمند از جمله ماژول هاي قابل بارگيري پويا ، پشتيباني رسانه اي قوي و ادغام گسترده با ساير نرم افزارهاي محبوب را ارائه مي دهد.
در اين راهنما نحوه نصب يك وب سرور مجازي Apache را در سرور مجازي Debian 10 شما توضيح خواهيم داد.
پيش نيازها
قبل از شروع اين راهنما ، بايد يك كاربر معمولي و غير ريشه با امتيازات sudo در سرور مجازي خود داشته باشيد. علاوه بر اين ، بايد يك فايروال پايه را فعال كنيد تا پورت هاي غير ضروري را مسدود نماييد. با پيروي از راهنماي تنظيم اوليه سرور مجازي براي Debian 10 مي توانيد نحوه پيكربندي يك حساب كاربري معمولي و تنظيم فايروال را براي سرور مجازي خود بياموزيد.
هنگامي كه يك حساب كاربري در اختيار گرفتيد ، به عنوان كاربر غير ريشه خود وارد شويد.
مرحله 1 – نصب Apache
Apache در مخازن پيش فرض نرم افزار Debian موجود است و امكان نصب آن با استفاده از ابزارهاي مديريت بسته معمولي امكان پذير است.
بياييد با به روز كردن فهرست بسته محلي شروع كنيم تا آخرين تغييرات بالادست را منعكس كنيم:
⦁ $ sudo apt update
⦁
سپس بسته apache2 را نصب كنيد:
⦁ $ sudo apt install apache2
⦁
پس از تأييد نصب ، apt و تمام متعلقات مورد نياز را نصب مي كند.
مرحله 2 – تنظيم فايروال
قبل از آزمايش Apache ، لازم است تنظيمات فايروال را اصلاح كنيد تا دسترسي خارجي به پورت هاي پيش فرض وب را بدهيد. با فرض اينكه دستورالعمل هاي پيش نياز را رعايت كرده باشيد ، بايد فايروال UFW را تنظيم كرده تا دسترسي به سرور مجازي شما محدود شود.
در حين نصب ، Apache خود را با UFW ثبت مي كند تا چند پروفايل برنامه ارائه دهد كه مي تواند براي فعال يا غيرفعال كردن دسترسي به Apache از طريق فايروال استفاده شود.
پروفايل برنامه ufw را با تايپ كردن دستور زير ليست كنيد:
⦁ $ sudo ufw app list
⦁

ليستي از پروفايل هاي برنامه را مشاهده خواهيد كرد:
Output
Available applications:
AIM
Bonjour
CIFS
. . .
WWW
WWW Cache
WWW Full
WWW Secure
. . .

پروفايل هاي Apache با WWW آغاز مي شود:
WWW: اين نمايه فقط پورت 80 را باز مي كند (ترافيك وب عادي و بدون رمزگذاري)
WWW Cache: اين نمايه فقط پورت 8080 را باز مي كند (گاهي اوقات براي ذخيره سازي و پروكسي هاي وب استفاده مي شود)
WWW Full: اين نمايه هر دو پورت 80 (ترافيك وب عادي ، بدون رمزگذاري) و پورت 443 (ترافيك رمزگذاري شده TLS / SSL) را باز مي كند
WWW Secure: اين نمايه فقط پورت 443 را باز مي كند (ترافيك رمزگذاري شده TLS / SSL)
توصيه مي شود محدودترين نمايه اي را كه امكان ترافيك پيكربندي شده شما را فراهم مي كند ، فعال كنيد. از آنجا كه ما هنوز در اين راهنما SSL را براي سرور مجازي خود پيكربندي نكرده ايم ، فقط نياز به ترافيك در بندر 80 داريم:
⦁ $ sudo ufw allow ‘WWW’
⦁
مي توانيد تغيير را با تايپ دستور زير تأييد كنيد:
⦁ $ sudo ufw status
⦁
بايد ترافيك HTTP مجاز در خروجي نمايش داده شده را مشاهده كنيد:
Output
Status: active

To Action From
— —— —-
OpenSSH ALLOW Anywhere
WWW ALLOW Anywhere
OpenSSH (v6) ALLOW Anywhere (v6)
WWW (v6) ALLOW Anywhere (v6)

همانطور كه مشاهده مي كنيد ، نمايه براي دسترسي به سرور مجازي وب فعال شده است.
مرحله 3 – بررسي سرور مجازي وب خود
در پايان مراحل نصب ، Debian 10 ، Apache را شروع مي كند. اكنون وب سرور مجازي بايد راه اندازي و در حال اجرا باشد.
با سيستم init systemed بررسي كنيد تا مطمئن شويد اين سرويس در حال اجراست ، دستور زير را تايپ كنيد:
⦁ $ sudo systemctl status apache2
⦁
Output
● apache2.service – The Apache HTTP Server
Loaded: loaded (/lib/systemd/system/apache2.service; enabled; vendor preset: enabled)
Active: active (running) since Fri 2019-07-19 15:33:01 UTC; 4min 13s ago
Docs: https://httpd.apache.org/docs/2.4/

. . .

Jul 19 15:33:01 debssh systemd[1]: Starting The Apache HTTP Server…
Jul 19 15:33:01 debssh apachectl[2791]: AH00558: apache2: Could not reliably determine the server’s fully qualified domain name, using 127.0.1.1. Set the ‘ServerName’ directive global
Jul 19 15:33:01 debssh systemd[1]: Started The Apache HTTP Server.

همانطور كه از اين خروجي مي بينيد ، به نظر مي رسد اين سرويس با موفقيت شروع شده است. با اين حال ، بهترين راه براي آزمايش، درخواست يك صفحه از Apache است.
براي تأييد صحت اجراي نرم افزار از طريق آدرس IP خود ، مي توانيد به صفحه فرود پيش فرض Apache دسترسي پيدا كنيد. اگر آدرس IP سرور مجازي خود را نمي دانيد ، مي توانيد آن را به چند راه مختلف از خط فرمان دريافت كنيد.
سعي كنيد اين را در خط فرمان سرور مجازي خود تايپ كنيد:
⦁ $ hostname -I
⦁

چند آدرس كه با فاصله از هم جدا شده اند، دريافت مي كنيد. مي توانيد هركدام را در مرورگر وب خود امتحان كنيد تا ببينيد كه آيا كار مي كنند.
راه ديگر استفاده از ابزار curl است كه بايد آدرس IP عمومي خود را همانطور كه از مكان ديگري در اينترنت مشاهده مي شود به شما بدهد.
ابتدا ، curl را با استفاده از aptنصب كنيد:
⦁ $ sudo apt install curl
⦁
سپس از curl براي بازيابي icanhazip.com به كمك IPv4 استفاده نماييد.
⦁ $ curl -4 icanhazip.com

هنگامي كه آدرس IP سرور مجازي خود را داريد ، آن را در نوار آدرس مرورگر خود وارد كنيد:
⦁
http://your_server_ip

بايد صفحه وب پيش فرض Debian 10 Apache را ببينيد:

اين صفحه نشان مي دهد كه Apache درست كار مي كند. اين برنامه همچنين شامل برخي از اطلاعات اوليه در مورد فايل هاي مهم Apache و مكان هاي فهرست بندي است.
مرحله 4 – مديريت فرايند Apache
اكنون كه سرور مجازي وب خود را فعال و راه اندازي كرده ايد ، اجازه دهيد برخي از دستورات مديريت اصلي را مرور كنيم.
براي متوقف كردن سرور مجازي وب خود ، تايپ كنيد:
⦁ $ sudo systemctl stop apache2
⦁

براي شروع سرور مجازي وب وقتي متوقف شده است ، تايپ كنيد:
⦁ $ sudo systemctl start apache2
⦁
براي متوقف كردن و شروع مجدد سرويس ، تايپ كنيد:
⦁ $ sudo systemctl restart apache2
⦁
اگر به سادگي تغييرات پيكربندي را انجام مي دهيد ، Apache اغلب مي تواند بدون افت اتصالات مجدد لود شود. براي انجام اين كار ، از اين دستور استفاده كنيد:
⦁ $ sudo systemctl reload apache2
⦁
به طور پيش فرض ، Apache به گونه اي پيكربندي مي شود كه به طور خودكار با بوت شدن سرور مجازي شروع به كار كند. اگر اين چيزي نيست كه شما مي خواهيد ، با تايپ كردن اين دستور آن را غيرفعال كنيد:
⦁ $ sudo systemctl disable apache2
⦁
براي فعال كردن مجدد سرويس در هنگام بوت ، اين دستور را تايپ كنيد:
⦁ $ sudo systemctl enable apache2
⦁

با شروع مجدد بوت شدن سرويس دهنده ، اكنون Apache بايد به طور خودكار شروع كند.
مرحله 5 – تنظيم ميزبان هاي مجازي (توصيه مي شود(
هنگام استفاده از وب سرور مجازي Apache ، مي توانيد از هاست هاي مجازي (مشابه بلوك هاي سرور مجازي در Nginx ) براي محصور كردن جزئيات پيكربندي و ميزباني بيش از يك دامنه از يك سرور مجازي واحد استفاده كنيد. در دستورات زير ، your_domain را با نام دامنه خود جايگزين كنيد. براي كسب اطلاعات بيشتر در مورد تنظيم نام دامنه با vpsgol ، به مقدمه ما در vpsgol DNS مراجعه كنيد.
Apache در Debian 10 داراي يك بلوك سرور مجازي است كه به طور پيش فرض فعال شده است تا اسناد را از ديركتوري / var / www / html. ارائه دهد.اگرچه اين براي يك سايت واحد به خوبي كار مي كند ، اما اگر ميزبان چندين سايت باشيد ، مي تواند با مشكل روبه رو شود. به جاي اصلاح / var / www / html ، بياييد يك ساختار دايركتوري در / var / www براي سايت your_domain ايجاد كنيم ، در اين صورت / var / www / html را به عنوان دايركتوري پيش فرض قرار مي دهيم كه در صورتي كه درخواست كلاينت با هيچ سرويسي مطابقت نداشته باشد، ارائه شود.
با استفاده از پرچم -p ، براي ايجاد هر ديركتوري لازم ، ديركتوري را براي your_domain به صورت زير ايجاد كنيد:
sudo mkdir -p /var/www/your_domain
سپس ، مالكيت دايركتوري را با متغير محيطي $ USER اختصاص دهيد:
⦁ $ sudo chown -R $USER:$USER /var/www/your_domain
⦁
در صورتي كه مقدار unmask خود را تغيير نداده ايد ، مجوزهاي ريشه وب شما بايد صحيح باشد ، اما مي توانيد با تايپ دستور زير مطمئن شويد:
⦁ $ sudo chmod -R 755 /var/www/your_domain
⦁
سپس ، با استفاده از nano يا ويرايشگر مورد علاقه خود ، صفحه index.html نمونه را ايجاد كنيد:
⦁ $ nano /var/www/your_domain/index.html
⦁
در داخل ، HTML نمونه زير را اضافه كنيد:
/var/www/your_domain/index.html

Success! The your_domain virtual host is working!

پس از اتمام فايل را ذخيره كنيد و ببنديد.
براي اينكه Apache بتواند اين محتوا را ارائه دهد ، بايد يك فايل ميزبان مجازي با بخشنامه هاي صحيح ايجاد كنيد. به جاي تغيير فايل پيكربندي پيش فرض واقع در /etc/apache2/sites-available/000-default.conf ، اجازه دهيد فايل جديدي را در /etc/apache2/sites-available/your_domain.conf ايجاد كنيم:
⦁ $ sudo nano /etc/apache2/sites-available/your_domain.conf
⦁
در بلوك پيكربندي زير كه مشابه پيش فرض است ، پيست كنيد اما براي ديركتوري جديد و نام دامنه آن را به روز كنيد:
/etc/apache2/sites-available/your_domain.conf

ServerAdmin admin@your_email_domain
ServerName your_domain
ServerAlias www.your_domain
DocumentRoot /var/www/your_domain
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined

توجه كنيد كه ما DocumentRoot را در دايركتوري جديد خود و ServerAdmin را به ايميلي كه به مدير سايت your_domain دسترسي دارد ، به روز كرده ايم. همچنين دو دستورالعمل اضافه كرده ايم: ServerName ، كه دامنه پايه اي را كه بايد براي اين تعريف ميزبان مجازي مطابقت داشته باشد منتشر ميكند، و ServerAlias ​​، كه نامهاي ديگري را تعريف مي كند كه بايد مطابق با نام اصلي باشند.
پس از اتمام فايل را ذخيره كنيد و ببنديد.
بياييد فايل را با ابزار a2ensite فعال كنيم:
⦁ $ sudo a2ensite your_domain.conf
⦁
سايت پيش فرض تعريف شده در 000-default.conf را غيرفعال كنيد.
⦁ $ sudo a2dissite 000-default.conf
⦁
سپس ، خطاهاي پيكربندي را آزمايش كنيد:
⦁ $ sudo apache2ctl configtest
⦁
بايد خروجي زير را مشاهده كنيد:
Output
AH00558: apache2: Could not reliably determine the server’s fully qualified domain name, using 127.0.1.1. Set the ‘ServerName’ directive globally to suppress this message
Syntax OK

براي اجراي تغييرات مجدد Apache را راه اندازي كنيد.
⦁ $ sudo systemctl restart apache2
⦁
اكنون Apache بايد در خدمت نام دامنه شما باشد. مي توانيد با رفتن به http: // your_domain آن را تست كنيد، در آن جا بايد چيزي شبيه به اين را مشاهده كنيد :

مرحله ششم – آشنايي با فايل ها و ديركتوري هاي Apache
اكنون كه مي دانيد چگونه خود سرويس Apache را مديريت كنيد ، بايد چند دقيقه وقت بگذاريد تا با چند ديركتوري و فايل مهم آشنا شويد.
Content (محتوا)
/ var / www / html: محتواي وب واقعي ، كه به طور پيش فرض فقط شامل صفحه پيش فرض Apache است كه قبلاً ديديد ، از ديركتوري / var / www / html ارائه مي شود. با تغيير فايل هاي پيكربندي Apache مي توان اين مورد را تغيير داد.
Server Configuration )پيكربندي سرور مجازي (
/ etc / apache2: ديركتوري تنظيمات Apache است. همه فايل هاي پيكربندي Apache در اينجا قرار دارند.
/etc/apache2/apache2.conf: فايل اصلي پيكربندي Apache كه مي تواند براي ايجاد تغيير در پيكربندي جهاني Apache اصلاح شود. اين فايل وظيفه لود بسياري از فايل هاي ديگر را در ديركتوري تنظيمات دارد.
/etc/apache2/ports.conf: اين فايل پورت هايي را كه Apache در آن گوش خواهد داد را مشخص مي كند. به طور پيش فرض ، Apache درگاه 80 را گوش مي دهد و علاوه بر اين در هنگام فعال كردن ماژول قابليت هاي SSL ، درگاه 443 را نيز پيگيري ميكند.
/ etc / apache2 / sites-available /: دايركتوري كه ميزبان مجازي در هر سايت در آن قابل ذخيره است. Apache از فايل هاي پيكربندي موجود در اين ديركتوري استفاده نمي كند مگر اينكه به ديركتوري sites-enabled مرتبط باشند. به طور معمول ، تمام پيكربندي بلوك سرور مجازي در اين دايركتوري انجام مي شود ، و سپس با پيوند به ديركتوري ديگر با دستور a2ensite فعال مي شويد.
/ etc / apache2 / sites-enabled /: دايركتوري كه ميزبان مجازي فعال در هر سايت را ذخيره ميكند. به طور معمول ، با پيوند دادن به فايل هاي پيكربندي موجود در ديركتوري sites-available به a2ensite ايجاد مي شوند. Apache هنگام راه اندازي يا لود مجدد ، فايل هاي پيكربندي و پيوندهاي موجود در اين ديركتوري را مي خواند تا يك پيكربندي كامل را كامپايل كند.
/ etc / apache2 / conf-available /، / etc / apache2 / conf-enabled /: اين دايركتوري ها همانند دايركتوري هاي sites-available و sites-enabled ارتباط دارند ، اما براي ذخيره بخش هايي از پيكربندي كه به ميزبان مجازي تعلق ندارد ، استفاده مي شوند. فايل هاي موجود در ديركتوري conf-available با استفاده از دستور a2enconf مي توانند فعال شوند و با دستور a2disconf غيرفعال گردند.
/ etc / apache2 / mods-available /، / etc / apache2 / mods-enabled /: اين ديركتوري ها به ترتيب شامل ماژول هاي موجود و فعال هستند. فايل هايي كه به.load ختم ميشوند شامل بخش هايي براي بارگذاري ماژول هاي خاص هستند ، در حالي كه فايل هاي منتهي به .conf شامل پيكربندي براي اين ماژول ها هستند. ماژول ها را مي توان با استفاده از دستور a2enmod و a2dismod فعال و غيرفعال كرد.
Server Logs (ورود ها به سرور مجازي )
/var/log/apache2/access.log: به طور پيش فرض ، هر درخواستي به سرور مجازي وب شما در اين فايل log ثبت مي شود ، مگر اينكه Apache پيكربندي شده باشد كه كاري غير از اين را انجام دهد.
/var/log/apache2/error.log: به طور پيش فرض ، همه خطاها در اين فايل ثبت مي شوند. دستورالعمل LogLevel در پيكربندي Apache مشخص مي كند كه چه تعداد جزئيات ثبت خطا را شامل مي شود.
نتيجه
اكنون كه سرور مجازي وب خود را نصب كرده ايد ، گزينه هاي بسياري براي نوع محتوايي كه مي توانيد ارائه كنيد و فن آوري هايي كه مي توانيد از آنها استفاده كنيد داريد تا يك تجربه غني تر را ايجاد كنيد.
اگر مي خواهيد يك برنامه كاربردي كاملتر ايجاد كنيد ، مي توانيد به اين مقاله در مورد نحوه پيكربندي پشته LAMP در Debian 10 نگاهي بيندازيد.

Apache Tomcat يك سرور مجازي وب و كانتينر servlet است كه براي ارائه برنامه هاي جاوا استفاده مي شود. Tomcat يك اجراي منبع باز از فناوري هاي Java Servlet و JavaServer Pages است كه توسط بنياد نرم افزار Apache منتشر شده است. اين آموزش شامل نصب اوليه و برخي از تنظيمات آخرين نسخه Tomcat 9 در سرور مجازي Debian 10 ميباشد.
پيش نيازها
قبل از شروع اين راهنما ، بايد يك كاربر غير ريشه با امتيازات sudo در سرور مجازي خود داشته باشيد. مي توانيد با تكميل راهنماي تنظيم اوليه سرور مجازي Debian 10 ما اين كار را ياد بگيريد.
مرحله 1 – جاوا را نصب كنيد
Tomcat نياز دارد كه جاوا را روي سرور مجازي نصب باشد تا هر كد برنامه وب جاوا قابل اجرا باشد. ما مي توانيم با نصب OpenJDK با apt ، اين نياز را برآورده سازيم.
ابتدا ايندكس بسته apt خود را به روز كنيد:
⦁ $ sudo apt update

سپس بسته توسعه جاوا را با apt نصب كنيد:
⦁ $ sudo apt install default-jdk
⦁
اكنون كه جاوا نصب شده است ، مي توانيم يك كاربر tomcat ايجاد كنيم كه براي اجراي سرويس Tomcat استفاده خواهد شد.
مرحله 2 – ايجاد كاربر Tomcat
براي اهداف امنيتي ، Tomcat بايد به عنوان يك كاربر بدون امتيازات اجرا شود (يعني root نباشد). ما يك كاربر و گروه جديد ايجاد خواهيم كرد كه سرويس Tomcat را اجرا كند.
ابتدا ، يك گروه tomcat جديد ايجاد كنيد:
⦁ $ sudo groupadd tomcat
⦁
سپس ، يك كاربر جديد Tomcat ايجاد ميكنيم. اين كاربر را عضو گروه Tomcat ميكنيم با ديركتوري هوم / opt / tomcat (جايي كه Tomcat را نصب خواهيم كرد) و يك پوسته / bin / false (تا هيچ كس نتواند وارد حساب شود):
⦁ $ sudo useradd -s /bin/false -g tomcat -d /opt/tomcat tomcat
⦁
اكنون كه كاربر Tomcat ما تنظيم شده است ، اجازه دهيد Tomcat را دانلود و نصب كنيم.
مرحله 3 – Tomcat را نصب كنيد
بهترين راه براي نصب Tomcat 9 دانلود آخرين نسخه باينري و سپس پيكربندي دستي آن است.
آخرين نسخه Tomcat 9 را در صفحه دانلود Tomcat 9 پيدا كنيد. در زمان نوشتن اين مقاله، آخرين نسخه 9.0.27 است ، اما در صورت وجود بايد از نسخه پايدار بعدي استفاده كنيد. در زير بخش توزيع هاي باينري ، و سپس در زير ليست Core  ، لينك “tar.gz” را كپي كنيد.
در مرحله بعدي ، به بخش SSH خود بازگرديد و به ديركتوري / tmp در سرور مجازي خود برويد. اين يك ديركتوري خوب براي دانلود موارد زودگذر است ، مانند تاربال Tomcat ، كه ما پس از اكستركت مطالب Tomcat نيازي به آن نداريم:
⦁ $ cd /tmp
⦁
براي دانلود تاربال از ابزار خط فرمان curl استفاده خواهيم كرد. curl را نصب كنيد:
⦁ $ sudo apt install curl
⦁
اكنون ، براي دانلود پيوندي كه از وب سايت Tomcat كپي كرده ايد ، از curl استفاده كنيد:
⦁ $ curl -O http://www-eu.apache.org/dist/tomcat/tomcat-9/v9.0.11/bin/apache-tomcat-9.0.11.tar.gz
⦁
ما Tomcat را در ديركتوري / opt / tomcat نصب خواهيم كرد. اين دايركتوري را ايجاد كنيد ، سپس بايگاني را با اين دستورات در آن اكستركت كنيد:
⦁ $ sudo mkdir /opt/tomcat
⦁
⦁ $ sudo tar xzvf apache-tomcat-9*tar.gz -C /opt/tomcat –strip-components=1

در مرحله بعد ، مجوزهاي كاربري مناسب را براي نصب خود تنظيم خواهيم كرد.
مرحله 4 – به روز رساني مجوزها
كاربر Tomcat كه ايجاد كرديم نياز به دسترسي به نصب Tomcat دارد. اكنون آن را تنظيم خواهيم كرد.
به دايركتوري برويد كه در آن نصب Tomcat را باز نكرديم:
⦁ $ cd /opt/tomcat
⦁
مالكيت گروه tomcat را به كل ديركتوري نصب بدهيد:
⦁ $ sudo chgrp -R tomcat /opt/tomcat
⦁

در مرحله بعد ، به گروه tomcat دسترسي به ديركتوري conf و كليه محتويات آن بدهيد و دسترسي به ديركتوري خود را اجرا كنيد:
⦁ $ sudo chmod -R g+r conf
⦁
⦁ $ sudo chmod g+x conf

كاربر Tomcat را به مالك ديركتوري هاي webapps, work, temp, و  logs تبديل كنيد:
⦁ $ sudo chown -R tomcat webapps/ work/ temp/ logs/
⦁

اكنون كه مجوزهاي مناسب تنظيم شده است ، يك فايل سرويس systemd را براي مديريت فرايند Tomcat ايجاد خواهيم كرد.
مرحله 5 – يك فايل خدمات systemd ايجاد كنيد
ما مي خواهيم بتوانيم Tomcat را به عنوان يك سرويس اجرا كنيم ، بنابراين فايل سرويس systemd را تنظيم خواهيم كرد.
Tomcat بايد بداند جاوا در كجا نصب شده است. اين مسير معمولاً به JAVA_HOME اشاره مي كند. آسانترين راه براي جستجوي آن مكان با اجراي اين دستور است:
⦁ $ sudo update-java-alternatives -l
⦁
Output
java-1.11.0-openjdk-amd64 1111 /usr/lib/jvm/java-1.11.0-openjdk-amd64

JAVA_HOME شما خروجي آخرين ستون است (در بالا هايلايت شده است). با توجه به مثال بالا ، JAVA_HOME صحيح براي اين سرور مجازي به اين صورت خواهد بود:
AVA_HOME
/usr/lib/jvm/java-1.11.0-openjdk-amd64

JAVA_HOME شما ممكن است متفاوت باشد.
با اين اطلاعات مي توانيم فايل سرويس systemd را ايجاد كنيم. با تايپ دستور زير فايلي به نام tomcat.service در ديركتوري / etc / systemd / system باز كنيد:
⦁ $ sudo nano /etc/systemd/system/tomcat.service
⦁

محتواي زير را در فايل سرويس خود پيست كنيد. در صورت لزوم مقدار JAVA_HOME را اصلاح كنيد تا با مقدار يافت شده در سيستم شما مطابقت داشته باشد. همچنين بهتر است تنظيمات تخصيص حافظه را كه در CATALINA_OPTS مشخص شده است اصلاح كنيد:
/etc/systemd/system/tomcat.service
[Unit]
Description=Apache Tomcat Web Application Container
After=network.target

[Service]
Type=forking

Environment=JAVA_HOME=/usr/lib/jvm/java-1.11.0-openjdk-amd64
Environment=CATALINA_PID=/opt/tomcat/temp/tomcat.pid
Environment=CATALINA_HOME=/opt/tomcat
Environment=CATALINA_BASE=/opt/tomcat
Environment=’CATALINA_OPTS=-Xms512M -Xmx1024M -server -XX:+UseParallelGC’
Environment=’JAVA_OPTS=-Djava.awt.headless=true -Djava.security.egd=file:/dev/./urandom’

ExecStart=/opt/tomcat/bin/startup.sh
ExecStop=/opt/tomcat/bin/shutdown.sh

User=tomcat
Group=tomcat
UMask=0007
RestartSec=10
Restart=always

[Install]
WantedBy=multi-user.target

پس از اتمام ، فايل را ذخيره كنيد و ببنديد.
سپس ، Daemon systemd را مجدد لود كنيد تا از تغييرات فايل سرويس ما مطلع شود:
⦁ $ sudo systemctl daemon-reload
⦁
سرويس Tomcat را با تايپ دستور زير شروع كنيد:
⦁ $ sudo systemctl start tomcat
⦁

با تايپ دستور زير مجدد بررسي كنيد كه بدون خطا شروع شده است:
⦁ $ sudo systemctl status tomcat
⦁
بايد خروجي مشابه زير را ببينيد:
Output
● tomcat.service – Apache Tomcat Web Application Container
Loaded: loaded (/etc/systemd/system/tomcat.service; disabled; vendor preset: enabled)
Active: active (running) since Thu 2019-10-24 17:18:11 UTC; 4s ago
Process: 5962 ExecStart=/opt/tomcat/bin/startup.sh (code=exited, status=0/SUCCESS)
Main PID: 5970 (java)
Tasks: 44 (limit: 2377)
Memory: 184.2M
CGroup: /system.slice/tomcat.service
└─5970 /usr/lib/jvm/java-1.11.0-openjdk-amd64/bin/java -Djava.util.logging.config.file=/opt/tomcat/conf/logging.properties -Djava.u

Oct 24 17:18:10 tomcat systemd[1]: Starting Apache Tomcat Web Application Container…
Oct 24 17:18:11 tomcat startup.sh[5962]: Tomcat started.
Oct 24 17:18:11 tomcat systemd[1]: Started Apache Tomcat Web Application Container.

اين خروجي تأييد مي كند كه Tomcat در سرور مجازي شما فعال و در حال اجرا است.
مرحله 6 – فايروال را تنظيم كرده و سرور مجازي Tomcat را تست كنيد
اكنون كه سرويس Tomcat آغاز شده است ، مي توانيم آزمايش كنيم تا مطمئن شويم كه صفحه پيش فرض در دسترس است.
قبل از انجام اين كار ، بايد فايروال را تنظيم كنيم تا درخواست هاي ما بتوانند به اين سرويس برسند. اگر پيش نيازها را رعايت كرده باشيد ، در حال حاضر يك فايروال ufw فعال شده داريد.
Tomcat از پورت 8080 براي پذيرش درخواستها استفاده مي كند. با تايپ كردن دستور زير اجازه دسترسي به آن پورت را بدهيد:
⦁ $ sudo ufw allow 8080
⦁

با اصلاح فايروال ، مي توانيد با رفتن به دامنه يا آدرس IP خود پس از 8080: در مرورگر وب، به صفحه splash پيش فرض دسترسي پيدا كنيد:
Open in web browser
http://server_domain_or_IP:8080

علاوه بر اطلاعات ديگر ، صفحه پيش فرض Tomcat splash را نيز خواهيد ديد. با اين حال ، اگر به عنوان مثال روي پيوندها براي برنامه Manager كليك كنيد ، از دسترسي محروم خواهيد شد. ما ميتوانيم اين دسترسي را در مرحله بعد پيكربندي كنيم.
اگر توانستيد با موفقيت به Tomcat دسترسي پيدا كنيد ، اكنون زمان مناسبي براي فعال كردن فايل خدمات است به گونه اي كه Tomcat به طور خودكار از بوت شروع شود:
⦁ $ sudo systemctl enable tomcat
⦁

مرحله 7 – رابط مديريت وب Tomcat را پيكربندي كنيد
براي استفاده از برنامه وب منيجر كه همراه Tomcat است ، بايد وارد سرور مجازي Tomcat خود شويم. اين كار را با ويرايش فايل tomcat-users.xml انجام خواهيم داد:
⦁ $ sudo nano /opt/tomcat/conf/tomcat-users.xml
⦁
بهتر است كاربري را اضافه كنيد كه بتواند به manager-gui و admin-gui دسترسي پيدا كند (برنامه هاي وب كه با Tomcat همراه هستند). شما مي توانيد اين كار را با تعريف يك كاربر ، مشابه مثال زير ، بين برچسب هاي tomcat-users انجام دهيد. حتماً نام كاربري و رمز عبور را به چيزي امن تغيير دهيد:
tomcat-users.xml

. . .

پس از اتمام فايل را ذخيره كنيد و ببنديد.
به طور پيش فرض ، نسخه هاي جديدتر Tomcat دسترسي به برنامه هاي Manager و Host Manager را به اتصالات سرور مجازي خود محدود مي كند. از آنجا كه ما روي يك دستگاه از راه دور آن را نصب مي كنيم ، احتمالاً مي خواهيد اين محدوديت را حذف كنيد يا تغيير دهيد. براي تغيير محدوديت هاي آدرس IP در اين مورد ، فايل هاي مناسب.xml را باز كنيد.
براي برنامه منيجر ، تايپ كنيد:
⦁ $ sudo nano /opt/tomcat/webapps/manager/META-INF/context.xml
⦁

براي برنامه هاست منيجر ، تايپ كنيد:
⦁ $ sudo nano /opt/tomcat/webapps/host-manager/META-INF/context.xml
⦁

در داخل ، محدوديت آدرس IP را باطل كنيد تا از هرجاي ديگر بتوانيد اتصالات برقرار كنيد. از طرف ديگر ، اگر مايل هستيد به اتصالات حاصل از آدرس IP شخصي خود دسترسي بدهيد، مي توانيد آدرس IP عمومي خود را به اين ليست اضافه كنيد:
context.xml files for Tomcat webapps

allow=”127.d+.d+.d+|::1|0:0:0:0:0:0:0:1″ />–>

پس از اتمام ، فايل ها را ذخيره كنيد و ببنديد.
براي اعمال تغييرات خود ، سرويس Tomcat را مجدداً راه اندازي كنيد:
⦁ $ sudo systemctl restart tomcat
⦁

مرحله 8 – دسترسي به رابط وب
اكنون كه يك كاربر ايجاد كرده ايم ، مي توانيم دوباره در يك مرورگر وب به رابط مديريت وب دسترسي پيدا كنيم. يك بار ديگر ، مي توانيد با وارد كردن نام دامنه سرور مجازي يا آدرس IP همراه با پورت 8080 در مرورگر خود ، به رابط صحيح برسيد:
Open in web browser
http://server_domain_or_IP:8080

صفحه اي كه مي بينيد بايد همان صفحه اي باشد كه هنگام آزمايش قبلي به شما نشان داده شده است:

بياييد نگاهي به برنامه منيجر بيندازيم كه از طريق لينك يا http: // server_domain_or_IP: 8080 / manager / html قابل دسترسي است. لازم است اعتبارات حساب كه به فايل tomcat-users.xml اضافه كرديد را وارد نماييد. پس از آن ، بايد صفحه اي را مشاهده كنيد كه به شكل زير است:

Web Application Manager براي مديريت برنامه هاي جاوا استفاده مي شود. مي توانيد در اينجا اقدام به شروع ، توقف ، بارگيري مجدد ، استقرار و عدم استقرار نماييد. همچنين مي توانيد برخي از تشخيص ها را در برنامه هاي خود اجرا كنيد (مثلا پيدا كردن نشت حافظه). در آخر ، اطلاعات مربوط به سرور مجازي شما در انتهاي همين صفحه موجود است.
حال اجازه دهيد، از طريق لينك يا http://server_domain_or_IP:8080/host-manager/html/ نگاهي به هاست منيجر بيندازيم.

از صفحه Virtual Host Manager ، مي توانيد ميزبان هاي مجازي را براي ارائه برنامه هاي خود اضافه كنيد.
نتيجه
نصب شما از Tomcat پايان يافته است! اكنون مي توانيد برنامه هاي وب جاوا خود را مستقر كنيد.
در حال حاضر ، نصب Tomcat شما كاربردي است ، اما كاملاً بدون رمزگذاري ميباشد. اين بدان معني است كه تمام داده ها ، از جمله موارد حساس مانند گذرواژه‌ها ، با متن ساده ارسال مي شوند كه توسط طرفين ديگر در اينترنت قابل رهگيري و خواندن هستند. براي جلوگيري از وقوع اين اتفاق ، اكيداً توصيه مي شود كه اتصالات خود را با SSL رمزگذاري كنيد. با پيروي از اين راهنما مي توانيد نحوه رمزگذاري اتصالات خود با Tomcat را ياد بگيريد (توجه داشته باشيد: اين راهنما رمزگذاري Tomcat 8 را در Ubuntu 16.04 پوشش مي دهد).

هنگامي كه شما براي اولين بار يك سرور مجازي Debian 10 جديد ايجاد مي كنيد ، چند مرحله پيكربندي وجود دارد كه بايد آنها را به عنوان بخشي از ستاپ اوليه انجام دهيد. اين كار باعث افزايش امنيت و قابليت استفاده سرور مجازي شما مي شود و پايه و اساس محكمي را براي اقدامات بعدي به شما مي دهد.
در اين آموزش ياد خواهيم گرفت كه چگونه به عنوان كاربر اصلي وارد سرور مجازي خود شويم ، كاربر جديدي با امتيازات ادمين ايجاد كنيم و يك فايروال پايه تنظيم كنيم.
مرحله 1 – ورود به عنوان Root
براي ورود به سرور مجازي خود ، بايد آدرس IP عمومي سرور مجازي خود را بدانيد. در صورت نصب كليد SSH براي تأييد اعتبار ، يعني كليد خصوصي براي حساب كاربر root، به گذرواژه نيز احتياج داريد. اگر قبلاً به سرور مجازي خود وارد نشده ايد ، ممكن است بخواهيد راهنماي ما در مورد نحوه اتصال به دراپلت خود را با SSH دنبال كنيد ، كه اين لينك روند را با جزئيات پوشش مي دهد.
اگر قبلاً به سرور مجازي خود وصل نشده ايد ، پيش برويد و با استفاده از دستور زير به عنوان كاربر اصلي وارد سيستم شويد (بخش هايلايت شده فرمان را با آدرس IP عمومي سرور مجازي خود جايگزين كنيد):
$ ssh root@your_server_ip

در صورت وجود هشدار درباره تاييد صحت ميزبان آن را بپذيريد. اگر از تأييد اعتبار گذرواژه استفاده مي كنيد ، رمز ورود ريشه خود را وارد كنيد. اگر از يك كليد SSH استفاده مي كنيد كه عبارت عبور آن محافظت شده است ، ممكن است اولين باري كه از هر كليد استفاده مي كنيد از شما خواسته شود كلمه عبور را وارد كنيد. اگر اولين بار است كه با گذرواژه وارد سرور مجازي مي شويد ، ممكن است از شما خواسته شود رمزعبور root را تغيير دهيد.
درباره ريشه
كاربر ريشه كاربر ادمين در محيط لينوكس است كه امتيازات بسيار گسترده اي دارد. به دليل امتيازات زياد حساب ريشه ، استفاده منظم از آن توصيه نميشود. اين امر به اين دليل است كه بخشي از قدرت ذاتي حساب ريشه ، توانايي ايجاد تغييرات بسيار مخرب ، حتي به طور تصادفي است.
قدم بعدي راه اندازي يك حساب كاربري جايگزين با حوزه تاثيرات كمتر براي كارهاي روزانه است. بعداً ، توضيح خواهيم داد كه چگونه مي توانيد در مواقعي كه به آنها احتياج داريد ، امتيازات بيشتري را دريافت كنيد.
مرحله 2 – ايجاد يك كاربر جديد
پس از ورود به عنوان root ، آماده هستيم تا حساب كاربري جديدي را اضافه كنيم كه از اين پس براي ورود به سيستم استفاده خواهيم كرد .
اين مثال يك كاربر جديد به نام sammy ايجاد مي كند ، اما شما بايد آن را با نام كاربري كه دوست داريد جايگزين كنيد:
# adduser sammy

با شروع رمز ورود به حساب ، چند سؤال از شما پرسيده خواهد شد.
يك رمز عبور قوي وارد كنيد و به صورت اختياري ، هر يك از اطلاعات اضافي را كه مي خواهيد پر كنيد. اين مورد نياز نيست و مي توانيد ENTER را در هر زمينه اي كه مايل به عبور هستيد ، بزنيد.
در مرحله بعدي ، اين كاربر جديد را با امتيازات ادمين تنظيم خواهيم كرد.
مرحله 3 – اعطاي امتيازات ادمين
اكنون ، ما يك حساب كاربري جديد با امتيازات معمول حساب ايجاد كرده ايم. با اين حال ، ممكن است گاهي اوقات نياز به انجام كارهاي اجرايي با آن داشته باشيم.
براي جلوگيري از خروج از حساب كاربري عادي و ورود به سيستم به عنوان حساب اصلي ، مي توانيم براي حساب عادي خود چيزي به اسم superuser ايجاد كنيم يا امتيازات اصلي را به آن بدهيم. اين كار به كاربر عادي ما امكان مي دهد با قرار دادن كلمه sudo قبل از دستور ، دستوراتي را با امتيازات ادمين اجرا كند.
براي افزودن اين امتيازات به كاربر جديد خود ، بايد كاربر جديد را به گروه sudo اضافه كنيم. به طور پيش فرض ، در Debian 10 ، كاربراني كه به گروه sudo تعلق دارند مجاز به استفاده از دستور sudo هستند.
به عنوان root ، اين دستور را اجرا كنيد تا كاربر جديد خود را به گروه sudo اضافه كنيد (كلمه هايلايت شده را با كاربر جديد خود جايگزين كنيد):
# usermod -aG sudo sammy

اكنون ، هنگامي كه به عنوان كاربر معمولي خود وارد سيستم شديد ، مي توانيد قبل از دستورات sudo را تايپ كنيد تا دستور را با امتيازات superuser اجرا كنيد.
مرحله 4 – تنظيم فايروال پايه
سرور مجازي هاي دبيان مي توانند از فايروال ها استفاده كنند تا اطمينان حاصل شود كه فقط اتصالات خاصي به سرويس هاي خاص مجاز هستند. در اين راهنما ، فايروال UFW را براي كمك به تنظيم رويكرد فايروال و مديريت استثناعات، نصب و استفاده خواهيم كرد.
مي توانيم از مدير بسته apt براي نصب UFW استفاده كنيم. فهرست محلي را به روز كنيد تا آخرين اطلاعات در مورد بسته هاي موجود را بازيابي كنيد و سپس با تايپ كردن دستور زير نرم افزار فايروال UFW را نصب كنيد:
# apt update

# apt install ufw

توجه: اگر سرور مجازي هاي شما روي vpsgol در حال اجرا هستند ، مي توانيد به طور اختياري به جاي فايروال UFW از فايروال هاي vpsgol Cloud استفاده كنيد. توصيه مي كنيم فقط از يك فايروال به طور هم زمان استفاده كنيد تا از قوانين متناقض براي اشكال زدايي جلوگيري شود.

پروفايل هاي فايروال به UFW اجازه مي دهد مجموعه اي از قوانين فايروال را براي برنامه هاي نصب شده مديريت كند. پروفايل برخي از نرم افزارهاي رايج بصورت پيش فرض با UFW همراه شده و بسته ها مي توانند پروفايل هاي اضافي را با UFW در طي مراحل نصب ثبت كنند. OpenSSH ، سرويسي كه به ما امكان اتصال كنوني به سرور مجازي خود را مي دهد ، داراي پروفايل فايروال است كه مي توانيم از آن استفاده كنيم.
با تايپ كردن دستور زير تمام پروفايل هاي موجود را ليست مي كنيد:
# ufw app list

Output
Available applications:
. . .
OpenSSH
. . .

بايد اطمينان حاصل كنيم كه فايروال امكان اتصالات SSH را مي دهد تا بتوانيم دفعه ديگر وارد سيستم شويم. مي توانيم با تايپ اين دستور اجازه اين اتصالات را فراهم كنيم:
# ufw allow OpenSSH

پس از آن ، مي توانيم با تايپ كردن دستور زير فايروال را فعال كنيم:
# ufw enable

y را تايپ كرده و ENTER را براي ادامه فشار دهيد. با تايپ كردن دستور زير مي توانيد ببينيد كه اتصالات SSH هنوز مجاز هستند:
# ufw status

Output
Status: active

To Action From
— —— —-
OpenSSH ALLOW Anywhere
OpenSSH (v6) ALLOW Anywhere (v6)

از آنجا كه فايروال در حال حاضر همه اتصالات به جز SSH را مسدود مي كند ، در صورت نصب و پيكربندي سرويس هاي اضافي ، بايد تنظيمات فايروال را براي ايجاد ترافيك قابل قبول را تنظيم كنيد. شما مي توانيد برخي از عمليات معمول UFW را در راهنماي ضروريات UFW بياموزيد.
مرحله 5 – فعال كردن دسترسي خارجي براي كاربر معمولي شما
اكنون كه ما يك كاربر معمولي براي استفاده روزانه داريم ، بايد اطمينان حاصل كنيم كه مي توانيم مستقيماً SSH را وارد حساب كاربري خود كنيم.
توجه: تا زماني كه تأييد نكنيد كه مي توانيد با كاربر جديد خود وارد سيستم شويد و از sudo استفاده كنيد ، توصيه مي كنيم به عنوان root وارد شويد. به اين ترتيب ، اگر مشكل داريد مي توانيد به عنوان ريشه عيب يابي كرده و هرگونه تغيير لازم را انجام دهيد. اگر از Droplet vpsgol استفاده مي كنيد و در ارتباط با اتصال SSH ريشه خود مشكل داريد ، مي توانيد با استفاده از كنسول vpsgol وارد Droplet شويد.

روند پيكربندي دسترسي SSH براي كاربر جديد شما به اين بستگي دارد كه آيا حساب اصلي سرور مجازي شما از رمز عبور يا كليدهاي SSH براي تأييد اعتبار استفاده مي كند.
اگر حساب Root از احراز هويت رمز عبور استفاده مي كند
اگر با استفاده از گذرواژه وارد حساب اصلي خود شده ايد ، تأييد رمز عبور براي SSH فعال مي شود. با باز كردن بخش ترمينال جديد و استفاده از SSH با نام كاربري جديد خود مي توانيد به حساب كاربري جديد، SSH كنيد:
$ ssh sammy@your_server_ip

بعد از وارد كردن رمزعبور معمولي كاربر ، وارد سيستم مي شويد. به ياد داشته باشيد اگر نياز به اجراي يك فرمان با امتيازات اداري داريد ، قبل از اين كار sudo را تايپ كنيد:
$ sudo command_to_run

براي اولين بار در هر بخش (و به صورت دوره اي بعد از آن) رمزعبور كاربر معمولي از شما خواسته مي شود.
براي تقويت امنيت سرور مجازي خود ، به شدت توصيه مي كنيم به جاي استفاده از احراز هويت رمز عبور ، كليدهاي SSH را تنظيم كنيد. براي يادگيري نحوه پيكربندي احراز هويت مبتني بر كليد ، راهنماي ما در مورد تنظيم كليدهاي SSH در Debian 10 را دنبال كنيد.
اگر حساب Root از احراز هويت كليد SSH استفاده مي كند
اگر با استفاده از كليدهاي SSH به حساب اصلي خود وارد شده ايد ، تأييد رمز عبور براي SSH غيرفعال است. براي ورود موفقيت آميز به سيستم ، بايد يك نسخه از كليد عمومي محلي خود را در فايل ~/.ssh/authorized_keys كاربر جديد اضافه كنيد.
از آنجا كه كليد عمومي شما قبلاً در فايل ~/.ssh/authorized_keys حساب ريشه در سرور مجازي است ، مي توانيم در بخش موجود با دستور cp آن فايل و ساختار ديركتوري را در حساب كاربري جديد خود كپي كنيم. پس از آن ، مي توانيم مالكيت فايل ها را با استفاده از دستور chown تنظيم كنيم.
اطمينان حاصل كنيد كه قسمت هايلايت شده فرمان زير را تغيير دهيد تا با نام كاربر معمولي شما مطابقت داشته باشد:
# cp -r ~/.ssh /home/sammy

#
chown -R sammy:sammy /home/sammy/.ssh

دستور cp -r كل دايركتوري را در ديركتوري هوم كاربر جديد كپي مي كند ، و دستور chown -R صاحب آن ديركتوري (و هر چيزي را كه در داخل آن است) را به username:groupname مشخص شده تغيير مي دهد (دبيان به طور پيش فرض گروهي را با همين نام كاربري شما ايجاد مي كند).
اكنون ، يك بخش ترمينال جديد را باز كرده و از طريق SSH با نام كاربري جديد خود وارد شويد:
$ ssh sammy@your_server_ip

بدون استفاده از رمز ورود بايد به حساب كاربري جديد وارد شويد. به ياد داشته باشيد ، اگر نياز به اجراي يك فرمان با امتيازات ادمين داريد ، sudo را قبل از آن تايپ كنيد:
$ sudo command_to_run

براي اولين بار در هر بخش (و به صورت دوره اي بعد از آن) رمزعبور كاربر معمولي از شما خواسته مي شود.
از اينجا به كجا برويم؟
در اين مرحله ، شما يك پايه محكم براي سرور مجازي خود داريد. اكنون مي توانيد هركدام از نرم افزارهاي مورد نياز خود را بر روي سرور مجازي خود نصب كنيد.

در اين آموزش مي آموزيد كه چگونه عناصر را با JSX توصيف كنيد. JSX انتزاعي است كه به شما امكان مي دهد دستور مشابه HTML را در كد جاوا اسكريپت خود بنويسيد و شما را قادر ميسازد تا مولفه هاي React را كه شبيه علائم استاندارد HTML هستند ، بسازيد. JSX زبان تمپليت مولفه هاي React است و بنابراين پايه و اساس هر نشانه گذاري اي است كه React به برنامه شما ارائه مي دهد.
از آنجايي كه JSX شما را قادر مي سازد جاوا اسكريپت را نيز در نشانه گذاري خود بنويسيد ، مي توانيد از توابع و روش هاي JavaScript ، از جمله نگاشت آرايه و ارزيابي اتصال كوتاه براي شرطي ها استفاده كنيد.
به عنوان بخشي از آموزش ، رويدادهاي كليك را مستقيماً در نشانه گذاري روي دكمه ها ضبط مي كنيد و مواردي را مشاهده مي كنيد كه تركيب دقيقاً مطابق با HTML استاندارد نباشد ، مانند كلاس هاي CSS. در پايان اين آموزش ، يك برنامه كاري داريد كه از انواع مختلفي از ويژگيهاي JSX استفاده مي كند تا ليستي از مولفه هايي را كه داراي يك شنونده كليك داخلي هستند ، نمايش دهد. اين يك الگوي رايج در برنامه هاي React است كه شما اغلب در طول يادگيري چارچوب استفاده خواهيد كرد. همچنين مي توانيد عناصر استاندارد HTML را با جاوا اسكريپت مخلوط كنيد تا ببينيد چگونه React به شما امكان ايجاد كد هاي كوچك و قابل استفاده مجدد را مي دهد.
پيش نيازها
• به محيط توسعه در حال اجراي Node.js نياز داريد. اين آموزش بر روي Node.js نسخه 10.19.0 و npm نسخه 6.13.4 تست شده است. براي نصب اين برنامه در maغير مجاز مي باشد يا Ubuntu 18.04 ، مراحل نحوه نصب Node.js و ايجاد محيط توسعه محلي را در maغير مجاز مي باشد يا نصب با استفاده از بخش PPA در آموزش نحوه نصب Node.js در اوبونتو 18.04 را دنبال كنيد.
• بايد با  Create React App قادر به ايجاد برنامه باشيد. مي توانيد دستورالعمل نصب را در نحوه ايجاد يك پروژه React با  Create React App پيدا كنيد.
• همچنين به دانش پايه از JavaScript نياز خواهيد داشت كه مي توانيد در نحوه كدنويسي در JavaScript بياموزيد و به دانش پايه از HTML و CSS نيز احتياج داريد. يك منبع مناسب براي HTML و CSS ، شبكه توسعه دهنده Mozilla ميباشد.
مرحله 1 – اضافه كردن نشانه گذاري به يك مولفه React
همانطور كه قبلاً نيز اشاره شد ، React يك زبان نشانه گذاري خاص به نام JSX دارد. پ تركيبي از نحو HTML و JavaScript است كه چيزي شبيه به اين ميباشد:

برخي از قابليت هاي JavaScript مانند .filter و .map و همچنين برخي HTML هاي استاندارد مانند

را خواهيد شناخت. اما بخش هاي ديگري مانند و className نيز وجود دارند كه شبيهHTML و JavaScript به نظر مي رسد.
اين زبان JSX است ، يعني زبان نشانه گذاري ويژه اي كه به مولفه هاي React حس HTML را با قدرت JavaScript مي دهد.
در اين مرحله ، مي آموزيد كه تركيب HTML مانند پايه را به مولفه موجود React اضافه كنيد. براي شروع ، مولفه هاي HTML استاندارد را به يك تابع JavaScript اضافه خواهيد كرد ، سپس كد كامپايل شده را در يك مرورگر مشاهده مي كنيد. همچنين عناصر را گروه بندي مي كنيد تا React بتواند آنها را با حداقل نشانه گذاري كامپايل كند ، و HTML تميزي را ارائه كند.
براي شروع ، يك پروژه جديد درست كنيد. در خط فرمان خود ، اسكريپت زير را اجرا كنيد تا يك پروژه تازه با استفاده از create-react-app نصب كنيد:
⦁ $ npx create-react-app jsx-tutorial
⦁
پس از اتمام پروژه ، دايركتوري را تغيير دهيد:
⦁ $ cd jsx-tutorial
⦁
در يك ترمينال يا پنجره جديد ، پروژه را با استفاده از اسكريپت شروع Create React App شروع كنيد. مرورگر بعد از تغييرات مجدداً ريفرش ميشود ، بنابراين در تمام مدت كار شما اين اسكريپت را رها ميكند:
⦁ $ npm start
⦁
يك سرور مجازي محلي در حال اجرا دريافت خواهيد كرد. اگر پروژه در پنجره مرورگر باز نشد ، مي توانيد آن را در http: // localhost: 3000 / پيدا كنيد. اگر اين كار را از يك سرور مجازي از راه دور انجام مي دهيد ، آدرس http: // your_IP_address: 3000 خواهد بود.
مرورگر شما با يك برنامه React به عنوان بخشي از Create React App لود مي شود.

شما در حال ساخت مجموعه كاملاً جديدي از مولفه هاي سفارشي هستيد ، بنابراين بايد با پاك كردن برخي از كد هاي متن استاندارد شروع كنيد تا بتوانيد يك پروژه خالي داشته باشيد. براي شروع App.js ار در ويرايشگر متن باز كنيد. اين قسمت اصلي است كه به صفحه تزريق مي شود. همه مؤلفه ها از اينجا شروع مي شوند.
در يك ترمينال جديد ، وارد پوشه پروژه شويد و src / App.js را با دستور زير باز كنيد:
⦁ $ nano src/App.js
⦁
فايلي مانند اين را مشاهده خواهيد كرد:
jsx-tutorial/src/App.js
import React from ‘react’;
import logo from ‘./logo.svg’;
import ‘./App.css’;

function App() {
return (

Edit src/App.js and save to reload.

className=”App-link”
href=”https://reactjs.org”
target=”_blank”
rel=”noopener noreferrer”
>
Learn React

);
}

export default App;

اكنون پس از عبارت بازگشت در تابع ، خط import logo from ‘./logo.svg و هر چيز ديگر را حذف كنيد. آن را به null تغيير دهيد. كد نهايي به شرح زير خواهد بود:
jsx-tutorial/src/App.js
import React from ‘react’;
import ‘./App.css’;

function App() {
return null;
}

export default App;

ويرايشگر متن را ذخيره كرده و از آن خارج شويد.
در آخر ، لوگو را حذف كنيد. در پنجره ترمينال دستور زير را تايپ كنيد:
⦁ $ rm src/logo.svg
⦁

شما در برنامه خود از اين فايل SVG استفاده نخواهيد كرد و بايد هنگام كار ، فايل هاي بلااستفاده را حذف كنيد. بهتر است در طولاني مدت كد خود را سازماندهي كنيد.
اكنون كه اين قسمت از پروژه شما حذف شده است ، مي توانيد به جستجو در جنبه هاي ديگر JSX بپردازيد. اين زبان نشانه گذاري توسط React كامپايل شده و در نهايت تبديل به HTML مي شود كه در يك صفحه وب مشاهده مي كنيد. بدون وارد شدن عميق داخلي React ، JSX را مي گيرد و الگويي از صفحه شما را ايجاد مي كند ، سپس عناصر لازم را ايجاد كرده و آنها را به صفحه اضافه مي كند.
اين بدان معني است كه مي توانيد چيزي را بنويسيد كه شبيه HTML است و انتظار داشته باشيد كه HTML ارائه شده مشابه باشد. با اين حال ، چند مرحله وجود دارد.
ابتدا ، اگر به سربرگ يا پنجره سرور مجازي خود نگاه كنيد ، اين را مشاهده خواهيد كرد
Output
…
./src/App.js
Line 1:8: ‘React’ is defined but never used no-unused-vars
…

اين linter به شما مي گويد كه از كد React وارد شده استفاده نمي كنيد. هنگامي كه خط import React from ‘react’ را به كد خود اضافه مي كنيد ، كد JavaScript را وارد مي كنيد كه JSX را به React code تبديل مي كند. اگر JSX وجود نداشته باشد ، ديگر نيازي به ورودي نيست.
بياييد با اضافه كردن مقدار كمي JSX اين مسئله را تغيير دهيم. با جايگزين كردن null با يك مثال hello, world شروع كنيد:
jsx-tutorial/src/App.js
import React from ‘react’;
import ‘./App.css’;

function App() {
return

Hello, World

;
}

export default App;

فايل را ذخيره كنيد. اگر به ترمينال با سرور مجازي در حال اجرا نگاه كنيد ، پيام اخطار از بين خواهد رفت. اگر از مرورگر خود بازديد كنيد ، پيام را به عنوان مولفه h1 مشاهده خواهيد كرد.

سپس ، در زير برچسب

، يك برچسب پاراگراف اضافه كنيد كه شامل رشته I am writing JSX است. كد به صورت زير خواهد بود:
jsx-tutorial/src/App.js
import React from ‘react’;
import ‘./App.css’;

function App() {
return(

Hello, World

I am writing JSX

)
}

export default App;

از آنجايي كه JSX چندين خط دارد ، نياز است عبارت در پرانتز قرار داده شود.
فايل را ذخيره كنيد. هنگامي كه اين كار را كرديد، خطايي در اجراي سرور مجازي خود در ترمينال مشاهده مي كنيد:
Output
./src/App.js
Line 7:5: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…?

5 | return(
6 |

Hello, World

> 7 |

I am writing JSX

| ^
8 | )
9 | }
10 |

وقتي JSX را از يك تابع يا عبارت باز مي گردانيد ، بايد يك مولفه واحد را برگردانيد. اين مولفه ممكن است بخش هاي لانه گزيده باشد ، اما اگر يك مولفه سطح بالا باشد. در اين حالت ، دو مولفه را بر مي گردانيد.
fix يك تغيير كد جزيي است. با يك برچسب خالي كد را محصور كنيد. برچسب خالي يك مولفه HTML است كه هيچ كلمه اي ندارد. به اين شكل: <>
به./src/App.js در ويرايشگر خود برويد و برچسب خالي را اضافه كنيد:
jsx-tutorial/src/App.js
import React from ‘react’;
import ‘./App.css’;

function App() {
return(
<>

Hello, World

I am writing JSX

)
}

export default App;

برچسب خالي يك مولفه واحد ايجاد مي كند ، اما وقتي كد كامپايل شد ، به نشانه گذاري نهايي اضافه نمي شود. اين كار باعث مي شود كدهاي شما در عين حال كه يك مولفه واحد به React مي دهند ، صحيح باقي بمانند.
توجه: شما مي توانيد به جاي برچسب هاي خالي ، كد را با يك div محصور كنيد ، مادامي كه كد يك مولفه را برگرداند. در اين مثال ، يك برچسب خالي اين مزيت را دارد كه نشانه گذاري اضافي به خروجي تجزيه نشده اضافه نمي كند.

كد را ذخيره كرده و از فايل خارج شويد. مرورگر شما صفحه به روز شده را با مولفه پاراگراف نشان مي دهد. علاوه بر اين ، هنگام تبديل كد ، برچسب هاي خالي از بين مي روند:

اكنون JSX اساسي را به مؤلفه خود اضافه كرده ايد و ياد گرفته ايد كه چگونه بايد همه JSX در يك مؤلفه مستقر شود. در مرحله بعد ، يك ظاهر طراحي را به مؤلفه خود اضافه مي كنيد.
مرحله 2 – اضافه كردن طراحي به يك مولفه به همراه ويژگي ها
در اين مرحله ، به عناصر موجود در مؤلفه خود مي پردازيد تا ياد بگيريد كه چگونه ويژگي هاي HTML با JSX كار مي كنند. در React گزينه هاي بسياري براي طراحي وجود دارد. برخي از آنها شامل نوشتن CSS در جاوا اسكريپت است، بو رخي ديگر از پيش پردازنده استفاده مي كنند. در اين آموزش با كلاس هاي CSS و CSS وارد شده كار خواهيد كرد.
اكنون كه كد خود را داريد ، وقت آن است كه يك ظاهر طراحي شده اضافه كنيد. App.css را در ويرايشگر متن خود باز كنيد:
⦁ $ nano src/App.css
⦁
از آنجا كه شما با JSX جديد شروع مي كنيد ، CSS فعلي به عناصري اشاره مي كند كه ديگر وجود ندارند. از آنجا كه به CSS احتياج نداريد ، مي توانيد آن را حذف كنيد.
پس از حذف كد ، فايلي خالي خواهيد داشت.
در مرحله بعد ، مي توانيد طراحي به مركز متن اضافه كنيد. در src / App.css كد زير را اضافه كنيد:
jsx-tutorial/src/App.css
.container {
display: flex;
flex-direction: column;
align-items: center;
}

در اين بلوك كد ، شما  CSS class selector را با نام .container ايجاد كرده ايد و از آن براي در مركز قرار دادن محتوا با استفاده از display: flex استفاده كرده ايد.
فايل را ذخيره كرده و خارج شويد. مرورگر بروزرساني مي شود ، اما هيچ چيز تغيير نخواهد كرد. قبل از مشاهده تغيير ، بايد كلاس CSS را به مؤلفه React خود اضافه كنيد. كد JavaScript مولفه را انتخاب كنيد:
⦁ $ nano src/App.js
⦁
كد CSS قبلاً با خط import ‘./App.css’ وارد شده است. اين بدان معني است كه webpack براي ساختن يك صفحه طراحي نهايي، كد را وارد مي كنند ، اما براي اعمال CSS روي عناصر خود ، بايد كلاس ها را اضافه كنيد.
ابتدا ، در ويرايشگر متن ، برچسب هاي خالي ، <> را به

تغيير دهيد.
jsx-tutorial/src/App.js
import React from ‘react’;
import ‘./App.css’;

function App() {
return(

Hello, World

I am writing JSX

)
}

export default App;

در اين كد تگ هاي خالي – <> – را با برچسب هاي div جايگزين كرده ايد. تگ هاي خالي براي گروه بندي كد شما بدون اضافه كردن برچسب هاي اضافي مفيد هستند ، اما در اينجا شما بايد از div استفاده كنيد زيرا برچسب هاي خالي هيچ ويژگي HTML را نمي پذيرند.
در مرحله بعد بايد نام كلاس را اضافه كنيد. اينجاست كه JSX شروع به واگرايي از HTML مي كند. اگر مي خواهيد يك كلاس را به يك مولفه HTML معمولي اضافه كنيد ، اين كار را اينگونه انجام مي دهيد:

Copy

اما از آنجا كه JSX جاوا اسكريپت است ، محدوديت هايي دارد. يكي از محدوديت ها اين است كه جاوا اسكريپت كلمات كليدي خود را رزرو كرده است. اين بدان معناست كه شما نمي توانيد از كلمات خاصي در هر كد JavaScript استفاده كنيد. به عنوان مثال ، شما نمي توانيد يك متغير به نام null ايجاد كنيد زيرا اين كلمه در حال حاضر محفوظ است.
يكي از كلمات رزرو شده class است. React با كمي تغيير دادن اين كلمه كار خود را انجام ميدهد. به جاي اضافه كردن مشخصه class ، className را اضافه مي كنيد. به عنوان يك قاعده ، اگر يك مشخصه (attribute) همانطور كه انتظار مي رود كار نمي كند ، سعي كنيد نسخه camel case را اضافه كنيد. مشخصه ديگري كه كمي متفاوت است مشخصه for ميباشد كه براي برچسب ها استفاده ميكنيد. چند مورد ديگر نيز وجود دارد ، اما خوشبختانه اين ليست نسبتاً كوتاه است.
توجه: در React ، مشخصه ها اغلب prps خوانده مي شوند. Props داده هايي هستند كه مي توانيد به ساير مؤلفه هاي سفارشي منتقل كنيد. آنها مشابه مشخصه ها هستند به جز اينكه با هيچ يك از مشخصات HTML مطابقت ندارند. در اين آموزش ، آنها را مشخصه مي ناميم زيرا عمدتا مانند مشخصه هاي استاندارد HTML استفاده مي شوند. اين امر آنها را از propهايي كه مانند مشخصه هاي HTML رفتار نمي كنند ، متمايز مي كند ، كه بعداً در اين مجموعه پوشش داده مي شود.

اكنون كه مي دانيد چگونه از مشخصه calss در React استفاده مي شود ، مي توانيد كد خود را به روز كنيد تا طراحي ها را درج كنيد. در ويرايشگر متن خود ، className=”container” را به برچسب div اضافه كنيد
jsx-tutorial/src/App.js
import React from ‘react’;
import ‘./App.css’;

function App() {
return(

Hello, World

I am writing JSX

)
}

export default App;

فايل را ذخيره كنيد. با انجام اين كار ، صفحه مجدد لودد مي شود و محتوا در مركز قرار مي گيرد ..

ويژگي className در React بي نظير است. شما مي توانيد اكثر ويژگيهاي HTML را بدون هيچ تغييري به JSX اضافه كنيد. به عنوان نمونه ، به ويرايشگر متن خود برگرديد و شناسه greeting را به مولفه

خود اضافه كنيد. مانند HTML استاندارد به نظر مي رسد:
jsx-tutorial/src/App.js
import React from ‘react’;
import ‘./App.css’;

function App() {
return(

Hello, World

I am writing JSX

)
}

export default App;

صفحه را ذخيره كرده و مرورگر را مجدد لود كنيد. مشابه قبلي خواهد بود.
تاكنون ، JSX به عنوان نشانه گذاري استاندارد به نظر مي رسيد ، اما مزيت JSX اين است كه حتي اگر شبيهHTML به نظر مي رسد ، قدرت جاوا اسكريپت را دارد. اين بدان معناست كه مي توانيد متغيرها را اختصاص دهيد و آنها را در مشخصه هاي خود ارجاع دهيد. براي ارجاع به يك مشخصه ، آن را به جاي نقل قولها در پرانتزهاي به شكل {} قرار دهيد.
در ويرايشگر متن خود ، خطوط هايلايت شده زير را به عنوان يك مشخصه اضافه كنيد:
jsx-tutorial/src/App.js
import React from ‘react’;
import ‘./App.css’;

function App() {
const greeting = “greeting”;
return(

Hello, World

I am writing JSX

)
}

export default App;

در اين كد ، در بالاي عبارت return يك متغير به نام greeting با مقدار “greeting” ايجاد كرده ايد ، سپس متغير را در مشخصه id برچسب

خود ارجاع داده ايد.
فايل را ذخيره كنيد و از آن خارج شويد. صفحه همان خواهد بود، اما برچسب id خواهد داشت.

تاكنون با چند مولفه به تنهايي كار كرده ايد ، اما مي توانيد از JSX همچنين براي اضافه كردن بسياري از عناصر HTML استفاده كرده و آنها را براي ايجاد صفحات پيچيده مستقر نماييد.
براي نشان دادن اين موضوع ، مي توانيد با ليستي از ايموجي ها صفحه اي ايجاد كنيد. اين شكلك ها با يك مولفه محصور مي شوند. هنگامي كه روي ايموجي ها كليك مي كنيد ، نام كوتاه CLDR آنها را دريافت خواهيد كرد.
براي شروع ، بايد چند مولفه ديگر به صفحه اضافه كنيد. . src / App.js را در ويرايشگر متن خود باز كنيد. در طول اين مرحله آن را باز نگه داريد.
⦁ $ nano src/App.js
⦁

ابتدا با افزودن خطوط هايلايت شده زير ليستي از ايموجي ها را اضافه كنيد:
jsx-tutorial/src/App.js
import React from ‘react’;
import ‘./App.css’;

function App() {
const greeting = “greeting”;
return(

Hello, World

I am writing JSX

• 
  

????

????

????

)
}

export default App;

در اينجا شما براي نگه داشتن ليستي از ايموجي ها برچسب

ايجاد كرده ايد. هر ايموجي در يك مولفه
• جداگانه قرار دارد و با يك مولفه احاطه شده است. در مرحله بعد رويدادي را به اين دكمه اضافه خواهيد كرد.
  همچنين ايموجي ها را با يك برچسب محاصره كرده ايد كه داراي چند ويژگي ديگر است. هر span داراي مشخصه role ميباشد كه روي img تنظيم شده است. اين به نرم افزار در دسترس سيگنال ميفرستد كه اين عنصر به شكل تصوير عمل ميكند. علاوه بر اين ، هر همچنين داراي يك aria-label و يك ويژگي id با نام ايموجي است. aria-label آنچه نمايش داده مي شود را به بازديد كنندگان مي گويد. در مرحله بعدي از id در حين نوشتن رويداد استفاده خواهيد كرد.
  وقتي كد را به اين روش مي نويسيد ، از عناصر معنايي استفاده مي كنيد ، كه به شما كمك مي كند صفحه را در دسترس قرار دهيد و دنبال كردن آن براي صفحه خوان (screen readers) راحت باشد.
  فايل را ذخيره كنيد و از آن خارج شويد. مرورگر شما ريفرش مي شود و اين تصوير را مشاهده خواهيد كرد:

  اكنون كمي طراحي اضافه كنيد. كد CSS را در ويرايشگر متن خود باز كنيد:
  ⦁ $ nano src/App.css
  ⦁

  كد هايلايت شده زير را اضافه كنيد تا ضمن افزايش اندازه فونت ، پيش زمينه و حاشيه پيش فرض دكمه ها را حذف كنيد:
  jsx-tutorial/src/App.css
  .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  }

  button {
  font-size: 2em;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  }

  ul {
  display: flex;
  padding: 0;
  }

  li {
  margin: 0 20px;
  list-style: none;
  padding: 0;
  }

  در اين كد از تنظيمات اندازه قلم ، حاشيه و پارامترهاي ديگر براي تنظيم ظاهر دكمه هاي خود و تغيير فونت استفاده كرده ايد. همچنين سبك هاي ليست را حذف كرده و display: flex را به مولفه

  اضافه مي كنيد تا افقي شود.
  فايل CSS را ذخيره كنيد و ببنديد. مرورگر شما ريفرش مي شود و شما اين را مشاهده خواهيد كرد:

  اكنون با چندين مولفه JSX كار كرده ايد كه مانند HTML معمولي به نظر مي رسند. شما كلاس ها ، شناسه ها و برچسب هاي Aria را اضافه كرده ايد و با داده ها به عنوان رشته ها و متغيرها كار كرده ايد. اما React همچنين از ويژگيهايي براي تعريف نحوه پاسخگويي عناصر شما به رويدادهاي كاربر استفاده مي كند. در مرحله بعدي ، با افزودن رويدادها به دكمه ، صفحه را به صورت تعاملي خواهيد ساخت.
  مرحله 3 – افزودن رويدادها به عناصر
  در اين مرحله ، با استفاده از ويژگي هاي خاص ، رويدادها را به عناصر اضافه مي كنيد و يك رويداد كليك را روي يك مولفه دكمه دريافت مي كنيد. ياد مي گيريد كه چگونه اطلاعات را از اين رويداد دريافت كنيد تا عملي ديگر ارسال شود يا از ساير اطلاعات در دامنه فايل استفاده كند.
  اكنون كه يك صفحه اصلي با اطلاعات داريد ، زمان آن رسيده كه چند رويداد را به آن اضافه كنيد. event handler بسياري وجود دارند كه مي توانيد به عناصر HTML اضافه كنيد. React به شما امكان دسترسي به همه اينها را مي دهد. از آنجا كه كد جاوا اسكريپت همراه با نشانه گذاري شما است ، مي توانيد ضمن نگه داشتن نظم كد خود ، به سرعت رويدادها را اضافه كنيد.
  براي شروع ، كنترل كننده رويداد onclick را اضافه كنيد. به شما امكان مي دهد به جاي ضميمه كردن شنونده رويداد (event listener) ، تعدادي كد جاوا اسكريپت را مستقيماً به مولفه خود اضافه كنيد:
  jsx-tutorial/src/App.js
  import React from ‘react’;
  import ‘./App.css’;

  function App() {
  const greeting = “greeting”;
  return(
  

  
  
  Hello, World
  
  
  I am writing JSX
  
  
  
  
  • 
    onClick={event => alert(event.target.id)}
    >
    ????
    
  
  


• 
  onClick={event => alert(event.target.id)}
  >
  ????
  
  


• 
  onClick={event => alert(event.target.id)}
  >
  ????
  
  

)
}

export default App;

از آنجا كه اين JSX است ، onclick را به صورت camelCased درمي آوريد ، به اين معني كه آن را به صورت onClick اضافه كرده ايد. اين مشخصه onClick از يك تابع ناشناس براي بازيابي اطلاعات در مورد آيتمي كه كليك شده است استفاده مي كند.
شما يك تابع فلش ناشناس اضافه كرديد كه اين رويداد را از روي دكمه كليك شده درياقن مي كند و رويداد داراي هدفي خواهد بود كه مولفه است. اطلاعات مورد نياز در مشخصه id است كه مي توانيد با event.target.id به آنها دسترسي پيدا كنيد. با تابع () alert مي توانيد هشدار را فعال كنيد.
فايل را ذخيره كنيد. در مرورگر خود ، روي يكي از ايموجي ها كليك كرده و هشداري را به همراه نام دريافت خواهيد كرد.

مي توانيد با يكبار اعلام تابع و انتقال آن به هر تابع onClick ، ​​ تكرار را كاهش دهيد. از آنجايي كه اين تابع به چيزي غير از ورودي و خروجي متكي نيست ، مي توانيد آن را خارج از تابع مؤلفه اصلي اعلام كنيد. به عبارت ديگر ، تابع نيازي به دسترسي به حوزه مولفه ندارد. مزيت جدا كردن آنها اين است كه تابع كامپوننت شما كمي كوتاه تر است و مي توانيد در صورت نياز بعدا تابع را به يك فايل جداگانه منتقل كنيد.
در ويرايشگر متن خود ، تابعي به نام displayEmojiName ايجاد كنيد كه اين رويداد را بگيرد و تابع ()alert را با شناسه فراخواني كند. سپس تابع را به هر مشخصه onClick منتقل كنيد:
jsx-tutorial/src/App.js
import React from ‘react’;
import ‘./App.css’;

const displayEmojiName = event => alert(event.target.id);

function App() {
const greeting = “greeting”;
return(

Hello, World

I am writing JSX

• 
  onClick={displayEmojiName}
  >
  ????
  
  


• 
  onClick={displayEmojiName}
  >
  ????
  
  


• 
  onClick={displayEmojiName}
  >
  ????
  
  

)
}

export default App;

فايل را ذخيره كنيد. در مرورگر خود ، روي emoji كليك كنيد و همان هشدار را مشاهده خواهيد كرد.
در اين مرحله ، شما به هر مولفه رويدادهايي اضافه كرديد. همچنين ديديد كه چگونه JSX از اسامي كمي متفاوت براي رويدادهاي مولفه استفاده مي كند ، و با گرفتن تابع و استفاده مجدد از آن بر روي چندين مولفه ، شروع به نوشتن كد قابل استفاده مجدد كرديد. در مرحله بعد ، يك تابع قابل استفاده مجدد خواهيد نوشت كه به جاي نوشتن هر مولفه به صورت دستي، عناصر JSX را برمي گرداند. اين امر بيشتر باعث كاهش تكرار خواهد شد.
مرحله 4 – نگاشت روي داده ها براي ايجاد عناصر
در اين مرحله ، استفاده از JSX فراتر از نشانه گذاري ساده خواهد رفت. ياد مي گيريد كه آن را با جاوا اسكريپت تركيب كنيد تا نشانه گذاري پويا ايجاد كنيد كه كد را كوچك مي كند و خوانايي را بهبود مي بخشد. مي توانيد كد خود را در آرايه اي كه براي ايجاد عناصر HTML حلقه مي كنيد ، آناليز كنيد.
JSX شما را به يك تركيب مشابه HTML محدود نمي كند. همچنين امكان استفاده مستقيم از JavaScript را در نشانه گذاري به شما مي دهد. اين كار را تا حدي با وارد كردن توابع به مشخصه ها امتحان كرده ايد. همچنين از متغيرها براي استفاده مجدد از داده ها استفاده كرده ايد. اكنون زمان آن رسيده كه JSX را مستقيماً از داده ها با استفاده از كد استاندارد JavaScript بسازيد.
در ويرايشگر متن خود ، بايد آرايه اي از داده هاي ايموجي را در فايل src / App.js ايجاد كنيد. اگر بسته است ، فايل را مجدداً باز كنيد:
⦁ $ nano src/App.js
⦁
آرايه اي را اضافه كنيد كه شامل آبجكت هاي داراي ايموجي و نام ايموجي باشد. توجه داشته باشيد كه ايموجي ها بايد با علامت نقل قول احاطه شوند. اين آرايه را فراتر از تابع app ايجاد كنيد:
jsx-tutorial/src/App.js
import React from ‘react’;
import ‘./App.css’;

const displayEmojiName = event => alert(event.target.id);
const emojis = [
{
emoji: “????”,
name: “grinning face”
},
{
emoji: “????”,
name: “party popper”
},
{
emoji: “????”,
name: “woman dancing”
}
];

function App() {
…
}

export default App;

اكنون كه داده داريد مي توانيد از طريق آن حلقه بزنيد. براي استفاده از JavaScript در داخل JSX ، بايد آن را در پرانتز {} قرار دهيد. مشابه زماني است كه توابع را به مشخصه ها اضافه كرديد.
براي ايجاد مؤلفه هاي React ، بايد داده ها را به عناصر JSX تبديل كنيد. براي انجام اين كار ، روي داده ها نگاشت مي كنيد و يك مولفه JSX را برمي گردانيد. چند نكته وجود دارد كه هنگام نوشتن كد بايد آنها را به خاطر بسپاريد.
ابتدا ، يك گروه از آيتم ها بايد توسط يك كانتينر

احاطه شوند. سپس ، هر آيتم به يك مشخصه خاص به نام key نياز دارد. Key نياز به يك سري داده منحصر به فرد دارد كه React مي تواند از آنها استفاده كند تا عناصر را رديابي كند و بداند چه موقع به روز رساني اين مؤلفه را انجام دهد. اين كليد از HTML كامپايل شده خارج مي شود ، زيرا فقط براي اهداف داخلي است. هر زمان كه با حلقه كار مي كنيد ، بايد يك رشته ساده را به عنوان كليد اضافه كنيد.
در اينجا مثال ساده اي وجود دارد كه ليستي از نام ها را در يك

نگاشت مي كند:
…
const names = [
“Atul Gawande”,
“Stan Sakai”,
“Barry Lopez”
];

return(

{names.map(name =>

{name}

)}

)
…

HTML حاصل از اين قرار است:
…

Atul Gawande

Stan Sakai

Barry Lopez

…

تبديل ليست ايموجي مشابه خواهد بود.

كانتينر خواهد بود. روي داده ها نگاشت مي كنيد و
• را با كليد نام كوتاه ايموجي برميگردانيد. شما داده هاي به سختي كد شده را در برچسب هاي و با اطلاعات حلقه جايگزين مي كنيد.
  در ويرايشگر متن خود موارد زير را اضافه كنيد:
  jsx-tutorial/src/App.js
  import React from ‘react’;
  import ‘./App.css’;

  const displayEmojiName = event => alert(event.target.id);
  const emojis = [
  {
  emoji: ‘????’,
  name: “test grinning face”
  },
  {
  emoji: ‘????’,
  name: “party popper”
  },
  {
  emoji: ‘????’,
  name: “woman dancing”
  }
  ];

  function App() {
  const greeting = “greeting”;
  return(
  

  
  

  Hello, World

  
  

  I am writing JSX

  
  

  
  {
  emojis.map(emoji => (
  
  • 
    onClick={displayEmojiName}
    >
    {emoji.emoji}
    
  
  

))
}

)
}
export default App;
Copy

در اين كد ، شما بر روي آرايه emojis در برچسب

نگاشت كرديد و
• را برگردانديد. در هر
• از نام ايموجي به عنوان مشخصه key استفاده كرده ايد. دكمه همان تابع عادي را خواهد داشت. در مولفه ، aria-label و id را با name جايگزين كنيد. محتواي برچسب بايد ايموجي باشد.
  فايل را ذخيره كنيد. پنجره شما ريفرش خواهد شد و داده ها را مشاهده خواهيد كرد. توجه كنيد كه كليد در HTML توليد شده وجود ندارد.

  تركيب JSX با استاندارد JavaScript ابزارهاي زيادي را در اختيار شما قرار مي دهد تا بصورت ديناميكي محتوا را ايجاد كنيد و مي توانيد از هر JavaScript استاندارد مورد نظر خود استفاده كنيد. در اين مرحله ، JSX سخت كد گذاري شده را با يك آرايه و يك حلقه جايگزين كرديد تا HTML به صورت پويا ايجاد شود. در مرحله بعد ، با استفاده از اتصال كوتاه ، اطلاعات را به صورت مشروط نشان مي دهيد.
  مرحله 5 – نمايش مشروط عناصر با اتصال كوتاه
  در اين مرحله ، از اتصال كوتاه براي نمايش مشروط عناصر HTML استفاده خواهيد كرد. اين كار به شما امكان مي دهد تا مؤلفه هايي ايجاد كنيد كه بتوانند HTML را بر اساس اطلاعات اضافي پنهان كند يا نشان دهد ، و به انعطاف پذيري مولفه هاي شما براي رسيدگي به موقعيت هاي مختلف مي پردازند.
  مواقعي وجود دارد كه شما براي نشان دادن اطلاعات در بعضي آيتم ها به مؤلفه نياز داريد و در آيتم هاي ديگر احتيج نيست. به عنوان مثال ، فقط در صورت صحت برخي موارد ممكن است بخواهيد براي كاربر پيام هشدار نشان دهيد ، يا ممكن است بخواهيد برخي از اطلاعات حساب را براي ادمين نمايش دهيد كه نمي خواهيد يك كاربر عادي آن را ببيند.
  براي اين كار از گردش كوتاه استفاده خواهيد كرد. اين بدان معناست كه شما از يك شرط استفاده خواهيد كرد و اگر قسمت اول صادق باشد ، اطلاعات را در قسمت دوم برمي گرداند.
  در اينجا يك مثال مطرح شده است. اگر مي خواهيد يك دكمه را فقط در صورت ورود كاربر به سيستم نشان دهيد ، اين مولفه را در پرانتز {} قرار دهيد و شرايط را قبل از آن اضافه مي كنيد.
  {isLoggedIn && Log Out}
  Copy

  در اين مثال ، شما در حال استفاده از عملگر && هستيد كه اگر همه چيز صادق باشد ، آخرين مقدار را به شما بازمي گرداند. در غير اين صورت ، false را برگردانده ، كه به React مي گويند هيچ نشانه گذاري اضافي را برنگرداند. اگر isLoggedIn صادق باشد ، React دكمه را نشان مي دهد. اگر isLoggedIn غلط باشد ، دكمه را نشان نمي دهد.
  براي امتحان كردن اين مسئله ، خطوط هايلايت شده زير را اضافه كنيد:
  jsx-tutorial/src/App.js
  import React from ‘react’;
  import ‘./App.css’;

  …

  function App() {
  const greeting = “greeting”;
  const displayAction = false;
  return(
  

  
  

  Hello, World

  
  {displayAction &&

  I am writing JSX

  }
  

  
  …
  

  
  
  
  )
  }

  export default App;

  در ويرايشگر متن خود متغيري به نام displayAction با مقدار false ايجاد كرده ايد. سپس برچسب

  را در {} قرار داديد. در شروع پرانتزها ، براي ايجاد شرط ، displayAction && را اضافه كرديد.
  فايل را ذخيره كنيد و خواهيد ديد كه مولفه در مرورگر شما ناپديد مي شود. مهم است بدانيد ، در HTML توليد شده نيز ظاهر نمي شود. اين مخفي كردن يك مولفه با CSS نيست. اصلاً در نشانه گذاري نهايي وجود نخواهد داشت.

  در حال حاضر مقدار displayAction سخت كدنويسي شده است ، اما مي توانيد آن مقدار را به عنوان حالت ذخيره كرده يا آن را به عنوان يك پايه در قسمت مولفه هاي بالاسري منتقل كنيد.
  در اين مرحله ياد گرفتيد كه چگونه عناصر را به صورت مشروط نشان دهيد. اين به شما امكان مي دهد تا مؤلفه هايي را تنظيم كنيد كه براساس اطلاعات ديگر قابل تنظيم هستند.
  نتيجه
  در اين آموزش ، يك برنامه سفارشي با JSX ايجاد كرديد. آموختيد كه چگونه عناصر HTML مانند، را به مولفه هاي خود اضافه كنيد ، يك ظاهر طراحي را به آن عناصر اضافه كنيد ، ويژگي هايي را براي ايجاد نشانه گذاري معنايي و در دسترس اضافه كنيد و رويدادها را به مؤلفه ها اضافه نماييد. سپس جاوا اسكريپت را با JSX خود تركيب كرديد تا كد تكراري را كاهش داده و عناصر را به طور مشروط نشان داده و مخفي كند.
  اين مبنايي است كه شما براي ساختن مولفه هاي آينده نياز داريد. با استفاده از تركيبي از JavaScript و HTML ، مي توانيد مولفه هاي پويا ايجاد كنيد كه قابل انعطاف باشند و به شما امكان مي دهد برنامه تان رشد و تغيير يابد.
  اگر مي خواهيد در مورد React اطلاعات بيشتري كسب كنيد ، از صفحه موضوع React ما ديدن كنيد.

   

برچسب‌ها:Create React App, HTML, JavaScript,