NuxtJS

Premiers pas

Edgegap vous propose une plateforme très intuitive pour déployer une application web sans serveur où vous en avez besoin. Pour ce tutoriel, nous passerons en revue les étapes pour déployer une application Nuxt. Avant de vérifier toute autre chose, assurez-vous d'avoir yarn ou un autre gestionnaire de paquets comme npm ou npx. Pour ce tutoriel, nous utiliserons yarn. Vous devez l'exécuter dans le répertoire de votre application, qui peut, au début, n'être qu'un dossier vide.

Ouvrez votre terminal à l'emplacement de votre dossier, et lancez la commande suivante :

C:\Users\JohnDoe\Documents\demo-nuxt-edgegap> yarn

Une fois qu'il installe toutes les dépendances, assurez-vous que l'installation s'est correctement déroulée en exécutant cette commande :

C:\Users\JohnDoe\Documents\demo-nuxt-edgegap> yarn dev

Yarn dev devrait retourner la version de yarn installée si tout s'est bien passé. Ceci étant réglé, nous pouvons maintenant examiner les autres exigences pour compléter avec succès ce tutoriel.

Prérequis

Conteneuriser votre application

La containerisation de la plupart des applications est simple. Vous devez créer un Dockerfile puis exécuter ce fichier avec Docker pour créer l'image. Visual Studio Code est une bonne plateforme pour créer votre Dockerfile puisque, par défaut, il n'ajoute pas d'extension à chaque nouveau fichier que nous créons. C'est exactement ce dont nous avons besoin. Créez simplement un nouveau fichier et nommez-le Dockerfile. Vous verrez le petit logo Docker apparaître à côté.

Vous pouvez maintenant copier-coller ce script dedans pour obtenir les principales dépendances. Gardez à l'esprit que cela créera une image un peu plus d'1 Go. Pour le but de ce tutoriel, c'est acceptable. Mais pour une application en production, vous devrez l'optimiser :

FROM node:lts as builder

WORKDIR /app

COPY . .

RUN yarn install \
  --prefer-offline \
  --frozen-lockfile \
  --non-interactive \
  --production=false

RUN yarn build

RUN rm -rf node_modules && \
  NODE_ENV=production yarn install \
  --prefer-offline \
  --pure-lockfile \
  --non-interactive \
  --production=true

FROM node:lts

WORKDIR /app

COPY --from=builder /app  .

ENV HOST 0.0.0.0
EXPOSE 80

CMD [ "yarn", "start" ]

Après avoir enregistré votre Dockerfile, il est temps de créer l'image. Vous pouvez facilement le faire en exécutant la commande suivante :

Pour les utilisateurs de CPU ARM (Mac M1, M2, etc.), voir la page dédiée.

docker build . -t regsitry.edgegap.com/<YOUR_REPO>/demo-nuxt-edgegap:<YOUR_VERSION_NUMBER>

Il est préférable d'ajouter un numéro de version suivant le versionnage sémantique, mais si vous ne prévoyez pas de mettre à jour votre build sur Edgegap après votre premier déploiement, vous pouvez omettre complètement le numéro de version.

Mais avant cela, vous devez pousser votre image Docker nouvellement créée vers le dépôt d'images de votre choix. N'oubliez pas que nous proposons des dépôts privés via Harbor qui vous offrent une série d'avantages de sécurité que vous n'auriez pas nécessairement en utilisant le dépôt Docker par défaut.

Mais avant cela, vous devez pousser votre image Docker nouvellement créée vers le dépôt d'images de votre choix. N'oubliez pas que nous proposons des dépôts privés via Edgegap Registry qui vous offrent une série d'avantages de sécurité que vous n'auriez pas nécessairement en utilisant le dépôt Docker par défaut.

Pour pousser votre image vers notre dépôt, vous devrez d'abord vous connecter avec vos identifiants en utilisant cette commande :

docker login regsitry.edgegap.com

Maintenant, la seule chose qui reste est de pousser votre image comme ceci :

docker push regsitry.edgegap.com/<YOUR_REPO>/demo-nuxt-edgegap:<YOUR_VERSION_NUMBER>

Super ! Vous n'êtes maintenant plus qu'à une étape de déployer votre application Nuxt sur la plateforme d'Edgegap.

Déployez votre application sur Edgegap

Il existe deux façons de déployer une application sur Edgegap. Pour les deux, vous devrez avoir un compte chez nous, que vous pouvez créer gratuitement en cliquant sur le lien ici. D'abord, voyons comment déployer notre application conteneurisée via notre site web.

Déployer une application via le tableau de bord d'Edgegap :

Vous devrez vous rendre à l'adresse web suivante et entrer vos identifiants. Une fois fait, vous serez automatiquement redirigé vers votre tableau de bord. Si vous venez de créer votre compte, vous verrez une option pour lancer votre première application immédiatement. Sinon, rendez-vous simplement dans l'onglet « Applications et jeux » du menu à gauche de votre écran. Vous verrez une option pour créer une nouvelle application dans le coin droit :

Une fois que vous y aurez cliqué, le formulaire suivant devrait apparaître :

Vous devez remplir tous les champs obligatoires et, une fois que vous avez terminé, il y a quelques éléments que vous devrez modifier par rapport aux valeurs par défaut :

• Numéro de port : Cette application doit avoir le port 3000 ouvert, veuillez donc l'ajouter dans la section « ports » du formulaire de création.

• Temps maximal de déploiement : Comme mentionné précédemment dans ce tutoriel, notre image NuxtJS fait environ 1 Go. Pour déployer une image de cette taille sur Edgegap, vous devrez augmenter le Temps maximal de déploiement à environ 300 secondes.

Une fois que vous avez terminé de remplir le formulaire avec les informations adéquates, il vous suffit de le soumettre, et vous serez prêt pour le déploiement. Sélectionnez simplement la région et le nombre de joueurs que vous souhaitez émuler.

Une fois que vous aurez confirmé vos choix, votre application sera en ligne sous peu. Voici ce que vous verrez une fois qu'elle aura été déployée. Vous pouvez y accéder vous-même en cliquant sur l'icône que nous avons entourée sur cette image.

Cela ouvrira un nouvel onglet où vous trouverez la page d'accueil par défaut de votre application Nuxt.

Déployer une application via l'API d'Edgegap

Bien que notre tableau de bord web soit la manière la plus conviviale de déployer une application, vous pouvez également le faire via une requête API très simple. Pour cela, vous pouvez utiliser Postman. Il est important que vous visitiez le tableau de bord pour créer un jeton API via les options de votre profil. Voici un guide simple sur la façon de créer votre jeton API.

Une fois que vous avez le jeton API en votre possession, la seule chose à faire est de formuler une requête de déploiement avec le nom de votre application, sa version, les adresses IP, la région dans laquelle vous souhaitez effectuer votre déploiement et, bien sûr, votre jeton en tant que paramètre d'autorisation. Vous pouvez voir à quoi ressemble une requête complète dans notre documentation ici.

Une fois que vous aurez envoyé la requête, vous devriez voir une réponse sur votre ligne de commande ou sur Postman qui ressemble à ceci :

C'est tout ce que vous devez faire pour déployer une application via une CLI. Pour confirmer que votre application a été déployée, vous pouvez retourner sur le tableau de bord et voir votre déploiement actif en action en cliquant sur l'onglet « Deployments actifs ».