Exercice - Créer et déployer sur Azure Static Web Apps

Effectué

Azure Static Web Apps héberge des applications statiques, comme celles créées avec Gatsby, en générant les ressources statiques des applications, puis en les déployant sur le cloud.

Ici, vous générez les ressources statiques de votre application pour voir à quoi elles ressemblent et les hébergez localement pour les essayer. Vous poussez ensuite votre code vers GitHub et créez une instance Azure Static Web Apps pour héberger votre application sur le web.

Générer votre site

Gatsby fait le gros du travail en ce qui concerne la génération de votre site et sa préparation pour le déploiement.

Exécutez la commande suivante dans votre répertoire de projet :

gatsby build

Cette commande crée une build de production. Tous vos fichiers se retrouvent dans un sous-répertoire public/.

Une fois le processus de génération terminé, vous pouvez accéder à votre répertoire public/ et ouvrir les fichiers dans un navigateur. Vous pouvez explorer votre build comme si elle était hébergée sur le web avec http-server, un outil en ligne de commande qui sert des fichiers locaux sur HTTP pour pouvoir les voir dans un navigateur.

Nous allons maintenant servir l’intégralité de l’application à partir d’un serveur web local. Ouvrez le répertoire public/ dans votre terminal (cd) et tapez la commande suivante :

npx http-server -p 5000

Accédez au navigateur sur http://localhost:5000.

Vous devez maintenant voir le rendu de contenu suivant :

Notre application générée.

Vous avez créé votre site en transformant une application Gatsby en un ensemble de pages statiques contenant simplement du code HTML, CSS et JavaScript !

Accédez à votre répertoire public/ et localisez le rendu de votre composant about sur public/about/index.html. Dans le cadre du processus d’optimisation, tous les espaces ont été supprimés et la page est représentée sous la forme d’une seule longue ligne. Toutefois, vous devez être en mesure de localiser le rendu du titre et de la description qui doivent ressembler à ça :

// excerpt from about/index.html

<h2>Gatsby Default Starter</h2><div>Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.</div>

Pousser votre code vers GitHub

Afin de préparer l’application pour le déploiement, nous devons effectuer les étapes suivantes :

  1. Initialiser un dépôt Git
  2. Créer un dépôt GitHub et le pousser vers le dépôt Git local

Ajouter la page À propos de

Dans la console, accédez à la racine de votre projet, puis ajoutez le code à l’index du dépôt et commitez-le.

git add .
git commit -m "adding About page to site"

Créer un dépôt GitHub et pousser le code

  1. Accédez à GitHub et ouvrez une session. Vous devez maintenant être sur une URL de type https://github.com/<your username>?tab=repositories

  2. Cliquez maintenant sur le bouton new comme indiqué ci-dessous :

    Créer un dépôt GitHub.

  3. Nommez votre dépôt gatsby-app et cliquez sur Create repository comme indiqué ci-dessous :

    Nommage de GitHub.

  4. Enfin, ajoutez votre dépôt GitHub comme dépôt distant et exécutez l’envoi (push). Pour ce faire, tapez les commandes suivantes (remplacez <user> par le nom de votre utilisateur GitHub) :

    git remote add origin https://github.com/<user>/gatsby-app.git
    git push -u origin master
    

Vous êtes maintenant prêt à effectuer le déploiement sur Azure Static Web Apps !

Créer une application web statique

Maintenant que vous avez créé votre dépôt GitHub, vous pouvez créer une instance Static Web Apps à partir du portail Azure.

Ce tutoriel utilise le bac à sable Azure pour vous fournir un abonnement Azure gratuit et temporaire pour effectuer cet exercice. Avant de continuer, vérifiez que vous avez activé le bac à sable en haut de cette page.

  1. Connectez-vous au portail Azure en veillant à utiliser le même compte pour vous connecter que celui qui vous a servi à activer le bac à sable.
  2. Dans la barre supérieure, recherchez Static Web Apps.
  3. Sélectionnez Static Web Apps.
  4. Sélectionnez Nouveau.

Informations de base

Ensuite, configurez votre nouvelle application et liez-la à votre dépôt GitHub.

  1. Entrez les détails du projet

    Paramètre Valeur
    Abonnement Abonnement Concierge
    Groupe de ressources [Nom du groupe de ressources de bac à sable]
  2. Entrez les informations Static Web Apps

    Paramètre Valeur
    Nom Nommez votre application. Les caractères valides sont a-z (ne respectent pas la casse), 0-9 et _.
    Région Sélectionnez la région la plus proche de vous
    Référence SKU Gratuit
  3. Cliquez sur le bouton Se connecter avec GitHub et authentifiez-vous avec GitHub

  4. Entrez les détails de contrôle de code source

    Paramètre Valeur
    Organisation Sélectionnez l’organisation dans laquelle vous avez créé le dépôt
    Dépôt gatsby-app
    Branche maître
  5. Utilisez la liste déroulante Détails de la build afin de sélectionner Gatsby pour renseigner les informations de build.

    Paramètre Valeur
    Emplacement de l’application Conserver la valeur par défaut
    Emplacement de l’API Conserver la valeur par défaut
    Emplacement de l’artefact de l’application public
  6. Cliquez sur le bouton Vérifier + créer

Cliquez sur Vérifier + créer

Vérifier + créer

Poursuivez la création de l’application.

  1. Cliquez sur le bouton Créer

    Cliquer sur le bouton Créer.

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

    Accéder à la ressource.

Passer en revue l’action GitHub

À ce stade, votre instance Static Web Apps est créée dans Azure, mais votre application n’est pas encore déployée. L’action GitHub créée par Azure dans votre dépôt s’exécute automatiquement pour déclencher la première génération et le premier déploiement de votre application, mais le processus dure quelques minutes.

Vous pouvez vérifier l’état de votre action de génération et de déploiement en cliquant sur le lien ci-dessous :

Parcourir pour voir la progression de l’action GitHub.

Afficher le site web

Une fois que votre action GitHub a terminé la génération et la publication de votre application web, vous pouvez cliquer sur Parcourir pour voir votre application en cours d’exécution.

Cliquez sur le lien URL dans le portail Azure pour accéder à votre application dans le navigateur.

Page de présentation d’Azure Static Web Apps.

Page de présentation d’Azure Static Web Apps.

Félicitations ! Vous avez déployé votre première application dans Azure Static Web Apps !

Notes

Ne vous inquiétez pas si vous voyez une page web indiquant que l’application n’a pas encore été créée et déployée. Essayez d’actualiser le navigateur une minute après. L’action GitHub s’exécute automatiquement lors de la création d’Azure Static Web Apps. Par conséquent, si vous voyez la page de démarrage, l’application n’est pas encore complètement déployée.

Vous avez réussi ! Vous avez déployé votre application Gatsby sur le cloud.