Déployer une application Nuxt.js en mode SSR sur un Cloud Web

Publié le - 2 min - écrit par Silbad Déployer une application Nuxt.js en mode SSR sur un Cloud Web

Cloud Web utilise un wrapper, Phusion Passenger, pour le déploiement des applications node. Et il n'est pas aisé de déployer une application en mode SSR (Rendu Côté Serveur) avec le peu de documentation dont OVH nous met à disposition. J'espère que ce tutoriel vous guidera, tant bien que mal, dans ce méandre de configurations.

Prérequis

  • Un compte GIT type GitHub ou GitLab par exemple pour faciliter les déploiements.
  • Le gestionnaire de package Yarn. Si vous n'avez pas installé les binaires de Yarn sur le serveur, vous pouvez aussi utiliser la commande "npm-node12".
  • Un abonnement Cloud Web exécutant un moteur node.js.
  • Posséder quelques connaissances en développement, notamment en Vue.js.
  • L'émulateur PuTTY pour donner des instructions à votre serveur en SSH. Vous pouvez trouver une version portable (aucune installation requise) sur PortableApps.com.
  • Un nom de domaine, c'est bien aussi.

Créer votre projet Vue.js avec Nuxt.js

Ouvrir une fenêtre de commande et saisir la commande suivante, "votreprojet" est bien-sûr à remplacer par le nom de votre projet :

yarn create nuxt-app votreprojet

Répondre aux différentes questions pour l'initialisation de votre projet Nuxt.js.
/!\ Attention, pour les questions suivantes, sélectionnez :

  • Rendering mode : Universal (SSR / SSG)
  • Deployment target : Server (Node.js hosting) même si, nous verrons juste après, ce n'est pas celui-ci que nous utiliserons.

Comme Cloud Web utilise un wrapper, le serveur par défaut de Nuxt.js ne fonctionnera pas. Pour cela nous allons installer Express auquel nous allons rattacher Nuxt.js que nous utiliserons comme un middleware.

cd votreprojet
yarn add express

A la racine de votre projet, créez un dossier server, contenant un fichier index.js. Dans celui-ci, copier / coller le code suivant :

const { loadNuxt, build } = require('nuxt')

const app = require('express')()
const isDev = process.env.NODE_ENV !== 'production'
const port = process.env.PORT || 3000

async function start() {
  // We get Nuxt instance
  const nuxt = await loadNuxt(isDev ? 'dev' : 'start')

  // Render every route with Nuxt.js
  app.use(nuxt.render)

  // Build only in dev mode with hot-reloading
  if (isDev) {
    build(nuxt)
  }
  // Listen the server
  app.listen(port, '0.0.0.0')
  console.log('Server listening on `localhost:' + port + '`.')
}

start()

Tout ceci est documenté sur le site de Nux.js :
https://fr.nuxtjs.org/docs/2.x/internals-glossary/nuxt-render/.

Une fois que vous avez fini les devs de votre application, un petit push sur votre Git.

Déployer votre projet Nuxt.js sur votre Cloud Web

Connectez vous en SSH avec PuTTY sur votre plateforme Cloud Web.

Naviguez vers le répertoire de votre application, puis cloner votre projet.

cd www/votreprojet
git clone https://github.com/Silbad/votreprojet.git .

Si votre repository est privé, il vous sera demandé votre identifiant et votre mot de passe.
Dans le cas GitHub, il vous faudra générer un token qui fera office de mot de passe. Voici la démarche à suivre.
Pour les autres plateformes, des solutions similaires existent également.

Une fois le projet récupéré sur votre serveur, installez les dépendances et compilez le tout :

yarn install
yarn build

Faire un lien symbolique vers le fichier index.js de votre dossier server créé au préalable :

ln -s server/index.js server.js

server.js étant votre point d'entrée définit sur votre plateforme OVH, onglet Moteurs d'exécution :

Redémarrez votre application avec l'interface OVH (onglet Multisite).

Et du coup pour mettre à jour votre application, rien de plus simple avec Git ;)

Enjoy ^^

Widgets

Recherche

Aucun article correspondant à votre recherche...

    Calendrier

    Suivre Human Geek

    Auteurs