Pular para o conteúdo principal

Deploy

Com nosso conteúdo configurado e nossa aplicação funcionando, o último passo para termos nossa aplicação na Internet é enviá-la para "a nuvem".

Quando criamos esse guia, escolhemos utilizar o framework Next.js pelo fato de que ele possibilita utilizarmos um paradigma relativamente novo de deploy de código chamado de serverless. O termo serverless é usado para descrever arquiteturas onde podemos disponibilizar nossas aplicações na Internet sem precisarmos usar servidores diretamente.

Em geral, serviços de deploy serverless funcionam assim: você cria sua aplicação, envia seu código para um repositório git na Internet (GitHub, GitLab, etc.), conecta o repositório com o serviço, e pronto. Sua aplicação será disponibilizada automaticamente, geralmente em poucos minutos, sem você precisar "encostar um dedo" em um servidor.

Atualmente, existem inúmeros serviços que permitem esse tipo de deploy sem servidores. Esses serviços são geralmente chamados de Platforms as a Service (PaaS), e alguns exemplos são o Google Firebase, o Netlify e a Vercel.

Enviando uma aplicação para a Vercel​

Escolhemos exemplificar o processo de deploy com a Vercel por dois motivos:

  1. A Vercel oferece uma das interfaces mais simples dentre os serviços de PaaS mais conhecidos; e
  2. A Vercel é gratuita para projetos não-comerciais, como a nossa aplicação de exemplo.

O processo de deploy na Vercel é tão simples que quase não é necessário escrever um guia para isso. Mas, como a ideia desse guia rápido é simplificar ao máximo, aqui vão os passos para colocar nossa aplicação no ar.

Enviando a aplicação para o GitHub​

Primeiro, precisamos enviar nosso código para um repositório em alguma plataforma git, como o GitHub, GitLab ou Bitbucket. A Vercel suporta essas 3 plataformas, e você pode escolher a que preferir. No exemplo abaixo, vamos utilizar o GitHub.

Para começar, entre ou crie uma conta no GitHub, e então crie um repositório para enviar o código que criamos no passo anterior. Você pode criar um repositório privado se não quiser que o código da sua aplicação seja público. Após criado, mantenha a página do repositório aberta.

No seu projeto local, faça um commit com os arquivos que você criou e modificou. Se você usou o create-next-app para criar seu projeto, você já tem um repositório git configurado localmente, e só precisa fazer o commit em si. Senão, você precisa inicializar um repositório localmente:

# Execute isso na raíz do seu projeto.
git init

Depois, adicione os arquivos necessários e faça um commit:

git add .
git commit -m "Add project routes"

Agora, só precisamos conectar nosso repositório local com o GitHub e enviar nosso código. Volte à página do repositório que você criou e copie a URL do repositório apresentada na seção Quick setup e terminando em .git. Substitua a URL abaixo com a que você copiou e rode os seguintes comandos:

git remote add origin https://github.com/meu-usuario/nome-do-meu-repositorio.git
git branch -M main
git push -u origin main

Pronto! Seu código foi enviado ao GitHub e seu repositório já pode ser conectado com a Vercel.

Conectando o repositório​

Agora, precisamos criar uma conta gratuita na Vercel. Acesse a página de criação de conta, selecione a opção Hobby, e preencha seus dados. A opção Hobby indica que você só quer utilizar a Vercel para projetos pessoais e não-comerciais, que é o caso da nossa aplicação de exemplo. Por fim, selecione o GitHub na lista de provedores git para entrar com sua conta do GitHub.

Após entrar na sua conta, na página inicial, clique em Add New... e então em Project para criar um novo projeto. Na lista de repositórios, selecione o repositório que você criou no passo anterior. As configurações do projeto serão detectadas automaticamente pela Vercel, e você não precisa alterar nenhum valor, mas fique a vontade para mudar alguma configuração se achar necessário.

Repositórios Git

Se você enviou seu código para uma plataforma git diferente da que você escolheu ao criar sua conta da Vercel, clique em Switch Git Provider para entrar com a plataforma correta e visualizar os repositórios dessa plataforma.

Variáveis de ambiente

Se você clonou nossa aplicação de exemplo ao invés de seguir o passo a passo da página anterior para criar uma aplicação Next.js do zero, você precisa configurar a variável de ambiente NEXT_APP_STARLIGHT_WORKSPACE_ID nas configurações do projeto. O valor da variável deve ser o ID da área de trabalho a ser utilizada pela aplicação, que é a mesma que você configurou no arquivo .env.

Finalmente, clique em Deploy e aguarde o processo concluir, que não deve demorar mais que alguns minutos (ou até segundos!). Ao fim do processo, basta clicar na imagem ou na URL do seu projeto para acessá-lo.

E é isso! Com esse guia, você aprendeu a configurar um projeto no Starlight, criar uma aplicação web do zero e enviá-la para a Internet em poucos minutos. A aplicação que criamos é relativamente simples, e o Starlight permite que você crie estruturas de conteúdo muito mais complexas utilizando várias ferramentas que não mostramos nesse guia.

Agora, recomendamos que você leia a seção Conhecendo o Starlight, que explica em maiores detalhes como o Starlight funciona e apresenta as principais funções da plataforma, incluindo algumas importantes para aplicações mais complexas.