Tutorial: Instalación, Configuración y Información de CloudFlare + Wordpress

  • Autor Autor Egicze
  • Fecha de inicio Fecha de inicio
Egicze

Egicze

Delta
Verificación en dos pasos activada
Antes de comenzar con el tutorial vamos a realizar un pequeño resumen sobre qué es y cómo funciona Cloudflare. Si no estás interesado en información sobre el funcionamiento o las ventajas y desventajas del uso de Cloudflare te recomiendo pasar directamente al apartado de “Registro, Instalación y Configuración”.

¿Qué es CloudFlare?

Cloudflare básicamente es un servicio gratuito que tiene como objetivo asegurar y acelerar nuestras páginas web, mediante proxy y servidores nos ayuda a proteger nuestra web contra visitas mal intencionadas, ahorra hasta un 60% el consumo de banda ancha y reduce drásticamente el tiempo de carga.

Cabe aclarar que aunque es un servicio totalmente gratuito también posee sus planes de pagos con ventajas, pero en general para un proyecto no muy grande la versión gratis será más que suficiente.

¿Cómo funciona?

Redirigir las visitas para acelerar la conexión: Cloudflare lleva directamente a nuestros visitantes al servidor más cercano a su ubicación, esto puede variar, sí tu servidor por alguna razón se encuentra en Europa pero tus visitas son de Latinoamérica, cloudflare se encargara de redirigir las visitas a un servidor en los más cercano (Usando Proxy) con el objetivo de reducir el tiempo de carga y la espera.

Bloqueo de Tráfico Malicioso: Cloudflare también analiza las visitas en busca de amenazas y si esta detecta una IP como maligna procederá a bloquearla.

Cache estático de nuestro sitio web: Cloudflare también da uso de un cache con el objetivo de reducir la carga de nuestro sitio web, almacena imágenes, javascript y css pero no el html (sólo Almacena contenido estático). El contenido que es almacenado es actualizado con frecuencia.

Optimizar el contenido de nuestra web: Existe una tecnología dentro de Cloudflare conocida como Rocket Loader la cual es gratuita y nos ayudara a procesar de manera mucho más eficiente las solicitudes de terceros, ya sean aplicaciones, etiquetas y widgets. Básicamente transforma la agrupación de las solicitudes de secuencias de comandos en una única, esto con el objetivo de cargarlas una a la vez.

Las principales ventajas son:

Mejora el rendimiento de nuestro sitio web: Cloudflare posee servidores proxy en todo el mundo, ya con esto y con lo que se menciono anteriormente queda claro que enviara directamente al visitante al servidor más cercano con el objetivo de reducir el tiempo de espera.

Protección contra amenazas y Bots: Los ataques hoy en día son extremadamente comunes por eso cloudflare mediante los datos proporcionados por su comunidad (Project Honey Pot) y otras fuentes proporcionadas por terceros realiza la identificación de posibles amenazas y cuando esta se confirma como tal procede a bloquearla/s evitando que llegue/n al sitio web.

Optimización para dispositivos móviles: Es bastante curioso pero Rocket Loader con el uso del AutoMinify nos permite que nuestro sitio web cargue más rápido y sea más eficiente esto sin importar desde que dispositivo es cargado.

Protección contra comentarios Spam: Básicamente reduce el número de comentarios spam usando datos de terceros.

Modo de navegación Offline: Y he aquí la principal característica y la que más me agrada, Cloudflare en caso de que nuestro sitio web se encuentre caído les mostrara una versión cacheada de nuestro sitio a los visitantes para que este, este 100% online las 24 horas.

Reduce el uso de los recursos: Ya anteriormente había hecho referencia a esto pero no me tome el tiempo de explicarlo, reduce básicamente el uso del CPU y los recursos consumidos, si por ejemplo recibimos una increíble cantidad de trafico Cloudflare se encargara de absorber la mitad de estas solicitudes, ya con esto se pueden dar una idea de lo extremadamente útil que es esta herramienta.

Rastreo de amenazas y información para los motores de búsqueda: Es bastante sencillo Cloudflare rastreara las amenazas y el trafico legitimo informándole a los motores de búsqueda de este.

Soporte SSL: Para aquellos que den uso del SSL, Cloudflare permite que este sea aplicable y proporciona bastante información sobre el mismo.
Ok ya hemos visto una increíble cantidad de ventajas, pero cuales son las principales limitaciones del servicio de Cloudflare:

Sí tenemos alguna aplicación que se encarga de analizar las estadísticas de nuestro sitio web de forma directa, esta será afectada por Cloudflare por hacer una referencia, afecta el funcionamiento de las estadísticas que proporciona Jetpack en Wordpress, pero no afecta a aplicaciones como Google Analytics que dan uso del JavaScript.

Aunque Cloudflare realiza almacenamiento de contenido en el cache reduciendo la carga de nuestro sitio web, este tiene un problema y es que si realizamos la actualización de contenido estático este tomara tiempo para que el cambio sea visible. Esto se puede evitar en las entradas de Worpdress con la instalación de un plugin.

¿Es realmente Cloudflare un CDN?

Para empezar he nombrado anteriormente y en este artículo muchas veces a Cloudflare como un CDN, algunos no lo consideran tal pero este se encuentra distribuido por todo el mundo y debido a lo que ofrece como tal se puede considerar un CDN.

Registro, Instalación y Configuración del Cloudflare:

1. Registro y Configuración

1.1 Click en Sign up



1.2 Rellenamos el formulario y accedemos a nuestra cuenta



1.3 Introducimos la URL de nuestro Sitio Web



1.4 Esperamos a que finalice el Vídeo y Click en Continuar



1.5 Luego de eso Cloudflare procederá a realizar un análisis de las DNS



Aquí es donde muchos sin conocimientos pierden la cabeza, para empezar por defecto todo lo seleccionado por Cloudflare es correcto pero para ser más específicos en el apartado MX en la mayoría de los casos deja por defecto la URL de tu sitio web, este apartado se encargara de pasar los correos electrónicos de nuestro servicio, por lo tanto algunos servidores requieren el uso de un subdominio mail ejemplo: mail.ejemplo.com sí es tu caso no olvides modificar este apartado y añadir el mail.

Como segundo a añadir aquellos que tienen la nubecita anaranjada quiere decir que son los servicios que tienen activo el Cloudflare, por defecto tienen que ser tusitioweb.com y www (www.tusitioweb.com).



Ya luego de verificar que todo este correcto procederemos a continuar.

1.6 Confirmamos el plan que ocuparemos para nuestro proyecto ya sea gratuito o de pago

e8ada0313440485bb6f08920b566419b.png



Para proyectos con poco trafico es recomendado ocupar el plan gratuito, es mas en la mayoría de los casos daremos uso de este, si tenemos un proyecto con mucho trafico warez/+18 por ejemplo que requiera del uso de un plan más avanzado pues daremos uso de él.

Como este no es el caso nos quedamos con el gratis y le damos continuar.



Luego de esto Cloudflare nos proporcionara las DNC las cuales debemos cambiarla en nuestro registrador (dominio) y ya con esto básicamente estará activo luego de que los cambios de DNC sean efectuados.

Para confirmar que este activo simplemente debemos dar click en: Recheck Nameservers



Y luego de un rato nos saldrá activo:



Ya con esto tendremos el Cloudflare activo pero… para acelerar aun mas nuestro sitio web podemos dar uso de las herramientas que este nos ofrece, para empezar
1.7 Click en: Speed




1.7.1. Activamos las opciones de Auto Minify (CSS y HTML)



¿Por qué no activamos Javascript?
, como mencionamos anteriormente este puede presentarnos muchos problemas en algunos casos, hace que simplemente pasaremos del. AtenciónAuto Minify: Puede presentar problemas con la carga de los Widget de redes sociales en algunos casos, por lo tanto si este llega a ser tu caso te recomiendo desactivar tanto el CSS como el HTML y si usas wordpress instalar el plugin Autoptimize y activar la opción de HTML y CSS, básicamente realiza lo mismo pero no presenta estos problemas.

1.7.2 Bajamos y Activamos en (Automático) el Rocket Loader - Atención: !Rocket Loader puede presentar problemas con el Javascript y la carga de imágenes, esto se me presento recientemente, mi sitio web carga perfectamente pero luego de volverlo a cargar las imágenes no cargaban, si les llega a ocurrir desactiven esta opción.!



Opcional: Sí tenemos un dominio para la versión móvil de nuestra web, no olviden especificarlo en Mobile Redirect para evitar cualquier tipo de inconveniente.

b528e5dbb6f0432d98ba43ad034ced00.png


1.7.3. Click en Catching



1.7.4. Dejamos por defecto el Caching Level



1.7.5 Reducimos el tiempo de expiración de “Browser Cache Expiration” sí realizamos actualizaciones continuas.



1.7.6. Activamos Always Online



En caso de que nuestro sitio web se caiga por alguna razón, esta opción lo mantendrá online con el uso de Cache.

Opcional: Apartado Firewall




Sí nos vamos al apartado de Firewall podremos modificar el nivel de seguridad que queremos que sea ocupado por Cloudflare para nuestra web, este lo podemos modificar dependiendo de la situación, por defecto recomiendo dejarlo en medio pero sí estamos siendo atacados obviamente lo subiremos para evitar que nuestros atacantes se salgan con la suya.

d6a8c363bb3c45b3aaf032413071b822.png


Opcional: Page Rule – Información

Este apartado es extremadamente útil, el page rule tal como su nombre lo menciona nos permite aplicar reglas a una página en concreto en nuestro cloudflare, es un apartado extremadamente completo hace que para poder explicarlo de forma correcta debería crear otro tutorial, ya para la próxima semana luego de hacer un poco de tiempo hare un tutorial explicando cada una de sus funciones.

Para resumir su utilidad básicamente podemos evitar que una página en concreto sea cacheada.

1. Click en el Apartado de Page Rule



2. Click en Create Page Rule



Para aplicar el page rule a una página debemos dar uso de * este signo tanto al inicio como al final de la pagina, esto quiere decir que básicamente todo lo relacionado con esta página se le aplicaran las reglas que añadamos a continuación. Ejemplo: *tusitioweb.com/foro/* . Para añadir no se limita su uso únicamente a páginas, para más información de este apartado sí sabes Ingles te recomiendo leer la información oficial: https://support.cloudflare.com/hc/en-us/articles/218411427

Anteriormente cuando se cacheaba completamente nuestro sitio web o lo realizábamos en Wordpress esto nos presentaba ciertos problemas, por lo tanto recurríamos a evitar el cacheo de páginas en concreto con el uso de una serie de reglas aplicadas, esta las mencionare a continuación por si deseas evitar que una página en concreto sea “cacheada”.



El funcionamiento de cada una de estas opciones es simple, Browser Cache TTL nos permite modificar el tiempo necesario en esa página para que el cacheo sea actualizado.

Always Online nos permite activar o desactivar el funcionamiento de esta opción.

Disable Security: Desactivar la seguridad

Disable Apps: Desactiva todas las aplicaciones de Cloudflare

Disable Performance: Desactiva la optimización

Estos apartados básicos no necesitan de ningún tipo de explicación ya que se comprende fácilmente, pero ofrecen una gran utilidad, en caso de que quieras desactivar estas opciones en alguna página o apartado en concreto no olvides modificarlo creando un Page Rule.

Anteriormente he puesto “cache” entre comillas por que estas opciones lo que hacen es evitar algún tipo de problema en estos apartados, muchas de estas opciones anteriormente presentaban inconvenientes por eso eran desactivadas en algunas zonas, si tu estas ocupando Wordpress y quieres desactivar estas opciones en Login o WP-ADMIN puede hacerlo, debo dejar en claro que no están necesario. Hoy por hoy en estos apartados de Wordpress Cloudflare ya no presenta ningún problema. Antes el mayor problema era el login.

Información Extra: Apartado Overview



En este apartado el primero que se nos presenta luego de activar el Cloudflare podremos encontrar enlaces directos hacia las configuraciones más importantes de nuestro Cloudflare, ya sea nivel de cache, modo desarrollador, SSL, y nivel de seguridad.

Algunos no saben de esto pero si seleccionamos una de estas opciones nos llevara directamente a su apartado de configuración, les ahorrara tiempo.



Instalación y Configuración del Plugin de Cloudflare en WordpressCloudFlare y CloudFlare(R) Cache Purge.

1. Instalamos el Plugin oficial de Cloudflare y lo Actívamos



Un problema que puede presentar Cloudflare en Wordpress es que todos los logs serán reflejados a las IPS de los visitantes, esto básicamente quiere decir que no mostrara las IPs reales.

Con la instalación y activación de este plugin.

Atención: Sí tu servicio de alojamiento tiene instalado el mod_cloudflare no será necesaria la instalación de este plugin.

Algo interesante es que el uso de este plugin nos permite que Cloudflare aprenda cada vez que marquemos un comentario como Spam, lo cual es extremadamente útil.

2. Configuración del Plugin

Luego de instalar el plugin damos click en:



Procedemos a introducir el nombre de nuestro dominio sin www, https o algún subdominio. (blog.dominio.com).



Colocamos nuestra API Key de Cloudflare:



Esta la podemos conseguir en https://www.cloudflare.com/a/account/my-account en el apartado de API Key, la que necesitamos es la Global API Key.



Por último colocamos nuestro Correo electrónico en el apartado de CloudFlare API Email:



Ya con esto luego de guardar los cambios tendremos el plugin instalado y en correcto funcionamiento.

Sí deseas que el cache de CloudFlare sea purgado cada vez que realizas una actualización o publicas una entrada te recomiendo la instalación de CloudFlare(R) Cache Purge.

La configuración de este es casí la misma que el anterior, pero debemos activar la pestalla de Purge url when a post is updated, el resto es muy simple hace que me limitare a no realizar un tutorial de instalación y configuración, ya que es básicamente lo mismo.



Ya con esto hemos terminado, la verdad muchas gracias para aquellos que se tomaron el tiempo de llegar a este punto, me ha tomado realmente mucho tiempo la elaboración de este tutorial así que agradecería el apoyo con un Me Agrada, muchas gracias.
 
Última edición:
Para varios subdominios, ¿bastaria una sola cuenta registrando el dominio raiz?

Seria suficiente configurar una sola vez en la pagina de Cloudflare y ya en cada subdominio con su wP los mismos datos de la cuenta (solo modificando acada url en "Cloudflare Domain Name)

Nunca e usado Cloudflare 😛7:
 
Para varios subdominios, ¿bastaria una sola cuenta registrando el dominio raiz?

Seria suficiente configurar una sola vez en la pagina de Cloudflare y ya en cada subdominio con su wP los mismos datos de la cuenta (solo modificando acada url en "Cloudflare Domain Name)

Nunca e usado Cloudflare 😛7:

A ver actualizo un poco, dentro de CloudFlare, sí basta una sola cuenta registrada para varios dominios, en realidad sí no me equivoco no ay limites siempre y cuando ocupes el plan gratuito.
Solo debes dar click en Add Site y realizar la configuración, y todo estará funcionando correctamente.
 
Última edición:
Muy buen tutorial, yo tengo activado en Auto Minify las 3 opciones y no he tenido ningún problema, uso wordpress en 5 sitios y en todos tengo activada esas opciones y ningún problema, creo que es en casos diferentes de configuración de caché
 
Muy buen tutorial, yo tengo activado en Auto Minify las 3 opciones y no he tenido ningún problema, uso wordpress en 5 sitios y en todos tengo activada esas opciones y ningún problema, creo que es en casos diferentes de configuración de caché

Estuve investigando bastante ya que el javascript no debería presentar problemas en la mayoría de los casos, pero yo uso un tema llamado Newppaper y este ocupa demasiado del javascript entonces la compresión del mismo genera muchos problemas, por lo tanto en mí caso con un tema que da uso del slide y mucho javascript presenta parcialmente problemas para las visualizaciones de las imágenes, en mí caso recurrí al uso de un plugin de wordpress y no use directamente las opciones del minify ofrecidas por cloudflare.

Para temas simples y minimalistas que no den tanto uso de los Slide no debería presentar ningún problema. :encouragement:
 
Estuve investigando bastante ya que el javascript no debería presentar problemas en la mayoría de los casos, pero yo uso un tema llamado Newppaper y este ocupa demasiado del javascript entonces la compresión del mismo genera muchos problemas, por lo tanto en mí caso con un tema que da uso del slide y mucho javascript presenta parcialmente problemas para las visualizaciones de las imágenes, en mí caso recurrí al uso de un plugin de wordpress y no use directamente las opciones del minify ofrecidas por cloudflare.

Para temas simples y minimalistas que no den tanto uso de los Slide no debería presentar ningún problema. :encouragement:

Entonces dependería de lo cargado que esté un theme de javascript, yo uso Sahifa y otros themes y todo bien.
 
Entonces dependería de lo cargado que esté un theme de javascript, yo uso Sahifa y otros themes y todo bien.

Exactamente, creo que a futuro sí logro sacar tiempo hare un tutorial de la configuración del tema Newspaper ya que junto al Sahifa son de los temas más completos que he visto para Wordpress en themeforest. Sin duda vale cada dólar ese tema. :encouragement:
 
Bueno el tutorial esta excelente ya habia escuchado de estas formas de proteger, aunque la verdad apenas con este tema veo bien como se deve de poner a funcionar, lo tendré que leer de nuevo ya en la practica, gracias.
 
Bueno el tutorial esta excelente ya habia escuchado de estas formas de proteger, aunque la verdad apenas con este tema veo bien como se deve de poner a funcionar, lo tendré que leer de nuevo ya en la practica, gracias.

Es extremadamente útil el Cloudflare, en los inicios también tenía bastantes dudas del funcionamiento de este “CDN”, entre comillas porque algunos no lo consideran como tal y puede usarse junto a otro CDN.
 
Esto me viene como anillo al dedo; muchísimas gracias por el tutorial!
 
Hola, gracias por el tuto, muy claro para un tema novedoso para mi. Lo tengo todo activa y esperando el cambio de dns..
Una preguntita
Los certificados SSL funcionan bien? alguien lo utiliza?

Un saludo
 
yo te recomendaria hacer una instalacion nueva de Wordpress. configurarlo y si todo va bien hacerlo en tu pagina real :encouragement:
 
me sirvio este tutorial para configurarlo para un dominio,
luego de meses regreso para hacerlo con otros dominios y las imagenes estan caidas :sorrow::sorrow:
 
Justo lo que necesitaba, gracias por la información.
 
[MENTION=147820]Egicze[/MENTION] Excelente tutorial, te felicito.

Creo que te saltaste la parte "básica" de añadir la IP de tu web también

@ >>>> IP

Nota, te dejé un mp 😉
 
Gracias por la informacion
 
exelente tutorial gracias.:encouragement:
 
En donde se agregarían los archivos css,js,img etc?
 
Si esto es muy bueno tenemos una página web donde podré aplicar esto🙂
 
Atrás
Arriba