Déployer des sites Nuxt 3 avec un rendu universel sur Azure Static Web Apps

Article
06/27/2023

Ce tutoriel permet d’apprendre à déployer une application Nuxt 3 sur Azure Static Web Apps. Nuxt 3 prend en charge le rendu universel (côté client et côté serveur), serveur et routes d’API compris. Sans configuration supplémentaire, vous pouvez déployer des applications Nuxt 3 avec un rendu universel sur Azure Static Web Apps. Lorsque l’application est intégrée à la tâche GitHub Action ou Azure Pipelines de Static Web Apps, Nuxt 3 la convertit automatiquement en ressources statiques et en application Azure Functions compatibles avec Azure Static Web Apps.

Prérequis

Compte Azure avec un abonnement actif. Créez un compte gratuitement.
Un compte GitHub. Créez un compte gratuitement.
Node.js version 16 ou ultérieure installé.

Configurer une application Nuxt 3

Pour créer un projet Nuxt, utilisez npx nuxi init nuxt-app. Plutôt que d’utiliser un nouveau projet, ce tutoriel utilise une configuration de référentiel existante pour montrer comment déployer un site Nuxt 3 avec un rendu universel sur Azure Static Web Apps.

Accédez à http://github.com/staticwebdev/nuxt-3-starter/generate.
Nommez le référentiel nuxt-3-starter.
Ensuite, clonez le nouveau référentiel sur votre ordinateur. Veillez à remplacer <YOUR_GITHUB_ACCOUNT_NAME> par le nom de votre compte.
```
git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nuxt-3-starter
```
Accédez à l’application Nuxt.js nouvellement clonée :
```
cd nuxt-3-starter
```
Installez des dépendances :
```
npm install
```
Démarrez l’application Nuxt.js dans l’environnement de développement :
```
npm run dev -- -o
```

Accédez à http://localhost:3000 pour ouvrir l’application à partir de laquelle le site Web suivant devrait s’ouvrir dans votre navigateur favori. Sélectionnez les boutons pour solliciter des itinéraires pour le serveur et l’API.

Démarrer l’application Nuxt.js

Déployez votre site Nuxt 3

Les étapes suivantes montrent comment créer une ressource Azure Static Web Apps et la configurer pour le déploiement de votre application depuis GitHub.

Créer une ressource Azure Static Web Apps

Accédez au portail Azure.
Sélectionnez Créer une ressource.
Recherchez Static Web Apps.
Sélectionnez Static Web Apps.
Sélectionnez Create (Créer).

Sous l’onglet Informations de base, entrez les valeurs suivantes.

Propriété	Valeur
Abonnement	Le nom de votre abonnement Azure.
Groupe de ressources	my-nuxtjs-group
Nom	my-nuxt3-app
Type de plan	Gratuit
Région de l’API Azure Functions et des environnements intermédiaires	Sélectionnez la région la plus proche de vous.
Source	GitHub

Sélectionnez Se connecter avec GitHub et authentifiez-vous auprès de GitHub.

Entrez les valeurs GitHub suivantes.

Propriété	Valeur
Organisation	Sélectionnez l’organisation GitHub de votre choix.
Dépôt	Sélectionnez le référentiel que vous avez créé précédemment.
Branche	Sélectionnez principal.

Dans la section Détails de build, sélectionnez Personnalisé dans la liste déroulante Présélections de build et conservez les valeurs par défaut.
Dans Emplacement de l’application, entrez / dans la case.
Dans le champ Emplacement de l’API, entrez .output/server.
Dans le champ Emplacement de sortie, entrez .output/public.

Examiner et créer

Sélectionnez Vérifier + créer pour vérifier que les informations sont correctes.
Pour démarrer la création de l’application web statique et le provisionnement d’un GitHub Actions pour le déploiement, sélectionnez Créer.
Une fois le déploiement terminé, sélectionnez Accéder à la ressource.
Dans la fenêtre Vue d’ensemble, cliquez sur le lien URL pour ouvrir l’application que vous avez déployée.

Si le site Web ne se charge pas immédiatement, c’est que le workflow GitHub Actions est toujours en cours d’exécution en arrière-plan. Une fois le workflow terminé, actualisez ensuite votre navigateur pour afficher votre application Web.

Vous pouvez vérifier l’état des workflow Actions en accédant aux actions de votre référentiel :

https://github.com/<YOUR_GITHUB_USERNAME>/nuxt-3-starter/actions

Synchroniser les changements

Une fois l’application créée, Azure Static Web Apps a créé un fichier de workflow GitHub Actions dans votre référentiel. Revenez au terminal et exécutez la commande suivante pour extraire la validation (commit) contenant le nouveau fichier.

git pull

Apportez des modifications à l’application en mettant à jour le code et en l’envoyant (push) à GitHub. GitHub Actions génère et déploie automatiquement l’application.

Pour plus d’informations, consultez la documentation Azure Static Web Apps sur la présélection du déploiement Nuxt 3.

Configurer un nom de domaine personnalisé

Partage via