8 serviços gratuitos de hospedagem de aplicativos React12 min read

Então você criou um aplicativo React, mas não tem certeza de como ou onde hospedá-lo. Neste artigo, orientaremos você através de 8 serviços de hospedagem React gratuitos e mostraremos como implantamos este aplicativo React usando cada um e contaremos o que aprendemos no processo.

Construímos nosso aplicativo em Figma usando o Anima plugin, que nos permitiu adicionar funcionalidade, comportamento responsivo e rich media, então exportar código React pronto para desenvolvimento para toda a IU. Levamos um dia para projetar e implantar.

Onde hospedar seu aplicativo React gratuitamente

Há um número crescente de soluções de hospedagem sem servidor graças ao surgimento de estruturas baseadas em componentes como React. Amazon AWS, Microsoft Azure e Google Cloud são atualmente as plataformas dominantes. No entanto, há uma mudança crescente em direção a serviços de hospedagem front-end dedicados que exigem menos esforço e podem colocá-lo em funcionamento rapidamente – e a maioria inclui CI/CD. Aqui estão os 8 serviços gratuitos de hospedagem de aplicativos React que testamos:

1. Netlificar

2. Vercel

3. AWS Amplificar

4. Base de fogo

5. Páginas GitHub

6. Páginas do GitLab

7. Renderizar

8. Surto

Vamos mergulhar nesses serviços gratuitos de hospedagem de aplicativos React com mais detalhes e demonstrar como implantamos um aplicativo React usando cada um deles. 

Netlificar

Plano de fundo

A Netlify foi fundada em 2014 e desde o início se concentrou na hospedagem de sites estáticos. Atraiu muitos desenvolvedores por causa de seu generoso nível gratuito. Alguns anos depois, o Netlify cresceu e se tornou um dos JAMstack e hosts de sites estáticos mais populares do mercado.

Como usar

1. Idealmente, você se registrará ou fará login com GitHub. Isso garante que você possa acessar os repositórios em seu perfil e implantá-los rapidamente.
2. Uma vez logado, clique em “Adicionar novo site” e escolha “Importar um projeto existente”.
3. Em seguida, clique em GitHub como seu provedor.
4. Escolha o “site do banco” ou qualquer que seja o nome do seu projeto.
5. Ajuste as configurações de implantação (no caso do nosso site, os padrões funcionam perfeitamente) e clique em “Implantar site”.
6. Uma vez implantado, você pode visualizá-lo em um URL público que pode ser compartilhado com o mundo. Yay!

Aqui está o aplicativo ao vivo implantado no Netlify.

Prós e contras

O Netlify é fácil de configurar e implantar, sem falar que é um dos serviços mais rápidos que testamos aqui. Uma desvantagem é que se você precisar de colaboradores e/ou equipe, deverá atualizar para um plano pago.

Vercel

Plano de fundo

Vercel (originalmente conhecido como Zeit) foi fundado em 2015 e rapidamente alcançou a fama. Eles são os mantenedores do Next.js, uma estrutura React popular para construção de sites. Eles oferecem um nível gratuito para sites não comerciais, bem como maneiras de usar sua rede Edge para funções sem servidor.

Como usar

1. Entre ou registre-se no GitHub.
2. Clique no menu suspenso “Adicionar novo…” e selecione “Projeto”.                                                             
3. Escolha o “site do banco” ou seu projeto React favorito.
4. Seguimos os padrões para configurações de implantação e clicamos em “Implantar”.
5. Depois de algum tempo, implantamos o site.

Aqui está o URL ao vivo.

Prós e contras

Vercel precisa de algum tempo para armazenar em cache a parte de instalação do processo de implantação, mas depois disso, é um dos serviços mais rápidos. Ele mostra implantações de visualização para cada branch que você envia e faz isso rapidamente por causa do cache.

AWS Amplificar

Plano de fundo

AWS é uma enorme coleção de produtos em nuvem, e o Amplify é anunciado como uma maneira fácil de obter alguns deles. Com o AWS Amplify, você pode criar, enviar e hospedar rapidamente aplicações full-stack na AWS, com a flexibilidade de aproveitar a amplitude dos serviços da AWS à medida que os casos de uso evoluem.

Como usar

1. Cadastre-se ou faça login na AWS, pesquise AWS Amplify e clique em “Começar”.
2. Escolha GitHub e autorize (só permiti para o repositório “site do banco”).
3. Selecione o repositório na seção “Repositórios atualizados recentemente”.
   1. Na configuração de construção, teremos que alterar o diretório base para que nosso aplicativo seja distância assim: Então, as configurações de compilação devem ficar assim:
4. Na próxima etapa, clique em “Salvar e implantar”.
5. Depois de algum tempo, o site estará implantado e pronto para uso.

E estamos ao vivo! Aqui está o URL.

Prós e contras

Você tem que editar o diretório base na especificação de implantação — ele não é reconhecido imediatamente. A IU parece um pouco desajeitada, mas esta é uma preferência pessoal. Há um enorme potencial para o AWS Amplify porque muitos outros serviços da web da AWS estão ao seu alcance.

Base de fogo

Plano de fundo

Firebase é um serviço do Google mais conhecido como plataforma de armazenamento em tempo real. Mas também tem uma opção de hospedagem para sites estáticos e microsserviços Express.js ou APIs, e suporta visualização de URLs para filiais nas quais sua equipe está trabalhando. Tal como acontece com Netlify, Vercel e outros, ele veicula o conteúdo implantado em uma rede CDN.

Como usar

1. Instalar ferramentas firebase com npm install -g firebase-tools.
2. Faça login no Firebase com login do firebase. Depois de fazer login, você verá uma mensagem como esta:
3. Vá para o diretório do projeto e execute inicialização do firebase, você deverá ver algo assim: Escolha a opção de configurar arquivos para Firebase Hosting com implantações opcionais de ação GitHub. Em seguida, você pode criar um projeto diretamente da CLI ou usar a IU do Firebase para fazer isso e depois conectá-lo. Criamos o projeto a partir da linha de comando e foi assim que respondemos às perguntas resultantes:                                                                    Depois disso, arquivos `firebase.json` e `.firebaserc` simples serão criados.
4. Então, corra implantação do firebase para realmente implantar os arquivos do distânciadiretório. Se o diretório estiver faltando, certifique-se de executar npm executar compilação primeiro a gerar arquivos. O implantação do firebase O comando deve gerar uma saída semelhante ao exemplo abaixo:

Agora você pode ver o site no URL fornecido. Yay! 

Prós e contras

O Firebase é bastante simples, mas quando você o configura dentro do seu projeto, as perguntas que você precisa responder ficam um pouco confusas. Felizmente, respondemos a elas na seção acima, mas elas exigem uma compreensão dos recursos reais do Firebase antes de continuar. Fora isso, o Firebase é rápido de implantar e pode gerar um URL onde você pode visualizar os arquivos implantados. Você também pode automatizá-lo facilmente com implantações de ação GitHub com a CLI, o que é interessante.

Páginas GitHub

Plano de fundo

GitHub Pages já existe há algum tempo e é uma maneira fácil de publicar documentos ou um site pessoal diretamente do GitHub. É ótimo para conteúdo estático e muitas pessoas o usam para implantar sites simples com investimento mínimo. O uso é gratuito se o seu projeto for público e é uma forma rápida e barata de hospedar um site.

Como usar

Observe que você precisa editar o Aplicativo.jsx para onde ligamos Roteador e adicione nome base a ele para corresponder ao nome do repositório. Então é assim Aplicativo.jsx deveria parecer:                                                                                        Temos que mudar o nome base porque as páginas GitHub implantarão o site em um URL com este formato `https://GITHUB_USERNAME.gitlab.io/REPO_NAME`. O site não funcionará corretamente sem o nome base definido para o react-roteador-dom.

1. Depois que o código for alterado, precisamos instalar páginas gh pacote com:
2. E, adicione um pré-implantar e um implantar roteiro para pacote.json:
3. Então, simplesmente executamos npm executar implantação. Isso irá desencadear npm executar compilação e vai usar páginas gh publicar o conteúdo de distância para uma ramificação separada em GitHub chamada páginas gh.
4. Por fim, verifique se o páginas gh é usado para páginas GitHub como abaixo:

Aqui está o URL ao vivo.

Prós e contras

Se você estiver implantando um projeto diferente do seu nome de usuário, ele será implantado dentro de um subdiretório em nosso domínio gratuito dentro do GitHub. Então, você precisa escrever código extra para suportar a lógica de estar dentro de um subdiretório.

Ele não oferece suporte à implantação contínua pronta para uso em nosso caso de uso, mas você pode configurá-lo. Depois de configurado, é rápido implantar as alterações.

Páginas do GitLab

Plano de fundo

Assim como o GitHub, o GitLab tem sua própria solução de hospedagem, chamada de GitLab Pages. Eu tenho que dar isso a eles, é mais fácil configurar uma implantação contínua nas páginas GitLab do que nas páginas GitHub.

Como usar

1. Cadastre-se ou faça login no GitLab
2. Adicione um repositório ao GitLab se ainda não o tiver feito. Você pode fork aquele que eu adicionei lá 
   Semelhante às páginas GitHub, você deve editar o Aplicativo.jsx para onde ligamos Roteador e adicione  nome base a ele para corresponder ao nome do repositório. Então esta é a mudança final:                                                               Temos que mudar o nome base porque as páginas do GitLab implantarão o site em um URL deste formato: https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. O site não funcionará corretamente sem o nome base definido para o react-roteador-dom.
3. Depois de editar e enviar o projeto para o GitLab, vá para Configurações > Páginas e você será recebido com um assistente de quatro etapas para implantar o repositório nas páginas do GitLab. 
4. A primeira etapa do assistente é inserir a imagem de construção. Usaremos o Node.js LTS.
5. A seguir, inseriremos o comando de pré-construção. O npmci será suficiente aqui.
6. Agora, para a etapa de construção. Precisamos passar –dist-dir público porque o GitLab Pages espera que o site seja construído no público diretório. Você não pode escapar com nenhum outro diretório, desculpe.
7. Confirme o recém-gerado .gitlab-ci.yml arquivo que informa ao GitLab como implantar seu site.
8. Agora, vá para a seção CI/CD -> Pipelines do repositório e observe o desempenho do pipeline recém-adicionado.
9. Depois de algum tempo, o trabalho do pipeline será concluído e o site será implantado nas páginas do GitLab.

Aqui está o resultado.

Prós e contras

A instalação dos pacotes é lenta e você precisa adicionar código extra para que funcionem, mas o assistente é super intuitivo com apenas quatro etapas para implantar.

Renderizar

Plano de fundo

Render é uma novidade que será lançada em 2019. Ele está tentando perturbar a forma como as pessoas implantam seus serviços (incluindo sites estáticos). Até agora, eles estão indo bem e crescendo em número.

Como usar

1. Cadastre-se ou faça login no Render.
2. Crie um novo site estático pressionando o botão “Novo” e selecionando “Site Estático”.
3. Escolha o repositório que você deseja implantar.
4. Mantenha o fio; construção de fio comando build na configuração de build. Infelizmente não funciona com npmci; npm executar compilação como outros serviços fazem. Altere o “diretório de publicação” para distância e clique em “Criar site estático”.
5. Depois de algum tempo, o Render irá implantar o código.

Aqui está o URL ao vivo da Render.

Prós e contras

É muito rápido, mas não funciona bem para o nosso projeto com os comandos `npm ci` e `npm run build`. Apenas `yarn` parece funcionar.

Surto

Plano de fundo

O surto já existe há algum tempo. Logo de cara, o serviço deles é simples de usar e leva apenas um ou dois comandos para implantar seu site estático. É gratuito, mas oferece um plano pago de 30$/mês. O estoicismo da ferramenta é o que a faz brilhar. Nenhuma configuração complexa é necessária, apenas instale o `surge` e execute-o com o `surge`.

Como usar

1. Para se preparar, corra npm executar compilação para gerar arquivos estáticos dentro distância diretório. O onda irá usá-los para implantação.
2. Corre npm install –global surge
3. Então, corra onda.

Algumas coisas a serem observadas:
Se for a primeira vez que você o executa, você terá que criar uma conta no Surge. Não se preocupe, é fácil. Basta inserir seu e-mail e senha desejada.

Então, você será solicitado a inserir “projeto”, que deve ser o caminho para o distância diretório. Você pode simplesmente anexar distância para o caminho fornecido se você executou surge dentro do repositório que está implantando.

Em seguida, insira o futuro URL do seu site. Experimente algo único porque o que onda oferecido não funcionou para mim.

Após a entrada URL, o onda irá implantar conteúdo de distância para o URL especificado. Aqui está o que eu consegui:

Prós e contras

É rápido e simples e não exige que você adote uma interface separada – mas não sugere um URL disponível para seu aplicativo.

Hora de implantar cada serviço de hospedagem

Nossos 3 principais serviços de hospedagem React gratuitos

1. Netlificar
2. Vercel
3. Surto

Principais conclusões

Depois de testar cada um desses serviços gratuitos de hospedagem de aplicativos React, achamos que o Netlify é o melhor do grupo. Ele fornece implantações rápidas com muitos recursos de que você pode precisar. Logo depois vem o Vercel, que possui muitos recursos e é bastante rápido após a implantação inicial. Depois, temos o Surge, que é uma ferramenta de implantação mínima que pode ser bastante barata se você decidir atualizar.

Automatize a construção do seu front-end e envie seu aplicativo 10 vezes mais rápido. Saber mais.