Você gostaria de aprender como configurar o recurso de cache do Apache Browser? Neste tutorial, mostraremos todas as etapas necessárias para configurar o recurso Apache Browser Caching em um computador que executa o Ubuntu Linux.

• Versão do Ubuntu: 18.04

Lista de Hardware:

A seção a seguir apresenta a lista de equipamentos usados para criar este tutorial do WordPress.

Cada peça de hardware listada acima pode ser encontrada no site da Amazon.

WordPress Playlist:

Nesta página, oferecemos acesso rápido a uma lista de vídeos relacionados à instalação do WordPress.

Não se esqueça de se inscrever em nosso canal do youtube chamado FKIT.

Tutoriais Relacionados ao WordPress:

Nesta página, oferecemos acesso rápido a uma lista de tutoriais relacionados à instalação do WordPress.

Tutorial - Configuração do Cache do Apache Browser

Primeiro, você precisa instalar o servidor web Apache.

No console do Linux, use os seguintes comandos para instalar o Apache.

# apt-get update
# apt-get install apache2

Agora, você precisa ativar os seguintes módulos do Apache:

• mod_headers
• mod_expires

Use os seguintes comandos para habilitar mod_headers e mod_expires.

# a2enmod headers
# a2enmod expires

# systemctl restart apache2

Edite o arquivo de configuração apache2.conf.

# vi /etc/apache2/apache2.conf

No final do arquivo, insira a configuração de cache do navegador desejada.

Por exemplo, aqui está nossa configuração.

<IfModule mod_expires.c>
ExpiresActive On
FileETag None
ExpiresDefault "access plus 14 days"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType text/css "now plus 1 month"
ExpiresByType image/ico "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType text/html "access plus 1 days"
</IfModule>

Para ativar a nova configuração, você precisa reiniciar o Apache.

# systemctl restart apache2

Tenha em mente que você precisa especificar a quantidade desejada de tempo de cache do navegador para atender às suas necessidades.

Teste - Configuração do Cache do Apache Browser

Para testar sua configuração de cache do navegador, vamos criar uma página HTML básica com uma imagem

# cd /var/www/html
# wget https://techexpert.tips/wp-content/uploads/2017/12/TechExpert-Logo-Small.png
# vi test.html

Aqui está o conteúdo do arquivo test.html.

<html>
<body>
<h1>TEST header</h1><br>
<img src="TechExpert-Logo-Small.png">
</body>

</html>

Instale o software necessário para testar o recurso Apache Browser Caching.

# apt-get update
# apt-get install wget curl

Use o seguinte comando para testar o recurso de armazenamento em cache do navegador para documentos HTML usando o WGET.

Tenha em mente que você precisa alterar 200.200.200.200 para o endereço IP do seu servidor.

# wget -S http://200.200.200.200/test.html

Aqui está o resultado da configuração do Cache do Navegador antes da nossa configuração:

HTTP request sent, awaiting response...
HTTP/1.1 200 OK
Date: Fri, 14 Dec 2018 16:58:36 GMT
Server: Apache/2.4.29 (Ubuntu)
Last-Modified: Fri, 14 Dec 2018 16:19:49 GMT
ETag: "64-57cfdcce7b707"
Accept-Ranges: bytes
Content-Length: 100
Vary: Accept-Encoding
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html
Length: 100 [text/html]

Aqui está o resultado da configuração do Cache do Navegador após nossa configuração:

HTTP request sent, awaiting response...
HTTP/1.1 200 OK
Date: Fri, 14 Dec 2018 17:05:04 GMT
Server: Apache/2.4.29 (Ubuntu)
Last-Modified: Fri, 14 Dec 2018 16:19:49 GMT
Accept-Ranges: bytes
Content-Length: 100
Cache-Control: max-age=86400
Expires: Sat, 15 Dec 2018 17:05:04 GMT
Vary: Accept-Encoding
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html
Length: 100 [text/html] Saving to: ‘test.html.3’

Como você pode ver, nossa configuração especifica o cache de um dia para documentos HTML.

• ExpiresByType text / html "acesso mais 1 dia"

O resultado do WGET mostra que o arquivo HTML será mantido até amanhã.

• Expira: sáb, 15 dez 2018 17:05:04 GMT

Use o seguinte comando para testar o recurso de armazenamento em cache do navegador para imagens PNG usando CURL.

# curl -svo /dev/null http://200.200.200.200/TechExpert-Logo-Small.png

Aqui está o resultado da configuração do Cache do Navegador antes da nossa configuração:

* TCP_NODELAY set
* Connected to 34.220.19.99 (34.220.19.99) port 80 (#0)
> GET /TechExpert-Logo-Small.png HTTP/1.1
> Host: 34.220.19.99
> User-Agent: curl/7.58.0
> Accept: */*
>
< HTTP/1.1 200 OK
< Date: Fri, 14 Dec 2018 17:24:32 GMT
< Server: Apache/2.4.29 (Ubuntu)
< Last-Modified: Sat, 24 Nov 2018 02:49:53 GMT
< ETag: "483-57b60277af640"
< Accept-Ranges: bytes
< Content-Length: 1155
< Content-Type: image/png
<
{ [1155 bytes data]

Aqui está o resultado da configuração do Cache do Navegador após nossa configuração:

* TCP_NODELAY set
* Connected to 34.220.19.99 (34.220.19.99) port 80 (#0)
> GET /TechExpert-Logo-Small.png HTTP/1.1
> Host: 34.220.19.99
> User-Agent: curl/7.58.0
> Accept: */*
>
< HTTP/1.1 200 OK
< Date: Fri, 14 Dec 2018 17:18:04 GMT
< Server: Apache/2.4.29 (Ubuntu)
< Last-Modified: Sat, 24 Nov 2018 02:49:53 GMT
< Accept-Ranges: bytes
< Content-Length: 1155
< Cache-Control: max-age=2592000
< Expires: Sun, 13 Jan 2019 17:18:04 GMT
< Content-Type: image/png
<
{ [1155 bytes data]

Como você pode ver, nossa configuração especifica um mês de cache para imagens PNG.

• ExpiresByType image / png "acesso mais 1 mês"

O resultado da CURL mostra que o arquivo PNG será mantido até 13 de janeiro.

• Expira: domingo, 13 jan 2019 17:18:04 GMT