Comment déployer Web App Azure Portal 2026

Introduction

Azure Portal est l'interface web unifiée de Microsoft Azure pour gérer toutes vos ressources cloud : des machines virtuelles aux applications serverless. En 2026, avec l'essor de l'IA et des workloads hybrides, maîtriser le Portal est essentiel pour les développeurs intermédiaires. Pourquoi ce tutoriel ? Contrairement aux approches purement CLI, le Portal offre une visualisation intuitive des coûts, monitoring et topologies, tout en s'intégrant parfaitement à des scripts pour l'automatisation.

Nous allons déployer une Web App sur App Service : un service PaaS scalable, gérant automatiquement SSL, scaling et CI/CD. Vous apprendrez à créer un Resource Group, un App Service Plan, déployer du code Node.js via ZIP, configurer un domaine custom et monitorer. Chaque étape combine Portal (pour la découverte) et code (CLI/PowerShell/ARM) pour une approche hybride professionnelle.

Avantages concrets : réduction de 50% du temps de setup vs. pure CLI, détection visuelle d'erreurs, export de templates réutilisables. À la fin, vous aurez une app live, scalable à 100 instances, avec logs en temps réel. Prêt à scaler vos apps en production ? (128 mots)

Prérequis

Compte Azure actif (créez-en un gratuit sur portal.azure.com)
Azure CLI 2.65+ installé (az --version pour vérifier)
PowerShell 7+ avec module Az (Install-Module -Name Az)
Node.js 20+ et un projet simple (ex: Express 'Hello World')
Éditeur comme VS Code avec extension Azure
Budget test : ~1€ pour 1h de run

Connexion à Azure CLI

terminal

# az login ouvre le navigateur pour authentification
az login

# Vérifier les abonnements
az account list --output table

# Définir l'abonnement par défaut (remplacez par votre ID)
SUBSCRIPTION_ID="votre-subscription-id-ici"
az account set --subscription $SUBSCRIPTION_ID

# Vérifier la région disponible (ex: francecentral)
az account list-locations --query "[].{Name:name, DisplayName:displayName}" --output table | grep -i france

Ce script initie la session Azure CLI via OAuth browser-based, liste les abonnements et en sélectionne un. Utilisez-le avant toute opération pour éviter les erreurs 'authentication required'. Piège : si multi-comptes, toujours set l'abonnement pour cibler les ressources correctement.

Étape 1 : Créer un Resource Group via Portal et CLI

Dans Azure Portal, naviguez vers Resource groups > Create. Choisissez un nom unique comme 'rg-webapp-demo', région 'France Central' pour faible latence EU, et tags {'Environment':'Prod', 'Project':'Demo'}. Cliquez Review + Create.

Analogie : Un Resource Group est comme un dossier projet : il scope les coûts, RBAC et lifecycle. Via Portal, visualisez instantanément la map de ressources.

Reproduisez en CLI pour automation CI/CD. Après création Portal, vérifiez : az group list --output table.

Créer le Resource Group en CLI

create-rg.sh

#!/bin/bash
RG_NAME="rg-webapp-demo"
LOCATION="francecentral"

# Créer le RG avec tags
az group create \
  --name $RG_NAME \
  --location $LOCATION \
  --tags Environment=Prod Project=Demo Owner=votre-email@domaine.com

# Vérifier
az group show --name $RG_NAME --query "{name:name, location:location, tags:tags}" --output table

Ce script bash crée un RG avec tags pour gouvernance (coûts, audits). Les tags sont obligatoires en prod pour compliance. Piège : noms uniques globalement (pas de reuse), et location impacte latence/prix – francecentral optimise pour EU.

Équivalent PowerShell pour Resource Group

create-rg.ps1

# Connexion PowerShell
Connect-AzAccount

$rgName = "rg-webapp-demo"
$location = "francecentral"

# Créer RG
New-AzResourceGroup -Name $rgName -Location $location -Tag @{Environment="Prod"; Project="Demo"; Owner="votre-email@domaine.com"}

# Vérifier
Get-AzResourceGroup -Name $rgName | Format-List Name,Location,Tags

PowerShell offre un contrôle fin pour Windows admins. Connect-AzAccount est interactif comme az login. Avantage : pipelines Azure DevOps natifs. Évitez : oublier Update-AzConfig -DefaultSubscriptionForLogin your-sub-id pour sessions persistantes.

Étape 2 : Provisionner App Service Plan

App Service Plan définit le SKU (pricing/taille). Dans Portal : Create a resource > Web App > Basics > App Service Plan > Create new (S1 Standard pour scaling auto). Analogie : C'est le 'moteur' sous votre app, facturé à l'heure.

Choisissez Always On pour cold starts zéro. Portal montre estimateur coûts en temps réel – crucial pour budgets.

Automatisez ensuite.

Créer App Service Plan en CLI

create-plan.sh

#!/bin/bash
RG_NAME="rg-webapp-demo"
PLAN_NAME="asp-webapp-demo"
LOCATION="francecentral"

# Créer plan Standard S1 (2 CPU, 3.5GB, scaling horizontal)
az appservice plan create \
  --name $PLAN_NAME \
  --resource-group $RG_NAME \
  --location $LOCATION \
  --sku S1 \
  --is-linux

# Vérifier
az appservice plan list --resource-group $RG_NAME --query "[?name=='$PLAN_NAME'].{name:name, sku:sku, workerSize:workerSize}" --output table

SKU S1 supporte slots de déploiement et auto-scale. --is-linux pour Node.js/PHP/Python. Piège : Free/Shared ne scale pas – upgradez tôt. Vérifiez az appservice plan show pour status provisioning (5-10min).

Créer la Web App en CLI

create-webapp.sh

#!/bin/bash
RG_NAME="rg-webapp-demo"
PLAN_NAME="asp-webapp-demo"
WEBAPP_NAME="webapp-demo-$(date +%s)"  # Nom unique
RUNTIME="NODE|20-lts"

# Créer Web App
az webapp create \
  --resource-group $RG_NAME \
  --plan $PLAN_NAME \
  --name $WEBAPP_NAME \
  --runtime "$RUNTIME" \
  --deployment-local-git

# Config HTTPS only
az webapp update --resource-group $RG_NAME --name $WEBAPP_NAME --https-only true

# URL de test
az webapp show --resource-group $RG_NAME --name $WEBAPP_NAME --query defaultHostName --output tsv

Crée l'app liée au plan, avec runtime Node 20. deployment-local-git active Git deploy. HTTPS-only protège en prod. Piège : noms Web App globaux uniques – ajoutez timestamp. Testez l'URL générée dans navigateur.

Étape 3 : Déployer le code et configurer

Préparez un projet Node simple : npm init -y; npm i express; echo 'app.get("/",(req,res)=>res.send("Hello Azure!")); app.listen(8080);' > app.js; node app.js.

Dans Portal : Deployment Center > Source: Local Git ou ZIP Deploy. Pour prod, intégrez GitHub Actions.

Scaling : Portal > Scale out (up to 100 instances). Activez Application Insights pour traces.

Automatisez le deploy.

Déployer via ZIP en CLI

deploy-zip.sh

#!/bin/bash
RG_NAME="rg-webapp-demo"
WEBAPP_NAME="webapp-demo-votre-nom-unique"
ZIP_FILE="./dist.zip"  # Créez-le: zip -r dist.zip . -x "node_modules/*"

# Deploy ZIP (override complet)
az webapp deployment source config-zip \
  --resource-group $RG_NAME \
  --name $WEBAPP_NAME \
  --src $ZIP_FILE

# Restart et logs
az webapp restart --resource-group $RG_NAME --name $WEBAPP_NAME
az webapp log tail --resource-group $RG_NAME --name $WEBAPP_NAME

ZIP deploy est idéal pour CI/CD (GitHub Actions/Azure Pipelines). Tail logs en temps réel pour debug. Piège : oubliez process.env.PORT dans Node (Azure force 80/443). Restart force hot-reload.

Template ARM JSON exporté du Portal

webapp-arm.json

{
  "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#",
  "contentVersion": "1.0.0.0",
  "parameters": {
    "webAppName": {
      "type": "string",
      "defaultValue": "webapp-demo"
    }
  },
  "resources": [
    {
      "type": "Microsoft.Web/serverfarms",
      "apiVersion": "2022-03-01",
      "name": "asp-webapp-demo",
      "location": "francecentral",
      "sku": {
        "name": "S1",
        "tier": "Standard"
      }
    },
    {
      "type": "Microsoft.Web/sites",
      "apiVersion": "2022-03-01",
      "name": "[parameters('webAppName')]
      "location": "francecentral",
      "properties": {
        "serverFarmId": "[resourceId('Microsoft.Web/serverfarms', 'asp-webapp-demo')]",
        "siteConfig": {
          "appSettings": [
            {
              "name": "WEBSITE_NODE_DEFAULT_VERSION",
              "value": "~20"
            }
          ]
        }
      }
    }
  ]
}

Exportez du Portal (Resource > Export template) pour IaC. Déployez via az deployment group create --resource-group rg-webapp-demo --template-file webapp-arm.json. Paramètres pour réutilisabilité. Piège : versions apiVersion obsolètes causent échecs – utilisez 2022+.

Bonnes pratiques

Tags systématiques : Tous resources taggés (Env, CostCenter, Owner) pour billing Azure Cost Management.
RBAC minimal : Assignez Contributor au RG, pas Owner global (Portal > Access control IAM).
Monitoring activé : Application Insights + Alerts sur CPU>80%, échecs 5xx.
Slots de staging : Créez 'staging' slot pour zero-downtime deploys (Portal > Deployment slots).
Diagnostics avancés : Activez Failed Request Tracing et Detailed Error pour prod.

Erreurs courantes à éviter

Nom non-unique : Web App noms globaux – ajoutez UUID ou timestamp, sinon 'NameUnavailable'.
Région mismatch : RG et ressources doivent matcher location, ou erreur deployment.
Cold starts : Oubliez Always On sur Basic SKU gratuit – app dort après 20min inactif.
Logs non-tail : Debug sans log tail ou Portal Logs – assumez succès prématuré.

Pour aller plus loin

Approfondissez avec Azure Bicep (successeur ARM) ou Terraform. Intégrez Azure Front Door pour CDN/global routing.

Ressources :

Découvrez nos formations Learni sur Azure DevOps pour CI/CD avancés et certification AZ-204.

Comment déployer une Web App sur Azure Portal en 2026