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] було створено такий файл:

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';
// ми будемо використовувати файли cookie
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
Цей навчальний курс, написаний Сержем Тахе, надається громадськості на умовах Creative Commons «Вказання авторства — Некомерційне використання — Поділитися на рівних умовах 3.0 Без змін.