نصب رابط کاربری تحت وب

همانطور که در مقدمه گفته شد پنل مدیریتی تحت وب سامانه فازر در سمت Back-End‌ مبتنی بر زبان PHP و چارچوب Laravel و در سمت Front-End‌ مبتنی بر زبان Typescript و چارچوب Node.JS توسعه داده شده است. این نکته را باید در نظر داشت که عملیات نصب و پیکربندی رابط کاربری سامانه فازر را می‌توان هم روی رایانه Master انجام داد و هم روی یک رایانه مجزای دیگر.

برای نصب و پیکربندی پروژه فازر در سمت وب، 2 راه کار وجود دارد. راه اول استفاده از Docker می‌باشد که راه‌اندازی آن بسیار ساده است. راه دوم پیکربندی بصورت دستی است که پیچیدگی بیشتری دارد.

در اینجا هر دو روش را به تفصیل توضیح می‌دهیم.

در اولین گام دایرکتوری پروژه‌های Front-End و Back-End را در یک دایرکتوری ریشه به نام fuzzer_web قرار داده و سپس این دایرکتوری را در مسیر /var/www قرار دهید. در شکل زیر می‌توانید نمایی از رابط کاربری تحت وب ببینید.

۱- نصب از طریق Docker

باید برای این‌کار حتما Docker بر روی سیستم شما نصب باشد. برای نصب Docker دستورات زیر را در سیستم عامل Ubuntu به ترتیب وارد کنید:

sudo apt update
sudo apt install apt-transport-https ca-certificates curl gnupg-agent software-properties-common curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add – sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
sudo apt update
sudo apt install docker-ce docker-ce-cli containerd.io

نکته: ممکن است به علت تحریم‌ها، جهت نصب Docker‌ به ابزارهای فیلترشکن نیاز داشته باشید.

نکته: جهت اجرای Docker بدون sudo دستورات زیر را اجرا کنید:

sudo usermod -aG docker $USER
newgrp docker

پس از نصب شدن Docker باید اقدام به ساخت فایل image هر دو پروژه Front-End و Back-end بر روی سیستم کنید. این Image از روی Dockerfileهایی ایجاد می‌شود که در دایرکتوری‌های این پروژه‌ها وجود دارد.

برای اجرای Back-End ابتدا یک کپی از فایل .env.example در مسیر /var/www/fuzzer_web/backend/files بگیرید و با نام .env ذخیره کنید. سپس اطلاعات اتصال به پایگاه داده Mongodb را در فایل .env تنظیم کنید (فیلدهای DB_HOST، DB_DATABASE را تنظیم کنید). همچنین فیلد APP_URL را برابر آدرس Back-End قرار دهید.

سپس برای ساخت Image بک‌اند دستور زیر را وارد کنید:

cd /var/www/fuzzer_web/backend
docker build . -t backend:1.0

حالا برای اجرای Backend دستور زیر را وارد کنید:

docker run -d -p 8443:443 --restart unless-stopped --name backend backend:1.0 docker exec -i backend /bin/bash -c "/startup.sh"

برای ساخت Image فرانت‌اند ابتدا یک کپی از فایل .env.example در مسیر زیر تهیه و با نام .env ذخیره کنید:

/var/www/fuzzer_web/frontend/frontend

سپس آدرس Back-End را در فایل .env تنظیم و دستور زیر را وارد کنید:

cd /var/www/fuzzer_web/frontend
sudo docker build . -t frontend:1.0

حالا برای اجرای Front-End دستور زیر را وارد کنید:

docker run -d -p 443:443 --restart unless-stopped --name frontend frontend:1.0

نکته: دقت کنید که فرآیند ساخت image پروژه‌ها به دلیل حجم بالای آنها فرآیندی طولانی است و بسته به سرعت اینترنت ممکن است بیش از یک ساعت هم به طول بینجامد.

حالا در مرورگر آدرس https://127.0.0.1 را وارد کنید تا پروژه برای شما بالا بیاید.

 در زیر می‌توانید تصویری از بالا آوردن رابط کاربری تحت وب از Docker را ببینید.

۲- نصب و پیکربندی دستی

برای نصب و پیکربندی دستی باید هر 2 پروژه Back-End و Front-End خود را به روش زیر پیکربندی کنیم.

۲-۱- پیکربندی Back-End

از آنجا که بسته‌های استفاده شده در این پروژه مبتنی بر php8 هستند، لذا در صورتی‌که نسخه پایین‌تری از php بر روی سیستم شما نصب است، باید ابتدا آن را پاک و این نسخه را نصب کنید. سپس، دستورات زیر را برای نصب php8 به ترتیب وارد کنید:

sudo apt-get install -y software-properties-common
sudo add-apt-repository ppa:ondrej/php
sudo apt-get update
sudo apt install php8.0

پایگاه داده استفاده شده در این پروژه از نوع NoSQL است و از مدل معروف آن یعنی mongodb استفاده شده است. برای نصب آن از دستور زیر استفاده کنید:

sudo apt-get install mongodb

حالا افزونه dom را روی php فعال کنید:

sudo apt install php-xml

در مرحله ابزار composer را نصب کنید. composer ابزاری است که نیازمندی‌ها و بسته‌های پروژه شما را مدیریت و بروزرسانی می‌کند. برای نصب این ابزار دستورات زیر را به ترتیب وارد کنید:

sudo curl -sS https://getcomposer.org/installer -o composer-setup.php
sudo php composer-setup.php --install-dir=/usr/local/bin --filename=composer

پس از نصب composer وارد دایرکتوری پروژه Back-end شوید:

cd /var/www/fuzzer_web/backend/files

حالا باید با استفاده از composer بسته‌های استفاده شده در پروژه را با دستور زیر نصب و بروزرسانی کنید:

sudo composer update

برای اینکه مجوز دسترسی روی فایل‌ها در پروژه Back-End را داشته باشید باید دستورات زیر را به ترتیب وارد کنید:

نکته: در 2 خط اول از دستورات زیر باید نام‌کاربری خود را به جای root قرار دهید.

sudo usermod -a -G www-data root
sudo chown -R root:www-data .
sudo find . -type f -exec chmod 664 {} \;
sudo find . -type d -exec chmod 775 {} \;
sudo chmod +x vendor/bin/phpunit

در مرحله بعد باید یک کپی از فایل .env.example بگیرید:

cp .env.example .env

فایل .env به عنوان فایل پیکربندی پروژه روی سیستم شما در نظر گرفته می‌شود و می‌توانید تغییرات لازم را روی آن اعمال کنید. ابتدا این فایل را با دستور زیر باز کنید و سپس، مقدار متغیر DB_HOST را برابر با آدرس IP پایگاه داده MongoDB تغییر دهید:

nano .env

پس از انجام تغییرات با دستور زیر فایل .env را بروز‌رسانی کنید:

php artisan config:cache

حالا به ترتیب دستورات زیر را وارد می‌کنیم:

php artisan key:generate
php artisan jwt:secret
php artisan migrate:fresh --seed

نکته: برای مدیریت پایگاه‌ داده‌های MongoDB می‌توانید از نرم‌افزارهایی همچون robo3t استفاده کنید.

۲-۲- پیکربندی Front-End

ابتدا وارد مسیر پروژه Front-end شوید:

/var/www/fuzzer_web/frontend/frontend cd

با دستور زیر یک کپی از فایل .env.example بگیرید:

sudo cp .env.example .env

حال با دستور زیر فایل .env را باز کنید و آدرس Back-End خود را در این فایل وارد کنید:

nano .env

در شکل زیر می‌توانید فایل .env پروژه Front-End را ببینید.

با دستورات زیر Node.js روی سیستم خود نصب کنید:

sudo apt update
curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
sudo apt -y install nodejs

نکته: به دلیل اینکه بسته‌های استفاده شده در این پروژه با نسخه 14 ابزار Node.JS سازگار هستند، لذا برای جلوگیری از هرگونه خطای احتمالی بهتر است از طریق دستورات بالا این نسخه را بر روی سیستم خود نصب کنید.

پس از نصب Node با دستور زیر بسته‌های پروژه را نصب کنید:

sudo npm install

حالا با دستور زیر یک build از پروژه خود ایجاد کنید:

sudo npm run build

۲-۳- ساخت VirtualHost

برای بالا آوردن رابط کاربری تحت وب سامانه فازر، باید برای هر دو پروژه Back-End و Front-End یک VirtualHost روی سرور Apache ایجاد کنید.

برای انجام این‌کار باید فایل default-ssl.conf را با دستور زیر ویرایش کنید:

sudo nano /etc/apache2/sites-available/default-ssl.conf

به منظور ایجاد VirtualHost برای پروژه Front-end به صورت زیر عمل کنید:

<VirtualHost *:443>
  ServerName fuzzer.ir
  DocumentRoot “/var/www/fuzzer_web/frontend/frontend/build”
  SSLEngine on
  SSLCertificateFile “/etc/ssl/certs/ssl-cert-snakeoil.pem”
  SSLCertificateKeyFile “/etc/ssl/private/ssl-cert-snakeoil.key”
  <Directory “/var/www/fuzzer_web/frontend/frontend/build”>
   AllowOverride All
   Require all granted
 </Directory>
</VirtualHost>

به منظور ایجاد VirtualHost برای پروژه Back-end نیز مانند زیر عمل کنید:

<VirtualHost *:443>
  ServerName fuzzerapi.ir
  DocumentRoot "/var/www/fuzzer_web/backend/files/public"
  SSLEngine on
  SSLCertificateFile "/etc/ssl/certs/ssl-cert-snakeoil.pem"
  SSLCertificateKeyFile "/etc/ssl/private/ssl-cert-snakeoil.key"
  <Directory "/var/www/fuzzer_web/backend/files/public">
   AllowOverride All
   Require all granted
  </Directory>
</VirtualHost>

در شکل زیر می‌توانید نمایی از فایل default-ssl-conf پس از اضافه کردن VirtualHostهای جدید ببینید.

پس از ویرایش و ذخیره فایل default-ssl.conf دستورات زیر را به ترتیب وارد کنید:

sudo a2enmod rewrite
sudo a2enmod ssl

حالا باید یک بار سرور Apache را با دستور زیر راه اندازی مجدد کنید:

sudo service apache2 restart

حالا در آخرین مرحله پیکربندی باید دامنه VirtualHost های خود را در سیستم مجاز کنید.

با دستور زیر فایل hosts را به صورتی که در شکل زیر نشان داده شده است، ویرایش کنید:

sudo nano /etc/hosts

اکنون با وارد کردن آدرس https://fuzzer.ir در مرورگر، رابط کاربری بالا می‌آید و قابل استفاده است.