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

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 comporte une application de démarrage utilisée pour le déploiement avec Azure Static Web Apps.

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

Notes

Azure Static Web Apps nécessite au moins un fichier HTML pour pouvoir créer une application web. Le référentiel que vous créez lors de cette étape comprend un seul fichier index.html.

Sélectionnez Create repository from template (Créer un dépôt à partir du modèle).

Créer un référentiel à partir du modèle

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.

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.

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 invitera à vous connecter aux deux services pendant le processus de création.

  2. Sous l'étiquette Static Web Apps, sélectionnez le signe plus.

    Nom de l’application

    Notes

    L’extension Azure Static Web Apps de Visual Studio Code simplifie le processus de création à l’aide d’une série de valeurs par défaut. Si vous souhaitez un contrôle affiné du processus de création, ouvrez la palette de commande, puis sélectionnez Azure Static Web Apps : Créer une application web statique (avancé) .

  3. La palette de commandes s’ouvre en haut de l’éditeur et vous invite à sélectionner un nom pour votre abonnement.

    Sélectionnez votre abonnement et appuyez sur Entrée.

    Sélectionner un abonnement Azure

  4. Ensuite, nommez votre application.

    Tapez my-first-static-web-app et appuyez sur Entrée.

    Création d’application web statique

  5. Sélectionnez une région proche de chez vous.

    Notes

    Azure Static Web Apps distribue globalement vos ressources statiques. La région que vous sélectionnez détermine l’emplacement de votre application de fonction API et de vos environnements intermédiaires facultatifs.

  6. Sélectionnez les présélections correspondant à votre type d'application.

    Présélections d'application : Pas de framework

    Entrez /src comme emplacement des fichiers d’application, puis appuyez sur Entrée.

    Cette application ne produit pas une sortie de build. Vérifiez que l’emplacement de sortie de la build est vide et appuyez sur Entrée.

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

    Confirmation créée

    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.

  8. 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 l’Explorateur Visual Studio Code, revenez à la section Static Web Apps et cliquez avec le bouton droit sur my-first-static-web-app, puis sélectionnez Supprimer.

Supprimer l’application

Étapes suivantes