Skip to content

20. Bereitstellung der Client/Server-Anwendung auf einem Hosting-Dienst

Hier beschreiben wir die Bereitstellung der von uns entwickelten Client-Server-Anwendung auf einem OVH-Server [https://www.ovh.com/fr/]. Die Bereitstellung bei anderen Hosting-Anbietern dürfte sich davon nicht wesentlich unterscheiden. Wir möchten lediglich zeigen, dass sich unsere Anwendung gut für diese Art der Bereitstellung eignet.

20.1. Serverbereitstellung

Bei dem betreffenden OVH-Hostingdienst handelt es sich um ein Basis-Hosting-Paket:

  1. eine PHP 7.3-Umgebung;
  2. ein MySQL-DBMS;
  3. kein [Redis]-Server;

Der dritte Punkt erfordert eine Anpassung der Version 14 unseres Steuerberechnungsservers.

Image

Wir müssen Folgendes ändern:

  • die Konfigurationsdateien [1];
  • die Controller [AdminDataController] und [CalculerImpotController], um der Tatsache Rechnung zu tragen, dass kein [Redis]-Server vorhanden ist;

Die Datei [config.json] ändert sich wie folgt:


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

Kommentare

  • Zeile 4: Wir führen eine boolesche Variable [redisAvailable] ein, um anzugeben, ob wir Zugriff auf einen [Redis]-Server haben oder nicht;
  • Zeilen 5, 13, 14: Die absoluten Pfade ändern sich;

Die Datei [database.json] ändert sich wie folgt:


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

Kommentare

  • Zeilen 2–4: Der Name der Datenbank und die Anmeldedaten ihres Eigentümers ändern sich;

Der [AdminDataController] entwickelt sich wie folgt:


<?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], []];
  }
 
}

Kommentare

  • Zeile 31: Wir prüfen nun, ob wir einen [Redis]-Server haben;
  • Zeilen 32–34: Wenn ja, wird der vorangehende Code vollständig ausgeführt;
  • Zeilen 35–46: Andernfalls werden die Daten der Steuerbehörde aus der Datenbank abgerufen;

Der Controller [CalculerImpotController], der ebenfalls Daten von der Steuerbehörde benötigt, wird auf dieselbe Weise aktualisiert.

Das war’s. Die Bereitstellung auf dem OVH-Server erfolgte über FTP. Wir haben Folgendes auf OVH hochgeladen:

  • die Version [vuejs-14-without-redis];
  • den Ordner [vendor], der alle Abhängigkeiten für den Server [vuejs-14-without-redis] enthält;

Nachdem die FTP-Übertragung abgeschlossen war, haben wir die erforderlichen Tabellen für den Server mithilfe des folgenden SQL-Skripts generiert:


-- 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 */;

Nachdem all dies erledigt war, haben wir die Dateien [config.json, database.json] an ihre neue Umgebung angepasst.

20.2. Bereitstellung des [Vue.js]-Clients

Es wurde beschlossen, den [Vue.js]-Client unter der URL [http://machine/apps/impot/client-vuejs/] bereitzustellen. Dies führte zu folgenden Änderungen:

Im Stammverzeichnis des [VSCode]-[Arbeitsbereichs] haben wir die folgende [vue.config.js]-Datei erstellt:

Image

Die Datei [vue.config.js] sieht wie folgt aus:


// 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/'
}

Die Datei [router.js] [3] wurde ebenfalls geändert:


// 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

Kommentare

  • Zeile 21: Die URL-Basis wurde geändert;

Die Datei [config.js] wird wie folgt geändert:


// 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
}

Kommentare

  • Zeile 10: Geben Sie die URL des Steuerberechnungsservers ein;

Die Produktionsversion des Projekts wurde mit dem Befehl [build] in der folgenden Datei [package.json] [5] generiert:


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

Anschließend wurde der Ordner [dist] mit der generierten Produktionsversion auf den OVH-Server in den Ordner [/.../apps/impot] „hochgeladen“ und dann in [client-vuejs] umbenannt, damit sich der Client-Code wie geplant im Ordner [/.../apps/impot/client-vuejs/] befindet. Anschließend haben wir in diesen Ordner die folgende [.htaccess]-Datei hochgeladen:


<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>

Dies liegt daran, dass der hier verwendete OVH-Webserver ein Apache-Server ist. Für andere Servertypen lesen Sie bitte die Dokumentation |https://cli.vuejs.org/guide/deployment.html|.

Die PHP-7-Serveranwendung kann |hier| getestet werden.

Der [Vue.js]-Client kann |hier| getestet werden.

20.3. Fazit

Die Version [vuejs-21] war nicht unbedingt erforderlich. Wir hatten festgestellt, dass die Version [vuejs-20] vom Benutzer eingegebene URLs korrekt verarbeitet hat. Dennoch bietet die neue Version zusätzlichen Komfort für den Benutzer. Dieser kann durch Eingabe von URLs navigieren. Die Anwendung zeigt dann die Ansicht an, die am besten zum aktuellen Zustand (der Sitzung) der Anwendung passt. Darüber hinaus bringt die Version [vuejs-22] Verbesserungen bei der Darstellung der Anwendung auf mobilen Geräten mit sich.

https://stahe.github.io
Dieses Tutorial, verfasst von Serge Tahé, wird der Öffentlichkeit unter den Bedingungen der Creative Commons Namensnennung – Nicht kommerziell – Namensnennung – Nicht kommerziell – Weitergabe unter gleichen Bedingungen 3.0 Unported.