Tutoriel : Publier un site VuePress dans Azure Static Web Apps

Article
01/10/2024

Cet article montre comment créer et déployer une application web VuePress dans Azure Static Web Apps. Le résultat est une nouvelle application Azure Static Web Apps avec les actions GitHub associées qui vous permettent de contrôler la manière dont l’application est générée et publiée.

Dans ce tutoriel, vous allez apprendre à :

Créer une application VuePress
Configurer une application Azure Static Web Apps
Déployer l’application VuePress dans Azure

Prérequis

Compte Azure avec un abonnement actif. Si vous n’en avez pas, vous pouvez créer un compte gratuitement.
Un compte GitHub. Si vous n’en avez pas, vous pouvez créer un compte gratuitement.
Une installation Git. Si vous n’en avez pas, vous pouvez Installer Git.
Node.js (déjà installé).

Créer une application VuePress

Créer une application VuePress à partir de l’interface CLI :

Créez un nouveau dossier pour l’application VuePress.
```
mkdir static-site
```

Ajoutez un fichier README.md.

echo '# Hello From VuePress' > README.md

Initialisez le fichier package.json.
```
npm init -y
```
Ajoutez VuePress en tant que devDependency.
```
npm install --save-dev vuepress
```
Ouvrez le fichier package.json dans un éditeur de texte et ajoutez une commande de génération à la section scripts.
```
...
"scripts": {
    "build": "vuepress build"
}
...
```
Créez un fichier .gitignore pour exclure le dossier node_modules.
```
echo 'node_modules' > .gitignore
```

Initialisez un dépôt Git.

 git init
 git add -A
 git commit -m "initial commit"

Transmettre votre application à GitHub

Vous devez avoir un référentiel sur GitHub pour vous connecter à Azure Static Web Apps. Les étapes suivantes vous montrent comment créer un référentiel pour votre site.

Créez un dépôt GitHub vide (ne créez pas de fichier README) à partir du https://github.com/new nommé vuepress-static-app.
Ajoutez le référentiel GitHub en tant que référentiel distant pour votre référentiel local. Veillez à remplacer l’espace réservé <YOUR_USER_NAME> par votre nom d’utilisateur GitHub dans la commande suivante.
```
git remote add origin https://github.com/<YOUR_USER_NAME>/vuepress-static-app
```
Transmettez votre référentiel local à GitHub.
```
git push --set-upstream origin main
```

Déployez votre application web

Les étapes suivantes vous montrent comment créer une application Static Web Apps et la déployer dans un environnement de production.

Création de l'application

Accédez au Portail Azure.
Sélectionnez Créer une ressource
Recherchez Applications web statiques
Sélectionnez Static Web Apps
Sélectionnez Créer

Sous l’onglet Informations de base, entrez les valeurs suivantes.

Propriété	Valeur
Abonnement	Le nom de votre abonnement Azure.
Groupe de ressources	my-vuepress-group
Nom	vuepress-static-app
Type de plan	Gratuit
Région de l’API Azure Functions et des environnements intermédiaires	Sélectionnez la région la plus proche de vous.
Source	GitHub

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

Entrez les valeurs GitHub suivantes.

Propriété	Valeur
Organisation	Sélectionnez l’organisation GitHub de votre choix.
Dépôt	Sélectionnez vuepress-static-app.
Branche	Sélectionnez principal.

Notes

En l’absence de dépôt, il peut être nécessaire d’autoriser Azure Static Web Apps sur 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. Pour les dépôts de l’organisation, vous devez être propriétaire de l’organisation pour accorder des autorisations.

Dans la section Détails de build, sélectionnez VuePress dans la liste déroulante Présélections de build et conservez les valeurs par défaut.

Examiner et créer

Sélectionnez Vérifier + créer pour vérifier que les informations sont correctes.
Pour démarrer la création de l’application web statique App Service et le provisionnement d’un GitHub Actions pour le déploiement, sélectionnez Créer.
Une fois le déploiement terminé, sélectionnez Accéder à la ressource.
Dans l’écran de la ressource, sélectionnez le lien URL pour ouvrir l’application que vous avez déployée. Vous devrez peut-être patienter une ou deux minutes, le temps que GitHub Actions soit terminé.

Nettoyer les ressources

Si vous n’envisagez pas de continuer à utiliser cette application, vous pouvez supprimer la ressource Azure Static Web App en procédant comme suit :

Ouvrez le portail Azure
Dans la barre de recherche supérieure, recherchez le nom que vous avez fourni précédemment pour votre application.
Cliquez sur l’application.
Cliquez sur le bouton Supprimer.
Cliquez sur Oui pour confirmer l’action de suppression.

Étapes suivantes

Ajouter un domaine personnalisé

Partage via