Corregir error “413 Request Entity Too Large” cuando se suben temas de WordPress a tu servidor

Problema

Cuando trato de subir un archivo un poco “pesado” a mi servidor (por ejemplo un tema de WordPress) estoy recibiendo el error 413 Request Entity Too Large

Explicación del error

Este error sucede porque en la configuración de tu servidor web nginx hay una limitante en cuanto al tamaño del archivo que se puede subir; este tamaño usualmente se especifica en megabytes y normalmente está acotado a sólo 2 MB, lo cual es muy poco para un tema de WordPress por ejemplo.

Solución

Lo que debemos hacer son dos cosas:

Paso 1. Modifica la configuración de nginx

Modificar nuestra configuración de nginx para que tenga un parámetro con  menos limitante en cuanto al tamaño en megabytes que podemos subir a nuestro servidor usando un navegador web.

Para ello, procedamos con lo siguiente:

Ingresa en modo terminal en tu servidor y abre el siguiente archivo (previo respaldo del mismo):

sudo cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.backup
sudo nano /etc/nginx/nginx.conf

Localiza el bloque referente a la configuración http y agrega la siguientes líneas:

# To avoid error when uploading files added Alex Arriaga
client_max_body_size 32M;

Como notarás ahora estamos indicando un tamaño de cuerpo de las peticiones de 32 MB (es decir, podrías subir por ejemplo un archivo ZIP de aproximadamente ese tamaño).

Después de la modificación de tu archivo más o menos se contendrá algo como esto:

http {

        ##
        # Basic Settings
        ##

        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        keepalive_timeout 65;
        types_hash_max_size 2048;
        # server_tokens off;

        server_names_hash_bucket_size 64;
        # server_name_in_redirect off;

        include /etc/nginx/mime.types;
        default_type application/octet-stream;

        # To avoid error when uploading files added Alex Arriaga
        client_max_body_size 32M;

        # Aquí habrá más líneas de configuración...
        # ...


}

Paso 2. Verifica sintaxis y recarga la configuración

Primero verifiquemos que NO tenemos errores de sintaxis en nuestro archivo de configuración. Eso se hace fácilmente con el siguiente comando.

sudo service nginx configtest

En caso de tener algún error, puedes ver qué pasa usando este comando:

sudo nginx -t

Si no ves algún error, entonces es momento de recargar la configuración de nginx usando:

sudo service nginx reload

Paso 3. Modifiquemos nuestro archivo php.ini para que coincida con el parámetro de nginx

El archivo php.ini es un archivo de configuración de PHP (el lenguaje de servidor con el que están hechos muchos CMS -como WordPress y Drupal- y frameworks -como Laravel y CakePHP-.

La localización de este archivo puede variar, la forma más fácil de saber dónde está este archivo, es creando un archivo info.php en tu servidor y accederlo desde tu portal de internet (ya sea en local o en un dominio real).

Veamos cómo hacer esto:

# Esta sería la ruta donde está tu proyecto
cd /path/to/your/project/or/app
sudo nano info.php

Coloca en este archivo la siguiente línea de código PHP:

<?php phpinfo(); ?>

Ahora si tu sitio de internet o aplicación está en http://example.com, entonces podríamos visitar http://example.com/info.php y veríamos una tabla de color morado con datos como estos:

Busca ahí la parte donde diga “Configuration File (php.ini) Path” y con eso sabrás dónde está tu archivo php.ini. En nuestro caso está en la ruta:

nano /etc/php/7.0/fpm/php.ini
Al terminar estas configuraciones recuerda eliminar el archivo info.php ya que expone DEMASIADA información que un atacante pudiera usar para hacer cosas malas en tu sitio.

Perfecto, ahora abramos este archivo y modifiquemos esta línea:

upload_max_filesize = 2M

Para abrir tu archivo simplemente usa algún editor como nano:

sudo nano /etc/php/7.0/fpm/php.ini

Después de modificar tu archivo, éste se vería con algunas líneas como estas:

; Maximum allowed size for uploaded files.
; http://php.net/upload-max-filesize
; upload_max_filesize = 2M

; Esta es nuestra configuración cambiada a 32M
upload_max_filesize = 32M

Guarda tu archivo y continuemos.

Paso 4. Reiniciemos PHP-FPM

Este paso podría NO aplicar a tu servidor, ya que depende si uses PHP-FPM en caso de que no, con el simple reinicio de Nginx debería ser suficiente.

# Restart Nginx
sudo service nginx restart

# Restart PHP-PFM
sudo /etc/init.d/php7.0-fpm restart

Y listo, ahora si intentas subir tu archivo, ya deberías tener permitidos archivos con un tamaño mayor (32 M).

Saludos cordiales y nos vemos en otro momento.

Por cierto ¿ya viste todos los cursos que tenemos en Webtraining.Zone? Si no, aquí puedes ver TODO el catálogo de cursos premium con los cuales podrás dar el siguiente paso en tu carrera como Desarrollador, Ingeniero o Arquitecto de la Web.

¿Qué es JSON-LD?

JSON-LD, ¿así que encontraste este nuevo término y no te quedó claro si es una nueva forma de describir objetos en JavaScript? ¿o si se trata de un nuevo framework para crear aplicaciones? ¿o si es parte de la especificación ES8?

La respuesta a todas las preguntas anteriores es: NO.

JSON-LD = JavaScript Object Notation for Linked Data

JSON-LD es una forma de codificar o representar Datos Enlazados (Linked Data) utilizando el famoso formato JSON.

¿Qué significa en palabras más simples?

Muy bien, demos una definición algo más digerible que los tecnicismos; imagina que tienes varias aplicaciones, cada una de estas aplicaciones o sistemas utiliza su propia forma de guardar información (bases de datos relacionales, bases de datos NoSQL, archivos, etc.).

Y ahora imagina que tienes la responsabilidad de obtener información de una aplicación para presentarla en la otra, pero no sólo eso, te interesa que los datos de una aplicación tengan una forma de relacionarse contra los datos de otro sistema.

Normalmente este tipo de problemas de integración y relación los resolvemos generando otro sistema que mantenga esto…

Lo cual evidentemente a largo plazo genera muchos retos para mantener índices, tablas, o cualquier cosa que guarde las relaciones entre tus datos.

¿Que tal si hubiera una forma de relacionar toda la complejidad de tus datos en alguna manera que OTROS sistemas (incluso aún no creados) pudieran “comprender” inmediatamente?

La respuesta a esta necesidad se llama: Linked Data o la iniciativa de Datos Enlazados que tiene el W3C. Es una propuesta fue hecha por Tim Berners Lee por allá de 2009 en esta conferencia de TED.

¿Y qué tiene que ver esto de Linked Data con JSON-LD?

Bueno, pues precisamente JSON-LD permite describir o codificar datos que siguen esta recomendación del W3C.
¿Te gustaría ver un ejemplo de un objeto escrito en JSON-LD? Aquí tienes un objeto que describe a John Lenon:
{
  "@context": "https://json-ld.org/contexts/person.jsonld",
  "@id": "http://dbpedia.org/resource/John_Lennon",
  "name": "John Lennon",
  "born": "1940-10-09",
  "spouse": "http://dbpedia.org/resource/Cynthia_Lennon"
}

Como verás es JSON con algunas particularidades como la existencia de algo llamado “@context” que pareciera ser una URL a “algo”.

Si abres esa URL encontrarás algo como esto, que es llamado un “Schema” o en otras palabras es el conjunto de propiedades que describen a una persona (Person).
{
   "@context":
   {
      "Person": "http://xmlns.com/foaf/0.1/Person",
      "xsd": "http://www.w3.org/2001/XMLSchema#",
      "name": "http://xmlns.com/foaf/0.1/name",
      "nickname": "http://xmlns.com/foaf/0.1/nick",
      "affiliation": "http://schema.org/affiliation",
      "depiction":
      {
         "@id": "http://xmlns.com/foaf/0.1/depiction",
         "@type": "@id"
      },
      "image":
      {
         "@id": "http://xmlns.com/foaf/0.1/img",
         "@type": "@id"
      },
      "born":
      {
         "@id": "http://schema.org/birthDate",
         "@type": "xsd:dateTime"
      },
      "child":
      {
         "@id": "http://schema.org/children",
         "@type": "@id"
      },
      "colleague":
      {
         "@id": "http://schema.org/colleagues",
         "@type": "@id"
      },
      "knows":
      {
         "@id": "http://xmlns.com/foaf/0.1/knows",
         "@type": "@id"
      },
      "died":
      {
         "@id": "http://schema.org/deathDate",
         "@type": "xsd:dateTime"
      },
      "email":
      {
         "@id": "http://xmlns.com/foaf/0.1/mbox",
         "@type": "@id"
      },
      "familyName": "http://xmlns.com/foaf/0.1/familyName",
      "givenName": "http://xmlns.com/foaf/0.1/givenName",
      "gender": "http://schema.org/gender",
      "homepage":
      {
         "@id": "http://xmlns.com/foaf/0.1/homepage",
         "@type": "@id"
      },
      "honorificPrefix": "http://schema.org/honorificPrefix",
      "honorificSuffix": "http://schema.org/honorificSuffix",
      "jobTitle": "http://xmlns.com/foaf/0.1/title",
      "nationality": "http://schema.org/nationality",
      "parent":
      {
         "@id": "http://schema.org/parent",
         "@type": "@id"
      },
      "sibling":
      {
         "@id": "http://schema.org/sibling",
         "@type": "@id"
      },
      "spouse":
      {
         "@id": "http://schema.org/spouse",
         "@type": "@id"
      },
      "telephone": "http://schema.org/telephone",
      "Address": "http://www.w3.org/2006/vcard/ns#Address",
      "address": "http://www.w3.org/2006/vcard/ns#address",
      "street": "http://www.w3.org/2006/vcard/ns#street-address",
      "locality": "http://www.w3.org/2006/vcard/ns#locality",
      "region": "http://www.w3.org/2006/vcard/ns#region",
      "country": "http://www.w3.org/2006/vcard/ns#country",
      "postalCode": "http://www.w3.org/2006/vcard/ns#postal-code"
   }
}

¿Genial no crees? Significa que ahora puedes describir tus modelos de datos (entidades de información) usando un formato muy conocido en el mundo de la web, es decir, en JSON.

Y no sólo eso, sino que JSON-LD es el formato recomendado por buscadores web como Google para proveer datos enriquecidos que ellos puedan utilizar para mejorar el mostrado de resultados, como lo indican en las “Structured Data General Guidelines”

¿Dónde puedes aprender más sobre este tipo de datos estructurados en JSON-LD?

Por supuesto aquí en Webtraining.Zone en nuestro taller de Datos Estructurados para SEO.

Todo esto de los datos enlazados es un campo emergente y su potencial es muy grande, hoy por hoy ya empiezan a nacer productos que hacen más fácil la creación de datos siguiendo esta recomendación del W3C.

Un ejemplo de una herramienta muy poderosa para crear aplicaciones que usen Linked Data es Carbon LDP.

¿Te gustaría seguir aprendiendo sobre Linked Data, JSON-LD y cosas relacionadas a la Web Semántica?

Déjanos un comentario y con gusto veremos cómo mostrarte una área emergente que cambiará la forma en cómo hacemos aplicaciones y sistemas.

Saludos.

Tu Servidor,

Alex Arriaga