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 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/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.

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

Screenshot of the Create repository button.

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.

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.
  4. L’extension est installée dans Visual Studio Code.

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.

    Azure Logo

    Remarque

    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....

    Paramètre Valeur
    Nom Entrez my-first-static-web-app
    Région Sélectionnez la région la plus proche de vous.
    Infrastructure Sélectionnez Personnalisé.
  5. Entrez les valeurs des paramètres correspondant à votre choix d’infrastructure prédéfinie.

    Paramètre Valeur
    Emplacement du code de votre application Entrez /src
    Emplacement de build Entrez /src
  6. Une fois l’application créée, une notification de confirmation s’affiche dans Visual Studio Code.

    Created confirmation

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

    Waiting for deployment

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

  7. 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.

    Browse 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.

Étapes suivantes