Tutorial: Publicación de un sitio de VuePress en Azure Static Web Apps

En este artículo se muestra cómo crear e implementar una aplicación web de VuePress en Azure Static Web Apps. El resultado final es una nueva aplicación de Azure Static Web Apps, con las Acciones de GitHub asociadas, que le da control sobre cómo se compila y publica la aplicación.

En este tutorial, aprenderá a:

  • Crear una aplicación de VuePress
  • Configurar Azure Static Web Apps
  • Implementar la aplicación de VuePress en Azure

Requisitos previos

Creación de una aplicación de VuePress

Cree una aplicación de VuePress desde la interfaz de la línea de comandos (CLI):

  1. Cree una carpeta para la aplicación de VuePress.

    mkdir static-site
    
  2. Agregue un archivo README.md a la carpeta.

    echo '# Hello From VuePress' > README.md
    
  3. Inicialice el archivo package.json.

    npm init -y
    
  4. Agregue VuePress como devDependency.

    npm install --save-dev vuepress
    
  5. Abra el archivo package.json en un editor de texto y agregue un comando de compilación a la sección scripts.

    ...
    "scripts": {
        "build": "vuepress build"
    }
    ...
    
  6. Cree un archivo .gitignore para excluir la carpeta node_modules.

    echo 'node_modules' > .gitignore
    
  7. Inicialice un repositorio de Git.

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

Inserción de la aplicación en GitHub

Necesita un repositorio en GitHub para conectarse a Azure Static Web Apps. En los pasos siguientes se muestra cómo crear un repositorio para el sitio.

  1. Cree un repositorio de GitHub en blanco (no cree un archivo Léame) desde https://github.com/new, denominado vuepress-static-app.

  2. Agregue el repositorio de GitHub como remoto al repositorio local. Asegúrese de agregar el nombre de usuario de GitHub en lugar del marcador de posición <YOUR_USER_NAME> en el comando siguiente.

    git remote add origin https://github.com/<YOUR_USER_NAME>/vuepress-static-app
    
  3. Inserte el repositorio local en GitHub.

    git push --set-upstream origin main
    

Implementación de la aplicación web

En los pasos siguientes se muestra cómo crear una aplicación de sitio estática e implementarla en un entorno de producción.

Creación de la aplicación

  1. Vaya a Azure Portal.

  2. Seleccione Crear un recurso

  3. Busque Static Web Apps.

  4. Seleccione Static Web Apps.

  5. Seleccione Crear

  6. En la pestaña Datos básicos, especifique los valores siguientes.

    Propiedad Valor
    Suscripción El nombre de la suscripción de Azure.
    Grupos de recursos my-vuepress-group
    Nombre vuepress-static-app
    Tipo de plan Gratis
    Región para la API y los entornos de ensayo de Azure Functions Seleccione la región más cercana a la suya.
    Origen GitHub
  7. Seleccione Iniciar sesión con GitHub y autentíquese con GitHub.

  8. Escriba los siguientes valores de GitHub.

    Propiedad Valor
    Organización Seleccione la organización de GitHub que quiera.
    Repositorio Seleccione vuepress-static-app.
    Rama Seleccione main (principal).
  9. En la sección Detalles de la compilación, seleccione VuePress en la lista desplegable Valores preestablecidos de compilación y conserve los valores predeterminados.

Revisar y crear

  1. Seleccione el botón Revisar y crear para comprobar que todos los detalles sean correctos.

  2. Seleccione Crear para comenzar la creación de la aplicación web estática de App Service y aprovisionar una Acción de GitHub para la implementación.

  3. Cuando se complete la implementación, haga clic en Ir al recurso.

  4. En la pantalla del recurso, haga clic en el vínculo Dirección URL para abrir la aplicación implementada. Es posible que tenga que esperar uno o dos minutos para que se complete la Acción de GitHub.

    Aplicación implementada

Limpieza de recursos

Si no va a seguir usando esta aplicación, puede eliminar el recurso de Azure Static Web Apps mediante los siguientes pasos:

  1. Abra Azure Portal.
  2. En la barra de búsqueda superior, busque la aplicación por el nombre que indicó anteriormente.
  3. Haga clic en la aplicación.
  4. Haga clic en el botón Eliminar.
  5. Haga clic en para confirmar la acción de eliminación.

Pasos siguientes