Configurer et lancer le frontend¶
Installer l’environnement virtuel NodeJS avec nvm¶
L’installation de nvm
se fait en suivant les instructions du dépot principal de l’outil nvm par creationix creationix/nvm.
Une fois l’environnement installé, installer la dernière version stable de nodejs
:
nvm install v10.16
Pour utiliser cette version:
nvm use v10.16
Installer angular CLI (version LTS 6) et les dépendances requises:
npm install -g @angular/cli@v8-lts
npm install
Lancer du frontend¶
Vous pouvez lancer le frontend dans deux modes:
En mode développement et client-side rendering:¶
ng serve
En mode Server Side Rendering, optimisé pour le SEO et réservé aux robots d’indexation:¶
npm run build:ssr && npm run serve:ssr
Gestion du Server Side Rendering¶
Le SSR a été intégré au projet à partir de la commande :
npm run ng add @nguniversal/express-engine --clientProject frontend
NB: L’intégration Leaflet.MarkerCluster a nécessité de déclarer une variable globale L
et d’y importer Leaflet; c’est dans le script server.ts
.
Les modules BrowserTransferState
et ServerTransferState
importés, nous avons créé un couple {clé: valeur}
pour être transféré du serveur au client.
La clé est créée avec la fonction factory makeStateKey :
const PROGRAMS_KEY = makeStateKey("programs");
Le transfert d’état s’effectue avec accesseur et mutateur:
this.programs = this.state.get(PROGRAMS_KEY, null as any);
if (!this.programs) {
/*
code exécuté côté serveur Node, express
qui effectue donc un appel à l'API de GN-Citizen
et génère une capture d'état
*/
this.state.set(PROGRAMS_KEY, programs as any);
} else {
/*
code exécuté côté présentation qui consomme l'état "cristallisé"
transféré depuis le serveur.
*/
}
La redirection de port pourrait se faire au niveau du serveur web / reverse proxy, avec un filtre sur l’entête de requête User-Agent
Gestion de l’internationalisation (i18n)¶
La fonctionnalité i18n a été intégrée avec @ngx-i18nsupport.
L’interface est paramétrée par défaut en langue française.
Mettre à jour les traductions¶
La commande suivante met à jour les fichiers de traduction (ajout/suppression de traductions symbolisées par l’argument i18n
dans les templates.
npm run extract-i18n
Les fichiers de traduction sont dans le répertoire frontend/src/i18n
.
Mettre à jour les nouvelles traductions (texte dans les balises <target></target>
des fichiers localisés messages.fr.xlf
et messages.en.xlf
.
Déploiement¶
Préparer la distribution avec:
npm run ng build -- --prod
ou:
npm run ng build -- --configuration=en --prod
pour une version en langue anglaise.
Tout est contenu dans le répertoire frontend/dist
, qu’il faut copier sur la plateforme acceuillant le service.
Annexe:¶
Exemple de fichier de configuration serveur Apache2:¶
/etc/apache2/sites-enabled/citizen.conf
# Configuration GeoNature-citizen
Alias /citizen /home/utilisateur/citizen/frontend/dist/browser
<Directory /home/utilisateur/citizen/frontend/dist/browser>
Require all granted
AllowOverride All
<IfModule mod_rewrite.c>
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ".*" "index.html" [QSA,L]
</IfModule>
</Directory>
<Location /citizen/api>
ProxyPass http://127.0.0.1:5002/api
ProxyPassReverse http://127.0.0.1:5002/api
</Location>
Suivi des journaux d’évenements et d’erreurs:¶
Backend:¶
tail -f /var/log/supervisor/citizen.log
Gunicorn (option de gestion de processus pour lancer le backend):¶
tail -f ~/citizen/var/log/gn_errors.log
Apache:¶
sudo tail -f /var/log/apache2/{error,access,other_vhosts_access}.log
Utiliser PgAdmin pour la gestion de la BDD distante (production):¶
~/.ssh/config
Se logguer en SSH (ssh nom_du_raccourci
) sur l’hôte distant va opérer une redirection de port et rendre la BDD distante accessible sur le port local 5433
pour un client PostgreSQL.
Il suffit alors d’ajuster les paramètres de psql
en CLI ou ceux de l’assistant de configuration de PgAdmin pour son interface graphique.