Guia para configurar CloudFlare CDN paso a paso
Categoría:
WordPress, WPO, WPO para WordPress
Fecha:
06/06/2016
En este blog ya hemos hablado varias veces de CloudFlare, ya que como hemos comentado en varias ocasiones, es la mejor opción de CDN gratuito.
No existen muchas opciones a la hora de elegir un CDN gratuito, ya que alternativas como CoralCDN o Photon de Jetpack no son alternativas reales para un proyecto web serio e Incapsula CDN está muy limitado en su versión gratuita, por eso CloudFlare es considerada la única opción gratuita para este tipo de implementaciones.
Índice del artículo
Vamos a empezar por el principio, CloudFlare es un CDN que funciona mediante proxy inverso usando Nginx, haciendo de puente entre los visitantes que acceden a la web y el servidor o hosting que alojan la web, de esta forma puede realizar cache de los elementos y páginas, pero al mismo tiempo también es capaz de proteger el servidor de la web de ataques de todo tipo.
CloudFlare se coloca por delante de TODA la página, funciona mediante DNS Anycast y el visitante al acceder al sitio web, en lugar de acceder al servidor, accede a una versión cacheada de la página guardada en los servidores de CloudFlare en algún punto alrededor del mundo.
A continuación, puedes ver la lista de puntos de presencia de CloudFlare en junio de 2016 (aumentan continuamente):
Con tantos puntos de presencia o POPs alrededor del mundo, lo que CloudFlare intenta conseguir es que la latencia entre el visitante y un POP no sea más de 30 ms, lo que mejora radicalmente los tiempos a la hora de servir peticiones a los visitantes.
Como ves, CloudFlare es el CDN perfecto para proyectos ubicados en la zona hispanoamericana, ya que tiene punto de presencia en Madrid, pero también cuenta con cinco puntos de presencia en América Latina, una zona bastante compleja para la mayoría de CDN y donde normalmente falta presencia.
¿Qué ventajas tiene CloudFlare? O directamente hablando, ¿Qué ventajas tiene la implementación de un CDN en un sitio web?
En los siguientes artículos que hemos publicado en el pasado, ya hemos hablado y estudiado las ventajas de un CDN:
Pero no es solo eso, sino que en este blog ya hemos hablado varias veces también de cómo implementar otros CDN Premium en tu Wordpress o en cualquier otro CMS:
Todos estos son CDN Premium que ofrecen bastante buen servicio, pero cada servicio se adapta a un tipo de necesidades diferentes y cada servicio tiene ventajas diferentes.
Vamos a empezar directamente con la configuración de CloudFlare, el proceso que vamos a explicar, funciona para cualquier sitio web, sea cual sea el CMS utilizado.
Vamos a empezar creando una nueva cuenta en CloudFlare en caso de no tenerla, para eso debemos dirigirnos al sitio web de CloudFlare y accedemos a la siguiente dirección URL:
Tenemos que rellenar los datos, como ves, son datos básicos, simplemente un correo electrónico y una contraseña para poder comenzar el proceso de configuración de la cuenta de CloudFlare CDN.
Una vez que rellenamos los datos y pulsamos el botón verde “Create Account” podemos avanzar al siguiente paso, la siguiente pantalla tiene esta apariencia:
Está claro lo que tenemos que hacer, ¿no? Debemos introducir la dirección URL de nuestro sitio web en el cuadro correspondiente y posteriormente debemos pulsar el botón verde “Scan DNS records” para que el sistema de CloudFlare detecte los registros que tenemos actualmente en el servidor DNS del dominio.
Durante el tiempo de escaneo, CloudFlare nos explica con un video cómo funciona el servicio:
Cuando acabe el video (son 60 segundos) podremos avanzar al siguiente paso del asistente de configuración.
Una vez avanzamos al siguiente paso, podremos ver un listado con los registros más comunes que ha detectado CloudFlare, es posible que tengamos que añadir nosotros alguno si no están todos, es recomendable revisarlos:
Una vez que tengamos todos los registros ahí, debemos pulsar el botón verde “Continue” que está debajo de todo para continuar. Mi recomendación, es que, si es la primera vez que configuras un CDN o la primera vez que configuras CloudFlare, no toques nada relacionado con los controles de CDN que hay en esta pantalla (nubles grises y de color naranja).
CloudFlare ofrece cuentas gratuitas con limitaciones de trafico MUY AMPLIAS, pero también ofrece varias modalidades de cuentas Premium que podemos tener en cuenta o no dependiendo de nuestros proyectos y nuestras necesidades, aun así, en el siguiente paso CloudFlare nos ofrece este tipo de cuenta, pero nosotros estamos creando una cuenta gratuita, por lo que pulsamos sobre “Free Website” rodeado en rojo en la siguiente imagen:
Al avanzar al siguiente paso podremos ver las instrucciones que nos da CloudFlare CDN para cambiar las DNS actuales por las nuevas DNS de CloudFlare:
Ahora el proceso se vuelve variable, ya que tenemos que cambiar las DNS en nuestro registrador de dominios o en nuestro proveedor, y evidentemente, no el panel de todos los registradores de dominios es igual.
En este caso, nosotros vamos a mostrar el proceso para cambiar las DNS en nuestro panel de control de clientes mediante un video:
La URL a la que tienes que acceder como cliente de Raiola Networks para acceder al listado de dominios registrados con nosotros es el siguiente: https://gestiondecuenta.eu/clientarea.php?action=domains
Debemos acceder al dominio tal y como ves en el video e introducir las DNS que aparecen en el paso de CloudFlare que hemos mostrado en la captura anterior.
Ahora guardamos los cambios DNS pulsando el botón “Cambiar DNS” y volvemos a la pantalla de CloudFlare donde estábamos:
Una vez que pulsamos el botón verde “Continue” avanzamos al siguiente paso, pero debemos esperar a que las DNS propaguen para poder usar CloudFlare.
El tiempo que tardan en propagar las DNS depende del proveedor y de la extensión del dominio, por ejemplo, en los dominios .es puede tardar entre 8 y 12 horas, sin embargo, en los dominios .com puede tardar unos minutos en la mayoría de los casos.
Mientras tanto, en el dashboard o panel de CloudFlare, nos muestra este botón y esta sección indicándonos que la propagación DNS sigue pendiente:
Una vez propagadas las DNS y cuando realmente CloudFlare está funcionando correctamente, esto cambiará y nos aparecerá el dashboard o panel de control de CloudFlare de la siguiente forma:
Con esto tendremos configurado CloudFlare en nuestro sitio web, sea cual sea el CMS, da igual que sea Wordpress, que Prestashop, que Magento o Drupal, incluso si se trata de desarrollo propio en PHP o en el lenguaje que quieras.
Ahora que tenemos CloudFlare funcionando, vamos a configurar ciertas cosas para conseguir que CloudFlare funcione como CDN, pero que omita por completo las medidas de seguridad y las optimizaciones de código.
Vamos a comenzar con la sección “Firewall” marcada en la siguiente imagen, debemos mantener los parámetros de la forma que mostramos en la imagen para tener la seguridad desactivada:
En los dos recuadros verdes puedes ver las dos opciones que tienes que configurar de esa manera:
Ahora que tenemos las opciones de seguridad definidas para evitar problemas y que CloudFlare funcione solo como CDN vamos a verificar la sección de rendimiento:
Por razones de compatibilidad, dejamos desactivados los checkbox que aparecen en el cuadro verde, ya que, aunque podríamos conseguir mayor velocidad de carga marcando estas casillas, recomiendo dejarlas desmarcadas si solo vamos a usar CloudFlare como CDN.
Si seguimos bajando por la misma sección, podemos encontrar otra sección llamada “Rocket Loader”, debemos revisar y confirmar que esté desactivada:
Con esto tendremos esta parte configurada.
Avanzamos a la sección “Caching” y vamos a revisar el cache de navegador, vamos a subir un poco el TTL, por ejemplo, a 1 mes, para mejorar la eficiencia del CDN.
Con esto ya tendremos CloudFlare para funcionar como CDN de forma eficiente, pero aun asi podríamos realizar configuraciones avanzadas para hacer que CloudFlare funcione mediante subdominios, como hemos detallado en este artículo: https://raiolanetworks.com/blog/como-ahorrar-ancho-de-banda-en-wordpress/
Antes de finalizar el artículo, también me gustaría comentar la relación o la compatibilidad entre CloudFlare y Wordpress.
CloudFlare es un CDN por proxy inverso, lo que quiere decir que funciona de forma independiente el CDN del CMS o script usado, sea cual sea el lenguaje de programación de la web, si la web generada es HTML y se puede ver desde un navegador, funcionara con CloudFlare sin ningún tipo de implementación.
Existen algunos plugins para Wordpress como por ejemplo Sunny, pero que lleva ya un tiempo sin actualizarse, por otro lado, CloudFlare dispone de plugin oficial para Wordpress, pero sus funcionalidades son bastante justas: https://es.wordpress.org/plugins/cloudflare/
Los plugins de CloudFlare para Wordpress no realizan ninguna función vital que se necesite para poder usar el CDN, simplemente permiten algunas funcionalidades añadidas:
Algunos plugins como WP Rocket, llevan compatibilidad con CloudFlare con reglas de configuración específicas para mejorar el rendimiento en base a los parámetros detectados por el plugin.
No existen muchas opciones a la hora de elegir un CDN gratuito, ya que alternativas como CoralCDN o Photon de Jetpack no son alternativas reales para un proyecto web serio e Incapsula CDN está muy limitado en su versión gratuita, por eso CloudFlare es considerada la única opción gratuita para este tipo de implementaciones.
Índice del artículo
- Cómo configurar CloudFlare CDN
- Configurar CloudFlare para CDN
- CloudFlare y Wordpress
Vamos a empezar por el principio, CloudFlare es un CDN que funciona mediante proxy inverso usando Nginx, haciendo de puente entre los visitantes que acceden a la web y el servidor o hosting que alojan la web, de esta forma puede realizar cache de los elementos y páginas, pero al mismo tiempo también es capaz de proteger el servidor de la web de ataques de todo tipo.CloudFlare se coloca por delante de TODA la página, funciona mediante DNS Anycast y el visitante al acceder al sitio web, en lugar de acceder al servidor, accede a una versión cacheada de la página guardada en los servidores de CloudFlare en algún punto alrededor del mundo.
A continuación, puedes ver la lista de puntos de presencia de CloudFlare en junio de 2016 (aumentan continuamente):
Con tantos puntos de presencia o POPs alrededor del mundo, lo que CloudFlare intenta conseguir es que la latencia entre el visitante y un POP no sea más de 30 ms, lo que mejora radicalmente los tiempos a la hora de servir peticiones a los visitantes.Como ves, CloudFlare es el CDN perfecto para proyectos ubicados en la zona hispanoamericana, ya que tiene punto de presencia en Madrid, pero también cuenta con cinco puntos de presencia en América Latina, una zona bastante compleja para la mayoría de CDN y donde normalmente falta presencia.
¿Qué ventajas tiene CloudFlare? O directamente hablando, ¿Qué ventajas tiene la implementación de un CDN en un sitio web?
En los siguientes artículos que hemos publicado en el pasado, ya hemos hablado y estudiado las ventajas de un CDN:
- Recursos útiles para optimizar Wordpress: Guía de optimización para WordPress
Pero no es solo eso, sino que en este blog ya hemos hablado varias veces también de cómo implementar otros CDN Premium en tu Wordpress o en cualquier otro CMS:
- Guía paso a paso para implementar KeyCDN en Wordpress: https://raiolanetworks.com/blog/como-configurar-keycdn-en-wordpress/
- Guía para configurar Amazon CloudFront en Wordpress: https://raiolanetworks.com/blog/como-configurar-el-cdn-amazon-cloudfront-en-wordpress/
Todos estos son CDN Premium que ofrecen bastante buen servicio, pero cada servicio se adapta a un tipo de necesidades diferentes y cada servicio tiene ventajas diferentes.
Cómo configurar CloudFlare CDN
Vamos a empezar directamente con la configuración de CloudFlare, el proceso que vamos a explicar, funciona para cualquier sitio web, sea cual sea el CMS utilizado.
Vamos a empezar creando una nueva cuenta en CloudFlare en caso de no tenerla, para eso debemos dirigirnos al sitio web de CloudFlare y accedemos a la siguiente dirección URL:
Tenemos que rellenar los datos, como ves, son datos básicos, simplemente un correo electrónico y una contraseña para poder comenzar el proceso de configuración de la cuenta de CloudFlare CDN.Una vez que rellenamos los datos y pulsamos el botón verde “Create Account” podemos avanzar al siguiente paso, la siguiente pantalla tiene esta apariencia:
Está claro lo que tenemos que hacer, ¿no? Debemos introducir la dirección URL de nuestro sitio web en el cuadro correspondiente y posteriormente debemos pulsar el botón verde “Scan DNS records” para que el sistema de CloudFlare detecte los registros que tenemos actualmente en el servidor DNS del dominio.Durante el tiempo de escaneo, CloudFlare nos explica con un video cómo funciona el servicio:
Cuando acabe el video (son 60 segundos) podremos avanzar al siguiente paso del asistente de configuración.Una vez avanzamos al siguiente paso, podremos ver un listado con los registros más comunes que ha detectado CloudFlare, es posible que tengamos que añadir nosotros alguno si no están todos, es recomendable revisarlos:
Una vez que tengamos todos los registros ahí, debemos pulsar el botón verde “Continue” que está debajo de todo para continuar. Mi recomendación, es que, si es la primera vez que configuras un CDN o la primera vez que configuras CloudFlare, no toques nada relacionado con los controles de CDN que hay en esta pantalla (nubles grises y de color naranja).CloudFlare ofrece cuentas gratuitas con limitaciones de trafico MUY AMPLIAS, pero también ofrece varias modalidades de cuentas Premium que podemos tener en cuenta o no dependiendo de nuestros proyectos y nuestras necesidades, aun así, en el siguiente paso CloudFlare nos ofrece este tipo de cuenta, pero nosotros estamos creando una cuenta gratuita, por lo que pulsamos sobre “Free Website” rodeado en rojo en la siguiente imagen:
Al avanzar al siguiente paso podremos ver las instrucciones que nos da CloudFlare CDN para cambiar las DNS actuales por las nuevas DNS de CloudFlare:Ahora el proceso se vuelve variable, ya que tenemos que cambiar las DNS en nuestro registrador de dominios o en nuestro proveedor, y evidentemente, no el panel de todos los registradores de dominios es igual.En este caso, nosotros vamos a mostrar el proceso para cambiar las DNS en nuestro panel de control de clientes mediante un video:
La URL a la que tienes que acceder como cliente de Raiola Networks para acceder al listado de dominios registrados con nosotros es el siguiente: https://gestiondecuenta.eu/clientarea.php?action=domains
Debemos acceder al dominio tal y como ves en el video e introducir las DNS que aparecen en el paso de CloudFlare que hemos mostrado en la captura anterior.
Ahora guardamos los cambios DNS pulsando el botón “Cambiar DNS” y volvemos a la pantalla de CloudFlare donde estábamos:Una vez que pulsamos el botón verde “Continue” avanzamos al siguiente paso, pero debemos esperar a que las DNS propaguen para poder usar CloudFlare.El tiempo que tardan en propagar las DNS depende del proveedor y de la extensión del dominio, por ejemplo, en los dominios .es puede tardar entre 8 y 12 horas, sin embargo, en los dominios .com puede tardar unos minutos en la mayoría de los casos.
Mientras tanto, en el dashboard o panel de CloudFlare, nos muestra este botón y esta sección indicándonos que la propagación DNS sigue pendiente:
Una vez propagadas las DNS y cuando realmente CloudFlare está funcionando correctamente, esto cambiará y nos aparecerá el dashboard o panel de control de CloudFlare de la siguiente forma:Con esto tendremos configurado CloudFlare en nuestro sitio web, sea cual sea el CMS, da igual que sea Wordpress, que Prestashop, que Magento o Drupal, incluso si se trata de desarrollo propio en PHP o en el lenguaje que quieras.Configurar CloudFlare para CDN
Ahora que tenemos CloudFlare funcionando, vamos a configurar ciertas cosas para conseguir que CloudFlare funcione como CDN, pero que omita por completo las medidas de seguridad y las optimizaciones de código.
Vamos a comenzar con la sección “Firewall” marcada en la siguiente imagen, debemos mantener los parámetros de la forma que mostramos en la imagen para tener la seguridad desactivada:
En los dos recuadros verdes puedes ver las dos opciones que tienes que configurar de esa manera:- Security Level lo configuramos en “Essentially Off” para poder tener la certeza de que ningún sistema de seguridad de CloudFlare actuara sobre nuestros visitantes.
- Challenge Passage es una opción que se debería desactivar al poner el modo “Essentially Off” pero por seguridad vamos a configurarlo al tiempo máximo, 1 año.
Ahora que tenemos las opciones de seguridad definidas para evitar problemas y que CloudFlare funcione solo como CDN vamos a verificar la sección de rendimiento:
Por razones de compatibilidad, dejamos desactivados los checkbox que aparecen en el cuadro verde, ya que, aunque podríamos conseguir mayor velocidad de carga marcando estas casillas, recomiendo dejarlas desmarcadas si solo vamos a usar CloudFlare como CDN.Si seguimos bajando por la misma sección, podemos encontrar otra sección llamada “Rocket Loader”, debemos revisar y confirmar que esté desactivada:
Con esto tendremos esta parte configurada.Avanzamos a la sección “Caching” y vamos a revisar el cache de navegador, vamos a subir un poco el TTL, por ejemplo, a 1 mes, para mejorar la eficiencia del CDN.
Con esto ya tendremos CloudFlare para funcionar como CDN de forma eficiente, pero aun asi podríamos realizar configuraciones avanzadas para hacer que CloudFlare funcione mediante subdominios, como hemos detallado en este artículo: https://raiolanetworks.com/blog/como-ahorrar-ancho-de-banda-en-wordpress/CloudFlare y Wordpress
Antes de finalizar el artículo, también me gustaría comentar la relación o la compatibilidad entre CloudFlare y Wordpress.
CloudFlare es un CDN por proxy inverso, lo que quiere decir que funciona de forma independiente el CDN del CMS o script usado, sea cual sea el lenguaje de programación de la web, si la web generada es HTML y se puede ver desde un navegador, funcionara con CloudFlare sin ningún tipo de implementación.
Existen algunos plugins para Wordpress como por ejemplo Sunny, pero que lleva ya un tiempo sin actualizarse, por otro lado, CloudFlare dispone de plugin oficial para Wordpress, pero sus funcionalidades son bastante justas: https://es.wordpress.org/plugins/cloudflare/
Los plugins de CloudFlare para Wordpress no realizan ninguna función vital que se necesite para poder usar el CDN, simplemente permiten algunas funcionalidades añadidas:
- Permiten vaciar cache directamente desde el back-end de WordPress.
- Permiten ver la IP real de los visitantes sin necesidad del módulo para el servidor web.
- Permiten activar y desactivar el modo desarrollador a petición.
- Permiten activar y desactivar las medidas de seguridad de CloudFlare.
Algunos plugins como WP Rocket, llevan compatibilidad con CloudFlare con reglas de configuración específicas para mejorar el rendimiento en base a los parámetros detectados por el plugin.
Deja una respuesta
Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *