Tutoriel : Publier un site VuePress dans Azure Static Web Apps en préversionTutorial: Publish a VuePress site to Azure Static Web Apps Preview

Cet article montre comment créer et déployer une application web VuePress dans Azure Static Web Apps.This article demonstrates how to create and deploy a VuePress web application to Azure 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.The final result is a new Azure Static Web Apps application with the associated GitHub Actions that give you control over how the app is built and published.

Dans ce tutoriel, vous allez apprendre à :In this tutorial, you learn how to:

  • Créer une application VuePressCreate a VuePress app
  • Configurer une application Azure Static Web AppsSetup an Azure Static Web Apps
  • Déployer l’application VuePress dans AzureDeploy the VuePress app to Azure

PrérequisPrerequisites

Créer une application VuePressCreate a VuePress App

Créer une application VuePress à partir de l’interface CLI :Create a VuePress app from the Command Line Interface (CLI):

  1. Créez un nouveau dossier pour l’application VuePress.Create a new folder for the VuePress app.

    mkdir static-site
    
  2. Ajoutez un fichier README.md.Add a README.md file the folder.

    echo '# Hello From VuePress' > README.md
    
  3. Initialisez le fichier package.json.Initialize the package.json file.

    npm init -y
    
  4. Ajoutez VuePress en tant que devDependency.Add VuePress as a devDependency.

    npm install --save-dev vuepress
    
  5. Ouvrez le fichier package.json dans un éditeur de texte et ajoutez une commande de génération à la section scripts.Open the package.json file in a text editor and add a build command to the scripts section.

    ...
    "scripts": {
        "build": "vuepress build"
    }
    ...
    
  6. Créez un fichier .gitignore pour exclure le dossier node_modules.Create a .gitignore file to exclude the node_modules folder.

    echo 'node_modules' > .gitignore
    
  7. Initialisez un dépôt Git.Initialize a Git repo.

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

Transmettre votre application à GitHubPush your application to GitHub

Vous devez avoir un référentiel sur GitHub pour vous connecter à Azure Static Web Apps.You need a repository on GitHub to connect to Azure Static Web Apps. Les étapes suivantes vous montrent comment créer un référentiel pour votre site.The following steps show you how to create a repository for your site.

  1. Créez un référentiel GitHub (ne créez pas de fichier README) sur https://github.com/new appelé vuepress-static-app.Create a blank GitHub repo (don't create a README) from https://github.com/new named vuepress-static-app.

  2. Ajoutez le référentiel GitHub en tant que référentiel distant pour votre référentiel local.Add the GitHub repository as a remote to your local repo. Veillez à remplacer l’espace réservé <YOUR_USER_NAME> par votre nom d’utilisateur GitHub dans la commande suivante.Make sure to add your GitHub username in place of the <YOUR_USER_NAME> placeholder in the following command.

    git remote add origin https://github.com/<YOUR_USER_NAME>/vuepress-static-app
    
  3. Transmettez votre référentiel local à GitHub.Push your local repo up to GitHub.

    git push --set-upstream origin main
    

Déployez votre application webDeploy your web app

Les étapes suivantes vous montrent comment créer une nouvelle application Static Web Apps et la déployer dans un environnement de production.The following steps show you how to create a new Static Web Apps application and deploy it to a production environment.

Création de l'applicationCreate the application

  1. Accéder au portail AzureNavigate to the Azure portal

  2. Cliquez sur Create a Resource (Créer une ressource).Click Create a Resource

  3. Recherchez Static Web Apps.Search for Static Web Apps

  4. Cliquez sur Static Web Apps (Preview) (Static Web Apps (préversion))Click Static Web Apps (Preview)

  5. Cliquez sur CréerClick Create

    Création d’une application Static Web Apps (préversion) dans le portail

  6. Pour Abonnement, acceptez l’abonnement qui est listé ou sélectionnez-en un nouveau dans la liste déroulante.For Subscription, accept the subscription that is listed or select a new one from the drop-down list.

  7. Dans Groupe de ressources, sélectionnez Nouveau.In Resource group, select New. Dans Nom du nouveau groupe de ressources, entrez vuepress-static-app, puis sélectionnez OK.In New resource group name, enter vuepress-static-app and select OK.

  8. Ensuite, entrez un nom pour votre application dans la zone Nom.Next, a name for your app in the Name box. Les caractères valides sont a-z, A-Z, 0-9 et -.Valid characters include a-z, A-Z, 0-9 and -.

  9. Dans Region (Région), sélectionnez une région disponible proche de vous.For Region, select an available region close to you.

  10. Pour SKU, sélectionnez Free (Gratuit).For SKU, select Free.

    Champs renseignés

  11. Cliquez sur le bouton Sign in with GitHub (Se connecter avec GitHub).Click the Sign in with GitHub button.

  12. Sélectionnez l’organisation sous laquelle vous avez créé le référentiel.Select the Organization under which you created the repo.

  13. Sélectionnez vuepress-static-app comme référentiel .Select the vuepress-static-app as the Repository .

  14. Comme Branche, sélectionnez main.For the Branch select main.

    Champs GitHub renseignés

BuildBuild

Vous ajoutez ensuite les paramètres de configuration utilisés par le processus de génération pour générer votre application.Next, you add configuration settings that the build process uses to build your app. Les paramètres suivants configurent le fichier de workflow d’action GitHub.The following settings configure the GitHub Action workflow file.

  1. Cliquez sur le bouton Next: Build > (Suivant : générer >) pour modifier la configuration de la génération.Click the Next: Build > button to edit the build configuration

  2. Définissez Emplacement de l’application sur / .Set App location to /.

  3. Définissez Emplacement de l’artefact de l’application sur .vuepress/dist.Set App artifact location to .vuepress/dist.

Il n’est pas nécessaire de fournir une valeur pour Emplacement de l’API puisque vous ne déployez pas d’API pour le moment.A value for API location isn't necessary as you aren't deploying an API at the moment.

Paramètres de génération

Examiner et créerReview and create

  1. Pour vérifier que les informations sont correctes, cliquez sur le bouton Review + Create (Vérifier + créer).Click the Review + Create button to verify the details are all correct.

  2. Cliquez sur Créer pour commencer la création de l’application Azure Static Web Apps et approvisionner une action GitHub pour le déploiement.Click Create to start the creation of the Azure Static Web Apps and provision a GitHub Action for deployment.

  3. Une fois le déploiement terminé, cliquez sur Accéder à la ressource.Once the deployment completes click, Go to resource.

  4. Sur l’écran de la ressource, cliquez sur le lien URL pour ouvrir l’application que vous avez déployée.On the resource screen, click the URL link to open your deployed application. Vous devrez peut-être patienter une ou deux minutes, le temps que l’action GitHub soit terminée.You may need to wait a minute or two for the GitHub Action to complete.

    Application déployée

Nettoyer les ressourcesClean up resources

Si vous n’envisagez pas de continuer à utiliser cette application, vous pouvez supprimer la ressource Azure Static Web App en procédant comme suit :If you're not going to continue to use this application, you can delete the Azure Static Web App resource through the following steps:

  1. Ouvrez le portail AzureOpen the Azure portal
  2. Dans la barre de recherche supérieure, recherchez le nom que vous avez fourni précédemment pour votre application.In the top search bar, search for your application by the name you provided earlier
  3. Cliquez sur l’application.Click on the app
  4. Cliquez sur le bouton Supprimer.Click on the Delete button
  5. Cliquez sur Yes (Oui) pour confirmer la suppression.Click Yes to confirm the delete action

Étapes suivantesNext steps