Configurer une application Web Nuxt.js sur Ubuntu 18.04 LTS

• Nuxt.js: le cadre universel
• Installation de Node.js
• Application d'échafaudage
• Démarrage initial
• Bâtiment pour la production
• PM2: Gérez facilement votre application

Nuxt.js: le cadre universel

Nuxt.js est un framework JavaScript conçu pour créer rapidement des applications universelles Vue.js. Il est surtout connu pour sa capacité à créer des applications Vue.js qui peuvent être rendues sur le serveur ainsi que sur le client. Dans ce didacticiel, nous allons configurer une application Nuxt.js rendue par le serveur et la déployer sur Ubuntu 18.04 LTS.

Installation de Node.js

Tout d'abord, vous devez vous assurer que vous utilisez Ubuntu 18.04 LTS. Ensuite, vous devrez installer Node.js, s'il n'est pas déjà installé. Dans ce didacticiel, nous utiliserons le Node Version Manager, ou NVM, pour rendre ce processus beaucoup plus facile.

Installez NVM à l'aide des commandes suivantes.

curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh -o install_nvm.sh
bash install_nvm.sh
source ~/.profile
nvm install 11.1.0
nvm use 11.1.0

Application d'échafaudage

Une fois Node.js installé, nous pouvons maintenant procéder à la configuration des packages dont nous aurons besoin à l'aide de NPM. Nous utiliserons un petit outil pratique appelé create-nuxt-app, un outil communautaire qui peut facilement créer des applications Nuxt.js.

Dans votre répertoire personnel, exécutez la commande suivante pour commencer la génération d'application.

npx create-nuxt-app <nameofproject>

La console vous demandera plusieurs options importantes. Pour les besoins de ce tutoriel, nous nommerons notre projet " app". Nous utiliserons Express comme cadre de serveur personnalisé et nous exécuterons l'application en mode universel, ce qui garantit que nous afficherons notre site Web sur le serveur. Lorsque vous avez spécifié toutes les autorisations requises, le processus d'installation commencera et tous les fichiers de configuration seront créés.

Démarrage initial

Une fois que tout est téléchargé, changez de répertoire dans le dossier que vous venez de créer.

cd app

Nous pouvons maintenant démarrer le serveur de développement Nuxt.js.

npm run dev

Cette commande créera le site à l'aide de webpack, qui est un groupeur de modules, et servira le site sur un port localhost, qui sera généralement le port 3000. Il vous donnera également accès à des modules de rechargement à chaud, ce qui supprimera la nécessité de redémarrer l'application chaque fois que vous modifiez un fichier. Puisque nous exécutons l'application en mode universel, l'application se compilera à la fois sur le client et le serveur. Maintenant, votre application s'exécutera sur le port 3000.

Bâtiment pour la production

Le mode de développement est très utile lorsque vous développez activement votre application. Cependant, lorsque vous êtes prêt à rendre votre application publique, les modules complémentaires tels que le rechargement à chaud et les outils de développement deviennent moins importants. C'est pourquoi nous voudrons construire notre application une fois, pour un environnement de production. Heureusement, Nuxt.js comprend un outil que nous pouvons utiliser pour créer rapidement les modules de notre application pour la production. Exécutez ce qui suit pour commencer le processus de génération de production.

npm run build

Essentiellement, ce que nous faisons ici, c'est que nous compilons tous nos modules Webpack, avec des optimisations pour la production.

Une fois la construction terminée, vous pourrez exécuter le site pour la production.

npm start

Maintenant, si vous accédez à http://yourip:3000, vous verrez l'écran de démarrage Nuxt.js, qui confirme que vous exécutez en mode production.

PM2: Gérez facilement votre application

Nous comprenons maintenant les bases de l'exécution de notre application pour la production. En termes d'environnement de production, nous préférerions un bon moyen de maintenir notre application en cours d'exécution pour toujours, de redémarrer automatiquement notre application si nécessaire et de surveiller les ressources de notre application. C'est là qu'intervient Process Manager 2 (PM2). PM2 est un gestionnaire de processus Node.js pour les applications de production, qui comprend de nombreux outils de production importants tels que l'équilibrage de charge, les journaux avancés, les scripts de démarrage et bien plus encore. Tout d'abord, installez PM2.

npm install pm2 -g

Cela installe PM2 à l'échelle mondiale afin que nous puissions l'utiliser n'importe où sur notre serveur. Une fois le téléchargement de PM2 terminé, nous pouvons démarrer notre application.

pm2 start <appfolder>/server/index.js

Notez que nous démarrons le fichier serveur qui se trouve à l'intérieur de notre racine d'application.

Si vous souhaitez afficher les ressources consommées par votre application, vous pouvez le faire avec la pm2 monitcommande. Cela fera apparaître une interface similaire à celle de ncurses, où vous pouvez recueillir précisément des données sur la RAM, le CPU et l'utilisation du disque de votre application.

À présent, votre application fonctionnera exactement comme elle l'était lorsque nous l'avons exécutée avec npm plus tôt, sauf que nous avons maintenant beaucoup plus de contrôle en ce qui concerne les optimisations de la production.

Vous avez maintenant une version d'application Nuxt.js qui est déployée pour la production avec Node.js et Ubuntu 18.04. Si vous souhaitez en savoir plus sur Nuxt et toutes ses fonctionnalités détaillées, n'hésitez pas à visiter leur documentation officielle .