Skip to content

Latest commit

 

History

History
164 lines (109 loc) · 9.17 KB

next-turso.mdx

File metadata and controls

164 lines (109 loc) · 9.17 KB
Raw
title description meta_tags namespace permalink
Como implantar o template Next.js App + Configurations + Turso
O template fornece uma forma rápida para construir uma aplicação Next.js com configurações personalizadas, App Router e integração com um banco de dados Turso.
templates, guides, Azion Marketplace
docs_guides_nextjs_app_configs_turso
/documentacao/produtos/guias/nextjs-app-configurations-turso/

import Badge from '~/components/Badge.astro';

Preview

O template Next.js App + Configurations + Turso fornece uma forma rápida para construir uma aplicação Next.js com configurações personalizadas, App Router e integração com um banco de dados Turso.

Este template utiliza Next versão 13.5.6 e LibSQL 0.5.3.

Pré-requisitos

Para usar este template, você deve:

  1. Acesse o Azion Console > Account menu.
  2. Selecione a opção Billing & Subscriptions.
  3. Selecione a aba Subscriptions.
  4. Ative o switch para cada módulo.

:::caution[atenção] Se estes módulos estiverem ativados, a execução deste template pode gerar custos relacionados ao uso. Consulte a página de preços para mais informações.

Qualquer custo gerado pelo uso da Turso será processado e cobrado separadamente na plataforma da Turso. Visite a documentação da Turso para obter mais detalhes. :::

Crie um banco de dados Turso

Supondo que você já tenha criado uma conta Turso e instalado a Turso CLI em seu computador, você só precisa completar os seguintes passos usando alguns comandos:

  1. Autentique sua conta Turso: turso login
  2. Crie um novo banco de dados: turso db create
  3. Liste seus bancos de dados: turso db list
    • Você obterá a URL do LibSQL para o seu banco de dados.
  4. Crie um token de autorização para acessá-lo: turso db tokens create [nome do seu banco de dados]
    • Neste caso, o nome do seu banco de dados deve ser posts.
    • Lembre-se de salvá-lo em um local seguro.
  5. Abra a interface shell do seu banco de dados: turso db shell [nome do seu banco de dados]
  6. Crie a tabela que será usada por este modelo usando SQL:
CREATE TABLE posts (
  id INTEGER PRIMARY KEY,
  message varchar(140)
);
.quit

Se você executou todos os comandos corretamente, poderá usar a URL/token durante o processo de implantação deste template.

Obtenha o template

Para usar este template:

  1. Acesse o Azion Console.
  2. Clique no botão + Create na página inicial.
  3. No modal, selecione a opção Templates.
  4. Procure e selecione o card do Next.js App + Configurations + Turso.

Configure o template

No formulário de configuração, você deve fornecer as informações para configurar sua aplicação.

Os campos identificados com asterisco são obrigatórios.

  1. Conecte Azion com sua conta no GitHub.
  • Um pop-up será aberto para confirmar a instalação da Azion GitHub App, uma ferramenta que conecta sua conta do GitHub com a plataforma da Azion.
  • Defina suas permissões e acesso ao repositório conforme desejado.
  1. Selecione o GitHub Scope com o qual deseja trabalhar.
  2. Em Application Name *, defina o nome da sua nova edge application na Azion.
  • Use um nome único e fácil de lembrar. Se o nome já estiver em uso, a plataforma retornará uma mensagem de erro.
  • O bucket para armazenamento e a edge function utilizarão o mesmo nome.
  1. Insira as seguintes informações:
  • Turso Database LibSQL URL *: a URL do LibSQL para conectar com seu banco de dados Turso.
  • Turso Database Token *: o token para autorizar o acesso no seu banco de dados Turso.
  1. Clique no botão Save, localizado no canto inferior direito. Isso iniciará o processo de deployment.

:::note Se os módulos não estiverem habilitados, a implantação falhará. Se você fornecer um token Turso inválido, o template será executado, mas você não conseguirá executar a aplicação; nesse caso, você deve modificar as variáveis de ambiente criadas pelo template. :::

Durante a implantação, você poderá acompanhar o processo através de uma janela mostrando os logs. Quando estiver concluída, a página mostra informações sobre a aplicação e algumas opções para continuar sua jornada.

:::note O link para sua edge application permite que você veja como ela fica no navegador. No entanto, leva um certo tempo para propagar e configurá-la nas edge locations da Azion. Pode ser necessário aguardar alguns minutos para que a URL seja ativada e para que a página da aplicação seja efetivamente exibida no navegador. :::

Configurações principais

Este template cria uma aplicação básica Next.js contendo um domínio para acessar uma Single-Page Application (SPA), bem como configuração do Edge Storage, configurações de cache, compressão Gzip e regras do Rules Engine para melhorar o desempenho e a entrega de arquivos estáticos.

Ele cria um novo repositório no GitHub, incluindo uma GitHub Action para habilitar um fluxo de trabalho de desenvolvimento contínuo (continuous development) e manter sua aplicação atualizada. O template cria também um banco de dados na Turso que você pode gestionar, com integração sob a rota /turso.

Adicionalmente, Next.js App + Configurações cria arquivos para implementar o formato App Router, incluindo a página inicial, roteamento de edge API e Custom Route Handlers, no novo repositório durante a implantação.

Este template também fornece um exemplo básico de CRUD de como integrar uma aplicação Next.js com um banco de dados Turso e entrega uma rota de API /api/posts, que permite ao SDK LibSQL da Turso conectar-se ao banco de dados para criar, ler, atualizar e deletar itens.

Gerencie seu banco de dados

Você pode usar seu domínio da Azion para acessar sua edge application através do navegador, conforme explicado na seção de implantação, e interagir com ele através da interface estática que foi criada.

Usando essa interface, você pode criar, recuperar, atualizar e excluir itens em sua coleção Posts, que agora está vinculada a essa nova aplicação. Para fazer isso, a interface fornece uma área de input e botões com ícones para gerenciar seus dados conforme necessário.

Todas as alterações serão refletidas em sua aplicação e em seu banco de dados Turso também.

Gerencie o template

Considerando que essa configuração inicial pode não ser ideal para sua aplicação, todas as configurações podem ser personalizadas sempre que você precisar usando o Azion Console.

Para gerenciar e editar as configurações da sua edge application:

  1. Acesse o Azion Console > Edge Application.
  • Você será redirecionado para a página do Edge Application. Ela lista todas as edge applications que você criou.
  1. Selecione a aplicação relacionada ao template.
  • A lista é organizada em ordem alfabética. Você também pode usar a barra de busca localizada no canto superior esquerdo da lista; atualmente, ela é filtrada apenas pelo Application Name, ou nome da edge application.

Depois de selecionar a aplicação em que você trabalhará, você será direcionado para uma página que contém todas as configurações que você pode configurar.

:::tip Consulte a documentação sobre o gerenciamento de edge applications para obter mais detalhes. :::

Adicione um domínio personalizado

A edge application criada tem um domínio Azion atribuído para torná-la acessível através do navegador. O domínio tem o seguinte formato: xxxxxxxxxx.map.azionedge.net. No entanto, você pode adicionar um domínio personalizado para que os usuários acessem sua aplicação por meio dele.

import Button from '~/components/Button.astro';

---

import ContributorList from '~/components/ContributorList.astro'

Contribuidores Contributor