Parte 3 — Como implantar uma aplicação estática do Next.js no Google Cloud Storage usando o Terraform e Github Actions

Bem vindo ao nosso último episódio para realização do deployment de uma aplicação estática escrita em Next.js no GCS. Obviamente, se você não usa o Github o que iremos realizar hoje poderá ser feito em outras soluções CI como o Gitlab CI por exemplo.

Fique a vontade para ver os outros artigos:

• Credentials Google Console — Parte 1
• Configurando nosso arquivo Terraform — Parte 2
• Configurando o Github Actions — Parte 3

Mapeando os requisitos

Basicamente nosso pipeline CI/CD irá precisar de:

• Uma aplicação escrita em Next.js que esteja disponibilizada em nosso repositório do Github.
• Precisamos fazer o upload dessa nossa aplicação no Google Cloud Storage. Durante esta etapa, precisaremos gzip de nossos arquivos de texto e definir nossa política de controle de cache.

CRIAÇÃO DE UM APLICATIVO

Começaremos criando um novo próximo aplicativo. Para fazer isso, basta executar o comando:

npx create-next-app@latest --ts
# or if you are using npm

Agora, vamos dar uma olhada na estrutura do nosso projeto:

pages — este diretório contém todas as nossas páginas e define o roteamento para nosso aplicativo ( mais sobre roteamento aqui ).

pages/api — aqui podemos adicionar nosso endpoint de API se precisarmos, no nosso caso podemos remover esta pasta com segurança ( mais sobre rotas de API aqui ).

public — podemos colocar todos os nossos ativos estáticos neste diretório.

Vamos mudar nossos comandos para refletir o que queremos alcançar neste projeto. Acesse o package.json e modifique a seção de scripts como esta:

"dev": "next dev" -> # remove
"build": "next build" -> "build": "next build && next export"
"start": "next start" -> "start": "next dev"

Portanto, agora nossa seção de scripts deve se parecer com isto:

{
  ...
  "scripts": {
    "build": "next build && next export",
    "start": "next dev"
  },
  ...
}

Agora podemos testar nossa configuração, execute o comando build:

yarn run build
# or if you are using npm
npm run build

Em seguida, devemos criar um diretório na raiz do nosso projeto com todos os arquivos html estáticos e ativos prontos para hospedar. Podemos alterar o diretório de saída adicionando um sinalizador -o ao nosso próximo comando de exportação, como este:

{
  ...
  "scripts": {
    "build": "next build && next export -o build",
    ...
  },
  ...
}

Com nossa aplicação criada e com o script para realização do build configurado, agora precisamos criar nosso repositório no Github e o yaml contendo o Job necessário para realizar o build e deployment da nossa aplicação na raiz do nosso repositório (.github/workflow/main.yml)

Podemos ver que a propriedade runs-os possui o valor da imagem Ubuntu 20.04, porém fiquem a vontade para usar outra, a versão do Node.js também quis utilizar a mais estável no momento, dependendo de quando você está lendo esse post.

O que precisamos agora é adicionar ao main.yml a etapa de instalação das dependências de nossa aplicação.

Próxima etapa e realizar o deployment da nossa aplicação no Google Cloud Storage, precisamos acessar o console do google e ir até o projeto que criamos na etapa 1 e navegar até IAM — Service Accounts, selecionar a conta que criamos para o terraform e gerar a chave JSON. Precisamos codificar essa chave em Base 64, através do terminal execute o comando abaixo:

base64 -i /service-account-file.json

Acesse o secrets do seu repositório no github localizado em configurações e adicione o código Base 64 acima clicando no botão New repository secret, feito isso seguimos para adicionar mais um estágio em nosso Job que será realizar o upload para nosso bucket, utilizaremos o gsutil passando alguns argumentos contendo o id do bucket que iremos realizar o deployment.

Por fim e mais importante precisamos definir nossa politica de controle de cache.Com os assets da nossa aplicação em cache, precisamos invalidar o cache do CDN no CI, para que a nova versão possa ser disponibilizada para novos usuários, sem esperar pela expiração.

Conclusão

Por enquanto é isso, obrigado por ter acompanhado mais um post do meu blog e espero que tenham gostado.

É o aprendizado constante, o desapego ao que você já sabe e a abertura a coisas novas que vão te tornar um profissional e uma pessoa muito mais preparada.

“O analfabeto do século XXI não será aquele que não sabe ler e escrever, mas aquele que não consegue aprender, desaprender e reaprender”.

-Alvin Toffler