Usando o ngrok
O ngrok é uma ferramenta fácil de usar que permite criar um túnel seguro na máquina local junto com um URL público que pode ser usado para testar o projeto local ou para compartilhar o trabalho para revisar com um cliente ou colega de equipe.É possível configurar HTTP ou HTTPS e, devido à popularidade desta ferramenta, se algo parar de funcionar, há vários artigos que descrevem diferentes maneiras de resolver o problema.Este artigo aborda algumas maneiras fáceis de instalar o ngrok e o que fazer se não conseguir que o aplicativo da web se comunique com o ngrok.
ngrok
Nossos amigos do ngrok escreveram um excelente artigo dedicado ao suporte de webhooks do Frame.io via ngrok.Confira aqui.
Instalar o ngrok
Você pode usar o ngrok de algumas maneiras diferentes
Instalar por meio do instalador do ngrok
- Acesse o site do ngrok e siga as instruções: https://ngrok.com/download
- Se quiser os recursos oferecidos ao conectar uma conta, siga estas instruções para obter uma conta e token.
Não é necessário obter uma conta ou adicionar o token, mas confira a página de download para ver se é algo que você quer ou precisa.
Observação:
Se usar esse método, o ngrok executa do local onde você o armazena, a menos que o torne disponível em todo o sistema.
Instalar com o Homebrew
Este é meu método favorito para instalar o ngrok.Se você tem o Homebrew instalado, tudo que precisa fazer é digitar homebrew cask install ngrok.O ngrok é instalado para você e pode ser usado de qualquer lugar!O melhor de tudo é que não é preciso digitar ./ngrok no terminal no início de cada comando, pode simplesmente digitar ngrok.Saiba mais sobre esta opção aqui.
Usar o ngrok
Depois de configurar o ngrok, escolha uma porta como 3000 e execute a partir de uma linha de comando do terminal com o comando ngrok http 3000.Não é preciso usar a porta 3000, mas esta é uma porta comumente usada para escolher na configuração.Se você configurar o ngrok para executar de uma pasta específica, você deve estar na pasta onde colocou o ngrok e usar o comando ./ngrok http 3000.
Inicie seu servidor para seu projeto escutar na mesma porta e você poderá acessar seu trabalho usando o endereço público fornecido pelo ngrok.
Solucionar problemas do ngrok com seu aplicativo da web – Barra final
Um problema que você pode enfrentar com o ngrok é não conseguir se conectar ao seu servidor quando configurar um URL do ngrok para uso com seu aplicativo da web.O que é frustrante sobre esse problema é que o ngrok não registrará que você enviou algo para ele.Você pode abrir o localhost:4040 para ver o que está acontecendo, e ele não mostrará nada.(localhost:4040 é fornecido pelo ngrok para que você possa monitorar qualquer solicitação recebida ao seu servidor.)O ngrok parece combinar endereços com /(.) em vez de (/.), então se você não incluir uma barra final no final do seu endereço e não vir nada nas ferramentas de monitoramento do ngrok, é porque o ngrok não está encontrando uma combinação para o endereço que você lista.
Aqui está um exemplo de adição de uma barra final: http://something.ngrok.io/ Você também pode escrever seus aplicativos de amostra para resolver um ponto de acesso que inclui uma barra.Apenas lembre-se de que para o aplicativo Frame.io alcançar seu servidor, se seu aplicativo de exemplo usar o ponto de acesso /actions, você precisa adicionar o ponto de acesso /actions no final do seu endereço ngrok.Por exemplo, se o endereço ngrok for http://something.ngrok.io, você precisaria fornecê-lo na configuração da Ação personalizada como http://something.ngrok.io/actions.Isso pode ser diferente para outros aplicativos da web, então experimente com o final do endereço ngrok se você não conseguir fazer as coisas funcionarem imediatamente.
Posso usar algo além do ngrok?Experimente o Glitch!
O Glitch é uma alternativa bem legal ao ngrok e é mais rápido de configurar.O Glitch permite criar uma conta e então criar seus próprios aplicativos usando os servidores deles com um URL publicamente acessível.Você pode colaborar com outras pessoas, tornar seu código público ou privado e escolher entre uma ampla variedade de linguagens e plataformas.Confira https://glitch.com/create para ver o que está disponível.Quando você configurar seu projeto no Glitch, para alguns aplicativos da web, o problema da barra final se aplica.No caso do Frame.io, quando você configura uma Ação personalizada em developer.frame.io, precisa incluir a barra final no final do URL fornecido pelo Glitch.Você não precisa adicionar mais nada, nem mesmo para o ponto de acesso /actions.
Há algo configurado que eu poderia experimentar agora?
Sim. Se você não quiser usar o ngrok ou criar seu próprio projeto no Glitch, configuramos um aplicativo de exemplo para você experimentar aqui: https://frameio-custom-action.glitch.me.Lembre-se de incluir uma barra final quando adicionar este endereço na área de Ações personalizadas de developer.frame.io.
Recursos
Esta seção lista os recursos listados ao longo do artigo:
- ngrok https://ngrok.com/
- Glitch https://glitch.com/
- Plataformas disponíveis no Glitch https://glitch.com/create
- Aplicativo de exemplo do Glitch para Ação personalizada em JavaScript https://frameio-custom-action.glitch.me
- Inscrição e configuração de desenvolvedor do Frame.io Site de desenvolvedor do Frame.io
- Aplicativo web Frame.io https://app.frame.io/