Skip to content

20. نشر تطبيق العميل/الخادم على خدمة استضافة

نقدم هنا الخطوط العريضة لنشر تطبيق العميل/الخادم الذي قمنا بتطويره على خادم OVH [https://www.ovh.com/fr/]. لا يُتوقع أن يختلف النشر على مزودي خدمات الاستضافة الآخرين كثيرًا. نريد ببساطة إظهار أن تطبيقنا مناسب تمامًا لهذا النشر.

20.1. نشر الخادم

خدمة الاستضافة المستهدفة OVH هي خدمة استضافة أساسية:

  1. بيئة PHP 7.3؛
  2. SGBD MySQL؛
  3. لا يوجد خادم [Redis]؛

النقطة الثالثة تفرض علينا تعديل الإصدار 14 من خادم حساب الضرائب الخاص بنا.

Image

علينا تعديل:

  • ملفات التكوين [1]؛
  • وحدة التحكم [AdminDataController] و [CalculerImpotController] لمراعاة عدم وجود خادم [Redis]؛

يتغير ملف [config.json] على النحو التالي:


{
    "databaseFilename": "Config/database.json",
    "corsAllowed": false,
    "redisAvailable":false,
    "rootDirectory": "/.../www/apps/impot/serveur-php7",
    "relativeDependencies": [

        "/Entities/BaseEntity.php",
        ...
        "/Controllers/AdminDataController.php"
    ],
    "absoluteDependencies": [
        "/.../vendor/autoload.php",
        "/.../vendor/predis/predis/autoload.php"
    ],
    "users": [
        {
            "login": "admin",
            "passwd": "admin"
        }
    ],
    ...
}

تعليقات

  • السطر 4: يتم إدخال متغير منطقي [redisAvailable] للإشارة إلى ما إذا كان هناك وصول إلى خادم [Redis] أم لا؛
  • الأسطر 5 و13 و14: ستتغير المسارات المطلقة؛

يتغير ملف [database.json] على النحو التالي:


{
    "dsn": "mysql:host=...;dbname=...",
    "id": "...",
    "pwd": "...",
    "tableTranches": "dbimpots_tbtranches",
    "colLimites": "limites",
    "colCoeffR": "coeffr",
    "colCoeffN": "coeffn",
    "tableConstantes": "dbimpots_tbconstantes",
    "colPlafondQfDemiPart": "plafondQfDemiPart",
    ...
}

تعليقات

  • الأسطر 2-4: ستتغير هوية قاعدة البيانات وكذلك معرّفات مالكها؛

يتغير المراقب [AdminDataController] على النحو التالي:


<?php

namespace Application;

// التبعيات في Symfony
use \Symfony\Component\HttpFoundation\Response;
use \Symfony\Component\HttpFoundation\Request;
use \Symfony\Component\HttpFoundation\Session\Session;
// الاسم المستعار للطبقة [dao]
use \Application\ServerDaoWithSession as ServerDaoWithRedis;

class AdminDataController implements InterfaceController {

  // $config هي تهيئة التطبيق
  // معالجة طلب Request
  // يستخدم الجلسة Session ويمكنه تعديلها
  // $infos هي معلومات إضافية خاصة بكل وحدة تحكم
  // تُرجع مصفوفة [$statusCode, $état, $content, $headers]
  public function execute(
    array $config,
    Request $request,
    Session $session,
    array $infos = NULL): array {

    // يجب أن يكون هناك معلمة واحدة فقط GET
    $method = strtolower($request->getMethod());
    ...

    // يمكن العمل
    // Redis
    if ($config["redisAvailable"]) {
      \Predis\Autoloader::register();
      ...
    } else {
      try {
        // سنقوم باسترداد البيانات الضريبية من قاعدة البيانات
        $dao = new ServerDaoWithRedis($config["databaseFilename"], NULL);
        // taxAdminData
        $taxAdminData = $dao->getTaxAdminData();
      } catch (\Throwable $ex) {
        // حدث خطأ
        // إرجاع النتيجة مع خطأ إلى وحدة التحكم الرئيسية
        $état = 1051;
        return [Response::HTTP_INTERNAL_SERVER_ERROR, $état,
          ["réponse" => utf8_encode($ex->getMessage())], []];
      }
    }

    // إرجاع النتيجة إلى وحدة التحكم الرئيسية
    $état = 1000;
    return [Response::HTTP_OK, $état, ["réponse" => $taxAdminData], []];
  }

}

تعليقات

  • السطر 31: يتم الآن اختبار ما إذا كان لدينا خادم [Redis] أم لا؛
  • الأسطر 32-34: في حالة وجوده، يتم استرجاع الكود السابق بالكامل؛
  • الأسطر 35-46: وإلا، يتم استخراج بيانات مصلحة الضرائب من قاعدة البيانات؛

كما أن وحدة التحكم [CalculerImpotController]، التي تحتاج هي الأخرى إلى بيانات مصلحة الضرائب، تعمل بنفس الطريقة.

وقد تم ذلك. وتضمن النشر على الخادم OVH تحويله إلى FTP. وتم تنزيل الإصدار التالي على OVH:

  • الإصدار [vuejs-14-without-redis]؛
  • المجلد [vendor] الذي يحتوي على جميع التبعيات الخاصة بالخادم [vuejs-14-without-redis]؛

بعد إتمام عملية النقل FTP، تم إنشاء الجداول اللازمة للخادم باستخدام البرنامج النصي SQL التالي:


-- phpMyAdmin SQL تفريغ
-- الإصدار 4.8.5
-- https://www.phpmyadmin.net/
--
-- المضيف: localhost:3306
-- وقت الإنشاء: 12 أكتوبر 2019 الساعة 07:45 AM
-- إصدار الخادم: 5.7.24
-- PHP الإصدار: 7.2.11

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- هيكل الجدول `dbimpots_tbconstantes`
--

CREATE TABLE `dbimpots_tbconstantes` (
  `id` int(11) NOT NULL,
  `plafondQfDemiPart` decimal(10,2) NOT NULL,
  `plafondRevenusCelibatairePourReduction` decimal(10,2) NOT NULL,
  `plafondRevenusCouplePourReduction` decimal(10,2) NOT NULL,
  `valeurReducDemiPart` decimal(10,2) NOT NULL,
  `plafondDecoteCelibataire` decimal(10,2) NOT NULL,
  `plafondDecoteCouple` decimal(10,2) NOT NULL,
  `plafondImpotCelibatairePourDecote` decimal(10,2) NOT NULL,
  `plafondImpotCouplePourDecote` decimal(10,2) NOT NULL,
  `abattementDixPourcentMax` decimal(10,2) NOT NULL,
  `abattementDixPourcentMin` decimal(10,2) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- تفريغ بيانات الجدول `dbimpots_tbconstantes`
--

INSERT INTO `dbimpots_tbconstantes` (`id`, `plafondQfDemiPart`, `plafondRevenusCelibatairePourReduction`, `plafondRevenusCouplePourReduction`, `valeurReducDemiPart`, `plafondDecoteCelibataire`, `plafondDecoteCouple`, `plafondImpotCelibatairePourDecote`, `plafondImpotCouplePourDecote`, `abattementDixPourcentMax`, `abattementDixPourcentMin`) VALUES
(8, '1551.00', '21037.00', '42074.00', '3797.00', '1196.00', '1970.00', '1595.00', '2627.00', '12502.00', '437.00');

-- --------------------------------------------------------

--
-- هيكل الجدول `dbimpots_tbtranches`
--

CREATE TABLE `dbimpots_tbtranches` (
  `id` int(11) NOT NULL,
  `limites` decimal(10,2) NOT NULL,
  `coeffR` decimal(10,2) NOT NULL,
  `coeffN` decimal(10,2) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- تفريغ بيانات الجدول `dbimpots_tbtranches`
--

INSERT INTO `dbimpots_tbtranches` (`id`, `limites`, `coeffR`, `coeffN`) VALUES
(36, '9964.00', '0.00', '0.00'),
(37, '27519.00', '0.14', '1394.96'),
(38, '73779.00', '0.30', '5798.00'),
(39, '156244.00', '0.41', '13913.69'),
(40, '0.00', '0.45', '20163.45');

--
-- فهارس الجداول التي تم تصديرها
--

--
-- الفهارس الخاصة بالجدول `dbimpots_tbconstantes`
--
ALTER TABLE `dbimpots_tbconstantes`
  ADD PRIMARY KEY (`id`);

--
-- فهارس الجدول `dbimpots_tbtranches`
--
ALTER TABLE `dbimpots_tbtranches`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT للجداول التي تم تصديرها
--

--
-- AUTO_INCREMENT للجدول `dbimpots_tbconstantes`
--
ALTER TABLE `dbimpots_tbconstantes`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=9;

--
-- AUTO_INCREMENT للجدول `dbimpots_tbtranches`
--
ALTER TABLE `dbimpots_tbtranches`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=41;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

وبعد الانتهاء من كل ذلك، تم تكييف الملفات [config.json, database.json] مع بيئتها الجديدة.

20.2. نشر عميل [Vue.js]

تقرر نشر العميل [Vue.js] على URL و[http://machine/apps/impot/client-vuejs/]. وقد أدى ذلك إلى التغييرات التالية:

في الجذر الخاص بـ [workspace] من [VSCode]، تم إنشاء الملف [vue.config.js] التالي:

Image

الملف [vue.config.js] هو كما يلي:


// vue.config.js
module.exports = {
  // خدمة العملاء URL لخادم حساب الضريبة [vuejs]
  publicPath: '/apps/impot/client-vuejs/'
}

كما تم تعديل الملف [router.js] [3]:


// الاستيرادات
import Vue from 'vue'
import VueRouter from 'vue-router'
...

// المكوّن الإضافي للتوجيه
Vue.use(VueRouter)

// مسارات التطبيق
const routes = [
  ...
]

// الموجه
const router = new VueRouter({
  // المسارات
  routes,
  // وضع عرض URL
  mode: 'history',
  // URL الأساسي للتطبيق
  base: '/apps/impot/client-vuejs/'
})

// التحقق من المسارات
router.beforeEach((to, from, next) => {
  ...
})

// تصدير جهاز التوجيه
export default router

تعليقات

  • السطر 21: تم تعديل قاعدة URL؛

تم تعديل الملف [config.js] على النحو التالي:


// استخدام مكتبة [axios]
const axios = require('axios');
// مهلة انتظار الطلبات HTTP
axios.defaults.timeout = 5000;
// قاعدة بيانات خادم حساب الضرائب URL
// يواجه مخطط [https] مشاكل في متصفح Firefox لأن خادم حساب
// الضرائب شهادة موقعة ذاتيًا. لا توجد مشكلة مع Chrome وEdge. لم يتم اختبار Safari.
// مع Firefox يمكن ذلك عن طريق طلب الرابط URL أدناه مباشرةً وإخبار Firefox
// أنك تقبل مخاطر استخدام شهادة غير موقعة. بعد ذلك سيعمل العميل [vuejs].
axios.defaults.baseURL = 'http://.../apps/impot/serveur-php7';
// سنستخدم ملفات تعريف الارتباط
axios.defaults.withCredentials = true;

// تصدير الإعدادات
export default {
  // الكائن [axios]
  axios: axios,
  // الحد الأقصى لفترة عدم النشاط للجلسة: 5 دقائق = 300 ثانية = 300000 مللي ثانية
  duréeSession: 300000
}

تعليقات

  • السطر 10: يتم إدراج ملف URL من خادم حساب الضريبة؛

تم إنشاء إصدار الإنتاج للمشروع باستخدام الأمر [build] من الملف [package.json] [5] التالي:


{
  "name": "vuejs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve vuejs-22/main.js",
    "build": "vue-cli-service build vuejs-22-ovh-withBootstrapVue/main.js",
    "lint": "vue-cli-service lint"
  },
  ...
}

وبعد ذلك، تم «تحميل» المجلد [dist] الذي احتوى على إصدار الإنتاج الذي تم إنشاؤه على الخادم OVH في المجلد [/.../apps/impot] ثم أعيدت تسميته إلى [client-vuejs] حتى يصبح كود العميل في المجلد [/.../apps/impot/client-vuejs/] كما كان مقررًا. ثم قمنا في هذا المجلد بتنزيل الملف التالي: [.htaccess]:


<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /apps/impot/client-vuejs/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /apps/impot/client-vuejs/index.html [L]
</IfModule>

وذلك لأن خادم الويب OVH المستخدم هنا هو خادم Apache. بالنسبة لأنواع الخوادم الأخرى، يرجى الرجوع إلى الوثائق |https://cli.vuejs.org/guide/deployment.html|.

يمكن اختبار تطبيق الخادم PHP 7 |هنا|.

يمكن اختبار العميل [Vue.js] |هنا|.

20.3. Conclusion

لم تكن النسخة [vuejs-21] ضرورية. فقد لاحظنا أن النسخة [vuejs-20] كانت تتعامل بشكل صحيح مع URL التي يكتبها المستخدم. ومع ذلك، توفر النسخة الجديدة مزيدًا من الراحة للمستخدم. يمكنه التنقل عن طريق كتابة URL. وعندها يقترح عليه التطبيق العرض الأنسب للحالة الحالية (الجلسة) للتطبيق. من ناحية أخرى، يقدم الإصدار [vuejs-22] تحسينات لعرض التطبيق على الأجهزة المحمولة.

https://stahe.github.io
هذا البرنامج التعليمي الذي كتبه Serge Tahé متاح للجمهور وفقًا لشروط Creative Commons Attribution – Non-Commercial – المشاركة بالمثل 3.0 غير المنقولة.