Skip to content

20. Distribuzione dell'applicazione client/server su un servizio di hosting

Qui descriviamo l'implementazione dell'applicazione client/server che abbiamo sviluppato su un server OVH [https://www.ovh.com/fr/]. L'implementazione su altri provider di hosting non dovrebbe essere molto diversa. Vogliamo semplicemente dimostrare che la nostra applicazione si presta bene a questo tipo di implementazione.

20.1. Distribuzione sul server

Il servizio di hosting OVH in questione è un piano di hosting di base:

  1. un ambiente PHP 7.3;
  2. un DBMS MySQL;
  3. nessun server [Redis];

Il terzo punto richiede la modifica della versione 14 del nostro server di calcolo delle imposte.

Image

Dobbiamo modificare:

  • i file di configurazione [1];
  • i controller [AdminDataController] e [CalculerImpotController] per tenere conto del fatto che non c'è un server [Redis];

Il file [config.json] cambia come segue:


{
    "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"
        }
    ],
    ...
}

Commenti

  • riga 4: introduciamo una variabile booleana [redisAvailable] per indicare se abbiamo o meno accesso a un server [Redis];
  • righe 5, 13, 14: i percorsi assoluti cambieranno;

Il file [database.json] cambia come segue:


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

Commenti

  • righe 2–4: il nome del database e le credenziali del suo proprietario cambieranno;

Il [AdminDataController] si evolve come segue:


<?php
 
namespace Application;
 
// symfony dependencies
use \Symfony\Component\HttpFoundation\Response;
use \Symfony\Component\HttpFoundation\Request;
use \Symfony\Component\HttpFoundation\Session\Session;
// layer alias [dao]
use \Application\ServerDaoWithSession as ServerDaoWithRedis;
 
class AdminDataController implements InterfaceController {
 
  // $config is the application configuration
  // traitement d'une requête Request
  // session and can modify it
  // $infos is additional information specific to each controller
  // renders an array [$statusCode, $état, $content, $headers]
  public function execute(
    array $config,
    Request $request,
    Session $session,
    array $infos = NULL): array {
 
    // you must have a single parameter GET
    $method = strtolower($request->getMethod());
    ...
 
    // we can work
    // Redis
    if ($config["redisAvailable"]) {
      \Predis\Autoloader::register();
      ...
    } else {
      try {
        // retrieve tax data from the database
        $dao = new ServerDaoWithRedis($config["databaseFilename"], NULL);
        // taxAdminData
        $taxAdminData = $dao->getTaxAdminData();
      } catch (\Throwable $ex) {
        // it didn't go well
        // return result with error to main controller
        $état = 1051;
        return [Response::HTTP_INTERNAL_SERVER_ERROR, $état,
          ["réponse" => utf8_encode($ex->getMessage())], []];
      }
    }
 
    // return result to main controller
    $état = 1000;
    return [Response::HTTP_OK, $état, ["réponse" => $taxAdminData], []];
  }
 
}

Commenti

  • riga 31: ora verifichiamo se è presente o meno un server [Redis];
  • righe 32–34: in tal caso, il codice precedente viene eseguito per intero;
  • righe 35–46: in caso contrario, i dati dell'autorità fiscale vengono recuperati dal database;

Il controller [CalculerImpotController], che richiede anch'esso dati dall'autorità fiscale, viene aggiornato allo stesso modo.

Questo è tutto. La distribuzione sul server OVH è avvenuta tramite FTP. Abbiamo caricato su OVH quanto segue:

  • la versione [vuejs-14-without-redis];
  • la cartella [vendor], che contiene tutte le dipendenze per il server [vuejs-14-without-redis];

Una volta completato il trasferimento via FTP, abbiamo generato le tabelle necessarie per il server utilizzando il seguente script SQL:


-- phpMyAdmin SQL Dump
-- version 4.8.5
-- https://www.phpmyadmin.net/
--
-- Host: localhost:3306
-- Generation Time: Oct 12, 2019 at 07:45 AM
-- Server version: 5.7.24
-- PHP Version: 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 */;
 
--
-- Table structure for table `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;
 
--
-- Dumping data for table `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');
 
-- --------------------------------------------------------
 
--
-- Table structure for table `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;
 
--
-- Dumping data for table `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');
 
--
-- Indexes for dumped tables
--
 
--
-- Indexes for table `dbimpots_tbconstantes`
--
ALTER TABLE `dbimpots_tbconstantes`
  ADD PRIMARY KEY (`id`);
 
--
-- Indexes for table `dbimpots_tbtranches`
--
ALTER TABLE `dbimpots_tbtranches`
  ADD PRIMARY KEY (`id`);
 
--
-- AUTO_INCREMENT for dumped tables
--
 
--
-- AUTO_INCREMENT for table `dbimpots_tbconstantes`
--
ALTER TABLE `dbimpots_tbconstantes`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=9;
 
--
-- AUTO_INCREMENT for table `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 */;

Una volta completato tutto questo, abbiamo adattato i file [config.json, database.json] al loro nuovo ambiente.

20.2. Distribuzione del client [Vue.js]

Si è deciso di pubblicare il client [Vue.js] all'URL [http://machine/apps/impot/client-vuejs/]. Ciò ha comportato le seguenti modifiche:

Alla radice dello [spazio di lavoro] [VSCode], abbiamo creato il seguente file [vue.config.js]:

Image

Il file [vue.config.js] è il seguente:


// vue.config.js
module.exports = {
  // l'URL de service du client [vuejs] du serveur de calcul de l'impôt
  publicPath: '/apps/impot/client-vuejs/'
}

Anche il file [router.js] [3] è stato modificato:


// imports
import Vue from 'vue'
import VueRouter from 'vue-router'
...
 
// plugin de routage
Vue.use(VueRouter)
 
// les routes de l'application
const routes = [
  ...
]
 
// le routeur
const router = new VueRouter({
  // les routes
  routes,
  // le mode d'affichage des URL
  mode: 'history',
  // l'URL de base de l'application
  base: '/apps/impot/client-vuejs/'
})
 
// vérification des routes
router.beforeEach((to, from, next) => {
  ...
})
 
// export du router
export default router

Commenti

  • riga 21: la base dell'URL è stata modificata;

Il file [config.js] è stato modificato come segue:


// utilisation de la bibliothèque [axios]
const axios = require('axios');
// timeout des requêtes HTTP
axios.defaults.timeout = 5000;
// la base des URL du serveur de calcul de l'impôt
// le schéma [https] pose des problèmes à Firefox parce que le serveur de calcul
// de l'impôt envoie un certificat autosigné. ok avec Chrome et Edge. Safari pas testé.
// avec Firefox c'est possible en demandant l'URL ci-dessous directement et en disant à Firefox
// que vous acceptez le risque d'un certificat non signé. Ensuite le client [vuejs] fonctionnera.
axios.defaults.baseURL = 'http://.../apps/impot/serveur-php7';
// on va utiliser des cookies
axios.defaults.withCredentials = true;
 
// export de la configuration
export default {
  // objet [axios]
  axios: axios,
  // délai maximal d'inactivité de la session : 5 mn = 300 s = 300000 ms
  duréeSession: 300000
}

Commenti

  • riga 10: inserire l'URL del server di calcolo delle imposte;

La versione di produzione del progetto è stata generata utilizzando il comando [build] nel seguente file [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"
  },
  ...
}

Una volta fatto ciò, la cartella [dist] contenente la versione di produzione generata è stata "caricata" sul server OVH nella cartella [/.../apps/impot] e poi rinominata [client-vuejs] in modo che il codice client si trovasse nella cartella [/.../apps/impot/client-vuejs/] come previsto. Quindi, in questa cartella, abbiamo caricato il seguente file [.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>

Questo perché il server web OVH qui utilizzato è un server Apache. Per altri tipi di server, consultare la documentazione |https://cli.vuejs.org/guide/deployment.html|.

L'applicazione server PHP 7 può essere testata |qui|.

Il client [Vue.js] può essere testato |qui|.

20.3. Conclusione

La versione [vuejs-21] non era essenziale. Avevamo visto che la versione [vuejs-20] gestiva correttamente gli URL inseriti dall'utente. Tuttavia, la nuova versione offre un'ulteriore comodità per l'utente. È possibile navigare digitando gli URL. L'applicazione visualizza quindi la vista più adatta allo stato attuale (la sessione) dell'applicazione. Inoltre, la versione [vuejs-22] apporta miglioramenti alla visualizzazione dell'applicazione sui dispositivi mobili.

https://stahe.github.io
Questo tutorial scritto da Serge Tahé è reso disponibile al pubblico secondo i termini della Creative Commons Attribuzione – Non commerciale – Condividi allo stesso modo 3.0 Unported.