Lire en anglais

Partager via

Démarrage rapide : Créez votre premier site statique avec Azure Static Web Apps

  • Article

Azure Static Web Apps publie un site web en créant une application à partir d’un référentiel de code. Dans ce guide de démarrage rapide, vous allez déployer une application dans Azure Static Web Apps à l’aide de l’extension Visual Studio Code.

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

Prérequis

Créer un référentiel

Cet article utilise un dépôt de modèles GitHub pour vous permettre de démarrer facilement. Le modèle comprend une application de démarrage déployée sur Azure Static Web Apps.

  1. Accédez à l’emplacement suivant pour créer un nouveau dépôt :
    1. https://github.com/staticwebdev/react-basic/generate
  2. Nommez votre référentiel my-first-static-web-app

Cliquez sur Create repository (Créer le dépôt).

Capture d’écran du bouton Créer un référentiel.

Cloner le référentiel

Avec le dépôt créé dans votre compte GitHub, clonez le projet sur votre machine locale à l’aide de la commande suivante.

Bash 
git clone https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/my-first-static-web-app.git

Prenez soin de remplacer <YOUR_GITHUB_ACCOUNT_NAME> par votre nom d’utilisateur GitHub.

Ensuite, ouvrez Visual Studio Code et accédez à Fichier > Ouvrir le dossier pour ouvrir le référentiel cloné sur votre machine dans l’éditeur.

Installer l’extension Azure Static Web Apps

Si vous ne disposez pas déjà de l’extension Azure Static Web Apps pour Visual Studio Code, vous pouvez l’installer dans Visual Studio Code.

  1. Sélectionnez Affichage>Extensions.
  2. Dans Rechercher des extensions dans la Place de marché, tapez Azure Static Web Apps.
  3. Sélectionnez Installer pour Azure Static Web Apps.

Créer une application web statique

  1. Dans Visual Studio Code, sélectionnez le logo Azure dans la barre d’activités pour ouvrir la fenêtre des extensions Azure.

    Logo Azure

    Notes

    Vous devez vous connecter à Azure et GitHub dans Visual Studio Code pour continuer. Si vous n’êtes pas déjà authentifié, l’extension vous invite à vous connecter aux deux services pendant le processus de création.

  2. Sélectionnez F1 pour ouvrir la palette de commandes Visual Studio Code.

  3. Entrez Créer une application web statique dans la zone de commande.

  4. Sélectionnez Azure Static Web Apps : Créer une application web statique....

  5. Sélectionnez votre abonnement Azure.

  6. Entrez my-first-static-web-app comme nom de l’application.

  7. Sélectionnez la région la plus proche de vous.

  8. Entrez les valeurs des paramètres correspondant à votre choix d’infrastructure.

    Paramètre Valeur
    Infrastructure Sélectionnez React.
    Emplacement du code de votre application Entrez /
    Emplacement de build Entrez build

  9. Une fois l’application créée, une notification de confirmation s’affiche dans Visual Studio Code.

    Confirmation créée

    Si GitHub vous présente un bouton intitulé Activer les actions sur ce référentiel, sélectionnez le bouton pour autoriser l’action de build à s’exécuter sur votre référentiel.

    Lorsque le déploiement est en cours, l’extension Visual Studio Code signale l’état de la build.

    En attente de déploiement

    Une fois le déploiement terminé, vous pouvez naviguer directement sur votre site web.

  10. Pour afficher le site web dans le navigateur, cliquez avec le bouton droit sur le projet dans l’extension Static Web Apps, puis sélectionnez Parcourir le site.

    Parcourir le site

Nettoyer les ressources

Si vous ne prévoyez pas de continuer à utiliser cette application, vous pouvez supprimer l’instance Azure Static Web Apps par le biais de l’extension.

Dans la fenêtre de Visual Studio Code Azure, revenez à la section Ressources puis, sous Static Web Apps, cliquez avec le bouton de droite sur my-first-static-web-app et sélectionnez Supprimer.

Contenu connexe

Étapes suivantes

Ajouter une API