One place for hosting & domains

      Cómo desarrollar un sitio web Drupal 9 en su equipo local usando Docker y DDEV


      El autor seleccionó la organización Diversity in Tech Fund para que reciba una donación como parte del programa Write for DOnations.

      Introducción

      DDEV es un herramienta de código abierto que utiliza Docker para crear entornos de desarrollo locales para muchos marcos PHP diferentes. Con el poder de la creación de contenedores, DDEV puede simplificar de forma significativa la forma en que trabaja en múltiples proyectos que utilizan múltiples pilas tecnológicas y múltiples servidores en la nube. DDEV incluye plantillas para WordPress, Laravel, Magento, TYPO3, Drupal y mucho más.

      Drupal 9 fue lanzado el 3 de junio del 2020 para la CMS Drupal. Conocido por su facilidad de uso y una enorme biblioteca de módulos y temas, Drupal es un marco PHP popular para crear y mantener varios sitios web y aplicaciones de todos los tamaños.

      En este tutorial, comenzará a desarrollar un sitio web Drupal 9 en su equipo local usando DDEV. Esto le permitirá crear su sitio web primero y, más tarde, cuando esté listo, implementar su proyecto en un servidor de producción.

      Requisitos previos

      Para completar este tutorial, necesitará lo siguiente:

      Nota: Es posible desarrollar Drupal 9 usando DDEV en un servidor remoto, pero necesitará una solución para acceder a localhost en un navegador web. El comando DDEV, ddev share funciona con ngrok, que crea un túnel seguro en su servidor para que usted y otras partes interesadas vean su sitio en desarrollo. Para uso personal, también podría instalar una GUI en su servidor remoto y acceder a su sitio en desarrollo a través de un navegador web dentro de esa interfaz. Para hacer esto, podría seguir nuestra guía sobre Cómo instalar y configurar VNC en Ubuntu 20.04. Para una solución de GUI aún más rápida, puede seguir nuestra guía sobre cómo configurar un escritorio remoto con X2Go en Ubuntu 20.04.

      Paso 1: Instalar DDEV

      En este paso instalará DDEV en su equipo local. La Opción 1 incluye instrucciones para macOS mientras que la Opción 2 proporciona instrucciones para Linux. Este tutorial se probó en DDEV versión 1.15.0.

      Opción 1: Instalar DDEV en macOS

      DDEV aconseja que los usuarios de macOS instalen su herramienta usando el administrador de paquetes Homebrew. Utilice el siguiente comando brew para instalar la versión estable más reciente:

      • brew tap drud/ddev && brew install drud/ddev/ddev

      Si prefiere la versión absolutamente más reciente, puede usar brew para instalar ddev-edge:

      • brew tap drud/ddev-edge && brew install drud/ddev-edge/ddev

      Si ya tiene una versión de DDEV instalada, o si alguna vez desea actualizar su versión, cierre DDEV y utilice brew para actualizar su instalación:

      • ddev poweroff
      • brew upgrade ddev

      Una vez que haya instalado o actualizado DDEV, ejecute ddev version para verificar su software:

      Verá un resultado similar a este:

      Output

      DDEV-Local version v1.15.0 commit v1.15.0 db drud/ddev-dbserver-mariadb-10.2:v1.15.0 dba phpmyadmin/phpmyadmin:5 ddev-ssh-agent drud/ddev-ssh-agent:v1.15.0 docker 19.03.8 docker-compose 1.25.5 os darwin router drud/ddev-router:v1.15.0 web drud/ddev-webserver:v1.15.0

      DDEV incluye una potente CLI o interfaz de línea de comandos. Ejecute ddev para obtener más información sobre algunos comandos comunes:

      Verá lo siguiente:

      Output

      Create and maintain a local web development environment. Docs: https://ddev.readthedocs.io Support: https://ddev.readthedocs.io/en/stable/#support Usage: ddev [command] Available Commands: auth A collection of authentication commands composer Executes a composer command within the web container config Create or modify a ddev project configuration in the current directory debug A collection of debugging commands delete Remove all project information (including database) for an existing project describe Get a detailed description of a running ddev project. exec Execute a shell command in the container for a service. Uses the web service by default. export-db Dump a database to a file or to stdout help Help about any command hostname Manage your hostfile entries. import-db Import a sql file into the project. import-files Pull the uploaded files directory of an existing project to the default public upload directory of your project. list List projects logs Get the logs from your running services. pause uses 'docker stop' to pause/stop the containers belonging to a project. poweroff Completely stop all projects and containers pull Pull files and database using a configured provider plugin. restart Restart a project or several projects. restore-snapshot Restore a project's database to the provided snapshot version. sequelpro This command is not available since sequel pro.app is not installed share Share project on the internet via ngrok. snapshot Create a database snapshot for one or more projects. ssh Starts a shell session in the container for a service. Uses web service by default. start Start a ddev project. stop Stop and remove the containers of a project. Does not lose or harm anything unless you add --remove-data. version print ddev version and component versions Flags: -h, --help help for ddev -j, --json-output If true, user-oriented output will be in JSON format. -v, --version version for ddev Use "ddev [command] --help" for more information about a command.

      Para obtener más información sobre cómo usar la CLI de DDEV, visite la documentación oficial de DDEV.

      Con DDEV instalado en su equipo local, ahora está listo para instalar Drupal 9 y comenzar a desarrollar un sitio web.

      Opción 2: Instalar DDEV en Linux

      En un sistema operativo Linux, puede instalar DDEV usando Homebrew para Linux o usando la secuencia de comandos de instalación oficial. En Ubuntu, comience actualizando su lista de paquetes en el administrador de paquetes apt (puede usar apt en Debian, de lo contrario utilice el administrador de paquetes equivalente asociado con su distribución Linux):

      Ahora instale algunos paquetes previos desde el repositorio oficial de Ubuntu:

      • sudo apt install build-essential apt-transport-https ca-certificates software-properties-common curl

      Estos paquetes le permitirán descargar la secuencia de comandos de instalación de DDEV desde su repositorio oficial GitHub.

      Ahora descargue la secuencia de comandos:

      • curl -O https://raw.githubusercontent.com/drud/ddev/master/scripts/install_ddev.sh

      Antes de ejecutar la secuencia de comandos, ábrala en nano o en su editor de texto preferido e inspeccione su contenido:

      nano install_ddev.sh
      

      Una vez que haya revisado el contenido de la secuencia de comandos y esté satisfecho, guarde y cierre el archivo. Ahora está listo para ejecutar la secuencia de comandos de instalación.

      Utilice el comando chmod para hacer que la secuencia de comandos sea ejecutable:

      Ahora ejecute la secuencia de comandos:

      Es posible que el proceso de instalación le pida que confirme algunos ajustes o que introduzca su contraseña sudo. Una vez completada la instalación, tendrá DDEV disponible en su sistema operativo Linux.

      Ejecute ddev version para verificar su software:

      Verá un resultado similar a este:

      Output

      DDEV-Local version v1.15.0 commit v1.15.0 db drud/ddev-dbserver-mariadb-10.2:v1.15.0 dba phpmyadmin/phpmyadmin:5 ddev-ssh-agent drud/ddev-ssh-agent:v1.15.0 docker 19.03.8 docker-compose 1.25.5 os linux router drud/ddev-router:v1.15.0 web drud/ddev-webserver:v1.15.0

      DDEV incluye una potente CLI o interfaz de línea de comandos. Ejecute ddev sin nada más para aprender sobre estos comandos comunes:

      Verá lo siguiente:

      Output

      Create and maintain a local web development environment. Docs: https://ddev.readthedocs.io Support: https://ddev.readthedocs.io/en/stable/#support Usage: ddev [command] Available Commands: auth A collection of authentication commands composer Executes a composer command within the web container config Create or modify a ddev project configuration in the current directory debug A collection of debugging commands delete Remove all project information (including database) for an existing project describe Get a detailed description of a running ddev project. exec Execute a shell command in the container for a service. Uses the web service by default. export-db Dump a database to a file or to stdout help Help about any command hostname Manage your hostfile entries. import-db Import a sql file into the project. import-files Pull the uploaded files directory of an existing project to the default public upload directory of your project. list List projects logs Get the logs from your running services. pause uses 'docker stop' to pause/stop the containers belonging to a project. poweroff Completely stop all projects and containers pull Pull files and database using a configured provider plugin. restart Restart a project or several projects. restore-snapshot Restore a project's database to the provided snapshot version. sequelpro This command is not available since sequel pro.app is not installed share Share project on the internet via ngrok. snapshot Create a database snapshot for one or more projects. ssh Starts a shell session in the container for a service. Uses web service by default. start Start a ddev project. stop Stop and remove the containers of a project. Does not lose or harm anything unless you add --remove-data. version print ddev version and component versions Flags: -h, --help help for ddev -j, --json-output If true, user-oriented output will be in JSON format. -v, --version version for ddev Use "ddev [command] --help" for more information about a command.

      Para obtener más información sobre cómo usar la CLI de DDEV, visite la documentación oficial de DDEV.

      Con DDEV instalado en su equipo local, ahora está listo para instalar Drupal 9 y comenzar a desarrollar un sitio web.

      Paso 2: Implementar un nuevo sitio Drupal 9 usando DDEV

      Con DDEV en ejecución, ahora lo usara para crear un sistema de archivos Drupal específico, instalar Drupal 9 e iniciar un proyecto de sitio web estándar.

      Primero, creará un directorio raíz del proyecto y luego entrará en él. Ejecutará todos los comandos restantes desde esta ubicación. Este tutorial usará d9test, pero puede llamar a su directorio de cualquier otra manera. Observe, sin embargo, que DDEV no gestiona bien los nombres con guion. Se considera una buena práctica evitar nombres de directorio como my-project o drupal-site-1.

      Cree el directorio raíz de su proyecto y entre en él:

      DDEV sobresale a la hora de crear árboles de directorio que coinciden con plataformas CMS específicas. Utilice el comando ddev config para crear una estructura de directorio específica para Drupal 9:

      • ddev config --project-type=drupal9 --docroot=web --create-docroot

      Verá un resultado similar a este:

      Output

      Creating a new ddev project config in the current directory (/Users/sammy/d9test) Once completed, your configuration will be written to /Users/sammy/d9test/.ddev/config.yaml Created docroot at /Users/sammy/d9test/web You have specified a project type of drupal9 but no project of that type is found in /Users/sammy/d9test/web Ensuring write permissions for d9new No settings.php file exists, creating one Existing settings.php file includes settings.ddev.php Configuration complete. You may now run 'ddev start'.

      Debido a que pasó --project-type=drupal9 a su comando ddev config, DDEV creó varios subdirectorios y archivos que representan la organización predeterminada para un sitio web Drupal. El árbol de directorio de su proyecto ahora tendrá este aspecto:

      A Drupal 9 directory tree

      .
      ├── .ddev
      │   ├── .gitignore
      │   ├── config.yaml
      │   ├── db-build
      │   │   └── Dockerfile.example
      │   └── web-build
      │       └── Dockerfile.example
      └── web
          └── sites
              └── default
                  ├── .gitignore
                  ├── settings.ddev.php
                  └── settings.php
      
      6 directories, 7 files
      

      .ddev/ será la carpeta principal para la configuración ddev. web/ será el docroot para su nuevo proyecto; contendrá varios archivos settings. específicos. Ahora tiene el andamio inicial para su nuevo proyecto Drupal.

      Su siguiente paso es iniciar su plataforma, que creará los contenedores necesarios y las configuraciones de red. DDEV vincula los puertos 80 y 443, de forma que, si está ejecutando un servidor web como Apache en su equipo, o cualquier otra cosa que utilice esos puertos, detenga esos servicios antes de continuar.

      Utilice el comando ddev start para iniciar su plataforma:

      Esto creará todos los contenedores basados en Docker para su proyecto, lo que incluye un contenedor web, un contenedor de base de datos y phpmyadmin. Cuando la inicialización se complete, verá un resultado similar a este (el número de su puerto podría ser diferente):

      Output

      ... Successfully started d9test Project can be reached at http://d9test.ddev.site http://127.0.0.1:32773

      Nota: Recuerde que DDEV está iniciando los contenedores Docker en segundo plano. Si desea ver esos contenedores o verificar que se estén ejecutando, siempre puede usar el comando docker ps:

      Junto con cualquier otro contenedor que esté ejecutando actualmente, encontrará cuatro nuevos contenedores, cada uno con una imagen diferente: php-myadmin, ddev-webserver, ddev-router y ddev-dbserver-mariadb.

      ddev start ha creado correctamente sus contenedores y le ha dado un resultado con dos URL. Aunque este resultado dice que “puede llegar a su proyecto en http://d9test.ddev.site y http://127.0.0.1:32773, visitar estas URL ahora provocará un error. Desde Drupal 8, el núcleo de Drupal y las dependencias similares a función de módulos contrib Por tanto, primero deberá terminar de instalar Drupal usando Composer, el administrador de paquetes para proyectos PHP antes de cargar nada en su navegador web.

      Una de las funciones más útiles y elegantes de DDEV es que puede pasar comandos Composer a través de la CLI de DDEV y en su entorno en contenedores. Esto significa que puede separar la configuración específica de su equipo de su entorno de desarrollo. Ya no tiene que administrar los diversos problemas de ruta de archivo, dependencia y versión que generalmente acompañan al desarrollo PHP local. Además, puede cambiar de contexto rápidamente entre múltiples proyectos usando diferentes marcos y pilas tecnologías con un esfuerzo mínimo.

      Utilice el comando ddev composer para descargar drupal/recommended-project. Esto descargará el núcleo de Drupal, sus bibliotecas y otros recursos relacionados y, luego, creará un proyecto predeterminado:

      • ddev composer create "drupal/recommended-project"

      Ahora descargue un componente final llamado Drush, o Drupal Shell. Este tutorial solo usará un comando drush, y este tutorial proporciona una alternativa, pero drush es una CLI potente para el desarrollo de Drupal que puede mejorar su eficiencia.

      Utilice ddev-composer para instalar drush:

      • ddev composer require "drush/drush"

      Ahora ha creado un proyecto Drupal 9 predeterminado y ha instalado drush. Ahora verá su proyecto en un navegador y configurará los ajustes de su sitio web.

      Paso 3: Configurar su proyecto Drupal 9

      Ahora que instaló Drupal 9 puede visitar su nuevo proyecto en su navegador. Para hacer esto, puede volver a ejecutar ddev start y copiar una de las dos URL que produce, o puede usar el siguiente comando, que abrirá su sitio automáticamente en una nueva ventana del navegador.

      Encontrará el asistente estándar de instalación de Drupal.

      Instalador de Drupal 9 desde navegador

      Aquí tiene dos opciones. Puede usar esta UI y seguir el asistente durante la instalación, o puede volver a su terminal y pasar un comando drush a través de ddev. Esta última opción automatizará el proceso de instalación y establecerá admin como su nombre de usuario y contraseña.

      Opción 1: Usar el asistente

      Vuelva al asistente en su navegador. Bajo Choose language (Seleccionar idioma), seleccione un idioma en el menú desplegable y haga clic en Save and continue (Guardar y continuar). Ahora seleccione un perfil de instalación. Puede elegir entre Standard (Estándar), Minimal (Mínima) y Demo. Seleccione la opción que desee y haga clic en Save and continue (Guardar y continuar). Drupal verificará automáticamente sus requisitos, configurará una base de datos e instalará su sitio. Su último paso es personalizar algunas configuraciones. Añada un nombre de sitio y una dirección de correo electrónico que termine en su dominio. A continuación, elija un nombre de usuario y una contraseña. Elija una contraseña segura y mantenga sus credenciales en algún lugar seguro. Por último, añada una dirección de correo electrónico privada que compruebe regularmente, complete los ajustes regionales y pulse Save and continue (Guardar y continuar).

      Mensaje de bienvenida de Drupal 9 con una advertencia sobre permisos

      Su nuevo sitio se cargará con un mensaje de bienvenida.

      Opción 2: Usar la línea de comandos

      Desde el directorio raíz de su proyecto, ejecute este comando ddev exec para instalar un sitio de Drupal predeterminado usando drush:

      • ddev exec drush site:install --account-name=admin --account-pass=admin

      Esto creará su sitio de la misma manera que el asistente lo hará pero con algunas configuraciones de texto estándar. Su nombre de usuario y contraseña serán admin.

      Ahora abra el sitio para verlo en su navegador:

      Ahora está listo para comenzar a crear su sitio web, pero se considera una buena práctica comprobar que sus permisos son correctos para el directorio /sites/web/default. Aunque está trabajando localmente, esto no es un problema significativo, pero si transfiere estos permisos a un servidor de producción, supondrán un riesgo de seguridad.

      Paso 4: Comprobar sus permisos

      Durante la instalación del asistente, o cuando se cargue por primera vez su página de bienvenida, es posible que vea una advertencia sobre los ajustes de los permisos en su directorio /sites/web/default y un archivo dentro de ese directorio: settings.php.

      Tras ejecutarse la secuencia de comandos de instalación, Drupal intentará configurar los permisos del directorio web/sites/default a read (lectura) y execute (ejecutar) para todos los grupos: este es un ajuste de permisos 555. También intentará configurar permisos para default/settings.php a solo lectura o 444. Si aparece esta advertencia, ejecute estos dos comandos chmod desde el directorio raíz de su proyecto. No hacerlo plantea un riesgo de seguridad:

      • chmod 555 web/sites/default
      • chmod 444 web/sites/default/settings.php

      Para verificar que tiene los permisos correctos, ejecute este comando ls con los conmutadores a, l, h y d:

      • ls -alhd web/sites/default web/sites/default/settings.php

      Compruebe que sus permisos coinciden con el siguiente resultado:

      Output

      dr-xr-xr-x 8 sammy staff 256 Jul 21 12:56 web/sites/default -r--r--r-- 1 sammy staff 249 Jul 21 12:12 web/sites/default/settings.php

      Ahora está listo para desarrollar un sitio web Drupal 9 en su equipo local.

      Paso 5: Crear su primera publicación en Drupal

      Para probar algunas de las funciones de Drupal, creará una publicación usando la IU de la web.

      Desde la página inicial de su sitio, haga clic en el botón Contenido en la parte izquierda del menú superior. Ahora haga clic en el botón azul add content (añadir contenido). Aparecerá una nueva página. Haga clic en Article (Artículo) y aparecerá otra página.

      Instrucción Crear artículo de Drupal 9

      Añada el título y el contenido que desee. Puede añadir una imagen también, como uno de los fondos de pantalla de DigitalOcean. Cuando esté listo, haga clic en el botón save (guardar) azul.

      Su primera publicación aparecerá en su sitio web.

      Drupal 9 creó una publicación

      Ahora está desarrollando un sitio web Drupal 9 en su equipo local sin interactuar con un servidor gracias a Docker y DDEV. En el siguiente paso, administrará el contenedor DDEV para acomodar su flujo de trabajo.

      Paso 6: Administrar el contenedor de DDEV

      Cuando haya terminado de desarrollar su proyecto o cuando desee tomarse un descanso, puede detener su contenedor DDEV sin preocuparse sobre la pérdida de datos. DDEV puede administrar el cambio rápido de contexto entre muchos proyectos, y esta es una de sus funciones más útiles. Su código y datos siempre se conservan en el directorio de su proyecto, incluso tras detener o eliminar el contenedor de DDEV.

      Para liberar recursos, puede detener DDEV en cualquier momento. Desde el directorio raíz de su proyecto, ejecute el siguiente comando:

      DDEV está disponible globalmente, de forma que puede ejecutar comandos ddev desde cualquier lugar, siempre que especifique el proyecto DDEV:

      También puede ver todos sus proyectos a la vez usando ddev list:

      DDEV incluye muchos otros comandos útiles.

      Puede reiniciar DDEV y continuar desarrollando localmente en cualquier momento.

      Conclusión

      En este tutorial, utilizó Docker y el poder de la creación de contenedores para desarrollar un sitio Drupal localmente con la ayuda de DDEV. DDEV también se integra bien con numerosos IDE, y ofrece depuración PHP integrada para Atom, PHPStorm y Visual Studio Code (vscode). Desde aquí, puede aprender más sobre crear entornos de desarrollo para Drupal con DDEV o desarrollar otros marcos PHP como WordPress.



      Source link

      Cómo extraer datos de un sitio web utilizando Node.js y Puppeteer


      El autor seleccionó Free and Open Source Fund para recibir una donación como parte del programa Write for DOnations.

      Introducción

      La extracción de datos de la web (web scraping) es un proceso que automatiza la recopilación de datos de Internet. En general, conlleva la implementación de un rastreador (crawler) que navega por la web de forma automática y extrae datos de páginas seleccionadas. Hay muchos motivos por los cuales se puede querer utilizar este proceso. El principal es que agiliza la recopilación en gran medida al eliminar el proceso manual de obtención de datos. La extracción de datos también es una buena solución cuando se quieren o deben obtener datos de un sitio web, pero este no proporciona una API.

      En este tutorial, creará una aplicación de extracción de datos web utilizando Node.js y Puppeteer. La complejidad de su aplicación irá aumentando a medida que avance. Primero, programará su aplicación para que abra Chromium y cargue un sitio web especial diseñado como espacio aislado para la extracción de datos web: books.toscrape.com. En los dos pasos siguientes, extraerá todos los libros de una sola página de books.toscrape y, luego, de varias. En los pasos restantes, filtrará la extracción por categoría de libros y, a continuación, guardará sus datos como archivo JSON.

      Advertencia: Los aspectos éticos y legales de la extracción de datos de la web son muy complejos y están en constante evolución. También difieren según la ubicación desde la que se realice, la ubicación de los datos y el sitio web en cuestión. En este tutorial, se extraen datos de un sitio web especial, books.toscrape.com, que está diseñado específicamente para probar aplicaciones de extracción de datos. La extracción de cualquier otro dominio queda fuera del alcance de este tutorial.

      Requisitos previos

      Con Node.js instalado, puede comenzar a configurar su extractor de datos web. Primero, creará un directorio root de un proyecto y, a continuación, instalará las dependencias requeridas. Este tutorial requiere una sola dependencia que instalará utilizando el administrador de paquetes predeterminado de Node.js npm. npm viene previamente instalado con Node.js, por lo tanto, no es necesario instalarlo.

      Cree una carpeta para este proyecto y posiciónese en ella:

      • mkdir book-scraper
      • cd book-scraper

      Ejecutará todos los comandos subsiguientes desde este directorio.

      Debemos instalar un paquete utilizando npm o el administrador de paquetes de Node. Primero, inicialice npm para crear un archivo packages.json que gestionará las dependencias y los metadatos de su proyecto.

      Inicialice npm para su proyecto:

      npm presentará una secuencia de solicitudes. Puede presionar ENTER en cada una de ellas o añadir descripciones personalizadas. Asegúrese de presionar ENTER y dejar los valores predeterminados en las solicitudes de entrypoint: y test command:. Alternativamente, puede pasar el indicador y a npm, npm init -y, para que complete todos los valores predeterminados de forma automática.

      El resultado tendrá un aspecto similar a este:

      Output

      { "name": "sammy_scraper", "version": "1.0.0", "description": "a web scraper", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "keywords": [], "author": "sammy the shark", "license": "ISC" } Is this OK? (yes) yes

      Escriba yes y presione ENTER. npm guardará este resultado como su archivo package.json.

      Ahora, utilice npm para instalar Puppeteer:

      • npm install --save puppeteer

      Este comando instala Puppeteer y una versión de Chromium que el equipo de Puppeteer sabe que funciona con su API.

      En equipos basados en Linux, Puppeteer podría requerir algunas dependencias adicionales.

      Si está utilizando Ubuntu 18.04, consulte el menú desplegable ‘Debian Dependencies’ (Dependencias de Debian) de la sección ‘Chrome headless doesn’t launch on UNIX’ (Chrome desatendido no se inicia en UNIX) en los documentos de resolución de problemas de Puppeteer. Puede utilizar el siguiente comando como ayuda para encontrar dependencias faltantes:

      Ahora que tiene npm, Puppeteer y todas las dependencias adicionales instaladas, su archivo package.json requiere un último ajuste para que pueda comenzar a programar. En este tutorial, iniciará su aplicación desde la línea de comandos con npm run start. Debe añadir cierta información sobre esta secuencia de comandos start en el archivo package.json. Específicamente, debe añadir una línea en la directiva scripts relativa a su comando start.

      Abra el archivo en su editor de texto preferido:

      Busque la sección scripts: y añada las siguientes configuraciones. Recuerde colocar una coma al final de la línea test de la secuencia de comandos; de lo contrario, su archivo no se analizará correctamente.

      Output

      { . . . "scripts": { "test": "echo "Error: no test specified" && exit 1", "start": "node index.js" }, . . . "dependencies": { "puppeteer": "^5.2.1" } }

      También notará que, ahora, aparece puppeteer debajo de dependencies casi al final del archivo. Su archivo package.json no requerirá más ajustes. Guarde sus cambios y cierre el editor.

      Con esto, está listo para comenzar a programar su extractor de datos. En el siguiente paso, configurará una instancia de navegador y probará la funcionalidad básica de su extractor de datos.

      Paso 2: Configurar una instancia de navegador

      Al abrir un navegador tradicional, entre otras cosas, puede hacer clic en botones, navegar con el mouse, escribir y abrir herramientas de desarrollo. Los navegadores desatendidos como Chromium permiten realizar estas mismas tareas, pero mediante programación y sin interfaz de usuario. En este paso, configurará la instancia de navegador de su extractor de datos. Cuando inicie su aplicación, esta abrirá Chromium y se dirigirá a books.toscrape.com de forma automática. Estas acciones iniciales constituirán la base de su programa.

      Su extractor de datos web requerirá cuatro archivos .js: browser.js, index.js, pageController.js y pageScraper.js. En este paso, creará estos cuatro archivos y los actualizará de forma continua a medida que su programa se vuelva más sofisticado. Comience con browser.js; este archivo contendrá la secuencia de comandos que inicia su navegador.

      Desde el directorio root de su proyecto, cree y abra browser.js en un editor de texto:

      Primero, solicitará Puppeteer con require y creará una función async denominada startBrowser(). Esta función iniciará el navegador y devolverá una instancia de él. Añada el siguiente código:

      ./book-scraper/browser.js

      const puppeteer = require('puppeteer');
      
      async function startBrowser(){
          let browser;
          try {
              console.log("Opening the browser......");
              browser = await puppeteer.launch({
                  headless: false,
                  args: ["--disable-setuid-sandbox"],
                  'ignoreHTTPSErrors': true
              });
          } catch (err) {
              console.log("Could not create a browser instance => : ", err);
          }
          return browser;
      }
      
      module.exports = {
          startBrowser
      };
      

      Puppeteer cuenta con un método .launch() que inicia una instancia de un navegador. Este método devuelve una promesa que debe asegurarse de que se resuelva utilizando un bloque .then o await.

      Utiliza await para asegurarse de que la promesa se resuelva, envuelve esta instancia en un bloque de código try-catch y, luego, devuelve una instancia del navegador.

      Tenga en cuenta que el método .launch() toma un parámetro JSON con varios valores:

      • headless: con el valor false, el navegador se ejecuta con una interfaz para que pueda ver la ejecución de su secuencia de comandos y, con true, se ejecuta en modo desatendido. Tenga en cuenta que si desea implementar su extractor de datos en la nube, debe establecer headless en true. La mayoría de los equipos virtuales se ejecutan en modo desatendido y no incluyen interfaz de usuario, por tanto, solo pueden ejecutar el navegador en ese modo. Puppeteer también incluye un modo headful, pero debe utilizarse únicamente para fines de prueba.
      • ignoreHTTPSErrors: con el valor true, le permite visitar sitios web que no están alojados con un protocolo HTTPS seguro e ignorar cualquier error relacionado con HTTPS.

      Guarde y cierre el archivo.

      Ahora, cree su segundo archivo .js, index.js:

      Aquí, utilizará require para solicitar browser.js y pageController.js. Luego, invocará la función startBrowser() y pasará la instancia de navegador creada a nuestro controlador de página, que dirigirá sus acciones. Añada el siguiente código:

      ./book-scraper/index.js

      const browserObject = require('./browser');
      const scraperController = require('./pageController');
      
      //Start the browser and create a browser instance
      let browserInstance = browserObject.startBrowser();
      
      // Pass the browser instance to the scraper controller
      scraperController(browserInstance)
      

      Guarde y cierre el archivo.

      Cree su tercer archivo .js, pageController.js:

      pageController.js controla el proceso de extracción de datos. Utiliza la instancia de navegador para controlar el archivo pageScraper.js, que es donde se ejecutan todas las secuencias de comandos de extracción de datos. Más adelante, lo utilizará para especificar de qué categoría de libros desea extraer datos. Sin embargo, por ahora, solo desea asegurarse de que puede abrir Chromium y navegar a una página web:

      ./book-scraper/pageController.js

      const pageScraper = require('./pageScraper');
      async function scrapeAll(browserInstance){
          let browser;
          try{
              browser = await browserInstance;
              await pageScraper.scraper(browser); 
      
          }
          catch(err){
              console.log("Could not resolve the browser instance => ", err);
          }
      }
      
      module.exports = (browserInstance) => scrapeAll(browserInstance)
      

      Este código exporta una función que toma la instancia de navegador y la pasa a otra función denominada scrapeAll(). Esta función, a su vez, pasa la instancia como argumento a pageScraper.scraper(), que la utiliza para extraer datos de las páginas.

      Guarde y cierre el archivo.

      Por último, cree su cuarto archivo .js, pageScraper.js:

      Aquí, creará un literal de objeto con una propiedad url y un método scraper(). La propiedad url es la URL de la página web de la que desea extraer datos y el método scraper() contiene el código que realizará la extracción en sí, aunque, en este punto, simplemente navega a una URL. Añada el siguiente código:

      ./book-scraper/pageScraper.js

      const scraperObject = {
          url: 'http://books.toscrape.com',
          async scraper(browser){
              let page = await browser.newPage();
              console.log(`Navigating to ${this.url}...`);
              await page.goto(this.url);
      
          }
      }
      
      module.exports = scraperObject;
      

      Puppeteer cuenta con un método newPage() que crea una instancia de página nueva en el navegador. Se pueden hacer varias cosas con las instancias de página. En nuestro método scraper(), creó una instancia de página y, luego, utilizó el método page.goto() para navegar a la página de inicio de books.toscrape.com.

      Guarde y cierre el archivo.

      Con esto, completó la estructura de archivos de su programa. El primer nivel del árbol de directorios de su proyecto tendrá este aspecto:

      Output

      . ├── browser.js ├── index.js ├── node_modules ├── package-lock.json ├── package.json ├── pageController.js └── pageScraper.js

      Ahora, ejecute el comando npm run start y observe la ejecución de su aplicación de extracción de datos:

      Abrirá una instancia de Chromium y una página nueva en el navegador, y se dirigirá a books.toscrape.com de forma automática.

      En este paso, creó una aplicación de Puppeteer que abre Chromium y carga la página de inicio de una librería en línea ficticia: books.toscrape.com. En el siguiente paso, extraerá datos de todos los libros de esa página de inicio.

      Antes de añadir más funcionalidades a su aplicación de extracción de datos, abra su navegador web preferido y diríjase de forma manual a la página de inicio de Books to Scrape. Navegue por el sitio para comprender cómo están estructurados los datos.

      Imagen del sitio web de Books to Scrape

      Verá una sección de categorías a la izquierda y los libros exhibidos a la derecha. Al hacer clic en un libro, el navegador se dirige a una nueva URL que muestra información pertinente sobre ese libro en particular.

      En este paso, replicará este comportamiento, pero mediante programación: automatizará la tarea de navegar por el sitio web y consumir sus datos.

      Primero, si analiza el código fuente de la página de inicio utilizando las herramienta de desarrollo de su navegador, notará que la página enumera los datos de cada libro debajo de una etiqueta section. Dentro de la etiqueta section, cada libro está debajo de una etiqueta list (li), y es aquí donde se encuentra el enlace a la página separada del libro, su precio y su disponibilidad.

      Vista del código fuente de books.to.scrape con herramientas de desarrollo

      Extraerá datos de estas URL de los libros, filtrará los libros que están disponibles y navegará a la página separada de cada libro para extraer sus datos.

      Vuelva a abrir su archivo pageScraper.js:

      Añada el siguiente contenido resaltado: Anidará otro bloque de await dentro de await page.goto(this.url);:

      ./book-scraper/pageScraper.js

      
      const scraperObject = {
          url: 'http://books.toscrape.com',
          async scraper(browser){
              let page = await browser.newPage();
              console.log(`Navigating to ${this.url}...`);
              // Navigate to the selected page
              await page.goto(this.url);
              // Wait for the required DOM to be rendered
              await page.waitForSelector('.page_inner');
              // Get the link to all the required books
              let urls = await page.$$eval('section ol > li', links => {
                  // Make sure the book to be scraped is in stock
                  links = links.filter(link => link.querySelector('.instock.availability > i').textContent !== "In stock")
                  // Extract the links from the data
                  links = links.map(el => el.querySelector('h3 > a').href)
                  return links;
              });
              console.log(urls);
          }
      }
      
      module.exports = scraperObject;
      
      

      En este bloque de código, invocó el método page.waitForSelector(). Con esto, esperó el div que contiene toda la información relacionada con el libro que se debe reproducir en el DOM y, luego, invocó el método page.$$eval(). Este método obtiene el elemento de URL con el selector section ol li (asegúrese de que siempre se devuelva solo una cadena o un número con los métodos page.$eval() y page.$$eval()).

      Cada libro puede tener dos estados: disponible, In Stock, o no disponible, Out of stock. Solo desea extraer datos de los libros In Stock. Como page.$$eval() devuelve una matriz de todos los elementos coincidentes, la filtró para asegurarse de estar trabajando únicamente con los libros que están disponibles. Para hacerlo, buscó y evaluó la clase .instock.availability. Luego, identificó la propiedad href de los enlaces del libro y la devolvió del método.

      Guarde y cierre el archivo.

      Vuelva a ejecutar su aplicación:

      El navegador se abrirá, se dirigirá a la página web y se cerrará cuando la tarea se complete. Ahora, observe su consola; contendrá todas las URL extraídas:

      Output

      > book-scraper@1.0.0 start /Users/sammy/book-scraper > node index.js Opening the browser...... Navigating to http://books.toscrape.com... [ 'http://books.toscrape.com/catalogue/a-light-in-the-attic_1000/index.html', 'http://books.toscrape.com/catalogue/tipping-the-velvet_999/index.html', 'http://books.toscrape.com/catalogue/soumission_998/index.html', 'http://books.toscrape.com/catalogue/sharp-objects_997/index.html', 'http://books.toscrape.com/catalogue/sapiens-a-brief-history-of-humankind_996/index.html', 'http://books.toscrape.com/catalogue/the-requiem-red_995/index.html', 'http://books.toscrape.com/catalogue/the-dirty-little-secrets-of-getting-your-dream-job_994/index.html', 'http://books.toscrape.com/catalogue/the-coming-woman-a-novel-based-on-the-life-of-the-infamous-feminist-victoria-woodhull_993/index.html', 'http://books.toscrape.com/catalogue/the-boys-in-the-boat-nine-americans-and-their-epic-quest-for-gold-at-the-1936-berlin-olympics_992/index.html', 'http://books.toscrape.com/catalogue/the-black-maria_991/index.html', 'http://books.toscrape.com/catalogue/starving-hearts-triangular-trade-trilogy-1_990/index.html', 'http://books.toscrape.com/catalogue/shakespeares-sonnets_989/index.html', 'http://books.toscrape.com/catalogue/set-me-free_988/index.html', 'http://books.toscrape.com/catalogue/scott-pilgrims-precious-little-life-scott-pilgrim-1_987/index.html', 'http://books.toscrape.com/catalogue/rip-it-up-and-start-again_986/index.html', 'http://books.toscrape.com/catalogue/our-band-could-be-your-life-scenes-from-the-american-indie-underground-1981-1991_985/index.html', 'http://books.toscrape.com/catalogue/olio_984/index.html', 'http://books.toscrape.com/catalogue/mesaerion-the-best-science-fiction-stories-1800-1849_983/index.html', 'http://books.toscrape.com/catalogue/libertarianism-for-beginners_982/index.html', 'http://books.toscrape.com/catalogue/its-only-the-himalayas_981/index.html' ]

      Es un gran comienzo, pero desea extraer todos los datos pertinentes de un libro determinado, no solo su URL. Ahora, utilizará estas URL para abrir cada página y extraer el título, el autor, el precio, la disponibilidad, el UPC, la descripción y la URL de la imagen de cada libro.

      Vuelva a abrir pageScraper.js:

      Añada el siguiente código, que recorrerá en bucle cada uno de los enlaces extraídos, abrirá una instancia de página nueva y, luego, obtendrá los datos pertinentes:

      ./book-scraper/pageScraper.js

      const scraperObject = {
          url: 'http://books.toscrape.com',
          async scraper(browser){
              let page = await browser.newPage();
              console.log(`Navigating to ${this.url}...`);
              // Navigate to the selected page
              await page.goto(this.url);
              // Wait for the required DOM to be rendered
              await page.waitForSelector('.page_inner');
              // Get the link to all the required books
              let urls = await page.$$eval('section ol > li', links => {
                  // Make sure the book to be scraped is in stock
                  links = links.filter(link => link.querySelector('.instock.availability > i').textContent !== "In stock")
                  // Extract the links from the data
                  links = links.map(el => el.querySelector('h3 > a').href)
                  return links;
              });
      
      
              // Loop through each of those links, open a new page instance and get the relevant data from them
              let pagePromise = (link) => new Promise(async(resolve, reject) => {
                  let dataObj = {};
                  let newPage = await browser.newPage();
                  await newPage.goto(link);
                  dataObj['bookTitle'] = await newPage.$eval('.product_main > h1', text => text.textContent);
                  dataObj['bookPrice'] = await newPage.$eval('.price_color', text => text.textContent);
                  dataObj['noAvailable'] = await newPage.$eval('.instock.availability', text => {
                      // Strip new line and tab spaces
                      text = text.textContent.replace(/(rnt|n|r|t)/gm, "");
                      // Get the number of stock available
                      let regexp = /^.*((.*)).*$/i;
                      let stockAvailable = regexp.exec(text)[1].split(' ')[0];
                      return stockAvailable;
                  });
                  dataObj['imageUrl'] = await newPage.$eval('#product_gallery img', img => img.src);
                  dataObj['bookDescription'] = await newPage.$eval('#product_description', div => div.nextSibling.nextSibling.textContent);
                  dataObj['upc'] = await newPage.$eval('.table.table-striped > tbody > tr > td', table => table.textContent);
                  resolve(dataObj);
                  await newPage.close();
              });
      
              for(link in urls){
                  let currentPageData = await pagePromise(urls);
                  // scrapedData.push(currentPageData);
                  console.log(currentPageData);
              }
      
          }
      }
      
      module.exports = scraperObject;
      

      Tiene una matriz de todas las URL. Lo que desea hacer es recorrer en bucle esta matriz, abrir una URL en una página nueva, extraer los datos de esa página, cerrarla y abrir una nueva para la siguiente URL de la matriz. Tenga en cuenta que envolvió este código en una promesa. Esto se debe a que desea esperar a que se complete cada acción de su bucle. Por lo tanto, cada promesa abre una URL nueva y no se resuelve hasta que el programa haya extraído todos sus datos y la instancia de esa página se haya cerrado.

      Advertencia: Tenga en cuenta que esperó la promesa utilizando un bucle for-in. Puede utilizar cualquier otro bucle, pero evite recorrer en iteración sus matrices de URL con métodos de iteración de matrices, como forEach, o cualquier otro método que utilice una función de devolución de llamada. Esto se debe a que la función de devolución de llamada debe pasar, primero, por la cola de devolución de llamadas y el bucle de evento, por lo tanto, se abrirán varias instancias de la página a la vez. Esto consumirá mucha más memoria.

      Observe con mayor detenimiento su función pagePromise. Primero, su extractor creó una página nueva para cada URL y, luego, utilizó la función page.$eval() para apuntar los selectores a los detalles pertinentes que deseaba extraer de la página nueva. Algunos de los textos contienen espacios en blanco, pestañas, líneas nuevas y otros caracteres no alfanuméricos, que eliminó utilizando una expresión regular. Luego, anexó el valor de cada dato extraído de esta página a un objeto y resolvió ese objeto.

      Guarde y cierre el archivo.

      Vuelva a ejecutar la secuencia de comandos:

      El navegador abre la página de inicio y, luego, abre la página de cada libro y registra los datos extraídos de cada una de ellas. Se imprimirá este resultado en su consola:

      Output

      Opening the browser...... Navigating to http://books.toscrape.com... { bookTitle: 'A Light in the Attic', bookPrice: '£51.77', noAvailable: '22', imageUrl: 'http://books.toscrape.com/media/cache/fe/72/fe72f0532301ec28892ae79a629a293c.jpg', bookDescription: "It's hard to imagine a world without A Light in the Attic. [...]', upc: 'a897fe39b1053632' } { bookTitle: 'Tipping the Velvet', bookPrice: '£53.74', noAvailable: '20', imageUrl: 'http://books.toscrape.com/media/cache/08/e9/08e94f3731d7d6b760dfbfbc02ca5c62.jpg', bookDescription: `"Erotic and absorbing...Written with starling power."--"The New York Times Book Review " Nan King, an oyster girl, is captivated by the music hall phenomenon Kitty Butler [...]`, upc: '90fa61229261140a' } { bookTitle: 'Soumission', bookPrice: '£50.10', noAvailable: '20', imageUrl: 'http://books.toscrape.com/media/cache/ee/cf/eecfe998905e455df12064dba399c075.jpg', bookDescription: 'Dans une France assez proche de la nôtre, [...]', upc: '6957f44c3847a760' } ...

      En este paso, extrajo datos pertinentes de cada libro de la página de inicio de books.toscrape.com, pero podría añadir muchas funcionalidades más. Por ejemplo, todas las páginas de libros están paginadas; ¿cómo puede obtener libros de estas otras páginas? Además, observó que hay categorías de libros en el lado izquierdo del sitio web; ¿y si no desea extraer todos los libros, sino solo los libros de un género en particular? Ahora, añadirá estas funciones.

      Las páginas de books.toscrape.com que están paginadas tienen un botón next debajo de su contenido; las páginas que no lo están, no.

      Utilizará la presencia de este botón para determinar si una página está paginada o no. Como los datos de todas las páginas tienen la misma estructura y marcación, no escribirá un extractor para cada página posible. En su lugar, utilizará la técnica de recursión.

      Primero, debe realizar algunos cambios en la estructura de su código para admitir la navegación recursiva a varias páginas.

      Vuelva a abrir pagescraper.js:

      Agregará una nueva función denominada scrapeCurrentPage() a su método scraper(). Esta función contendrá todo el código que extrae datos de una página en particular y, luego, hará clic en el botón “siguiente”, si está presente. Añada el siguiente código resaltado:

      ./book-scraper/pageScraper.js scraper()

      const scraperObject = {
          url: 'http://books.toscrape.com',
          async scraper(browser){
              let page = await browser.newPage();
              console.log(`Navigating to ${this.url}...`);
              // Navigate to the selected page
              await page.goto(this.url);
              let scrapedData = [];
              // Wait for the required DOM to be rendered
              async function scrapeCurrentPage(){
                  await page.waitForSelector('.page_inner');
                  // Get the link to all the required books
                  let urls = await page.$$eval('section ol > li', links => {
                      // Make sure the book to be scraped is in stock
                      links = links.filter(link => link.querySelector('.instock.availability > i').textContent !== "In stock")
                      // Extract the links from the data
                      links = links.map(el => el.querySelector('h3 > a').href)
                      return links;
                  });
                  // Loop through each of those links, open a new page instance and get the relevant data from them
                  let pagePromise = (link) => new Promise(async(resolve, reject) => {
                      let dataObj = {};
                      let newPage = await browser.newPage();
                      await newPage.goto(link);
                      dataObj['bookTitle'] = await newPage.$eval('.product_main > h1', text => text.textContent);
                      dataObj['bookPrice'] = await newPage.$eval('.price_color', text => text.textContent);
                      dataObj['noAvailable'] = await newPage.$eval('.instock.availability', text => {
                          // Strip new line and tab spaces
                          text = text.textContent.replace(/(rnt|n|r|t)/gm, "");
                          // Get the number of stock available
                          let regexp = /^.*((.*)).*$/i;
                          let stockAvailable = regexp.exec(text)[1].split(' ')[0];
                          return stockAvailable;
                      });
                      dataObj['imageUrl'] = await newPage.$eval('#product_gallery img', img => img.src);
                      dataObj['bookDescription'] = await newPage.$eval('#product_description', div => div.nextSibling.nextSibling.textContent);
                      dataObj['upc'] = await newPage.$eval('.table.table-striped > tbody > tr > td', table => table.textContent);
                      resolve(dataObj);
                      await newPage.close();
                  });
      
                  for(link in urls){
                      let currentPageData = await pagePromise(urls);
                      scrapedData.push(currentPageData);
                      // console.log(currentPageData);
                  }
                  // When all the data on this page is done, click the next button and start the scraping of the next page
                  // You are going to check if this button exist first, so you know if there really is a next page.
                  let nextButtonExist = false;
                  try{
                      const nextButton = await page.$eval('.next > a', a => a.textContent);
                      nextButtonExist = true;
                  }
                  catch(err){
                      nextButtonExist = false;
                  }
                  if(nextButtonExist){
                      await page.click('.next > a');   
                      return scrapeCurrentPage(); // Call this function recursively
                  }
                  await page.close();
                  return scrapedData;
              }
              let data = await scrapeCurrentPage();
              console.log(data);
              return data;
          }
      }
      
      module.exports = scraperObject;
      
      

      Primero, configure la variable nextButtonExist en false y, luego, compruebe si el botón aparece. Si el botón next está presente, configure nextButtonExists en true y proceda a hacer clic en él“; luego, se invoca esta función de forma recursiva.

      Cuando nextButtonExists tiene un valor false, devuelve la matriz de scrapedData como de costumbre.

      Guarde y cierre el archivo.

      Vuelva a ejecutar su secuencia de comandos:

      Esto puede tomar un tiempo; después de todo, su aplicación está extrayendo datos de más de 800 libros. Puede cerrar el navegador o presionar CTRL + C para cancelar el proceso.

      Ha maximizado las capacidades de su extractor de datos, pero, en el proceso, generó un problema. Ahora, el problema no es tener pocos datos, sino demasiados. En el siguiente paso, ajustará su aplicación para filtrar la extracción de datos por categoría de libros.

      Para extraer datos por categoría, deberá modificar sus archivos pageScraper.js y pageController.js.

      Abra pageController.js en un editor de texto:

      nano pageController.js
      

      Invoque el extractor de modo que solo extraiga libros de viajes. Añada el siguiente código:

      ./book-scraper/pageController.js

      const pageScraper = require('./pageScraper');
      async function scrapeAll(browserInstance){
          let browser;
          try{
              browser = await browserInstance;
              let scrapedData = {};
              // Call the scraper for different set of books to be scraped
              scrapedData['Travel'] = await pageScraper.scraper(browser, 'Travel');
              await browser.close();
              console.log(scrapedData)
          }
          catch(err){
              console.log("Could not resolve the browser instance => ", err);
          }
      }
      module.exports = (browserInstance) => scrapeAll(browserInstance)
      

      Ahora, está pasando dos parámetros a su método pageScraper.scraper(); el segundo es la categoría de libros de la que desea extraer datos, que, en este ejemplo, es Travel. Pero su archivo pageScraper.js todavía no reconoce este parámetro. También deberá ajustar este archivo.

      Guarde y cierre el archivo.

      Abra pageScraper.js:

      Agregue el siguiente código, que añadirá su parámetro de categoría, navegará a esa página de categoría y, luego, comenzará a extraer datos de los resultados paginados:

      ./book-scraper/pageScraper.js

      const scraperObject = {
          url: 'http://books.toscrape.com',
          async scraper(browser, category){
              let page = await browser.newPage();
              console.log(`Navigating to ${this.url}...`);
              // Navigate to the selected page
              await page.goto(this.url);
              // Select the category of book to be displayed
              let selectedCategory = await page.$$eval('.side_categories > ul > li > ul > li > a', (links, _category) => {
      
                  // Search for the element that has the matching text
                  links = links.map(a => a.textContent.replace(/(rnt|n|r|t|^s|s$|Bs|sB)/gm, "") === _category ? a : null);
                  let link = links.filter(tx => tx !== null)[0];
                  return link.href;
              }, category);
              // Navigate to the selected category
              await page.goto(selectedCategory);
              let scrapedData = [];
              // Wait for the required DOM to be rendered
              async function scrapeCurrentPage(){
                  await page.waitForSelector('.page_inner');
                  // Get the link to all the required books
                  let urls = await page.$$eval('section ol > li', links => {
                      // Make sure the book to be scraped is in stock
                      links = links.filter(link => link.querySelector('.instock.availability > i').textContent !== "In stock")
                      // Extract the links from the data
                      links = links.map(el => el.querySelector('h3 > a').href)
                      return links;
                  });
                  // Loop through each of those links, open a new page instance and get the relevant data from them
                  let pagePromise = (link) => new Promise(async(resolve, reject) => {
                      let dataObj = {};
                      let newPage = await browser.newPage();
                      await newPage.goto(link);
                      dataObj['bookTitle'] = await newPage.$eval('.product_main > h1', text => text.textContent);
                      dataObj['bookPrice'] = await newPage.$eval('.price_color', text => text.textContent);
                      dataObj['noAvailable'] = await newPage.$eval('.instock.availability', text => {
                          // Strip new line and tab spaces
                          text = text.textContent.replace(/(rnt|n|r|t)/gm, "");
                          // Get the number of stock available
                          let regexp = /^.*((.*)).*$/i;
                          let stockAvailable = regexp.exec(text)[1].split(' ')[0];
                          return stockAvailable;
                      });
                      dataObj['imageUrl'] = await newPage.$eval('#product_gallery img', img => img.src);
                      dataObj['bookDescription'] = await newPage.$eval('#product_description', div => div.nextSibling.nextSibling.textContent);
                      dataObj['upc'] = await newPage.$eval('.table.table-striped > tbody > tr > td', table => table.textContent);
                      resolve(dataObj);
                      await newPage.close();
                  });
      
                  for(link in urls){
                      let currentPageData = await pagePromise(urls);
                      scrapedData.push(currentPageData);
                      // console.log(currentPageData);
                  }
                  // When all the data on this page is done, click the next button and start the scraping of the next page
                  // You are going to check if this button exist first, so you know if there really is a next page.
                  let nextButtonExist = false;
                  try{
                      const nextButton = await page.$eval('.next > a', a => a.textContent);
                      nextButtonExist = true;
                  }
                  catch(err){
                      nextButtonExist = false;
                  }
                  if(nextButtonExist){
                      await page.click('.next > a');   
                      return scrapeCurrentPage(); // Call this function recursively
                  }
                  await page.close();
                  return scrapedData;
              }
              let data = await scrapeCurrentPage();
              console.log(data);
              return data;
          }
      }
      
      module.exports = scraperObject;
      

      Este bloque de código utiliza la categoría que pasó para obtener la URL en la que se encuentran los libros de esa categoría.

      El método page.$$eval() puede tomar argumentos al pasarlos como tercer parámetro al método $$eval() y definirlos como tales en la devolución de llamada de la siguiente manera:

      example page.$$eval() function

      page.$$eval('selector', function(elem, args){
          // .......
      }, args)
      

      Esto es lo que hizo en su código: pasó la categoría de libros de la que quería extraer datos, marcó todas las categorías para determinar cuál coincidía y, luego, devolvió la URL de esa categoría.

      Luego, utilizó esa URL para navegar a la página que muestra la categoría de libros de la que desea extraer datos utilizando el método page.goto(selectedCategory).

      Guarde y cierre el archivo.

      Vuelva a ejecutar su aplicación. Observará que navega a la categoría Travel, abre los libros de esa categoría de forma recursiva, página por página, y registra los resultados:

      En este paso, extrajo datos de varias páginas y, luego, de varias páginas de una categoría en particular. En el paso final, modificará su secuencia de comandos para extraer datos de varias categorías y, luego, guardará los datos extraídos en un archivo JSON convertido a cadena JSON.

      En este paso final, modificará su secuencia de comandos para extraer datos de todas las categorías que desee y, luego, cambiará la forma de su resultado. En lugar de registrar los resultados, los guardará en un archivo estructurado denominado data.json.

      Puede añadir más categorías para extraer de datos de forma rápida. Para hacerlo, solo se requiere una línea adicional por género.

      Abra pageController.js:

      Ajuste su código para incluir categorías adicionales. En el ejemplo a continuación, se suman HistoricalFiction y Mystery a nuestra categoría Travel existente:

      ./book-scraper/pageController.js

      const pageScraper = require('./pageScraper');
      async function scrapeAll(browserInstance){
          let browser;
          try{
              browser = await browserInstance;
              let scrapedData = {};
              // Call the scraper for different set of books to be scraped
              scrapedData['Travel'] = await pageScraper.scraper(browser, 'Travel');
              scrapedData['HistoricalFiction'] = await pageScraper.scraper(browser, 'Historical Fiction');
              scrapedData['Mystery'] = await pageScraper.scraper(browser, 'Mystery');
              await browser.close();
              console.log(scrapedData)
          }
          catch(err){
              console.log("Could not resolve the browser instance => ", err);
          }
      }
      
      module.exports = (browserInstance) => scrapeAll(browserInstance)
      

      Guarde y cierre el archivo.

      Vuelva a ejecutar la secuencia de comandos y observe cómo extrae datos de las tres categorías:

      Ahora que el extractor está totalmente operativo, su paso final es guardar los datos en un formato más útil. Ahora, los almacenará en un archivo JSON utilizando el módulo fs de Node.js.

      Primero, vuelva a abrir pageController.js:

      Añada el siguiente código resaltado:

      ./book-scraper/pageController.js

      const pageScraper = require('./pageScraper');
      const fs = require('fs');
      async function scrapeAll(browserInstance){
          let browser;
          try{
              browser = await browserInstance;
              let scrapedData = {};
              // Call the scraper for different set of books to be scraped
              scrapedData['Travel'] = await pageScraper.scraper(browser, 'Travel');
              scrapedData['HistoricalFiction'] = await pageScraper.scraper(browser, 'Historical Fiction');
              scrapedData['Mystery'] = await pageScraper.scraper(browser, 'Mystery');
              await browser.close();
              fs.writeFile("data.json", JSON.stringify(scrapedData), 'utf8', function(err) {
                  if(err) {
                      return console.log(err);
                  }
                  console.log("The data has been scraped and saved successfully! View it at './data.json'");
              });
          }
          catch(err){
              console.log("Could not resolve the browser instance => ", err);
          }
      }
      
      module.exports = (browserInstance) => scrapeAll(browserInstance)
      

      Primero, solicita el módulo fs de Node.js en pageController.js. Esto garantiza que pueda guardar sus datos como archivo JSON. Luego, añade código para que, cuando se complete la extracción de datos y se cierre el navegador, el programa cree un archivo nuevo denominado data.json. Tenga en cuenta que el contenido de data.json está convertido a cadena JSON. Por tanto, al leer el contenido de data.json, siempre se lo debe analizar como JSON antes de volver a utilizar los datos.

      Guarde y cierre el archivo.

      Con esto, ha creado una aplicación de extracción de datos web que extrae libros de varias categorías y, luego, almacena los datos extraídos en un archivo JSON. A medida que su aplicación se vaya volviendo más compleja, puede resultarle conveniente almacenar los datos extraídos en una base de datos o proporcionarlos a través de una API. La manera en la que se consumen estos datos es una decisión personal.

      Conclusión

      En este tutorial, creó un rastreador web que extrajo datos de varias páginas de forma recursiva y los guardó en un archivo JSON. En resumen, aprendió una nueva manera de automatizar la recopilación de datos de sitios web.

      Puppeteer cuenta con muchas características que no se abordaron en este tutorial. Para obtener más información, consulte Cómo usar Puppeteer para controlar Chrome desatendido de forma sencilla. También puede consultar la documentación oficial de Puppeteer.



      Source link

      Cómo alojar un sitio web usando Cloudflare y Nginx en Ubuntu 18.04


      El autor seleccionó Electronic Frontier Foundation para recibir una donación como parte del programa Write for DOnations.

      Introducción

      Cloudflare es un servicio que se encuentra entre el visitante y el servidor del propietario del sitio web, actuando como un proxy inverso para los sitios web. Cloudflare proporciona una Red de distribución de contenido (CDN), así como servicios de mitigación de DDoS y de servidor de nombres de dominio distribuidos.

      Nginx es un servidor web popular responsable de alojar algunos de los sitios de mayor tamaño y mayor tráfico en Internet. Es común que las organizaciones sirvan a sitios web con Nginx y utilicen Cloudflare como un proveedor de CDN y DNS.

      En este tutorial, protegerá su sitio web servido por Nginx con un certificado Origin CA de Cloudflare y a continuación configurará Nginx para usar solicitudes de incorporación de cambios autenticadas. Las ventajas de usar esta configuración son que se beneficia de la CDN de Cloudflare y de la rápida resolución DNS al tiempo que garantiza que todas las conexiones pasen a través de Cloudflare. Esto evita que cualquier solicitud maliciosa llegue a su servidor.

      Requisitos previos

      Para completar este tutorial, necesitará lo siguiente:

      Paso 1: Generar un certificado TLS de Origin CA

      El Cloudflare Origin CA le permite generar un certificado TLS gratuito firmado por Cloudflare para instalarlo en su servidor Nginx. Mediante el certificado TLS generado por Cloudflare, puede proteger la conexión entre los servidores de Cloudflare y su servidor Nginx.

      Para generar un certificado con Origin CA, inicie sesión en su cuenta de Cloudflare en un navegador web. Seleccione el dominio que desea proteger y vaya a la sección SSL/TLS de su panel de control de Cloudflare. Desde ahí, vaya a la pestaña Servidor de origen y haga clic en el botón Crear certificado:

      Cree la opción de certificado en el panel de control de Cloudflare

      Deje la opción predeterminada de Permitir que Cloudflare genere una clave privada y una CSR seleccionada.

      Opciones de GUI de Origin CA

      Haga clic en Siguiente y verá un diálogo con el Certificado de origen y la Clave privada. Debe transferir tanto el certificado de origen como la clave privada desde Cloudflare a su servidor. Por razones de seguridad, la información de la clave privada no se mostrará de nuevo, de forma que debe copiarla a su servidor antes de hacer clic en Ok.

      Diálogo que muestra el certificado de origen y la clave privada

      Usaremos el directorio /etc/ssl en el servidor para guardar el certificado de origen y los archivos de claves privados. La carpeta ya existe en el servidor.

      Primero, copie el contenido del Certificado de origen que se muestra en el cuadro de diálogo de su navegador.

      A continuación, en su servidor, abra /etc/ssl/cert.pem en su editor de texto preferido:

      • sudo nano /etc/ssl/cert.pem

      Añada el contenido del certificado al archivo. Guarde y salga del editor.

      A continuación, vuelva a su navegador y copie el contenido de la clave privada. Abra el archivo /etc/ssl/key.pem para editarlo:

      • sudo nano /etc/ssl/key.pem

      Pegue la clave privada en el archivo, guárdelo y salga del editor.

      Nota: A veces, cuando copie el certificado y la clave desde el panel de control de Cloudflare y lo pegue en los archivos pertinentes del servidor, se insertan líneas en blanco. Nginx tratará esos certificados y claves como no válidos, de forma que asegúrese de que no haya líneas en blanco en sus archivos.

      Advertencia: Cloudflare solo confía en el certificado de Origin CA de Cloudflare y, por lo tanto, solo debería usar los servidores de origen que están activamente conectados a Cloudflare. Si en algún momento detiene o deshabilita Cloudflare, su certificado Origin CA arrojará un error de certificado no fiable.

      Ahora que copió los archivos de la clave y del certificado a su servidor, deberá actualizar la configuración de Nginx para usarlos.

      Paso 2: Instalar el certificado Origin CA en Nginx

      En la sección anterior, generó un certificado de origen y una clave privada usando el panel de control de Cloudflare y guardó los archivos en su servidor. Ahora actualizará la configuración Nginx para su sitio para usar el certificado de origen y la clave privada para proteger la conexión entre los servidores de Cloudflare y su servidor.

      Primero, asegúrese de que UFW permitirá el tráfico HTTPS. Habilite Nginx Full, que abrirá el puerto 80 (HTTP) y el puerto 443 (HTTPS):

      • sudo ufw allow 'Nginx Full'

      Ahora vuelva a cargar UFW:

      Por último, compruebe que se permiten sus nuevas reglas y que UFW está activo:

      Verá un resultado similar a este:

      Output

      Status: active To Action From -- ------ ---- OpenSSH ALLOW Anywhere Nginx Full ALLOW Anywhere OpenSSH (v6) ALLOW Anywhere (v6) Nginx Full (v6) ALLOW Anywhere (v6)

      Ahora está listo para ajustar su bloque de servidor Nginx. Nginx crea un bloque de servidor predeterminado durante la instalación. Elimínelo si aún existe, ya que ya ha configurado un bloque de servidor personalizado para su dominio:

      • sudo rm /etc/nginx/sites-enabled/default

      A continuación, abra el archivo de configuración Nginx para su dominio:

      • sudo nano /etc/nginx/sites-available/your_domain

      El archivo debería tener este aspecto:

      /etc/nginx/sites-available/your_domain

      server {
              listen 80;
              listen [::]:80;
      
              root /var/www/your_domain/html;
              index index.html index.htm index.nginx-debian.html;
      
              server_name your_domain www.your_domain;
      
              location / {
                      try_files $uri $uri/ =404;
              }
      }
      
      

      Modificaremos el archivo de configuración Nginx para hacer lo siguiente:

      • Escuche el puerto 80 y redireccione todas las solicitudes para usar https.
      • Escuche el puerto 443 y utilice el certificado de origen y la clave privada que añadió en la sección anterior.

      Modifique el archivo de forma que se vea lo siguiente:

      /etc/nginx/sites-available/your_domain

      server {
          listen 80;
          listen [::]:80;
          server_name your_domain www.your_domain;
          return 302 https://$server_name$request_uri;
      }
      
      server {
      
          # SSL configuration
      
          listen 443 ssl http2;
          listen [::]:443 ssl http2;
          ssl        on;
          ssl_certificate         /etc/ssl/cert.pem;
          ssl_certificate_key     /etc/ssl/key.pem;
      
          server_name your_domain www.your_domain;
      
          root /var/www/your_domain/html;
          index index.html index.htm index.nginx-debian.html;
      
      
          location / {
                  try_files $uri $uri/ =404;
          }
      }
      

      Guarde el archivo y salga del editor.

      A continuación, compruebe que no haya errores de sintaxis en ninguno de sus archivos de configuración Nginx:

      Si no se encontraron problemas, reinicie Nginx para habilitar sus cambios:

      • sudo systemctl restart nginx

      Ahora vaya a la sección SSL/TLS del panel de control de Cloudflare, vaya a la pestaña Vista general y cambie el modo de cifrado SSL/TLS a Full (strict). Esto informa a Cloudflare para que cifre siempre la conexión entre Cloudflare y su servidor Nginx de origen.

      Habilite el modo SSL Full(strict) en el panel de control de Cloudflare

      Ahora visite su sitio web en https://your_domain para verificar que se haya configurado correctamente. Verá su página de inicio y el navegador informará de que el sitio es seguro.

      En la siguiente sección, configurará las incorporaciones de cambios de origen autenticadas para verificar que su servidor de origen de hecho está hablando con Cloudflare y no con otro servidor. Al hacerlo, Nginx se configurará para solo aceptar solicitudes que utilicen un certificado de cliente válido desde Cloudflare. Se eliminarán todas las solicitudes que no hayan pasado a través de Cloudflare.

      Paso 3: Configurar las incorporaciones de cambios de origen autenticadas

      El certificado Origin CA ayudará a Cloudflare a verificar que está hablando con el servidor de origen correcto. Este paso utilizará Autenticación de cliente TLS para verificar que su servidor Nginx de origen está hablando con Cloudflare.

      En una conexión TLS autenticada por el cliente, ambos lados proporcionan un certificado para verificarlo. El servidor de origen está configurado para solo aceptar solicitudes que utilizan un certificado de cliente válido desde Cloudflare. Las solicitudes que no hayan pasado a través de Cloudflare se eliminarán ya que no tendrán el certificado de Cloudflare. Esto significa que los atacantes no pueden eludir las medidas de seguridad de Cloudflare y conectarse directamente a su servidor Nginx.

      Cloudflare presenta los certificados firmados por una CA con el siguiente certificado:

      -----BEGIN CERTIFICATE-----
      MIIGCjCCA/KgAwIBAgIIV5G6lVbCLmEwDQYJKoZIhvcNAQENBQAwgZAxCzAJBgNV
      BAYTAlVTMRkwFwYDVQQKExBDbG91ZEZsYXJlLCBJbmMuMRQwEgYDVQQLEwtPcmln
      aW4gUHVsbDEWMBQGA1UEBxMNU2FuIEZyYW5jaXNjbzETMBEGA1UECBMKQ2FsaWZv
      cm5pYTEjMCEGA1UEAxMab3JpZ2luLXB1bGwuY2xvdWRmbGFyZS5uZXQwHhcNMTkx
      MDEwMTg0NTAwWhcNMjkxMTAxMTcwMDAwWjCBkDELMAkGA1UEBhMCVVMxGTAXBgNV
      BAoTEENsb3VkRmxhcmUsIEluYy4xFDASBgNVBAsTC09yaWdpbiBQdWxsMRYwFAYD
      VQQHEw1TYW4gRnJhbmNpc2NvMRMwEQYDVQQIEwpDYWxpZm9ybmlhMSMwIQYDVQQD
      ExpvcmlnaW4tcHVsbC5jbG91ZGZsYXJlLm5ldDCCAiIwDQYJKoZIhvcNAQEBBQAD
      ggIPADCCAgoCggIBAN2y2zojYfl0bKfhp0AJBFeV+jQqbCw3sHmvEPwLmqDLqynI
      42tZXR5y914ZB9ZrwbL/K5O46exd/LujJnV2b3dzcx5rtiQzso0xzljqbnbQT20e
      ihx/WrF4OkZKydZzsdaJsWAPuplDH5P7J82q3re88jQdgE5hqjqFZ3clCG7lxoBw
      hLaazm3NJJlUfzdk97ouRvnFGAuXd5cQVx8jYOOeU60sWqmMe4QHdOvpqB91bJoY
      QSKVFjUgHeTpN8tNpKJfb9LIn3pun3bC9NKNHtRKMNX3Kl/sAPq7q/AlndvA2Kw3
      Dkum2mHQUGdzVHqcOgea9BGjLK2h7SuX93zTWL02u799dr6Xkrad/WShHchfjjRn
      aL35niJUDr02YJtPgxWObsrfOU63B8juLUphW/4BOjjJyAG5l9j1//aUGEi/sEe5
      lqVv0P78QrxoxR+MMXiJwQab5FB8TG/ac6mRHgF9CmkX90uaRh+OC07XjTdfSKGR
      PpM9hB2ZhLol/nf8qmoLdoD5HvODZuKu2+muKeVHXgw2/A6wM7OwrinxZiyBk5Hh
      CvaADH7PZpU6z/zv5NU5HSvXiKtCzFuDu4/Zfi34RfHXeCUfHAb4KfNRXJwMsxUa
      +4ZpSAX2G6RnGU5meuXpU5/V+DQJp/e69XyyY6RXDoMywaEFlIlXBqjRRA2pAgMB
      AAGjZjBkMA4GA1UdDwEB/wQEAwIBBjASBgNVHRMBAf8ECDAGAQH/AgECMB0GA1Ud
      DgQWBBRDWUsraYuA4REzalfNVzjann3F6zAfBgNVHSMEGDAWgBRDWUsraYuA4REz
      alfNVzjann3F6zANBgkqhkiG9w0BAQ0FAAOCAgEAkQ+T9nqcSlAuW/90DeYmQOW1
      QhqOor5psBEGvxbNGV2hdLJY8h6QUq48BCevcMChg/L1CkznBNI40i3/6heDn3IS
      zVEwXKf34pPFCACWVMZxbQjkNRTiH8iRur9EsaNQ5oXCPJkhwg2+IFyoPAAYURoX
      VcI9SCDUa45clmYHJ/XYwV1icGVI8/9b2JUqklnOTa5tugwIUi5sTfipNcJXHhgz
      6BKYDl0/UP0lLKbsUETXeTGDiDpxZYIgbcFrRDDkHC6BSvdWVEiH5b9mH2BON60z
      0O0j8EEKTwi9jnafVtZQXP/D8yoVowdFDjXcKkOPF/1gIh9qrFR6GdoPVgB3SkLc
      5ulBqZaCHm563jsvWb/kXJnlFxW+1bsO9BDD6DweBcGdNurgmH625wBXksSdD7y/
      fakk8DagjbjKShYlPEFOAqEcliwjF45eabL0t27MJV61O/jHzHL3dknXeE4BDa2j
      bA+JbyJeUMtU7KMsxvx82RmhqBEJJDBCJ3scVptvhDMRrtqDBW5JShxoAOcpFQGm
      iYWicn46nPDjgTU0bX1ZPpTpryXbvciVL5RkVBuyX2ntcOLDPlZWgxZCBp96x07F
      AnOzKgZk4RzZPNAxCXERVxajn/FLcOhglVAKo5H0ac+AitlQ0ip55D2/mf8o72tM
      fVQ6VpyjEXdiIXWUq/o=
      -----END CERTIFICATE-----
      

      También puede descargar el certificado directamente desde Cloudflare aquí.

      Copie este certificado.

      A continuación, cree el archivo /etc/ssl/cloudflare.crt para guardar el certificado de Cloudflare:

      • sudo nano /etc/ssl/cloudflare.crt

      Añada el certificado al archivo. Guarde el archivo y cierre el editor.

      Ahora actualice su configuración Nginx para usar incorporaciones de cambios de origen autenticadas de TLS. Abra el archivo de configuración para su dominio:

      • sudo nano /etc/nginx/sites-available/your_domain

      Añada las directivas ssl_client_certificate y ssl_verify_client como se muestra en el siguiente ejemplo:

      /etc/nginx/sites-available/your_domain

      . . .
      
      server {
      
          # SSL configuration
      
          listen 443 ssl http2;
          listen [::]:443 ssl http2;
          ssl        on;
          ssl_certificate         /etc/ssl/cert.pem;
          ssl_certificate_key     /etc/ssl/key.pem;
          ssl_client_certificate /etc/ssl/cloudflare.crt;
          ssl_verify_client on;
      
          . . .
      

      Guarde el archivo y salga del editor.

      A continuación, compruebe que no haya errores de sintaxis en su configuración Nginx:

      Si no se encontraron problemas, reinicie Nginx para habilitar sus cambios:

      • sudo systemctl restart nginx

      Por último, para habilitar las incorporaciones de cambios autenticadas, abra la sección SSL/TLS en el panel de control de Cloudflare, vaya a la pestaña Servidor de origen y cambie la opción Incorporaciones de cambios de origen autenticadas.

      Habilite las incorporaciones de cambios de origen autenticadas

      Ahora visite su sitio web en https://your_domain para verificar que se haya configurado correctamente. Como antes, verá su página de inicio.

      Para verificar que su servidor solo aceptará las solicitudes firmadas por la CA de Cloudflare, cambie la opción Incorporaciones de cambios de origen autenticadas para deshabilitarlo y vuelva a cargar su sitio web. Debería obtener el siguiente mensaje de error:

      Mensaje de error

      Su servidor de origen crea un error si la CA de Cloudflare no firma una solicitud.

      Nota: La mayoría de los navegadores almacenarán solicitudes de caché, de forma que para ver el cambio anterior puede usar el modo de navegación de Incógnito/privado en su navegador. Para evitar que Cloudflare almacene las solicitudes de caché mientras configura su sitio web, vaya a Visión general en el panel de control de Cloudflare y cambie el modo de desarrollo.

      Ahora que sabe que funciona correctamente, vuelva a la sección SSL/TLS en el panel de control de Cloudflare, vaya a la pestaña Servidor de origen y cambie la opción Incorporaciones de cambios de origen autenticadas para habilitarlo.

      Conclusión

      En este tutorial, aseguró su sitio web con Nginx cifrando el tráfico entre Cloudflare y el servidor Nginx usando un certificado Origin CA de Cloudflare. A continuación, configuró las incorporaciones de cambios de origen autenticadas en el servidor Nginx para asegurarse de que solo acepta solicitudes de los servidores de Cloudflare, evitando a cualquier otra persona conectarse directamente al servidor Nginx.



      Source link