Como hospedar o front-end e o back-end?

Neste tutorial, forneceremos um guia abrangente sobre como hospedar um frontend e um backend de um aplicativo.

Para isso, hospedaremos um aplicativo de pilha completa no Back4app. Primeiro, trabalharemos no backend, depois passaremos para o frontend e, por fim, conectaremos os dois componentes.

Objetivos

Ao final deste artigo, você será capaz de:

• Explicar as diferenças entre front-end e back-end
• Crie um backend usando a solução BaaS da Back4app
• Implantar um aplicativo de front-end no Back4app Containers
• Conecte seu aplicativo de front-end com seu aplicativo de back-end

Quais são as diferenças entre front-end e back-end?

O backend e o frontend referem-se à separação das preocupações ao criar aplicativos modernos para Web e dispositivos móveis. A maneira mais fácil de entender suas diferenças é visualizar um iceberg.

O frontend (ou o lado do cliente) é tudo o que o usuário pode ver e interagir. Os front-ends vêm em vários formatos, como aplicativos móveis, aplicativos da Web, interfaces da Web ou qualquer outro tipo de cliente.

Essa parte do aplicativo é responsável pela interface do usuário/UX, design, animações, gráficos e outros tipos de mídia. O lado do cliente constitui 20% do trabalho do projeto e não é repetitivo.

Por outro lado, o backend (ou o lado do servidor) é tudo o que o usuário não pode ver. É a ponte entre o frontend e o banco de dados.

Ele é responsável pela lógica comercial, tarefas em segundo plano, armazenamento de dados, dimensionamento, integrações de terceiros, etc. Mesmo que o usuário não possa interagir diretamente com ele, ele ainda afeta muito a qualidade de um aplicativo.

Representa cerca de 80% do trabalho do projeto e geralmente inclui tarefas repetitivas, como gerenciamento de usuários, autenticação, criptografia etc.

Você pode implementar seus aplicativos de frontend e backend em várias plataformas. Resumi algumas das minhas favoritas na tabela abaixo:

Neste tutorial, você aprenderá a implantar seu frontend e backend no Back4app, gratuitamente! Continue lendo para saber como implantar o backend e o frontend.

Introdução ao projeto

Preparei um aplicativo de pilha completa para demonstrar como implantar um frontend e um backend no Back4app.

O aplicativo funciona como um blog markdown simples. Os administradores podem adicionar, editar e excluir artigos, enquanto os usuários podem lê-los.

O projeto final será mais ou menos assim:

Conforme mencionado acima, o aplicativo consiste em duas partes: o frontend e o backend. Se visualizarmos a arquitetura do aplicativo, ela terá a seguinte aparência:

Implantaremos o backend no Back4app e o aplicativo frontend no Back4app Containers. Por fim, conectaremos os dois componentes por meio do Parse SDK.

Sugiro que você primeiro acompanhe este aplicativo e depois teste seu conhecimento implantando seus aplicativos de pilha completa.

Continue lendo para saber como hospedar o backend e o frontend.

Como hospedar um backend?

Nesta seção, cuidaremos da parte de backend do aplicativo.

Objetivos

1. Criar um aplicativo Back4app
2. Definir as classes do banco de dados
3. Configurar ACLs/CLPs do banco de dados
4. Preencher o banco de dados
5. Ativar o aplicativo de administração

Criar o aplicativo Back4app

Você precisará de uma conta gratuita do Back4app para acompanhar. Se não estiver registrado, inscreva-se gratuitamente!

Para trabalhar com o Back4app, primeiro você precisa criar um aplicativo. Ao se autenticar no Back4app, você será redirecionado para a visualização do aplicativo. Clique no botão “Build new app” (Criar novo aplicativo).

Em seguida, selecione “Backend as a Service” (Backend como serviço), pois estamos implantando um backend.

Dê um nome ao seu aplicativo, selecione o banco de dados “NoSQL” e clique em “Create”.

A plataforma levará algum tempo para preparar tudo (por exemplo, banco de dados, dimensionamento, backups, camada de aplicativos). Sinta-se à vontade para fazer uma pequena pausa para o café nesse meio tempo.

Quando seu aplicativo estiver pronto, você verá o explorador de banco de dados.

Definir banco de dados

Nesta seção, trabalharemos com as classes de banco de dados.

Precisaremos apenas de uma classe, pois estamos criando um aplicativo simples. Clique em “Create a class” (Criar uma classe) na barra lateral, chame-a de Article (Artigo), deixe todo o resto como padrão e clique em “Create class & add columns” (Criar classe e adicionar colunas).

Adicione as cinco colunas a seguir:

+-----------+--------------+----------------+----------+
| Data type | Name         | Default value  | Required |
+-----------+--------------+----------------+----------+
| String    | slug         | <leave blank>  | 1        |
+-----------+--------------+----------------+----------+
| String    | title        | <leave blank>  | 1        |
+-----------+--------------+----------------+----------+
| File      | cover        | <leave blank>  | 0        |
+-----------+--------------+----------------+----------+
| String    | shortContent | <leave blank>  | 1        |
+-----------+--------------+----------------+----------+
| String    | content      | <leave blank>  | 1        |
+-----------+--------------+----------------+----------+

Certifique-se de adicionar colunas para dados adicionais que você gostaria de armazenar.

Por padrão, as classes de banco de dados estão em “Modo protegido”. Se quisermos interagir com elas em nosso aplicativo front-end, teremos de modificar ligeiramente as permissões em nível de classe (CLPs). Clique no ícone de cadeado na parte superior da tela e modifique os CLPs da seguinte forma:

Leia o artigo a seguir para saber mais sobre o Parse Security.

Por fim, preencha o banco de dados com alguns artigos de amostra.

Se você não tiver nenhuma ideia, sinta-se à vontade para importar esse despejo do banco de dados. Para importá-lo, clique na opção mais no canto superior direito da tela e, em seguida, em “Import > Class Data” e importe o JSON.

Excelente, é isso mesmo!

Agora temos alguns dados de teste para trabalhar.

Aplicativo do administrador

Atualmente, a única maneira de gerenciar artigos é por meio da visualização do banco de dados do Back4app. Isso não é ideal porque você não deseja compartilhar suas credenciais do Back4app ou adicionar pessoas não técnicas ao seu painel do Back4app.

Felizmente, o Back4app vem com uma interface de administração dinâmica para seus modelos de banco de dados. Para ativá-la, selecione “More > Admin App” (Mais > Aplicativo de administração) na barra lateral e, em seguida, clique em “Enable Admin App” (Ativar aplicativo de administração).

Escolha um nome de usuário, uma senha e um subdomínio do aplicativo de administração. Eu escolherei:

username:     admin
password:     verystrongpassword123
admin url:    https://fullstack.admin.back4app.com/

Agora você pode acessar o painel de administração no URL de administração selecionado.

Abra uma nova guia e navegue até o painel de administração. Use suas credenciais para fazer login e explorar a interface. Você pode criar um artigo, atualizá-lo e excluí-lo.

Saiba mais sobre o aplicativo de administração do Back4app consultando os documentos.

Criamos com sucesso um backend completo sem código.

Como hospedar um frontend?

Nesta seção, cuidaremos do aplicativo front-end.

Objetivos

1. Configurar um ambiente de desenvolvimento local
2. Dockerize o aplicativo
3. Teste as imagens do Docker localmente
4. Envie o código-fonte para o GitHub
5. Implante o aplicativo nos contêineres do Back4app

Configuração local

Comece bifurcando todas as ramificações desse repositório e, em seguida, clonando a bifurcação em seu computador local:

$ git clone <fork_remote_git_url> --branch dummy
$ cd back4app-heroku-deploy && git branch -m master

Clonamos a ramificação fictícia porque ela não inclui o código de backend. Trabalharemos no código de backend na próxima seção.

Em seguida, instale as dependências do projeto:

$ npm install

Por fim, inicie o servidor de desenvolvimento:

$ npm run dev

Abra seu navegador da Web favorito e navegue até http://localhost:3000. Você deve conseguir ver a página de índice do blog. Tente clicar em um artigo para ver se você é redirecionado para a página de detalhes do artigo.

No momento, a página de detalhes do artigo está codificada. Não se preocupe, vamos corrigir isso mais tarde.

Dockerize

Para implantar um aplicativo no Back4app Containers, você deve primeiro dockerizá-lo.

Dockerização é o processo de empacotar o código em um contêiner que pode ser implantado em qualquer lugar. A maneira mais fácil de dockerizar um aplicativo é usando um Dockerfile.

Dockerfile

Um script Dockerfile contém instruções para criar uma imagem de contêiner do Docker. Você pode usar esse arquivo para definir o ambiente, instalar as dependências e executar os comandos necessários para criar e executar um aplicativo.

Crie um Dockerfile na raiz do projeto com o seguinte conteúdo:

# Dockerfile

FROM node:18-alpine

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .

RUN npm run build
RUN npm install -g next

EXPOSE 3000

CMD ["next", "start", "-p", "3000"]

Esse Dockerfile é baseado na imagem node:18-alpine. Ele define o diretório de trabalho, lida com as dependências, copia o projeto e cria o aplicativo.

Depois que o aplicativo é criado, ele expõe a porta 3000 e inicia um servidor Next.js que escuta nessa porta.

Para saber mais sobre os Dockerfiles, consulte a documentação oficial.

.dockerignore

O tamanho de uma imagem do Docker deve ser mantido em um nível mínimo. A maneira mais fácil de reduzir o tamanho de uma imagem do Docker é criar um arquivo .dockerignore. Esse arquivo permite que você especifique quais arquivos e pastas devem ser excluídos da imagem final.

Por exemplo, você não deseja incluir os arquivos do IDE, build, .git ou node_modules em sua imagem.

Aqui está um exemplo de arquivo .dockerignore que você pode usar:

# .dockerignore

.idea/

/node_modules
/.next/
/out/
/build

.vercel

Certifique-se de modificar o arquivo .dockerignore de acordo com suas necessidades.

Criar, executar, testar

É sempre uma boa ideia testar seu projeto do Docker localmente antes de enviá-lo para a nuvem. A maneira mais fácil de testar seu Dockerfile é instalando o Docker Desktop.

Depois de instalado, você pode criar sua imagem:

$ docker build -t blog-frontend:1.0 .

Liste as imagens para ver se a imagem foi criada com sucesso:

$ docker images

REPOSITORY        TAG       IMAGE ID       CREATED             SIZE
blog-frontend     1.0       d361534a68da   2 minutes ago       1.08GB

Execute um contêiner usando a imagem recém-criada:

$ docker run -p 3000:3000 --name blog-frontend blog-frontend:1.0

Abra seu navegador da Web favorito e navegue até http://localhost:3000. Seu aplicativo deve estar lá!

Para encerrar o contêiner, pressione CTRL + c no teclado.

Enviar para o GitHub

O Back4pp Containers é totalmente integrado ao GitHub. Ele fornece um sistema automático de CI/CD que reimplanta seu aplicativo a cada confirmação. Para implantar seu código na próxima seção, você deve primeiro enviar as alterações para o VCS.

Confirme todas as alterações e envie-as para a nuvem:

$ git add .
$ git commit -m "dockerized the application"
$ git push origin master

Navegue até seu repositório do GitHub e verifique se o Dockerfile está presente no repositório.

Implantar aplicativo

Você precisará de uma conta gratuita no Back4app para acompanhar. Se ainda não estiver registrado, inscreva-se gratuitamente!

Comece navegando até o painel do Back4app e clicando em “Build new app” (Criar novo aplicativo).

Como estamos implantando um aplicativo em docker, selecione “Containers as a Service” (Contêineres como serviço).

Se for a primeira vez que estiver usando o Back4app Containers, você será solicitado a conectar sua conta do GitHub à sua conta do Back4app. Certifique-se de habilitar o acesso a todos os repositórios que você gostaria de implantar.

Em seguida, localize o repositório back4app-full-stack e selecione-o clicando em “Select”.

O aplicativo que estamos implantando não exige nenhuma configuração especial. Tudo o que você precisa fazer é fornecer um “Nome do aplicativo” descritivo. Vou usar o back4app-full-stack para manter as coisas organizadas.

Por fim, clique em “Deploy” (Implantar).

O Back4app Containers levará alguns minutos para criar e implantar sua imagem do Docker. O status do seu aplicativo mudará para “Ready” (Pronto) assim que ele for implantado com sucesso.

Para visitar seu aplicativo, clique no URL verde, conforme mostrado na imagem abaixo.

Ótimo, você implantou com sucesso um aplicativo de frontend fictício no Back4app Containers.

Como conectar o frontend ao backend?

Nesta seção, conectaremos nosso frontend ao backend do Back4app.

Objetivos

1. Instalar o Parse SDK
2. Configurar o Parse SDK
3. Obter dados (por exemplo, com ParseQuery)

Instalar o Parse SDK

Primeiro, instale o Parse SDK:

$ npm install parse

Configurar o Parse SDK

Para inicializar o Parse SDK, você terá de fornecer o “Application ID” e a “JavaScript key” do Back4app. Para obtê-las, navegue até o aplicativo Back4app e selecione “App Settings > Security & Keys” na barra lateral.

Como não queremos expor esses segredos no código-fonte, crie um arquivo .env.local:

# .env.local

NEXT_PUBLIC_PARSE_APPLICATION_ID=<your_parse_app_id>
NEXT_PUBLIC_PARSE_JAVASCRIPT_KEY=<your_parse_js_key>

Certifique-se de substituir os espaços reservados pelos valores reais.

Inicializar o Parse SDK

Em seguida, navegue até seu providers.js e inicialize o Parse da seguinte forma:

// src/app/providers.js

// ...

import Parse from "parse/dist/parse";

const PARSE_APPLICATION_ID = process.env.NEXT_PUBLIC_PARSE_APPLICATION_ID;
const PARSE_JAVASCRIPT_KEY = process.env.NEXT_PUBLIC_PARSE_JAVASCRIPT_KEY;
Parse.initialize(PARSE_APPLICATION_ID, PARSE_JAVASCRIPT_KEY);
Parse.serverURL = "https://parseapi.back4app.com/";

export function Providers({children}) {
    return (
        // ...
    );
}

Para poder acessar a instância do Parse em todas as nossas exibições. Usaremos o contexto do React.

Crie um novo arquivo chamado context/parseContext.js e cole o seguinte código nele:

// src/app/context/parseContext.js

"use client";

import {createContext} from "react";

const ParseContext = createContext();

export default ParseContext;

Em seguida, envolva todo o seu aplicativo com o ParseContext e forneça a instância do Parse a ele:

// src/app/providers.js

// ...

import ParseContext from "@/app/context/parseContext";

export function Providers({children}) {
  return (
    <CacheProvider>
      <ColorModeScript initialColorMode={theme.config.initialColorMode} />
      <ChakraProvider theme={theme}>
        <ParseContext.Provider value={Parse}>
          {children}
        </ParseContext.Provider>
      </ChakraProvider>
    </CacheProvider>
  );
}

É isso aí! Agora podemos acessar a instância do Parse usando o gancho useContext().

Obter dados

A última coisa que precisamos fazer é buscar dados do backend. Para fazer isso, usaremos Parse.Query. Essa classe é basicamente um ORM para bancos de dados baseados no Parse.

Primeiro, substitua src/app/page.jsx pelo seguinte:

// src/app/page.jsx

"use client";

import NextLink from "next/link";
import {useContext, useEffect, useState} from "react";
import ParseContext from "@/app/context/parseContext";
import {Card, CardBody, Heading, Link, Spinner, Stack, Text} from "@chakra-ui/react";

export default function Home() {

  const parse = useContext(ParseContext);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  const [articles, setArticles] = useState([]);

  useEffect(() => {
    (async () => {
      try {
        const query = new parse.Query("Article");
        query.descending("createdAt");
        const articles = await query.find();
        setArticles(articles);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    })();
  }, [parse.Query]);

  if (loading) {
    return <Spinner size="lg"/>;
  }

  if (error) {
    return <Text color="red">{error}</Text>;
  }

  return (
    <>
      <Stack>
        {articles.map((article) => (
          <Card key={article.get("slug")}>
            <CardBody>
              <Stack>
                <Heading size="lg">
                  <Link as={NextLink} href={article.get("slug")}>
                    {article.get("title")}
                  </Link>
                </Heading>
                <Text>{article.get("shortContent")}</Text>
              </Stack>
            </CardBody>
          </Card>
        ))}
      </Stack>
    </>
  );
}

1. Obtivemos a instância do Parse por meio do gancho useContext().
2. Criamos alguns estados, incluindo carregamento, erro e artigos.
3. Usamos o gancho useEffect() para executar o Parse.Query quando a página é aberta.
4. O Parse.Query busca todos os artigos ordenados por createdAt.
5. Modificamos a instrução de retorno para renderizar os dados.

Depois disso, substitua src/app/[slug]/page.js por isto:

// src/app/[slug]/page.js

"use client";

import {formatDate} from "@/app/util/date-util";
import {useContext, useEffect, useState} from "react";
import ParseContext from "@/app/context/parseContext";
import {Card, CardBody, Heading, Image, Spinner, Stack, Text} from "@chakra-ui/react";
import ReactMarkdown from "react-markdown";
import ChakraUIRenderer from "chakra-ui-markdown-renderer";

export default function Article({params}) {

  const parse = useContext(ParseContext);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  const [article, setArticle] = useState(null);

  useEffect(() => {
    (async () => {
      try {
        const query = new parse.Query("Article");
        query.equalTo("slug", params.slug);
        const article = await query.first();
        if (!article) {
          setError("This article does not exist.");
        } else {
          setArticle(article);
        }
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    })();
  }, [params.slug, parse.Query]);

  if (loading) {
    return <Spinner size="lg"/>;
  }

  if (error) {
    return <Text color="red">{error}</Text>;
  }

  return (
    <>
      {article && (
        <Stack>
          <Card>
            <CardBody>
              <Stack>
                <Heading as="h2" size="lg">{article.get("title")}</Heading>
                <Text>Posted on {formatDate(article.get("createdAt"))}</Text>
                {article.get("cover") && (
                  <Image 
                      src={article.get("cover").url()} 
                      alt={`${article.get("title")} cover`} 
                      borderRadius="lg"
                  />
                )}
                <ReactMarkdown 
                    components={ChakraUIRenderer()} 
                    children={article.get("content")} 
                    skipHtml
                />
              </Stack>
            </CardBody>
          </Card>
        </Stack>
      )}
    </>
  );
}

Usamos os conceitos análogos aos do código acima. A principal diferença entre os dois trechos de código é que estamos buscando um artigo específico em vez de todos eles neste.

E estamos prontos! Vá em frente e teste o projeto localmente:

$ next dev

Quando tiver certeza de que tudo está funcionando, envie-o para o VCS:

$ git add .
$ git commit -m "connected the frontend with the backend"
$ git push origin master

O Back4app Containers reimplantará automaticamente seu aplicativo com as alterações mais recentes.

Conclusão

Concluindo, implantamos com êxito um aplicativo de pilha completa no Back4app. Por meio desse processo, você adquiriu uma experiência valiosa na hospedagem do frontend e do backend de um aplicativo. Agora, você não deverá ter problemas para implementar seus próprios aplicativos de pilha completa.

O código-fonte final está disponível no repositório back4app-full-stack e você aprendeu onde hospedar o frontend e o backend.