Partager via

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

Dans ce tutoriel, vous allez 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), y compris les itinéraires serveur et API. Sans configuration supplémentaire, vous pouvez déployer des applications Nuxt 3 avec rendu universel sur Azure Static Web Apps. Lorsque l’application est construite dans la GitHub Action de Static Web Apps ou la tâche Azure Pipelines, Nuxt 3 la convertit automatiquement en ressources statiques ainsi qu'une application Azure Functions compatible avec Azure Static Web Apps.

Prerequisites

Configurer une application Nuxt 3

Vous pouvez configurer un nouveau projet Nuxt à l’aide de npx nuxi init nuxt-app. Au lieu d’utiliser un nouveau projet, ce tutoriel utilise un référentiel existant configuré pour montrer comment déployer un site Nuxt 3 avec rendu universel sur Azure Static Web Apps.

  1. Accédez à http://github.com/staticwebdev/nuxt-3-starter/generate.

  2. Nommez le référentiel nuxt-3-starter.

  3. Ensuite, clonez le nouveau dépôt 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

  4. Accédez à l’application Nuxt.js nouvellement clonée :

    cd nuxt-3-starter

  5. Installez des dépendances :

    npm install

  6. Démarrez Nuxt.js application en développement :

    npm run dev -- -o

Accédez à http://localhost:3000 pour ouvrir l'application, où vous devriez voir le site web suivant s'ouvrir dans votre navigateur par défaut. Sélectionnez les boutons pour appeler les itinéraires du serveur et de l’API.

Démarrer Nuxt.js application

Déployer votre site Nuxt 3

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

Créer une ressource Azure Static Web Apps

  1. Accédez au portail Azure .

  2. Sélectionnez Créer une ressource.

  3. Recherchez Static Web Apps.

  4. Sélectionnez Static Web Apps.

  5. Cliquez sur Créer.

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

    Propriété Valeur
    Subscription 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

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

  8. Entrez les valeurs GitHub suivantes.

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

  9. Dans la section Détails de la compilation, sélectionnez Personnalisé dans la liste déroulante Présélections de compilation et gardez les valeurs par défaut.

  10. Dans l’emplacement de l’application, entrez / dans le champ.

  11. Dans l’emplacement de l’API, entrez .output/server dans la zone.

  12. Dans l’emplacement de sortie, entrez .output/public dans le champ.

Vérifier et créer

  1. Sélectionnez Vérifier + créer pour vérifier que les informations sont correctes.

  2. Sélectionnez Créer pour démarrer la création de l’application web statique et approvisionner un GitHub Actions pour le déploiement.

  3. Une fois le déploiement terminé, sélectionnez Accéder à la ressource.

  4. Dans la fenêtre Vue d’ensemble , sélectionnez le lien URL pour ouvrir votre application déployée.

Si le site web ne charge pas immédiatement, le flux de travail GitHub Actions en arrière-plan est toujours en cours d’exécution. Une fois le flux de travail terminé, vous pouvez actualiser le navigateur pour afficher votre application web.

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

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

Synchroniser les modifications

Lorsque vous avez créé l’application, Azure Static Web Apps a créé un fichier de flux de travail GitHub Actions dans votre dépôt. Revenez au terminal et exécutez la commande suivante pour extraire la validation contenant le nouveau fichier.

git pull

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

Pour plus d’informations, consultez la documentation du paramètre prédéfini de déploiement Nuxt 3 pour Azure Static Web Apps.

Configurer un domaine personnalisé

  • Last updated on