app_vue2

app

Frontend développé avec Vue.js 2 + NuxtJs 2

A voir:

• vuejs.org
• nuxtjs.org
• vuex-orm.org
• vuetifyjs.com
• typescriptlang.org
• jestjs.io
• cypress.io
• pm2.keymetrics.io

Opérations courantes

Déploiement

Premier déploiement en tant que service

Prérequis 1 : PM2 doit être installé de manière globale sur la machine hôte (https://nuxtjs.org/deployments/pm2/)

On commence par cloner le projet app, puis par se placer dans le répertoire ainsi créé. On créé un symlink vers le fichier .env.xxx voulu sous le nom de .env (selon l'environnement)

ln -s .env.xxx .env

Pour déployer le projet en mode SSR, on commence par mettre à jour et compiler :

yarn install
yarn build

On lance ensuite le service avec :

pm2 start

Vérifier le statut avec :

pm2 show app

On pourra ensuite interagir avec le service ainsi :

pm2 restart app
pm2 stop app
pm2 logs app

On enregistre le service pour qu'il soit relancé lors du boot de la machine: https://pm2.keymetrics.io/docs/usage/startup/

En tant que non-root:

pm2 startup

Puis, comme la commande précédente le suggère, on lance en tant que root:

env PATH=$PATH:/usr/bin /usr/local/share/.config/yarn/global/node_modules/pm2/bin/pm2 startup systemd -u exploitation --hp /home/exploitation

On sauvegarde la nouvelle configuration avec:

pm2 save

Mettre à jour

Se placer dans le répertoire de l'application, puis lancer:

yarn deploy

Cette commande est un alias qui équivaut à lancer:

git pull
yarn install
yarn build
pm2 restart

Autres

Lancer les tests

Pour lancer les tests unitaires:

jest

Générer la doc

Pour regénérer la documentation automatique:

yarn docs

Déboguer sur un serveur distant

Pour déboguer sur un serveur distant, comme preprod :

 pm2 stop app
 yarn dev

À partir de là, on peut accéder au site en mode dev.

Une fois le bug corrigé, interrompre le yarn dev, et relancer avec

pm2 start app

Plus d'infos

Structure du projet

Répertoire	Rôle
assets	Contient les fichiers style et medias
components	Les différents composants graphiques qui composent l'application
config	La configuration de l'application
lang	Les fichiers de traduction
layouts	Layouts des pages
middleware	Code exécuté avant le rendu des pages (ex: pour vérifier l'authentification)
models	Définition des entités (ou modèles)
node_modules	Modules node installés via npm
pages	Définition des pages qui composent l'application
plugins	...
services	Rassemble les classes utilitaires non graphiques
static	Ressources statiques et publiques
store	Le store et ses composants servent d'entrepôt de donnés, et s'assurent de la cohérence de celles-ci
tests	Regroupe les tests (unitaires, end-to-end...)
use	...