Como implantar automaticamente aplicativos front-end para Surge usando implantação contínua

Anteriormente, quando os desenvolvedores de software desenvolviam novos produtos, eles tinham que esperar semanas e em alguns casos meses para implantar novas versões de seus aplicativos em ambientes de produção. Hoje em dia, os desenvolvedores de software encontraram maneiras novas e mais convenientes de lançar os produtos que desenvolveram automaticamente, garantindo tempo de inatividade zero.

Nesta postagem, discutiremos como implantar automaticamente aplicativos de front-end no Surge usando ganchos Git e implantação contínua, garantindo tempo de inatividade zero.

O que é Surge?

Surge é uma solução de hospedagem de sites estáticos de código aberto. Surge é de uso gratuito e oferece recursos como SSL básico e a opção de personalizar nomes de domínio gratuitamente. Surge tem uma interface de linha de comando que permite aos desenvolvedores publicar aplicativos nativos da web com apenas alguns cliques:

 instalação npm-aumento global

O comando acima irá instalar o Surge globalmente em sua máquina. Você pode testar a instalação executando surge em seu terminal. Isso solicitará que você faça login em sua conta emergencial ou crie uma conta gratuita, se ainda não tiver uma.

Implantação automática para Surge usando ganchos Git

Embora seja possível publicar páginas da web no Surge usando a linha de comando, não é a melhor abordagem. Usar a linha de comando exigiria que o desenvolvedor republicasse manualmente a página da web sempre que uma alteração fosse feita no projeto. Com ganchos Git, podemos implantar automaticamente nosso aplicativo assim que um evento Git especificado for disparado. Para ver os ganchos do Git em ação, temos que criar um projeto React de amostra. Execute o seguinte comando:

 criar-reagir-app githook-demo

O comando acima criará um projeto React simples na pasta githook-demo. Por padrão, o create-react-app (CRA) inicializará um repositório Git. Git hooks são armazenados no diretório Hooks da pasta Git.

Um bom ponto para implantar nosso aplicativo no Surge será logo após um commit e antes de enviar o commit. Para fazer isso, precisaremos tornar o pre-push hook executável. Podemos configurar isso usando um pacote de terceiros chamado Husky:

 npm install husky--save-dev

Com o Husky instalado, abra o arquivo package.json e adicione os seguintes dados JSON:

"husky": { "ganchos": { "pre-push":"npm run build && surge--project./build--domain your-domain.surge.sh" }
}

Os dados JSON acima contêm um script de pré-envio. Este script construirá o projeto React e implantará o aplicativo empacotado na pasta de construção para o domínio especificado. Por padrão, o CRA adiciona a pasta de construção ao arquivo .gitgnore . É importante remover a pasta de construção do arquivo .gitignore antes de enviar o projeto ao Git.

Assim que o git push origin main for executado, o Husky executará o pre-push hook após as referências remotas terem sido atualizadas, mas antes de quaisquer objetos serem transferidos para ele. Visitando o domínio especificado, você deve ver o aplicativo githook-demo implantado ao vivo no Surge.

Implantação automática para Surge usando Travis CI

Na seção acima, exploramos como implantar nosso aplicativo React para Surge usando ganchos Git, nesta seção, aprenderemos como implantar um aplicativo Vue de amostra usando Travis CI.

Travis CI é uma ferramenta popular de integração contínua que pode ser usada para construir , teste e implante a base de código de um aplicativo automaticamente. Para ver isso em ação, precisamos criar um aplicativo de amostra do Vue executando o Vue Create Travis-demo .

Depois que esse projeto de amostra for gerado, crie um repositório GitHub remoto e envie todo o conteúdo para lá. Isso é importante porque o Travis CI atua apenas no código que foi enviado para um repositório Github.

A próxima etapa para estabelecer uma implantação contínua para nosso aplicativo é conectar o repositório GitHub ao Travis CI. Para fazer isso, vá para travisci.org e adicione o repositório GitHub ao Travis. Este artigo explica como adicione repositórios GitHub ao Travis.

Nossa configuração está funcionando perfeitamente, a próxima etapa é adicionar um arquivo de manifesto do Travis, neste arquivo incluiremos todas as informações que o Travis precisará para implantar nosso aplicativo Vue no Surge. Crie um arquivo chamado .travis.yml na raiz do diretório do projeto e adicione as seguintes linhas de código a ele:

 idioma: node_js
node_js: -"nó"
cache: diretórios: -node_modules
roteiro: -npm run build
implantar: provedor: surge projeto:./dist/ domínio: example-domain.surge.sh skip_cleanup: true sobre: ramo: principal

As linhas de código acima contêm as configurações necessárias que o Travis precisará para implantar nosso aplicativo Vue:

• O campo idioma especifica o idioma em que nosso código está escrito
• O campo cache.directories é usado para definir diretórios que devem ser armazenados em cache pelo Travis para compilações anteriores. O diretório do módulo Node será armazenado em cache
• O campo script contém scripts que o Travis executará durante a construção. Em nosso caso, queremos executar o script npm run build . Este script criará uma pasta dist que conterá uma versão minimizada e pronta para produção do aplicativo Vue de amostra
• O campo deploy.provider contém o valor da plataforma em que nosso aplicativo será implantado. Várias plataformas de hospedagem podem ser especificadas, em nosso caso, o valor será Surge, pois pretendemos implantar nosso aplicativo Vue para Surge
• deploy.project é o diretório em que nosso projeto está localizado. Se não for especificado, Travis define o valor do campo do projeto para o diretório raiz. Em nosso caso, o npm armazena a versão otimizada para produção de nosso aplicativo em uma pasta dist
• O campo deploy.domain como o nome indica contém o domínio no qual você gostaria que seu aplicativo fosse hospedado
• Sempre que uma compilação é concluída, o Travis limpa os arquivos não usados, alguns dos quais podem ser necessários para que o aplicativo funcione corretamente. O campo skip_cleanup diz ao Travis para pular o processo de limpeza
• O campo on.branch especifica qual branch do repositório deve ser implantado. Em nosso caso, o definimos como principal. Isso significa que apenas as alterações enviadas para o branch principal serão implantadas automaticamente. Isso permite que os desenvolvedores tenham um branch de teste para mudanças que não deveriam estar na versão de produção do aplicativo

Com a configuração do arquivo .travis.yml , estamos a um passo de implantar nosso aplicativo. O Travis CI precisa autenticar a conta de emergência durante a implantação. Somos obrigados a adicionar nossos detalhes de autenticação de pico como variáveis ​​de ambiente secretas para o Travis CI. Para configurar isso, vá até o terminal e execute o seguinte comando para recuperar seu token de autenticação Surge:

 Surge Token

Copie o código gerado retornado e vá para o projeto importado para o painel do Travis CI e adicione o token.

A variável de ambiente SURGE_LOGIN será o endereço de e-mail associado à sua conta Surge.

Neste ponto, tudo está configurado! Você pode ir em frente e enviar as alterações locais para o branch principal do repositório remoto. Isso acionará a construção do Travis CI que, por sua vez, implantará automaticamente o aplicativo Vue de amostra no domínio especificado no arquivo travis.yml acima.

Conclusão

Neste post, discutimos como implantar aplicativos front-end para Surge usando ganchos Git e Travis CI, uma ferramenta para integração e implantação contínuas. Surge é de uso gratuito e ideal para páginas estáticas simples, embora possa não ser a melhor opção para aplicativos mais avançados. Recomendo que você verifique a documentação oficial para saber mais sobre como obter mais do pico.

A postagem Como para implantar automaticamente aplicativos front-end no Surge usando implantação contínua apareceu primeiro no LogRocket Blog .

Source link