Tutoriel : Publier un site Gatsby dans Azure Static Web Apps

Cet article montre comment créer et déployer une application web Gatsby dans Azure Static Web Apps. Vous obtenez ainsi un nouveau site Static Web Apps (avec la fonctionnalité GitHub Actions associée) qui vous permet de contrôler la manière dont l’application est générée et publiée.

Dans ce tutoriel, vous allez apprendre à :

  • Créer une application Gatsby
  • Configurer un site Azure Static Web Apps
  • Déployer l’application Gatsby sur Azure

Si vous n’avez pas d’abonnement Azure, créez un compte gratuit avant de commencer.

Prérequis

Créer une application Gatsby

Créez une application Gatsby à l’aide de l’interface de ligne de commande (CLI) Gatsby :

  1. Ouvrez un terminal.

  2. Utilisez l’outil npx pour créer une application avec l’interface CLI Gatsby. Cela peut prendre quelques minutes.

    npx gatsby new static-web-app
    
  3. Accédez à l’application nouvellement créée.

    cd static-web-app
    
  4. Initialiser un dépôt Git

    git init
    git add -A
    git commit -m "initial commit"
    

Transmettre votre application à GitHub

Vous devez avoir un référentiel sur GitHub pour créer une ressource Azure Static Web Apps.

  1. Créez un référentiel GitHub vide (ne créez pas de fichier README) à partir de https://github.com/new nommé gatsby-static-web-app.

  2. Ensuite, ajoutez le référentiel GitHub que vous venez de créer en tant que référentiel distant à votre référentiel local. Veillez à remplacer l’espace réservé <YOUR_USER_NAME> par votre nom d’utilisateur GitHub dans la commande suivante.

    git remote add origin https://github.com/<YOUR_USER_NAME>/gatsby-static-web-app
    
  3. Transmettez votre référentiel local à GitHub.

    git push --set-upstream origin main
    

Déployez votre application web

Les étapes suivantes vous montrent comment créer une application Static Web Apps et la déployer dans un environnement de production.

Création de l'application

  1. Accéder au portail Azure

  2. Sélectionnez Créer une ressource

  3. Recherchez Applications web statiques

  4. Sélectionnez Static Web Apps

  5. Sélectionnez Créer

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

    Propriété Valeur
    Abonnement Le nom de votre abonnement Azure.
    Groupe de ressources my-gatsby-group
    Nom my-gatsby-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.
    Dépôt Sélectionnez gatsby-static-web-app.
    Branche Sélectionnez principal.
  9. Dans la section Détails de build, sélectionnez Gatsby dans la liste déroulante Présélections de build et conservez les valeurs par défaut.

Examiner et créer

  1. Pour vérifier que les informations sont correctes, sélectionnez le bouton Vérifier + créer.

  2. Pour démarrer la création de l’application web statique App Service et le provisionnement d’une action GitHub pour le déploiement, sélectionnez Créer.

  3. Une fois le déploiement terminé, cliquez sur Accéder à la ressource.

  4. Sur l’écran de la ressource, cliquez sur le lien URL pour ouvrir l’application que vous avez déployée. Vous devrez peut-être patienter une ou deux minutes, le temps que l’action GitHub soit terminée.

    Application déployée

Nettoyer les ressources

Si vous n’envisagez pas de continuer à utiliser cette application, vous pouvez supprimer la ressource Azure Static Web App en procédant comme suit :

  1. Ouvrez le portail Azure
  2. Dans la barre de recherche supérieure, recherchez le nom que vous avez fourni précédemment pour votre application.
  3. Cliquez sur l’application.
  4. Cliquez sur le bouton Supprimer.
  5. Cliquez sur Yes (Oui) pour confirmer la suppression.

Étapes suivantes