Como implantar um aplicativo Vue.js

O Vue.js é uma estrutura JavaScript desenvolvida para tratar de problemas comuns no desenvolvimento de aplicativos da Web, como o gerenciamento de estado complexo e a necessidade de uma solução leve e flexível.

A estrutura foi projetada para ser simples, eficiente e fácil de usar, com uma sintaxe semelhante à do HTML e do JavaScript. Além disso, o Vue é reativo, o que o torna mais rápido e eficiente do que a manipulação tradicional do DOM.

Neste artigo, você conhecerá os benefícios e as limitações do uso do Vue e saberá como implantar seu aplicativo Vue usando o serviço de conteinerização do Back4app gratuitamente.

Principais conclusões

• O Vue.js oferece técnicas de desempenho otimizado, flexibilidade e ampla documentação, o que o torna uma opção popular para o desenvolvimento de front-end.

• No entanto, o Vue.js pode ter limitações em termos de estabilidade de longo prazo e um ecossistema menos maduro em comparação com outras estruturas.

• O Back4app Containers oferece uma maneira fácil e eficiente de implantar aplicativos Vue.js, aproveitando a tecnologia Docker para melhorar o desempenho, a segurança e simplificar a implantação e o dimensionamento.

Vantagens de desenvolver seu front-end com Vue

O Vue tem se tornado cada vez mais popular nos últimos anos por vários motivos. Aqui estão alguns dos benefícios de desenvolver seus aplicativos da Web com Vue:

Técnicas e soluções para um desempenho otimizado

O Vue fornece um conjunto de técnicas para otimizar o desempenho ao criar aplicativos da Web, como o DOM virtual e os mecanismos de atualização na forma de funções.

Com essas técnicas, o Vue minimiza o número de operações DOM e a sobrecarga de renderização, resultando em tempos de recarga mais rápidos e melhor desempenho do aplicativo.

O Vue utiliza um DOM virtual, uma representação leve do DOM real, e atualiza o vDOM quando você faz alterações em seu aplicativo. Em seguida, ele usa um algoritmo de diferenciação para identificar as alterações mínimas necessárias no DOM real.

Essa abordagem reduz significativamente o número de operações DOM caras, levando a uma renderização mais rápida e a um melhor desempenho.

Além disso, o Vue oferece controle refinado sobre as atualizações de componentes por meio de ganchos de ciclo de vida, observadores e propriedades computadas.

Com essas funções, você pode especificar quando um componente deve ser atualizado com base em critérios específicos, evitando atualizações desnecessárias e melhorando o desempenho geral.

O Vue é flexível por natureza

A flexibilidade da Vue é evidente em vários aspectos da estrutura, permitindo que ela se adapte a vários cenários, padrões ou requisitos de desenvolvimento.

Um dos principais pontos fortes do Vue é sua abordagem de adoção incremental, que o torna a estrutura de front-end perfeita para integração em projetos existentes.

Além de sua abordagem de adoção incremental, você pode integrar o Vue perfeitamente a outras bibliotecas e ecossistemas existentes.

Essa compatibilidade promove a interoperabilidade e permite que os desenvolvedores escolham as melhores soluções para suas necessidades.

Por exemplo, a funcionalidade do Vue pode ser integrada a outras bibliotecas e estruturas, como React e Angular.

O Vue também oferece uma sintaxe de modelo flexível e intuitiva que permite que você escreva modelos usando a sintaxe baseada em HTML com diretivas e expressões adicionais.

Essa sintaxe equilibra simplicidade e potência, facilitando a compreensão e o trabalho com modelos Vue.

Além disso, o Vue oferece suporte a abordagens de renderização alternativas, incluindo JSX (JavaScript XML), proporcionando flexibilidade para os desenvolvedores que preferem sintaxes alternativas.

Documentação extensa e uma comunidade ativa

A documentação do Vue é bem estruturada e concisa, explicando claramente os conceitos com exemplos práticos. A clareza e a integridade da documentação também reduzem a curva de aprendizado, permitindo que você comece a criar aplicativos com o Vue.

Outro aspecto que define a Vue é a dedicação de sua comunidade à cultura de código aberto e à contribuição ativa.

Os desenvolvedores do Vue contribuem ativamente para o aprimoramento e a evolução contínuos do Vue.js. Eles fornecem contribuições de código e participam de discussões, oferecem feedback valioso e ajudam a moldar a direção futura do Vue.js.

Essa abordagem colaborativa garante que o Vue.js continue sendo uma estrutura de ponta. Ao se envolver ativamente com a comunidade Vue, você pode aproveitar uma vasta rede de recursos, obter suporte valioso e desbloquear oportunidades para expandir suas habilidades e conhecimentos.

Limitações do desenvolvimento de seu front-end com Vue

Embora o Vue ofereça vantagens para o desenvolvimento de front-end, também é essencial observar algumas limitações ao desenvolver com o Vue. Algumas dessas limitações incluem:

Estabilidade de longo prazo

O Vue sofre com o apoio substancial das empresas, o que deixa os desenvolvedores com a percepção de que o Vue não é adequado quando se consideram as estruturas para desenvolver o front-end de um aplicativo da Web.

As organizações geralmente priorizam estruturas com suporte corporativo sólido, como Angular e React, para garantir a capacidade da estrutura de atender às necessidades comerciais em evolução e fornecer manutenção contínua.

Ecossistema menos maduro

Em comparação com o Angular e o React, o Vue tem um ecossistema menos maduro. Isso leva a cenários em que os desenvolvedores do Vue encontram limitações nas bibliotecas e ferramentas disponíveis para lidar com processos complexos em grandes aplicativos.

Os desenvolvedores de Vue frequentemente se encontram em situações em que podem precisar criar soluções personalizadas para os requisitos de seus aplicativos. Isso, portanto, leva a mais tempo e esforço no desenvolvimento do aplicativo da Web.

Implantação de um aplicativo com contêineres do Back4app

O Back4App Containers é uma plataforma que usa a tecnologia Docker para implantar e executar aplicativos em ambientes isolados chamados contêineres.

Com essa tecnologia, você pode empacotar seus aplicativos da Web com todas as dependências necessárias e garantir implementações consistentes em diferentes ambientes.

A implantação de um aplicativo nos contêineres do Back4app é muito simples. Você precisa criar um Dockerfile na raiz do seu aplicativo que descreva o empacotamento e a execução do aplicativo.

Em seguida, você envia o aplicativo para o seu repositório do GitHub. A partir dessa etapa, o Back4app cria a imagem do Docker e executa o contêiner.

Aqui estão alguns dos benefícios de usar os contêineres do Back4App:

• Desempenho aprimorado: Os contêineres são leves e eficientes, o que leva a um melhor desempenho dos aplicativos.

• Segurança aprimorada: Os contêineres são isolados uns dos outros, o que pode ajudar a aumentar a segurança.

• Implementação e dimensionamento simplificados: Os contêineres podem ser dimensionados facilmente, economizando tempo e dinheiro.

Criação do aplicativo Vue

Neste tutorial, você criará um aplicativo Vue simples que sugere atividades que os usuários podem realizar em seu tempo livre.

O aplicativo Vue vai consumir uma API para executar essa ação. Em seguida, você implantará o aplicativo Vue nos contêineres do Back4app

Para começar a criar o aplicativo Vue, execute o seguinte comando no diretório de sua preferência:

npm create vue@latest

A execução desse código gerará um prompt que permitirá que você nomeie seu aplicativo Vue e selecione os recursos que deseja integrar ao seu aplicativo.

Para este aplicativo, você usará apenas o recurso Vue Router. Depois de selecionar esse recurso, acesse o diretório do aplicativo e execute npm install para baixar e instalar as dependências do aplicativo.

Para criar esse aplicativo, você deve instalar três pacotes npm adicionais: axios, sass e @iconify/vue.

Axios é uma biblioteca JavaScript que simplifica a realização de solicitações HTTP, permitindo que você recupere facilmente dados da API.

Sass é um pré-processador de CSS que você usará para estilizar o aplicativo. Você usará o pacote @iconify/vue para integrar ícones vetoriais dimensionáveis em seu aplicativo.

Para instalar esses três pacotes, execute o comando abaixo no diretório raiz do seu aplicativo:

npm install axios sass @iconify/vue

Depois de instalar esses pacotes, você pode abrir seu diretório atual no Visual Studio Code executando o seguinte comando:

code .

Crie dois componentes no diretório de visualizações de seu aplicativo: HomeView e AboutView. Em seguida, manipule o roteamento desses dois componentes adicionando o bloco de código abaixo do arquivo index.js no diretório do roteador:

// index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

O arquivo de índice no diretório do roteador lida com o roteamento do aplicativo Web Vue. Aqui, são definidas duas rotas: Rotas HomeView e AboutVue.

Para permitir que os usuários do seu aplicativo naveguem entre essas duas rotas, crie um cabeçalho com essas rotas no seu arquivo App.vue:

<!-- App.vue -->
<script setup>
import { RouterLink, RouterView } from 'vue-router'

</script>

<template>
  <header>
  <h1> Unbored </h1>

  <nav>
    <RouterLink to="/" class="link"><button>Home</button></RouterLink>
    <RouterLink to="/about" class="link"><button>about</button></RouterLink>
  </nav>
  </header>

  <RouterView />
</template>

<style lang="scss" scoped>
header{  
    padding: 1rem 0;
    display: flex;
    justify-content: space-between;

    nav{
      display: flex;
      gap: 1rem;

      .link{
        text-decoration: none;
        color: inherit;
      }
    }

  }
</style>

No arquivo App.vue, você importou os componentes RouterLink e RouterView do pacote vue-router.

O componente RouterLink vincula os botões a suas respectivas rotas, enquanto o componente RouterView exibe o conteúdo da rota. Você também estilizou o cabeçalho no bloco de estilo.

Depois de manipular as rotas, crie o componente HomeView do seu aplicativo. O componente HomeView deve exibir uma nova atividade que um usuário do aplicativo poderia realizar quando entediado a cada clique de botão. Para fazer isso, copie o código a seguir em seu componente HomeView:

<!-- HomeView.vue -->
<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { Icon } from '@iconify/vue';

const activity = ref('');

const fetchActivity = async () => {
    try {
    const response = await axios.get('<https://www.boredapi.com/api/activity>');
    activity.value = response.data.activity
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

</script>

<template>
    <div>
        <h1>Tired of feeling bored. </h1>
        <p>Click on the button below to get an activity you can do.</p>
        <button @click="fetchActivity"> Get Activity</button>
        <Icon icon="system-uicons:arrow-down" />
        <h2> {{ activity }}</h2>
    </div>
</template>

<style lang="scss" scoped>

  div{
    display: flex;
    flex-direction: column;
    margin-block-start: 6rem;
    align-items: center;
    gap: 2rem;

    h1{
      text-transform: uppercase;
      letter-spacing: 0.5rem;
    }
  }
</style>

O bloco de código acima detalha o componente HomeView. No componente HomeView, você importou as funções ref e axios de seus respectivos pacotes. Você também estilizou esse componente no bloco de estilo.

A variável activity é uma referência reativa para armazenar dados de atividade obtidos. A função fetchActivity busca de forma assíncrona os dados do ponto de extremidade da API especificado“https://www.boredapi.com/api/activity” com axios e atualiza o valor da atividade quando um usuário do aplicativo clica no botão Get Activity.

Para explicar aos usuários do aplicativo sobre o que é esse aplicativo, copie e cole o seguinte código no componente AboutView:

<!-- AboutView.vue -->
<template>
  <div class="about">
    <h3>About Unbored</h3>
    <p>The Unbored App suggests activities you could perform instead of staying bored all day</p>
  </div>
</template>

<style lang="scss" scoped>

  h3{
    margin-block-start: 4rem;
    margin-block-end: 3rem;
  }
</style>

Para estilizar o corpo do seu aplicativo Vue, crie um arquivo main.css no diretório de ativos e adicione o código abaixo:

/* main.css */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    inline-size: 50%;
    margin: auto;
    font-family: 'Montserrat', sans-serif;
}

button{
    border: none;
    padding: 0.5rem 0.8rem;
    background-color: inherit;
    font-family: 'Montserrat', sans-serif;
    font-size: small;
    font-weight: bold;
    color: #333333;
    border-radius: 12px;
}

button:hover{
    color: #e2e2e2;
    background-color: #333333;
  }

É isso aí! Para visualizar seu aplicativo Vue, execute o seguinte comando no diretório do aplicativo:

npm run dev

Seu aplicativo deve se parecer com a imagem abaixo.

Implantação de aplicativos Vue com contêineres Back4app:

Este é um tutorial passo a passo sobre como implantar seu aplicativo Vue. Primeiro, você precisa colocá-lo no Docker. A dockerização de um aplicativo exige que você crie um Dockerfile, que contém todas as instruções que o Docker Engine precisa fazer para criar a imagem.

Em seguida, você testará o aplicativo localmente para garantir que tudo funcione perfeitamente antes de implantá-lo nos contêineres do Back4app.

Dockerizando seu aplicativo Vue

Para dockerizar seu aplicativo Vue, você precisa criar um Dockerfile no diretório raiz do seu aplicativo Vue. Um Dockerfile é um projeto que o Docker Engine usa para criar um contêiner do Docker com todas as dependências e configurações necessárias.

O Dockerfile define a imagem base, define o diretório de trabalho, copia arquivos para o contêiner, instala dependências, configura o ambiente de tempo de execução e especifica os comandos a serem executados quando o contêiner é iniciado.

Para entender melhor a tecnologia do Docker, você pode ler esta referência do Dockerfile.

Para começar a dockerizar seu aplicativo Vue, crie um Dockerfile no diretório raiz e copie o seguinte código para ele:

# Dockerfile
FROM node:18

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:1.19.0-alpine

COPY --from=0 /app/dist /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

O Dockerfile executa as seguintes ações:

• O Dockerfile utiliza a imagem de base node:18, que fornece o ambiente de tempo de execução do Node.js.

• Define o diretório de trabalho dentro do contêiner como /app.

• Copia os arquivos package.json e package-lock.json para o diretório de trabalho.

• Instala as dependências com o comando npm install.

• Copia todo o código do aplicativo para o diretório de trabalho.

• Compila o aplicativo executando o comando npm run build.

• Em seguida, o Dockerfile usa a imagem de base nginx:1.19.0-alpine, que fornece o servidor da Web NGINX.

• Copia os arquivos estáticos criados no estágio anterior para o diretório /usr/share/nginx/html na imagem do NGINX.

• Expõe a porta 80 para permitir o tráfego HTTP de entrada.

• Ele executa o servidor NGINX com a configuração especificada "nginx", "-g", "daemon off;" usando a instrução CMD.

Criação e teste de seu aplicativo Vue em Docker

Antes de implantar suas imagens na nuvem, você pode testar o aplicativo Docker localmente. Para testar o aplicativo, primeiro crie o aplicativo executando o seguinte comando:

docker build -t bored .

Após o processo de compilação, “você pode executar o seguinte comando para ativar o contêiner do Docker localmente”:

docker run -p 8080:80 bored

A opção -p 8080:80 especifica o mapeamento de portas entre o host e o contêiner. Ele mapeia a porta 8080 no host para a porta 80 no contêiner.

Neste ponto, seu aplicativo está sendo executado em um contêiner localmente. Você pode navegar para http://localhost:8080 para visualizar seu aplicativo.

Implantação de seu aplicativo nos contêineres do Back4app

Antes de implantar seu aplicativo no Back4app Containers, você precisa fazer push do aplicativo para um repositório do GitHub. Você pode aprender a fazer isso seguindo estas etapas na documentação do GitHub.

Depois de enviar seu código-fonte para o Github, você deve criar uma conta no Back4app. Para criar uma conta no Back4app, siga estas etapas:

• Visiteo site oficial do Back4app .

• Localize e clique no botão Signup (Registrar ) no canto superior direito da página de destino.

• Preencha o formulário de registro fornecido com os detalhes necessários.

• Envie o formulário para concluir o processo de registro.

Depois de criar sua conta Back4app com sucesso, faça login usando suas credenciais. Em seguida, localize o botão NOVO APLICATIVO situado no canto superior direito do seu Painel de Controle.

Ao clicar no botão NEW APP, você será redirecionado para uma página em que poderá escolher o método de implantação do seu aplicativo. Como você pretende implantar um contêiner, opte pela opção Containers as a Service.

Depois de clicar na opção Containers as a Service (Contêineres como serviço ), vincule o repositório do GitHub do seu aplicativo e clique em Select (Selecionar ) para implantar o aplicativo.

Ao clicar no botão Select (Selecionar ), você será direcionado para uma página em que poderá fornecer informações essenciais sobre o seu aplicativo. Isso inclui o nome do aplicativo, a ramificação, o diretório raiz e as variáveis ambientais.

Certifique-se de preencher todas as variáveis de ambiente necessárias das quais seu aplicativo pode depender. Depois de preencher os campos obrigatórios, clique no botão Create App (Criar aplicativo ).

Ao clicar nesse botão, o processo de implantação do seu aplicativo Vue será iniciado, dando início às etapas necessárias para tornar seu aplicativo disponível. Você poderá acompanhar o progresso da implantação, conforme mostrado na imagem abaixo.

Conclusão

O Vue está entre as melhores estruturas JavaScript de código aberto para desenvolvimento front-end. Ele oferece uma abordagem intuitiva para a criação de interfaces de usuário com recursos como vinculação reativa de dados e uma arquitetura baseada em componentes.

Neste artigo, você aprendeu a criar e implantar um aplicativo Vue com contêineres do Back4app. A implantação de seus aplicativos no Back4app ajuda a simplificar o gerenciamento complexo da infraestrutura de back-end, pois o Back4app oferece ferramentas para gerenciar dados, dimensionar e monitorar o desempenho de um aplicativo.

PERGUNTAS FREQUENTES