Démarrage rapide : Création de votre premier site statique avec Azure Static Web AppsQuickstart: Building your first static site with Azure Static Web Apps

Azure Static Web Apps publie un site web dans un environnement de production en compilant les applications à partir d’un dépôt GitHub.Azure Static Web Apps publishes a website to a production environment by building apps from a GitHub repository. Dans ce guide de démarrage rapide, vous déployez une application web dans Azure Static Web Apps à l’aide de l’extension Visual Studio Code.In this quickstart, you deploy a web application to Azure Static Web apps using the Visual Studio Code extension.

Si vous n’avez pas d’abonnement Azure, créez un compte d’essai gratuit.If you don't have an Azure subscription, create a free trial account.

PrérequisPrerequisites

Créer un référentielCreate a repository

Cet article utilise un dépôt de modèles GitHub pour vous permettre de démarrer facilement.This article uses a GitHub template repository to make it easy for you to get started. Le modèle comporte une application de démarrage utilisée pour le déploiement avec Azure Static Web Apps.The template features a starter app used to deploy using Azure Static Web Apps.

  1. Accédez à l’emplacement suivant pour créer un nouveau dépôt :Navigate to the following location to create a new repository:
    1. https://github.com/staticwebdev/vanilla-basic/generate
  2. Nommez votre référentiel my-first-static-web-appName your repository my-first-static-web-app

Notes

Azure Static Web Apps nécessite au moins un fichier HTML pour pouvoir créer une application web.Azure Static Web Apps requires at least one HTML file to create a web app. Le référentiel que vous créez lors de cette étape comprend un seul fichier index.html.The repository you create in this step includes a single index.html file.

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

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

Cloner le référentielClone the repository

Avec le dépôt créé dans votre compte GitHub, clonez le projet sur votre machine locale à l’aide de la commande suivante.With the repository created in your GitHub account, clone the project to your local machine using the following command.

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.Make sure to replace <YOUR_GITHUB_ACCOUNT_NAME> with your GitHub username.

Ensuite, ouvrez Visual Studio Code et accédez à Fichier > Ouvrir le dossier pour ouvrir le dépôt que vous venez de cloner sur votre machine dans l’éditeur.Next, open Visual Studio Code and go to File > Open Folder to open the repository you just cloned to your machine in the editor.

Créer une application web statiqueCreate a static web app

  1. Dans Visual Studio Code, sélectionnez le logo Azure dans la barre d’activités pour ouvrir la fenêtre des extensions Azure.Inside Visual Studio Code, select the Azure logo in the Activity Bar to open the Azure extensions window.

    Logo Azure

    Notes

    Les connexions à Azure et GitHub sont nécessaires.Azure and GitHub sign in are required. Si vous n’êtes pas déjà connecté à Azure et à GitHub depuis Visual Studio Code, l’extension vous invite à le faire au cours du processus de création.If you are not already signed in to Azure and GitHub from Visual Studio Code, the extension will prompt you to sign in to both during the creation process.

  2. Placez le pointeur de la souris sur l’étiquette Static Web Apps et sélectionnez le signe plus.Place your mouse over the Static Web Apps label and select the plus sign.

    Nom de l’application

  3. La palette de commandes s’ouvre en haut de l’éditeur et vous invite à nommer votre application.The command palate opens at the top of the editor and prompts you to name your application.

    Tapez my-first-static-web-app et appuyez sur Entrée.Type my-first-static-web-app and press Enter.

    Création d’application web statique

  4. Sélectionnez la branche main , puis appuyez sur Entrée.Select the main branch and press Enter.

    Nom de la branche

  5. Sélectionnez / comme emplacement pour le code de l’application, puis appuyez sur entrer.Select / as the location for the application code and press Enter.

    Emplacement du code de l’application

  6. L’extension recherche l’emplacement de l’API dans votre application.The extension is looking for the location of the API in your application. Cet article n’implémente pas d’API.This article doesn't implement an API.

    Sélectionnez Skip for now (Ignorer pour le moment) et appuyez sur Entrée.Select Skip for now and press Enter.

    Emplacement de l’API

  7. Sélectionnez l’emplacement où les fichiers sont générés pour la production dans votre application.Select the location where files are built for production in your app.

    Décochez la case et appuyez sur Entrée.Clear the box and press Enter.

    Chemin des fichiers de l’application

  8. Sélectionnez l’emplacement le plus proche de vous et appuyez sur Entrée.Select a location nearest you and press Enter.

    Emplacement de la ressource

  9. Une fois l’application créée, une notification de confirmation s’affiche dans Visual Studio Code.Once the app is created, a confirmation notification is shown in Visual Studio Code.

    Confirmation créée

  10. Dans la fenêtre de l’Explorateur de Visual Studio Code, accédez au nœud qui porte le nom de votre abonnement et développez-le.In the Visual Studio Code Explorer window, navigate to the node that has your subscription name and expand it. Notez que le déploiement peut prendre quelques minutes.Please note that it might take a few minutes for the deployment to complete. Ensuite, revenez à la section Static Web Apps et sélectionnez le nom de votre application, puis cliquez avec le bouton droit sur my-first-static-web-app et sélectionnez Ouvrir dans le portail pour afficher l’application dans le portail Azure.Then return to the Static Web Apps section and select the name of your app and then right-click on my-first-static-web-app and select Open in Portal to view app in the Azure portal.

    Ouvrir le portail

Voir le site webView the website

Le déploiement d’une application statique comporte deux aspects.There are two aspects to deploying a static app. Le premier provisionne les ressources Azure sous-jacentes qui composent votre application.The first provisions the underlying Azure resources that make up your app. Le second est un flux de travail GitHub Actions qui génère et publie votre application.The second is a GitHub Actions workflow that builds and publishes your application.

Avant de pouvoir accéder à votre nouveau site statique, la build de déploiement doit d’abord finir de s’exécuter.Before you can navigate to your new static site, the deployment build must first finish running.

La fenêtre de vue d’ensemble de Static Web Apps présente des liens qui vous permettent d’interagir avec votre application web.The Static Web Apps overview window displays a series of links that help you interact with your web app.

Fenêtre Vue d’ensemble

  1. Cliquez sur la bannière intitulée Cliquez ici pour vérifier l’état de vos exécutions GitHub Actions afin d’accéder aux actions GitHub en cours d’exécution sur votre dépôt.Clicking on the banner that says, Click here to check the status of your GitHub Actions runs takes you to the GitHub Actions running against your repository. Une fois que vous avez vérifié que le travail de déploiement est terminé, vous pouvez accéder à votre site web à l’aide de l’URL générée.Once you verify the deployment job is complete, then you can navigate to your website via the generated URL.

  2. Une fois le flux de travail GitHub Actions terminé, vous pouvez cliquer sur l’URL pour ouvrir le site web dans un nouvel onglet.Once GitHub Actions workflow is complete, you can click on the URL link to open the website in new tab.

Nettoyer les ressourcesClean up resources

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.If you're not going to continue to use this application, you can delete the Azure Static Web Apps instance through the 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.In the Visual Studio Code Explorer window, return to the Static Web Apps section and right-click on my-first-static-web-app and select Delete.

Supprimer l’application

Étapes suivantesNext steps