🥇Como criar um site estático com Cloudflare Workers Sites

Olá! Meu nome é Dima, sou o líder técnico da equipe SysOps na Wrike. Neste artigo, vou mostrar como em 10 minutos e 5 dólares por mês criar um site que se aproxima do usuário e automatizar sua implantação. O artigo tem pouca relação com os problemas que enfrentamos dentro da nossa equipe. É mais uma experiência pessoal e impressões do meu contato com uma nova tecnologia. Procurei descrever os passos de forma detalhada para que as instruções sejam úteis para pessoas com diferentes níveis de experiência. Espero que você goste. Vamos lá!

Então, talvez você já tenha encontrado uma forma simples e barata de hospedar seu site. Pode até ser gratuita, como descrito neste artigo maravilhoso.

Mas talvez você ainda esteja entediado e queira explorar o maravilhoso novo mundo das tecnologias? Digamos que você está pensando em automação de implantação e gostaria de acelerar o site ao máximo? Neste artigo, usaremos Hugo, mas isso não é obrigatório.

Para automação, usamos Gitlab CI/CD, mas o que fazer quanto à aceleração? Vamos implantar o site diretamente no Cloudflare usando Worker Sites.

O que é necessário para começar:

Gitlab (seu próprio ou na nuvem)
Conta no Cloudflare
Node.js/NPM instalados Parte 1: Instalando o Hugo

Se você já tem o Hugo instalado ou se prefere outro gerador de sites estáticos (ou não utiliza nenhum), você pode pular esta parte.

Baixe o Hugo de

Coloque o executável do Hugo em um dos caminhos definidos no https://github.com/gohugoio/hugo/releases
PATH caminhos Criando um novo site:
hugo new site blog.example.com Mude o diretório atual para o recém-criado:
cd blog.example.com Escolha um tema (
ou o que preferir)https://github.com/budparr/gohugo-theme-ananke/releases Crie o primeiro post:
hugo new posts/my-amazing-post.md Adicione conteúdo ao arquivo criado:
content/posts/my-amazing-post.md Quando tudo estiver feito, altere o valor de draft para.
Gere os arquivos estáticos: falso
hugo -D Agora nosso site estático está dentro do diretório

./public e pronto para a primeira implantação manual. Parte 2: Configurando o Cloudflare

Agora vamos entender a configuração inicial do Cloudflare. Suponhamos que já temos um domínio para o site. Como exemplo, vamos usar

blog.example.com. Passo 1: Criar um registro DNS

Primeiro, selecione nosso domínio e depois o item de menu

. Crie um registro A para blog e forneça um IP fictício qualquer (esta é uma DNSrecomendação oficial recomendação, mas eles poderiam ter feito isso de uma forma mais atraente).

Passo 2: Token do Cloudflare

Meu Perfil -> Tokens da API aba-> Criar Token -> Criar Token Personalizado

Aqui você precisará restringir o token a contas e zonas, mas deixar a opção Editar para as permissões mostradas na imagem.

Salve o token para o futuro, pois precisaremos dele na terceira parte.

Passo 3: Obtendo accountid e zoneid

Domínio → Visão Geral → [painel lateral direito]

Esses são meus, por favor, não os use 🙂

Guarde-os junto com o token, pois também serão necessários na terceira parte.

Passo 4: Ativação dos Workers

Domínio → Workers → Gerenciar Workers

Escolha um nome exclusivo e a tarifa dos Workers → Ilimitado (R$ 5 por mês atualmente). Se desejar, posteriormente você poderá mudar para a versão gratuita.

Parte 3: Primeiro deploy (implantações manuais)

Eu fiz o primeiro deploy manualmente para entender realmente o que está acontecendo. Embora tudo isso possa ser feito de forma mais simples:

Instalamos o wrangler: npm i @cloudflare/wrangler -g
Acesse o diretório do nosso blog: Escolha um tema (
Inicie o wrangler: wrangler init — site hugo-worker
Crie a configuração do wrangler (digite o token quando solicitado): wrangler config

Agora vamos tentar fazer alterações no arquivo recém-criado wrangler.toml (aqui lista completa das configurações possíveis):

Especifique accountid e zoneid
Altere rota para algo como *blog.example.com/*
Especifique falso para workersdev
Altere o bucket para ./public (ou onde seu site está hospedado)
Se você tiver mais de um domínio na rota, deve corrigir o caminho no script de trabalho: workers-site/index.js (veja a função handleEvent)

Ótimo, está na hora de publicar o site usando o comando wrangler publish.

Parte 4: Automação do deploy

Este guia foi elaborado para Gitlab, mas transmite a essência e a simplicidade do deploy automatizado de forma geral.

Passo 1: Criando e configurando nosso projeto

Crie um novo projeto no GitLab e faça o upload do site: o diretório blog.example.com com todo o conteúdo deve estar na raiz do diretório do projeto
Defina a variável CFAPITOKEN aqui: Configurações → CI/CD → Variáveis

Passo 2: Crie o arquivo .gitlab-ci.yml e inicie o primeiro deploy

Crie o arquivo .gitlab-ci.yml na raiz com o seguinte conteúdo:

estágios:
  - construir
  - implantar

construir:
  imagem: monachus/hugo
  estágio: construir
  variáveis:
    GIT_SUBMODULE_STRATEGY: recursiva
  script:
    - cd blog.example.com/
    - hugo
  artefatos:
    caminhos:
      - blog.example.com/public
  somente:
    - master # este trabalho afetará apenas o ramo 'master'
  tags:
    - gitlab-org-docker #


implantar:
  imagem: timbru31/ruby-node:2.3
  estágio: implantar
  script:
    - wget https://github.com/cloudflare/wrangler/releases/download/v1.8.4/wrangler-v1.8.4-x86_64-unknown-linux-musl.tar.gz
    - tar xvzf wrangler-v1.8.4-x86_64-unknown-linux-musl.tar.gz
    - cd blog.example.com/
    - ../dist/wrangler publish
  artefatos:
    caminhos:
      - blog.example.com/public
  somente:
    - master # este trabalho afetará apenas o ramo 'master'
  tags:
    - gitlab-org-docker #

Iniciamos a primeira implantação manualmente (CI / CD → Pipelines → Executar Pipeline) ou enviando um commit para o ramo master. Voilà!

Conclusão

Bem, talvez eu tenha subestimado um pouco, e todo o processo levou um pouco mais de dez minutos. Mas agora você tem um site rápido com implantações automáticas e algumas ideias novas sobre o que mais pode ser feito com Workers.

Cloudflare Workers Hugo GitLab CI

Fonte: habr.com