Déploiement d'une application statique Nuxt sur Azure

Sponsorisé par l'interface utilisateur de Kendo pour Vue

Vous souhaitez en savoir plus sur la création d'applications Web de qualité? Tout commence avec Kendo UI for Vue – une bibliothèque de composants d'interface utilisateur complète qui vous permet de créer rapidement des applications réactives de haute qualité. Il inclut tout ce dont vous avez besoin, des grilles et graphiques aux menus déroulants et jauges.

L'équipe de Kendo UI for Vue s'engage à vous fournir les derniers conseils et astuces dans le monde du développement de Vue. Nous espérons que vous apprécierez ce post!

Nuxt.js est un framework universel pour le développement d'applications Vue. En savoir plus sur Nuxt et sur la manière de déployer facilement une application Nuxt statique sur Azure avec Azure App Services.

Nuxt.js est un cadre universel pour la création d'applications Vue.js. L'objectif d'un cadre universel est de le rendre suffisamment flexible pour pouvoir être utilisé en tant qu'application rendue côté serveur, site généré de manière statique ou application à une seule page. Dans ce didacticiel, nous expliquerons comment déployer une application Nuxt sur Azure à l'aide d'Azure App Services.

Prérequis

Pour pouvoir suivre ce didacticiel, il est nécessaire de connaître les technologies suivantes:

• Connaissance de JavaScript
• Connaissance de Vue.js

Échafaudage d'une application Nuxt

Pour commencer, nous devons créer un projet Nuxt. Nuxt.js est vraiment facile à utiliser, et l'équipe Nuxt a créé un outil d'échafaudage qui vous permettra de créer une application Nuxt en quelques secondes appelée create-nuxt-app . Lançons l’une des commandes suivantes:

 $ npx create-nuxt-app telerik-nuxt ou
$ fil créer nuxt-app telerik-nuxt

Une fois la commande exécutée, vous serez invité à choisir parmi différentes options, telles qu’un framework côté serveur, un framework de test ou un framework d’interface utilisateur. Vous pouvez sélectionner celle qui correspond à vos besoins, mais pour ce didacticiel, nous allons désactiver toutes ces options et choisir uniquement Bulma pour le style. Allez-y et choisissez Bulma dans le cadre de l'interface utilisateur. La prochaine étape consistera à exécuter l'application Nuxt que nous venons de créer. Nous pouvons le faire en utilisant les commandes suivantes:

 $ yarn run dev ou
$ npm run dev

Après avoir exécuté cette commande, votre application Nuxt s'exécutera sur localhost: 3000 et lorsque vous accédez au navigateur, L’image ci-dessus correspond à ce que vous verrez – un exemple de page fonctionnant sous Nuxt.js.

Nous allons maintenant créer une page de portefeuille, puis déployer celle-ci.

Création de la page de portefeuille

Pour que le projet fonctionne, nous allons créer un site de portefeuille simple pour un développeur potentiel. détails et liens. Maintenant, allons de l'avant et créons ceci.

Dans Nuxt.js, tous les fichiers Vue du répertoire de la page sont traduits en une page. Par exemple, index.vue affichera la page d'accueil et about.vue affichera la page about. Dans ce projet, nous allons travailler avec une seule page affichant les informations requises. Dans le fichier pages / index.vue nous pouvons mettre à jour le code et ajouter ce qui suit:

Nous avons mis à jour les détails du portefeuille et nous pouvons maintenant voir que la page d’accueil est également mise à jour et elle se présente exactement comme ceci. Ici vous pouvez trouver le dépôt GitHub pour ce projet .

Déploiement sur Azure

Super! Nous venons de créer un site de portfolio utilisant Nuxt.js. Maintenant, pour la prochaine étape, nous allons déployer le portefeuille en tant que site statique en utilisant Azure .

Étape 1

Notre site fonctionne actuellement dans un environnement local, mais dans le but de passer en production. , nous devrons créer notre application et créer un site statique avec Nuxt. Nous devons utiliser la commande "fil" qui construit votre projet et génère le code HTML de chacun de vos itinéraires et le stocke dans un fichier conservé dans le répertoire dist . Avec cela, vous pouvez ensuite héberger les fichiers générés sur n’importe quel service d’hôte Web statique. Allez-y et lancez la commande:

 yarn gener

Étape 2

Maintenant que nos fichiers sont prédéfinis, l'étape suivante consiste à se déployer sur Azure. Rendez-vous sur l'application Web Azure et connectez-vous ou créez un compte.

• Cliquez sur le portail d'Azure et commencez à créer un environnement pour votre application
• Cliquez à droite sur “Créer une ressource” et sélectionnez “Application Web”
• Ensuite, dans l'onglet Général, ajoutez un abonnement que vous auriez déjà créé dans le portail
• Ajoutez un groupe de ressources et ajoutez le nom de l'application, sélectionnez une région ainsi qu'un système d'exploitation
• Suivez les étapes décrites dans l'image ci-dessous et, enfin, cliquez sur "Consulter et créer"

  

Étape 3

L'étape suivante consiste à connecter l'application Azure que nous avons créée. à notre base de code. Nous devrions déjà avoir notre base de code sur GitHub, afin de pouvoir aller de l'avant et connecter le référentiel GitHub à Azure. Sur le portail Azure, cliquez sur "Centre de déploiement", comme illustré dans l'image ci-dessous.

Choisissez ensuite "Service de génération d'App Service". C'est le moteur qui construit et déploie votre base de code. Enfin, sélectionnez le dépôt sur Github et cliquez sur "Terminer".

Étape 4

Pour la dernière étape, nous devrons configurer le serveur pour autoriser Azure. déployer notre base de code. Si vous consultez les journaux, vous verrez un message d'erreur indiquant qu'il manque un serveur / app.js et que le fichier web.config n'est pas généré. Générons un fichier web.config . Continuez et copiez le bloc de code suivant dans le dossier racine de notre projet.

Après avoir ajouté ce fichier, assurez-vous que votre dossier dist est ignoré par le fichier .gitignore de votre répertoire car nous souhaitons qu'Azure puisse trouver le dist / fichier index.html . Commettez maintenant les modifications dans git et nous pouvons constater qu'il est mis à jour dans le centre de déploiement du portail Azure. Enfin, nous pouvons vérifier que notre site a été déployé avec succès en visitant l'onglet Aperçu et en cliquant sur le bouton Parcourir.

Conclusion

Dans cet article, nous avons vu comment créer et déployer une application Nuxt statique à l'aide de services Web Azure. Nous connaissons maintenant les possibilités de Nuxt.js. Il n’est pas limité et il peut être déployé n’importe où. Vous pouvez aller plus loin et explorer davantage la documentation officielle de Nuxt et consulter le référentiel GitHub pour ce projet et la démonstration .