Como Implementar uma Aplicação React na Plataforma de Aplicativos da DigitalOcean

O autor selecionou Creative Commons para receber uma doação como parte do programa Write for DOnations.

Introdução

O App Platform da DigitalOcean é um produto Plataforma como Serviço (PaaS) que permite configurar e implantar aplicativos a partir de um repositório de origem. Depois de configurar seu aplicativo, a DigitalOcean irá construir e implantar a aplicação a cada mudança, oferecendo-lhe o benefício de um servidor web completo e um pipeline de implantação com configuração mínima. Isso pode ser uma maneira rápida e eficiente de implantar suas aplicações React, e se você estiver usando React para construir um site sem backend, você pode usar a camada gratuita do App Platform.

Neste tutorial, você irá implantar uma aplicação React na Plataforma de Aplicativos da DigitalOcean usando o plano gratuito Inicial. Você irá construir uma aplicação com Create React App, enviar o código para um repositório no GitHub, e então configurar a aplicação como um aplicativo da DigitalOcean. Você irá conectar o aplicativo ao seu código-fonte e implantar o projeto como um conjunto de arquivos estáticos.

Ao final deste tutorial, você será capaz de configurar uma aplicação React para ser implantada automaticamente a cada envio para o branch principal de um repositório GitHub.

Pré-requisitos

• Em sua máquina local, você precisará de um ambiente de desenvolvimento executando Node.js; este tutorial foi testado na versão 10.22.0 do Node.js e na versão 6.14.6 do npm. Para instalar isso no macOS ou Ubuntu 20.04, siga as etapas em Como Instalar o Node.js e Criar um Ambiente de Desenvolvimento Local no macOS ou a seção Instalando o Node.js com Apt Usando um PPA da NodeSource de Como Instalar o Node.js no Ubuntu 20.04.

• O Git instalado na sua máquina local. Você pode seguir o tutorial Contribuindo para Open Source: Começando com o Git para instalar e configurar o Git no seu computador.

• Uma conta na DigitalOcean.

• Uma conta no GitHub, que você pode criar acessando a Página de Criação de Conta.

• Você também precisará de um conhecimento básico de JavaScript, HTML e CSS, que você pode encontrar em nossas séries Como Criar um Site com HTML, Como Criar um Site com CSS, e em Como Codificar em JavaScript.

Passo 1 — Criando um Projeto React

Neste passo, você criará uma aplicação React usando o Create React App e construirá uma versão implantável dela.

Para começar, crie um novo aplicativo usando o Create React App em sua máquina local. Em um terminal, execute o comando para construir um aplicativo chamado digital-ocean-app:

npx create-react-app digital-ocean-app

O comando npx irá executar um pacote Node sem fazer o download para sua máquina. O script create-react-app irá instalar todas as dependências e construir um projeto base no diretório digital-ocean-app. Para mais informações sobre o Create React App, confira o tutorial Como Configurar um Projeto React com Create React App.

O código irá baixar as dependências e criar um projeto base. Isso pode levar alguns minutos para ser concluído. Quando estiver completo, você receberá uma mensagem de sucesso. Sua versão pode ser ligeiramente diferente se você usar yarn em vez de npm:

Output
Success! Created digital-ocean-app at your_file_path/digital-ocean-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd digital-ocean-app
  npm start

Happy hacking!

Agora que você tem um projeto base, execute-o localmente para testar como o projeto aparecerá no servidor. Primeiro, altere para o diretório:

cd digital-ocean-app

Execute o projeto usando o script npm start:

npm start

Quando o comando for executado, você receberá a saída com o URL para o servidor de desenvolvimento local:

Output
Compiled successfully!

You can now view digital-ocean-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.110:3000

Note that the development build is not optimized.
To create a production build, use npm build.

Abra um navegador em http://localhost:3000 e você encontrará seu projeto:

Pare o projeto digitando CTRL+C ou ⌘+C no terminal.

Agora que você tem um aplicativo React funcionando, você pode enviar o código para um repositório do GitHub.

Passo 2 — Enviando o Código para o GitHub

Para implantar seu aplicativo, a Plataforma de Aplicativos recupera seu código-fonte de um repositório de código hospedado. Neste passo, você vai enviar o código do seu aplicativo React para um repositório do GitHub para que a Plataforma de Aplicativos possa acessá-lo posteriormente.

Faça login na sua conta do GitHub. Depois de fazer login, crie um novo repositório chamado digital-ocean-app. Você pode tornar o repositório público ou privado:

O Create React App inicializa automaticamente o seu projeto com git, então você pode configurar para enviar o código diretamente para o GitHub. Primeiro, adicione o repositório que você gostaria de usar com o seguinte comando:

git remote add origin https://github.com/your_name/digital-ocean-app.git

Em seguida, declare que deseja enviar para o ramo main com o seguinte:

git branch -M main

Por fim, envie o código para o seu repositório:

git push -u origin main

Informe suas credenciais do GitHub quando solicitado para enviar o seu código.

Quando você enviar o código, você receberá uma mensagem de sucesso. Sua mensagem será ligeiramente diferente:

Output
Counting objects: 22, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (22/22), done.
Writing objects: 100% (22/22), 187.50 KiB | 6.94 MiB/s, done.
Total 22 (delta 0), reused 0 (delta 0)
To github.com:your_name/digital-ocean-app.git
   4011c66..647d2e1  main -> main

Agora você copiou o seu código para o repositório do GitHub.

Neste passo, você enviou seu projeto para o GitHub para poder acessá-lo usando DigitalOcean Apps. Em seguida, você criará um novo aplicativo DigitalOcean usando seu projeto e configurará a implantação automática.

Passo 3 — Implantação na Plataforma de Aplicativos DigitalOcean

Neste passo, você implantará um aplicativo React na Plataforma de Aplicativos DigitalOcean. Você conectará seu repositório do GitHub ao DigitalOcean, configurará o projeto para compilar e construirá seu projeto inicial. Depois que o projeto estiver ativo, cada alteração desencadeará uma nova compilação e atualização.

Ao final deste passo, você será capaz de implantar um aplicativo com entrega contínua no DigitalOcean.

Para começar, faça login em sua conta DigitalOcean e pressione o botão Criar, depois selecione Apps:

Em seguida, você será solicitado a vincular seu repositório do GitHub. Se você ainda não o conectou, precisará fazer login com seu nome de usuário e senha e conceder autorização ao DigitalOcean para acessar seus repositórios:

Depois de vincular sua conta, selecione o repositório que deseja conectar na tela de autorização do GitHub. Neste caso, você está usando o repositório digital-ocean-app, mas pode conectar mais repositórios se desejar:

Depois de selecionar o repositório, você se reconectará à interface da DigitalOcean. Selecione digital-ocean-app na lista de repositórios e, em seguida, pressione Avançar. Isso conectará seu aplicativo diretamente ao repositório do GitHub:

Agora que você selecionou seu repositório, precisa configurar o aplicativo da DigitalOcean. Neste exemplo, o servidor será baseado na América do Norte escolhendo Nova York no campo Região, e o ramo de implantação será main. Para o seu aplicativo, escolha a região mais próxima da sua localização física:

Para este tutorial, você está marcando Autodeploy de alterações de código. Isso reconstruirá automaticamente seu aplicativo sempre que você atualizar o código.

Pressione Avançar para prosseguir para a tela Configurar seu aplicativo.

Em seguida, selecione o tipo de aplicativo que você executará. Como o React criará ativos estáticos, selecione Site estático no menu suspenso do campo Tipo.

Você também tem a opção de usar um script de construção personalizado. Mas, nesse caso, você pode manter o comando padrão npm run build. Você pode querer criar um script de construção personalizado se tiver um script de construção diferente para um ambiente de garantia de qualidade (QA) ou um ambiente de produção:

Pressione Próximo para prosseguir para a página Finalizar e lançar.

Aqui você pode selecionar o plano de preços. O nível gratuito Inicial é feito para sites estáticos, então escolha esse:

Pressione o botão Lançar Aplicativo Inicial e o DigitalOcean começará a construir sua aplicação.

O aplicativo executará os scripts npm ci e npm build em seu repositório. Isso irá baixar todas as dependências e criar o diretório build com uma versão compilada e minificada de todos os seus arquivos JavaScript, HTML e outros ativos. Você também pode criar um script personalizado em seu package.json e atualizar os Comandos na aba Componentes de sua aplicação na Plataforma de Aplicativos.

Levará alguns minutos para que a construção seja concluída, mas quando estiver pronta, você receberá uma mensagem de sucesso e um link para seu novo site. Seu link terá um nome único e será ligeiramente diferente:

Pressione Aplicativo Ao Vivo para acessar seu projeto no navegador. Será o mesmo projeto que você testou localmente, mas estará ao vivo na web com uma URL segura:

Agora que o seu projeto está configurado, sempre que você fizer uma alteração no repositório vinculado, você executará uma nova compilação. Neste caso, se você fizer um push de uma alteração para o ramo main, o DigitalOcean executará automaticamente uma nova implantação. Não é necessário fazer login; ela será executada assim que você fizer a alteração:

Neste passo, você criou um novo aplicativo DigitalOcean na Plataforma de Aplicativos. Você conectou sua conta do GitHub e configurou o aplicativo para compilar o ramo main. Após configurar o aplicativo, você descobriu que o aplicativo implantará uma nova compilação após cada alteração.

Conclusão

A Plataforma de Aplicativos da DigitalOcean oferece uma ferramenta rápida para implantar aplicativos. Com uma pequena configuração inicial, seu aplicativo será implantado automaticamente após cada alteração. Isso pode ser usado em conjunto com o React para colocar rapidamente sua aplicação web em funcionamento.

A possible next step for a project like this would be to change the domain name of the app. To do this, take a look at the official documentation for App Platform.