Em um tutorial anterior, mostrámos como pode libertar mídia para o Amazon S3. Hoje iremos mostrar algumas opções sobre como libertar a mídia do seu site WordPress para o Google Cloud Storage, além de poder apresentar a mídia diretamente a partir do Google Cloud Storage ou de um CDN. 

Tendo em conta que Kinsta é alimentado pelo Google Cloud Platform, somos obviamente enormes fãs da sua tecnologia e infraestrutura. A principal razão é que poupamos espaço em disco. 

O Google Cloud Storage é somente uma pequena parte dos muitos produtos e serviços do Google Cloud Platform. Devido à enorme infraestrutura do Google e ao fato de eles lidarem com armazenamento em massa, conseguem oferecer custos de armazenamento muito baixos. Bem inferiores a um host do WordPress. 

Por norma, o armazenamento em nuvem desse tipo é usado para sites que precisam de backups externos adicionais ou que estão apresentando arquivos grandes (imagens, fotos, downloads, software, vídeos, jogos). Alguns dos seus clientes incluem Spotify, Vimeo, Coca-Cola, Philips, Evernote e Motorola.

Google Cloud Storage vs CDN do Google Cloud

O Google Cloud Storage não deve ser confundido com o CDN do Google Cloud, nem com qualquer outro provedor de CDN. Uma rede de entrega de conteúdo (CDN) é desenhada especificamente para agilizar a entrega da sua mídia, já o Google Cloud Storage foi concebido enquanto solução de armazenamento em massa. 

Contudo, o Google Cloud Storage pode ajudar tornar seu site mais rápido, já que ele utiliza algo designado por armazenamento multi-regiões. Isso significa que o seu conteúdo do Google Cloud Storage é armazenado e apresentados vários locais dentro dessa região, de forma parecida com um CDN. Utiliza ainda a mesma tecnologia de cache. Mas, é importante notar que isso não é global e apresentará provavelmente uma maior latência do que uma solução integral com CDN. O Google Cloud Storage permitirá escolher entre três regiões: 

  • Ásia-Pacífico 
  • União Europeia 
  • Estados Unidos 

Porém, mostramos abaixo como pode também usar um CDN com o Google Cloud Storage.

Se você é um cliente Kinsta, como parte da nossa integração com o Cloudflare, o Edge Caching salva o cache do seu site/página Kinsta em qualquer uma das redes globais de 260+ centros de dados do Cloudflare.

O Edge Caching está incluído gratuitamente em todos os planos Kinsta, não requer um plugin separado e reduz o tempo necessário para servir o HTML do WordPress em cache em uma média de mais de 50%!

Preços do Google Cloud Storage

O Google Cloud Platform oferece uma teste gratuito de US$300 para novos clientes com a duração de 3 meses. Se nunca foi um cliente pagante do Google Cloud Platform e não se registrou anteriormente para um teste gratuito, você é elegível. Essa é uma excelente forma de testar o Google Cloud Storage e ver se ele é a melhor opção para o seu site antes de pagar. Consulte a FAQ sobre avaliação gratuita e preços do Google Cloud Storage.

Teste gratuito do Google Cloud Platform
Teste gratuito do Google Cloud.

Configuração do Google Cloud Storage no WordPress com o WP-Stateless

Sua primeira opção para integrar o Google Cloud Storage no seu site WordPress é usar o plugin WP-Stateless gratuito, desenvolvido pela fantástica equipe da Usability Dynamics. 

Esse plugin copia automaticamente os arquivos do seu site WordPress para o Google Cloud Storage à medida que são enviados para a biblioteca de mídia. Depois apresenta diferentes modos, como fazer o backup de uma cópia da sua mídia ou até mesmo excluir a mídia do WordPress, apresentando esse conteúdo a partir do Google Cloud Storage.

Plugin WP-Stateless para WordPress
Plugin WP-Stateless para WordPress

Esse plugin ainda é bastante recente, mas tem uma ótima reputação e é ativamente mantido e atualizado. Até ao momento, tem mais de 2,000 instalações ativas com uma impressionante classificação de 5 estrelas. Oferece também compatibilidade oficial com os seguintes plugins externos: 

  • Easy Digital Downloads
  • Imagify Image Optimizer
  • WPForms
  • WP Smush
  • Advanced Custom Fields Image Crop Addon
  • SiteOrigin Widget Bundle
  • SiteOrigin CSS
  • Gravity Forms
  • WPBakery Page Builder

Mesmo que um plugin não esteja listado acima, isso não significa que ele não funcionará com a integração. Esses são apenas os plugins nos quais a equipe da UsabilityDynamics trabalhou para corrigir erros e confirmar a compatibilidade. Contudo, recomendamos testar previamente novos plugins como esse um ambiente de testes. 

Passo 1

Para instalar o plugin gratuito WP-Stateless, pode baixar no Repositório WordPress ou procurar por “WP-Stateless” no seu painel WordPress em “Adicionar Novos” plugins. Clique em “Instalar Agora” e ative. 

Instalar o plugin WP-Stateless no WordPress
Instalar o plugin WP-Stateless no WordPress

Passo 2

Clique em “Iniciar Assistente de Configuração”. Ou pode seguir as instruções de configuração manual. 

Configuração do WP-Stateless
Configuração do WP-Stateless

Passo 3

Clique em “Google Login”. Deve usar a Conta do Google que pretende associar a esse site e concordar com a solicitação de permissão. Se não tem certeza sobre como conceder acesso à sua Conta Google, confira a documentação deles sobre a solicitação de permissões. Se preferir não fornecer acesso à sua conta do Google, pode sempre usar o processo de configuração manual . 

Login no Google no WP-Stateless
Login no Google no WP-Stateless

Passo 4

Clique em “Permitir” para que eles visualizem e gerenciem seus dados nos serviços do Google Cloud Platform. Nota: Quando o processo de login do usuário for concluído, eles não retêm qualquer token ou credenciais de acesso. 

Solicitação de permissões para a conta Google
Solicitação de permissões para a conta Google

Passo 5

O WP-Stateless ajudará você a configurar seu Google Cloud Project e Bucket, que armazenarão seus arquivos de mídia do WordPress. 

  • Google Cloud Project: Cada Google Cloud Bucket está contido em um projeto. Você pode criar um novo projeto ou escolher um dos seus projetos existentes. 
  • Google Cloud Bucket: Todos os seus dados WordPress são armazenados em um bucket. Você pode criar um novo bucket ou escolher um dos seus buckets existentes. 
  • Localização Multi-Regiões do Google Cloud Bucket: O seu bucket recém-criado terá uma classe de armazenamento multi-regiões. Selecione a região mais próxima da maioria dos visitantes do seu site. 
  • Faturamento do Google Cloud: se não tiver uma conta de faturamento, clique no botão para configurar uma. Não esqueça que eles oferecem teste gratuito de US$300 com duração de 3 meses.

Importante: se quiser usar seu próprio domínio personalizado ou CDN no Google Cloud Storage, o seu bucket deve ter o mesmo nome do URL de domínio do CDN. Nome do bucket: gcs.seudominio.com. Ele lhe dará um aviso sobre os carateres, mas podem ser pontos usados ​​nos nomes dos buckets. Apenas devem começar e terminar com um algarismo. 

Project e Bucket no WP-Stateless
Project e Bucket no WP-Stateless

Após ter configurado tudo acima, clique em “Continuar”. Deverá ver uma confirmação de que tudo está configurado corretamente. 

Configuração do WP-Stateless
Configuração do WP-Stateless

Configurações do Google Cloud Storage no plugin WP-Stateless

Pode encontrar as configurações do WP-Stateless e do Google Cloud Storage em “Mídia → Configurações Stateless”. No separador “Configurações”, deve configurar o seu modo preferido. 

  • Desativado: Desativa a Mídia Stateless. 
  • Backup: Faz o upload de arquivos de mídia para o Google Storage e exibe URLs de arquivos locais. 
  • CDN: Copia os arquivos de mídia para o Google Storage e apresenta eles a partir dessa localização. Nota: Você não pode usar o CDN da Kinsta e essa opção ao mesmo tempo. Você precisa escolher um deles. 
  • Stateless: Armazena e apresentar os arquivos de mídia apenas com o Google Cloud Storage. Os arquivos de mídia não são armazenados localmente. Essa opção pouparia o máximo de espaço em disco. 
  • Substituição de URL de Arquivo: Analisa o conteúdo e meta do conteúdo das postagens durante a apresentação e substitui os URLs de arquivos de mídia local pelos URLs do Google Cloud Storage. Essa definição não modifica sua base de dados. 
Modo WP-Stateless
Modo WP-Stateless

Você quer ter a possibilidade de reaver seus arquivos de mídia mais tarde? Não se preocupe, o plugin tem um recurso de sincronização (que exploraremos mais abaixo), caso você queira fazer essa reversão. Também pode sempre pegar suas pastas de upload WordPress no próprio repositório do Google Cloud Storage, já que isso simplesmente imita a aparência exata da sua biblioteca de mídia (como mostrado abaixo). 

Pastas bucket do Google Cloud Storage no WordPress
Pastas bucket do Google Cloud Storage no WordPress

Mais abaixo na página você encontra as configurações adicionais: 

  • Cache-Control: Por padrão, isso está definido como public, max-age=36000, must-revalidate. Pode substituir isso se quiser. 
  • Excluir Arquivo GSC: Ative essa opção se desejar que o arquivo seja excluído do GSC ao excluí-lo da sua biblioteca de mídia WordPress. 
  • URL e Domínio de Arquivo: Substitua o domínio GCS padrão pelo seu próprio domínio personalizado. Isso exigirá que você configure um CNAME. Saiba que nome do bucket e o nome do domínio devem ser exatamente iguais. De acordo com a documentação deles, o HTTPS não é compatível com um domínio personalizado, mas com a gente funcionou bem. 
  • Organização: Organize os uploads em pastas por ano e mês. 
  • Cache Busting: Atribui um conjunto aleatório de números e letras ao nome do arquivo. Isso é útil para evitar problemas de cache ao carregar arquivos com o mesmo nome de arquivo. 
Configurações adicionais do WP-Stateless
Configurações adicionais do WP-Stateless

As imagens que você carrega para sua biblioteca de mídia WordPress são automaticamente copiadas para o Google Cloud Storage. Contudo, após configurar o plugin pela primeira vez, deverá executar uma sincronização em massa. Em “Mídia → Configurações Stateless → Sincronizar”, você tem essas opções: 

  • Regenerar todas as imagens stateless e sincronizar o Google Storage com o servidor local. (Nota: essa opção irá demorar um pouco na primeira vez) 
  • Sincronizar os arquivos que não são imagens entre o Google Storage e o servidor local. 
  • Sincronizar os arquivos não mídia da biblioteca entre o Google Storage e o servidor local. 
Sincronização WP-Stateless
Sincronização WP-Stateless

Configuração do Google Cloud Storage no WordPress com o WP Offload Media Lite

A sua segunda opção para integrar o Google Cloud Storage no seu site WordPress é usar o plugin WP Offload Media Lite (ou WP Offload Mediap premium) da Delicious Brains Inc. 

Plugin WP Offload Media para WordPress
Plugin WP Offload Media para WordPress

Poderá satisfazer a maioria das suas necessidades com a versão lite do WP Offload Media; contudo, existem alguns recursos interessantes caso você opte pela versão premium: 

  • Suporte de email PriorityExpert™. 
  • Carregar a Biblioteca de Mídia existente para o armazenamento em nuvem. 
  • Controlar arquivos de armazenamento em nuvem a partir da Biblioteca de Mídia. 
  • Remover arquivos do servidor, após serem libertados em segundo plano. 
  • Baixar e remover do armazenamento em nuvem. 
  • Copiar arquivos entre buckets no seu provedor de armazenamento em segundo plano. 
  • Apresentar recursos do site (CSS, JS, imagens, fontes, etc.) do CloudFront ou de outro CDN com apenas alguns cliques usando o Assets Pull Addon. 
  • Integrações com WooCommerce, WPML, Easy Digital Downloads, Meta Slider, Enable Media Replace, e Advanced Custom Fields.

Passo 1

Para instalar o plugin gratuito WP Offload Media Lite, pode baixar ele no repositório WordPress ou procurar por “WP Offload Media Lite” no seu painel WordPress em “Adicionar Novo”. Clique em “Instalar Agora” e ative. 

Instalar o plugin WP Offload Lite no WordPress
Instalar o plugin WP Offload Lite no WordPress

Passo 2

Siga suas instruções de início rápido para Google Cloud Storage: 

Integração do CDN no Google Cloud Storage

Está preocupado com o desempenho do Google Cloud Storage? É verdade que o armazenamento multi-regiões não será tão rápido quanto um CDN normal e, obviamente, não é aconselhável para usuários globais. Contudo, você pode ainda assim apresentar os arquivos através do seu provedor de CDN favorito. Eis algumas opções diferentes. 

Configurar o WP-Stateless com o KeyCDN

Só precisa seguir os passos abaixo, nos quais usaremos o KeyCDN como exemplo. 

Importante: Isso significa que você terá de pagar pelo Google Cloud Storage e pelo provedor de CDN, então precisará provavelmente de calcular os valores antes de qualquer outra coisa. Ou, se estiver usando a versão de teste do Google Cloud Platform, essa é uma ótima forma de estimar seus custos sem ser cobrado pelo Google. O que apresentamos abaixo não funciona atualmente com o CDN da Kinsta. 

  1. Configure uma nova zona especificamente para sua mídia do Google Cloud Storage. Siga o tutorial do KeyCDN sobre a integração com o CDN do Google Cloud Storage. De forma resumida, você está usando o Google Cloud Storage como seu servidor de origem. 
  2. Use o Let’s Encrypt para HTTPS na nova zona. 
  3. Configure um novo apelido para a zona no KeyCDN. Exemplo: gcs.seudominio.com. 
  4. Use o apelido da zona nas configurações do plugin WP-Stateless.

Como resultado, o KeyCDN passa a apresentar todos os seus arquivos do Google Cloud Storage. Resolvemos o problema de desempenho! 

Google Cloud Storage e KeyCDN
Google Cloud Storage e KeyCDN

Devido ao fato de que o plugin WP-Stateless lida somente com sua biblioteca de mídia (imagens), também deverá apresentar os seus scripts (JS, CSS) através de um CDN. Siga os passos abaixo. 

  1. Configure uma zona separada com seu provedor CDN para seus ativos e utilize uma URL diferente daquela acima referida, como cdn.seudominio.com. 
  2. Instale um plugin para CDN no WordPress que suporte exclusões: CDN enabler (grátis), Perfmatters (premium) ou WP Rocket (premium). 
  3. Configure as exclusões para que o seu plugin de CDN carregue apenas CSS, JS, etc. Assim, o plugin WP-Stateless irá gerenciar seus arquivos de mídia e o plugin de CDN fará o gerenciamento dos seus recursos. 
Exclusões de CDN no Perfmatters
Exclusões de CDN no Perfmatters

O resultado final é que sua mídia é carregada a partir de seu URL de CDN personalizado (que está sendo extraída do Google Cloud Storage) e os seus ativos são carregados a partir do seu outro URL de CDN personalizado. E, se estiver no modo “Stateless”, seu site WordPress não utilizará qualquer espaço em disco para suas imagens. Muito bom! 

Combinação Google Cloud Storage e CDN
Combinação Google Cloud Storage e CDN

Configurar o WP Offload Media com o CDN do Google Cloud

Por padrão, o WP Offload Media é configurado para usar URLs brutos do Google Cloud Storage ao apresentar a mídia libertada. Seus URLs de mídia poderão ter esse aspeto: 

http://storage.googleapis.com/bucket-name/wp-content/uploads/…

Confira o tutorial deles sobre como configurar um CDN de domínio personalizado para o Google Cloud Storage.