Démarrage rapide : créer votre première application web statique

Azure Static Web Apps publie un site web dans un environnement de production en compilant les applications à partir d’un référentiel Azure DevOps ou GitHub. Dans ce démarrage rapide, vous allez déployer une application web dans Azure Static Web Apps à partir du portail Azure.

Prérequis

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

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

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.

Pas de framework

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.

Angular

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

Blazor

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

React

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

Vue

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

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

Créer un référentiel

Cet article utilise un référentiel Azure DevOps pour vous faciliter le démarrage. Le référentiel comporte une application de démarrage utilisée pour le déploiement avec Azure Static Web Apps.

1. Connectez-vous à Azure DevOps.

2. Sélectionnez Nouveau référentiel.

3. Dans la fenêtre Créer un projet, développez le menu Avancé, puis effectuez les sélections suivantes :

   Paramètre	Valeur
   Project	Entrez my-first-web-static-app.
   Visibilité	Sélectionnez Privé.
   Gestion de versions	Sélectionnez Git.
   Processus d'élément de travail	Sélectionnez l’option la plus adaptée à vos méthodes de développement.

4. Sélectionnez Create (Créer).

5. Sélectionnez l’élément de menu Référentiels.

6. Sélectionnez l’élément de menu Fichiers.

7. Sous la carte Importer un référentiel, sélectionnez Importer.

8. Copiez une URL de référentiel pour l’infrastructure de votre choix et collez-la dans la zone Cloner l’URL.

   Pas de framework

   https://github.com/staticwebdev/vanilla-basic.git

   Angular

   https://github.com/staticwebdev/angular-basic.git

   Blazor

   https://github.com/staticwebdev/blazor-basic.git

   React

   https://github.com/staticwebdev/react-basic.git

   Vue

   https://github.com/staticwebdev/vue-basic.git

9. Sélectionnez Importer et attendez que le processus d’importation se termine.

Créer une application web statique

Maintenant que le référentiel est créé, vous pouvez créer une application web statique à partir du Portail Azure.

1. Accédez au portail Azure.
2. Sélectionnez Créer une ressource.
3. Recherchez Static Web Apps.
4. Sélectionnez Static Web Apps.
5. Sélectionnez Create (Créer).

Dans la section De base, commencez par configurer votre nouvelle application et liez-la à un référentiel GitHub.

Paramètre	Valeur
Abonnement	Sélectionnez votre abonnement Azure.
Groupe de ressources	Sélectionnez le lien Créer et entrez static-web-apps-test dans la zone de texte.
Nom	Entrez my-first-static-web-app dans la zone de texte.
Type de plan	Sélectionnez Gratuit.
Azure Functions et détails de l’environnement de préproduction	Sélectionnez la région la plus proche de vous.
Source	Sélectionnez GitHub.

Sélectionnez Se connecter avec GitHub et authentifiez-vous auprès de GitHub.

Après vous être connecté à GitHub, entrez les informations relatives au dépôt.

Paramètre	Valeur
Organisation	Sélectionnez votre organisation.
Référentiel	Sélectionnez my-first-web-static-app.
Branche	Sélectionner <branch_name>.

Notes

Si vous ne voyez aucun référentiel :

• Il peut être nécessaire d’autoriser Azure Static Web Apps dans GitHub. Accédez à votre référentiel GitHub, puis à Paramètres > Applications > Applications OAuth autorisées , sélectionnez Azure Static Web Apps, puis sélectionnez Octroi.
• Vous devrez peut-être autoriser Azure Static Web Apps dans votre organisation Azure DevOps. Vous devez être propriétaire de l’organisation pour accorder des autorisations. Demandez un accès aux applications tierces via OAuth. Pour plus d’informations, consultez Autoriser l’accès aux API REST avec OAuth 2.0.

Dans la section Informations de base, commencez par configurer votre nouvelle application et liez-la à un référentiel Azure DevOps.

Paramètre	Valeur
Abonnement	Sélectionnez votre abonnement Azure.
Groupe de ressources	Sélectionnez le lien Créer et entrez static-web-apps-test dans la zone de texte.
Nom	Entrez my-first-static-web-app dans la zone de texte.
Type de plan	Sélectionnez Gratuit.
Azure Functions et détails de l’environnement de préproduction	Sélectionnez la région la plus proche de vous.
Source	Sélectionnez DevOps.
Organisation	Sélectionnez votre organisation.
Project	Sélectionnez votre projet.
Référentiel	Sélectionnez my-first-web-static-app.
Branche	Sélectionner <branch_name>.

Notes

Vérifiez que la branche que vous utilisez n’est pas protégée et que vous disposez des autorisations suffisantes pour émettre une commande push. Pour vérifier, accédez à votre référentiel DevOps, accédez à Repos – >Branches, puis sélectionnez Autres options. Ensuite, sélectionnez votre branche, puis Stratégies de branche pour vous assurer que les stratégies requises ne sont pas activées.

Dans la section Détails de build, ajoutez les détails de configuration propres à votre framework front-end favori.

Pas de framework

1. Sélectionnez Personnalisé dans la liste déroulante Build Presets (Présélections de build).
2. Tapez ./src dans la zone Emplacement de l’application.
3. Laissez la zone Emplacement de l’API vide.
4. Tapez ./src dans la boîte Emplacement de l’artefact de l’application.

Angular

1. Sélectionnez Angular dans la liste déroulante Build Presets (Présélections de build).
2. Conservez la valeur par défaut dans la zone Emplacement de l’application.
3. Laissez la zone Emplacement de l’API vide.
4. Tapez dist/angular-basic dans la zone Emplacement de l’artefact de l’application.

Blazor

1. Sélectionnez Blazor dans la liste déroulante Build Presets (Présélections de build).
2. Conservez la valeur par défaut Client dans la zone Emplacement de l’application.
3. Laissez la zone Emplacement de l’API vide.
4. Conservez la valeur par défaut wwwroot dans la zone Emplacement de l’artefact de l’application.

React

1. Sélectionnez React dans la liste déroulante Build Presets (Présélections de build).
2. Conservez la valeur par défaut dans la zone Emplacement de l’application.
3. Laissez la zone Emplacement de l’API vide.
4. Tapez build dans la zone Emplacement de l’artefact de l’application.

Vue

1. Sélectionnez Vue.js dans la liste déroulante Présélections de build.
2. Conservez la valeur par défaut dans la zone Emplacement de l’application.
3. Laissez la zone Emplacement de l’API vide.
4. Conservez la valeur par défaut dans la zone Emplacement de l’artefact de l’application.

Sélectionnez Revoir + créer.

Notes

Vous pouvez modifier le fichier de workflow pour changer ces valeurs après avoir créé l’application.

Sélectionnez Create (Créer).

Sélectionnez Accéder à la ressource.

Voir le site web

Le déploiement d’une application statique comporte deux aspects. Le premier crée les ressources Azure sous-jacentes qui composent votre application. Le second est un workflow qui génère et publie votre application.

Avant de pouvoir accéder à votre nouveau site statique, la build de déploiement doit d’abord finir de s’exécuter.

La fenêtre Vue d’ensemble de Static Web Apps présente des liens qui vous permettent d’interagir avec votre application web.

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

2. Une fois le flux de travail GitHub Actions terminé, vous pouvez sélectionner l'URL pour ouvrir le site web dans un nouvel onglet.

Une fois le flux de travail terminé, vous pouvez cliquer sur l’URL pour ouvrir le site web dans un nouvel onglet.

Nettoyer les ressources

Si vous ne prévoyez pas de continuer à utiliser cette application, vous pouvez supprimer l’instance Azure Static Web Apps en effectuant les étapes suivantes :

1. Ouvrez le Portail Azure.
2. Recherchez my-first-web-static-app dans la barre de recherche supérieure.
3. Sélectionnez le nom de l’application.
4. Sélectionnez Supprimer.
5. Sélectionnez Oui pour confirmer l’action de suppression (cette action peut prendre quelques minutes).

Étapes suivantes

Ajouter une API