Partager via

Déployer votre application web sur Azure Static Web Apps

  • Article

Dans cet article, vous allez créer une application web avec l’infrastructure de votre choix, l’exécuter localement, puis la déployer sur Azure Static Web Apps.

Prérequis

Pour terminer ce tutoriel, vous avez besoin de ce qui suit :

Ressource Description
Abonnement Azure Si vous n’en avez pas, vous pouvez créer un compte gratuitement.
Node.JS Installez la version 20.0 ou une version ultérieure.
Azure CLI Installez la version 2.6x ou une version ultérieure.

Vous avez également besoin d’un éditeur de texte. Visual Studio Code est recommandé pour l’utilisation d’Azure.

Vous pouvez exécuter l’application que vous créez dans cet article sur la plateforme de votre choix, notamment : Linux, macOS, Windows ou Sous-système Windows pour Linux.

Créer votre application web

  1. Ouvrez une fenêtre de terminal.

  1. Sélectionnez un répertoire approprié pour votre code, puis exécutez les commandes suivantes.

    npm create vite@latest swa-vanilla-demo -- --template=vanilla
cd swa-vanilla-demo
npm install
npm run dev

    Lorsque vous exécutez ces commandes, le serveur de développement imprime l’URL de votre site web. Sélectionnez le lien pour l’ouvrir dans le navigateur par défaut.

    Capture d’écran de l’application web vanilla générée.

  1. Sélectionnez un répertoire approprié pour votre code, puis exécutez les commandes suivantes.

    npx --package @angular/cli@latest ng new swa-angular-demo --ssr=false --defaults
cd swa-angular-demo
npm start

    Lorsque vous exécutez ces commandes, le serveur de développement imprime l’URL de votre site web. Sélectionnez le lien pour l’ouvrir dans le navigateur par défaut.

    Capture d’écran de l’application web angular générée.

  1. Sélectionnez un répertoire approprié pour votre code, puis exécutez les commandes suivantes.

    npm create vite@latest swa-react-demo -- --template react
cd swa-react-demo
npm install
npm run dev

    Lorsque vous exécutez ces commandes, le serveur de développement imprime l’URL de votre site web. Sélectionnez le lien pour l’ouvrir dans le navigateur par défaut.

    Capture d’écran de l’application web react générée.

  1. Sélectionnez un répertoire approprié pour votre code, puis exécutez les commandes suivantes.

    npm create vite@latest swa-vue-demo -- --template vue
cd swa-vue-demo
npm install
npm run dev

    Lorsque vous exécutez ces commandes, le serveur de développement imprime l’URL de votre site web. Sélectionnez le lien pour l’ouvrir dans le navigateur par défaut.

    Capture d’écran de l’application web Vue générée.

  1. Sélectionnez Cmd/Ctrl+C pour arrêter le serveur de développement.

Créer une application web statique sur Azure

Vous pouvez créer une application web statique en utilisant le Portail Azure, Azure CLI, Azure PowerShell ou Visual Studio Code (avec l’extension Azure Static Web Apps). Ce didacticiel utilise Azure CLI.

  1. Connectez-vous à Azure CLI :

    az login

    Par défaut, cette commande ouvre un navigateur pour terminer le processus. Azure CLI prend en charge différentes méthodes de connexion si cette méthode ne fonctionne pas dans votre environnement.

  2. Si vous avez plusieurs abonnements, vous devez en sélectionner un. Vous pouvez afficher votre abonnement actuel à l’aide de la commande suivante :

    az account show

    Pour sélectionner un abonnement, vous pouvez exécuter la commande az account set.

    az account set --subscription "<SUBSCRIPTION_NAME_OR_ID>"

  3. Créez un groupe de ressources.

    Les groupes de ressources sont utilisés pour regrouper ensemble des ressources Azure.

    az group create -n swa-tutorial -l centralus --query "properties.provisioningState"

    Le paramètre -n désigne le nom du site, et le paramètre -l est le nom de l’emplacement Azure. Comme la commande se termine par --query "properties.provisioningState", elle retourne uniquement un message de réussite ou d’erreur.

  4. Créez une application web statique dans le groupe de ressources nouvellement créé.

    az staticwebapp create -n swa-demo-site -g swa-tutorial --query "defaultHostname"

    Le paramètre -n fait référence au nom du site, et le paramètre -g fait référence au nom du groupe de ressources Azure. Veillez à spécifier le nom du groupe de ressources que vous avez utilisé à l’étape précédente. Votre application web statique est distribuée globalement. L’emplacement n’est donc pas important pour la façon dont vous déployez votre application.

    La commande est configurée pour retourner l’URL de votre application web. Vous pouvez copier la valeur de la fenêtre de terminal dans le navigateur pour afficher votre application web déployée.

Configurez le déploiement.

  1. Ajoutez un fichier staticwebapp.config.json à votre code d’application avec le contenu suivant :

    {
    "navigationFallback": {
        "rewrite": "/index.html"
    }
}

    La définition d’un itinéraire de secours permet à votre site d’utiliser le fichier index.html pour toutes les demandes effectuées sur le domaine.

    Intégrez ce fichier dans votre système de contrôle de code source (par exemple, git) si vous en utilisez un.

  2. Installez l’interface CLI Azure Static Web Apps (SWA) dans votre projet.

    npm install -D @azure/static-web-apps-cli

    L’interface CLI SWA vous aide à développer et tester votre site localement avant de le déployer dans le cloud.

  3. Créez un fichier pour votre projet et nommez-le swa-cli.config.json.

    Le fichier swa-cli.config.json décrit comment générer et déployer votre site.

    Une fois ce fichier créé, vous pouvez générer son contenu à l’aide de la commande npx swa init.

    npx swa init --yes

  4. Générez votre application pour la distribution.

    npx swa build

  5. Utilisez l’interface CLI SWA pour vous connecter à Azure.

    npx swa login --resource-group swa-tutorial --app-name swa-demo-site

    Utilisez le nom du groupe de ressources et le nom de l’application web statique que vous avez créés dans la section précédente. Lorsque vous tentez de vous connecter, un navigateur s’ouvre pour terminer le processus si nécessaire.

Avertissement

L’application Angular v17 (et versions ultérieures) place les fichiers distribuables dans un sous-répertoire du chemin de sortie que vous pouvez choisir. L’interface CLI SWA ne connaît pas l’emplacement spécifique du répertoire. Les étapes suivantes vous montrent comment définir ce chemin d’accès.

Recherchez le fichier index.html généré dans votre projet dans le dossier dist/swa-angular-demo/browser.

  1. Définissez la variable d’environnement SWA_CLI_OUTPUT_LOCATION sur le répertoire contenant le fichier index.html :

    export SWA_CLI_OUTPUT_LOCATION="dist/swa-angular-demo/browser"

Déployer votre site sur Azure

Déployez le code dans votre application web statique :

npx swa deploy --env production

Le déploiement de l’application peut prendre quelques minutes. Une fois l’opération terminée, l’URL de votre site s’affiche.

Capture d’écran de la commande de déploiement.

Sur la plupart des systèmes, vous pouvez sélectionner l’URL du site pour l’ouvrir dans le navigateur par défaut.

Nettoyez les ressources (facultatif)

Si vous ne continuez pas avec les autres tutoriels, supprimez le groupe de ressources et les ressources Azure :

az group delete -n swa-tutorial

Quand vous supprimez un groupe de ressources, vous supprimez toutes les ressources qu’il contient. Vous ne pouvez pas annuler cette action.

Étapes suivantes

Ajout de l’authentification

Contenu connexe