Next.js é uma estrutura React popular que preenche as peças que faltam em uma biblioteca React típica para torná-la uma estrutura full-stack proficiente. Nesta postagem, usaremos um exemplo Next.js renderizado do lado do servidor (SSR) e o implantaremos no Google Cloud Run com o clique de um botão.
O que é Next.js?
Next.js é uma estrutura construída sobre a biblioteca React ultra-popular que permite aos desenvolvedores criar facilmente sites com uma estrutura full-stack. É apelidado de”a estrutura React para produção”e tem uma ótima experiência de desenvolvedor.
Next.js fornece suporte para Typescript, a opção de escolher entre Estático Site Generation (SSG) ou Server Side Rendering (SSR) , é compatível com SEO e fornece ótima otimização de imagem pronta para uso. Esses recursos o destacam como um dos frameworks React mais amados na comunidade de desenvolvimento de front-end.
Benefícios do SSR
O principal benefício óbvio do Server Side Rendering (SSR) é que cada página tem uma URL estática e, como o conteúdo é pré-gerado no servidor, é otimizado para SEO. A renderização do lado do servidor é muito útil se os dados em seus aplicativos mudam com frequência ou são gerados dinamicamente, dependendo das permissões ou de qual usuário está conectado.
Outro benefício importante da renderização do lado do servidor é que o conteúdo é sempre dinâmico, porque o HTML é renderizado em cada solicitação. Para este tutorial, é importante manter isso em mente, porque hospedaremos um exemplo fullstack de Next.js (que tem uma API simulada) e a resposta da API é renderizada no front-end.
Isso nos leva a uma das melhores opções para hospedar suas APIs ou qualquer outro aplicativo da web: Google Cloud Run.
O que é Google Cloud Run?
Google Cloud Run é indiscutivelmente o melhor serviço totalmente gerenciado para executar contêineres sem servidor. Podemos implantar e escalonar para centenas de contêineres sem precisar escrever uma única linha de YAML ou entender Kubernetes e Knative.
Podemos ir do nada para um URL funcional com contêineres sem servidor usando o Google Cloud Run e, o melhor de tudo, é grátis.
Em seguida, executaremos o exemplo de API de Next.js e o encaixaremos no dock.
Pré-requisitos
Antes de começarmos a mergulhar no código, verifique se você tem estes pré-requisitos:
Node.js com NPM e NPX em execução na sua máquina local
Conhecimento prático de Git e GitHub
Conhecimento prático de Next.js
Conhecimento prático de Docker e Docker Compose (lendo o Docker com Node.js postar é altamente recomendado)
Conhecimento prático do recurso BuildKit no Docker
Uma conta do Google Cloud Platform (GCP). Se você ainda não tem um, você pode experimentá-lo gratuitamente aqui
Agora, vamos dar uma olhada em alguns exemplos de código.
Construindo um exemplo de aplicativo Next.js
Next.js tem 270+ exemplos em sua pasta exemplos em o repositório Github. Vamos usar este exemplo de API-routes que tem APIs para listar personagens de Star Wars e seus vários recursos. Em seguida, iremos encaixar para que seja mais fácil implantar no Google Cloud Run. Vamos começar!
Para obter o exemplo de rotas da API Next.js, executaremos o seguinte:
npx create-next-app–example api-routes api-routes-app
Levará alguns minutos para baixar e configurar o exemplo de rotas de API na pasta api-routes-app.
Quando terminar, devemos ver algo como a imagem abaixo:
Depois disso, podemos verificar como funciona localmente com o seguinte:
cd api-routes-app
npm run dev
Então, podemos verificar a saída em nosso navegador favorito em http://localhost: 3000 , que será semelhante a:
Se clicarmos em um dos nomes, ele fornecerá alguns detalhes sobre aquele personagem. Ele roda com uma API simples que pode ser acessada em http://localhost: 3000/api/people que produz um JSON como abaixo:
Você pode prosseguir e ler o código do exemplo para entender como funciona.
Dockerizando o aplicativo de exemplo Next.js
Para encaixar este aplicativo de exemplo de API Next.js, adicionaremos um novo arquivo Docker com o seguinte conteúdo:
# Obtenha pacotes NPM
Nó FROM: 14 dependências alpinas do AS
RUN apk add–no-cache libc6-compat
WORKDIR/app
COPY package.json package-lock.json./
RUN npm ci-apenas=produção # Reconstrua o código-fonte apenas quando necessário
Nó FROM: construtor AS 14-alpine
WORKDIR/app
CÓPIA DE..
COPY–from=dependencies/app/node_modules./node_modules
RUN npm run build # Imagem de produção, copie todos os arquivos e execute a próxima
Nó FROM: 14-alpine AS runner
WORKDIR/app ENV NODE_ENV produção EXECUTE addgroup-g 1001-S nodejs
EXECUTE adduser-S nextjs-u 1001 COPIAR–from=construtor–chown=nextjs: nodejs/app/.next./.next
COPY–from=builder/app/node_modules./node_modules
COPY–from=builder/app/package.json./package.json Nextjs de USUÁRIO
EXPOR 3000 CMD [“npm”,”iniciar”]
Este é um arquivo Docker de vários estágios. O primeiro estágio é uma dependência que executa o npm ci para obter todos os pacotes do npm.
O segundo estágio é um construtor que executa npm run build para construir o aplicativo Next.js.
O estágio final é o estágio do runner, em que copiamos o aplicativo e suas dependências do estágio do builder anterior e o executamos com NODE_ENV como produção.
Consequentemente, adicionaremos um arquivo Docker-compose.yml para facilitar a construção de nosso contêiner do Docker. Será semelhante ao código abaixo:
versão:’3′
Serviços: aplicativo: construir: contexto:./ volumes: -.:/aplicativo portas: -“3000: 3000”
Neste arquivo Docker-compose, estamos construindo o aplicativo e mapeando a raiz local do projeto para/app dentro do contêiner. Em seguida, estamos expondo a porta 3000 do contêiner à porta 3000 local.
Para uma construção mais rápida do Docker, usaremos o recurso BuildKit do Docker. Para construir o contêiner com o recurso BuildKit ativado, executaremos o seguinte comando:
COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 compilação docker-compose
Isso nos dará uma saída vista na captura de tela abaixo:
Para executar o aplicativo localmente para testá-lo, podemos executar:
docker-compose up
Isso nos mostrará algo como o seguinte:
Agora, se formos para http://localhost: 3000 , ele nos mostrará a mesma saída da lista de pessoas que vimos no etapa anterior.
Neste ponto, recomendo ler mais sobre Node.js e Docker se você estiver interessado.
Parabéns! Você encaixou com sucesso um aplicativo Next.js no Docker.
Preparando-se para o Google Cloud Run
Para implantar o código no Google Cloud Run, usaremos o prático Botão Cloud Run . Para usar este botão mágico, colaremos as duas linhas a seguir em readme.md:
## Implantar no Google Cloud Run [! [Executar no Google Cloud] (https://deploy.cloud.run/button.svg)] (https://deploy.cloud.run)
Em seguida, criaremos um novo arquivo app.json na raiz como abaixo:
{ “nome”:”nextjs”, “opções”: { “allow-unauthenticated”: verdadeiro, “memória”:”256Mi”, “cpu”:”1″, “porta”: 3000, “http2”: falso }
}
Por padrão, o Cloud Run espera que os aplicativos sejam executados na porta 8080, então este arquivo app.json diz ao Cloud Run para escutar na porta 3000 no lugar da porta padrão.
Além disso, ele também instrui o Cloud Run a abrir o aplicativo para acesso público com allow-unauthenticated definido como true. Em seguida, ele é direcionado para usar 1 CPU e 256 MB de memória para cada contêiner.
Finalmente, ele informa ao Cloud Run para não usar HTTP2 para este serviço.
Enviando o código para GitHub
Precisamos enviar o código ao GitHub para facilitar a implantação do aplicativo. Para fazer isso, vamos criar um novo repositório como o visto na imagem abaixo:
Em seguida, executaremos os seguintes comandos na raiz do nosso projeto:
git remote add origin [email protected]: geshan/nextjs-cloud-run.git #replace com o URL do repo
git add.
git commit-m”aplicativo completo next.js com configuração de execução em nuvem”
git push-u origin main
Posteriormente, iremos para a raiz do repo e clicaremos no grande botão azul que diz Executar no Google Cloud conforme mostrado abaixo:
Isso nos levará ao console do Google Cloud, onde precisaremos autorizar o script para implantar nosso aplicativo, que se parece com o gif abaixo:
Também precisaremos selecionar o projeto e a região no processo acima.
A construção do Docker leva alguns minutos, mas nosso aplicativo Next.js é implantado na nuvem do Google executado com o clique de um botão.
Deve ter a seguinte aparência quando a implantação for concluída e obtivermos uma URL que termina em run.app para o nosso serviço:
Depois disso, se clicarmos no URL em verde na imagem acima, veremos nosso aplicativo de demonstração Next.js funcionando no Google Cloud Run, conforme mostrado abaixo:
Se você deseja apenas implantar de meu repositório Github , você pode fazer como bem.
Viva! Temos nosso aplicativo de exemplo Next.js funcionando bem no Google Cloud Run.
Próximas etapas
Esta é uma maneira rápida e fácil de começar a usar Next.js no Google Cloud Run para um projeto paralelo.
No caso de um projeto de equipe, recomendo explorar o Google Cloud Build , Google Container Registry e como esses serviços podem ser usados juntos para criar um pipeline de CI/CD robusto para o Google Cloud Run.
Você também pode dar uma olhada em esta compilação em nuvem Arquivo de instrução YAML que tem apenas três etapas para implantar um contêiner construído no Google Cloud Run. Algo semelhante também pode ser obtido a partir da IU se essa for sua preferência para implantação contínua .
Conclusão
Vimos como implantar um aplicativo Next.js que tem um componente de renderização do lado do servidor em um serviço altamente escalonável e com excelente relação custo-benefício: Google Cloud Run. O Cloud Run não é apenas super amigável para desenvolvedores, mas também moderno e sem servidor. Aproveite a execução do Next.js em contêineres sem servidor!
A postagem Como implantar Next.js no Google Cloud Run apareceu primeiro no LogRocket Blog .
