{"id":120,"date":"2023-06-11T22:47:06","date_gmt":"2023-06-12T03:47:06","guid":{"rendered":"https:\/\/georgethepenguin.dev\/?p=120"},"modified":"2023-06-12T00:23:37","modified_gmt":"2023-06-12T05:23:37","slug":"ngrok-una-solucion-para-presentar-en-internet-nuestras-aplicaciones-web","status":"publish","type":"post","link":"https:\/\/georgethepenguin.dev\/index.php\/2023\/06\/11\/ngrok-una-solucion-para-presentar-en-internet-nuestras-aplicaciones-web\/","title":{"rendered":"ngrok – Una soluci\u00f3n para presentar en internet nuestras aplicaciones web."},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

A veces necesitamos realizar una presentaci\u00f3n de alg\u00fan concepto o avances de nuestras aplicaciones web, y no contamos con una forma de desplegar nuestra aplicaci\u00f3n en cloud, o el despliegue a fallado, pero tenemos la aplicaci\u00f3n ejecut\u00e1ndose bien en nuestra m\u00e1quina local. Les ha pasado algo as\u00ed? \ud83e\udd14\ud83e\udd14\ud83e\udd14<\/p>\n\n\n\n

Como parte de las tareas de la Iniciativa “Devs Latam” de la comunidad Try-Catch<\/a><\/strong>, la presentaci\u00f3n de la aplicaci\u00f3n desarrollada es una de las activiades a realizar. Sin embargo, dado que estamos aprendiendo a realizar despliegues en plataformas gratuitas, estos procesos no est\u00e1n excentos de tener alg\u00fan tipo de error o incoveniente que puede llegar hasta el momento de la presentaci\u00f3n agendada.<\/p>\n\n\n\n

Como una alternativa, podemos crear un t\u00fanel que nos permita redireccionar el tr\u00e1fico de internet a una direcci\u00f3n URL hacia nuestra aplicaci\u00f3n desplegada localmente.<\/p>\n\n\n\n

Ngrok<\/strong><\/a> es una herramienta que permite a los desarrolladores exponer servidores locales a Internet. En t\u00e9rminos m\u00e1s simples, ngrok crea un t\u00fanel seguro desde el p\u00fablico Internet a una aplicaci\u00f3n o servicio que se est\u00e1 ejecutando en tu m\u00e1quina local. Esto puede ser muy \u00fatil durante el desarrollo de una aplicaci\u00f3n web, ya que te permite compartir tu trabajo en progreso con colegas, clientes o amigos, incluso si tu aplicaci\u00f3n no est\u00e1 alojada en un servidor web en la nube.<\/p>\n\n\n\n

La belleza de ngrok radica en su facilidad de uso. Puedes comenzar a exponer tu aplicaci\u00f3n local a Internet con un solo comando en la l\u00ednea de comandos. Adem\u00e1s, ngrok proporciona una interfaz web para inspeccionar las solicitudes de HTTP que se est\u00e1n haciendo a tu servicio, lo que es \u00fatil para depurar problemas.<\/p>\n\n\n\n

Cuando se trata de realizar presentaciones remotas de sitios web, ngrok puede ser un salvavidas. Digamos que est\u00e1s trabajando en un sitio web en tu m\u00e1quina local y necesitas presentar tu progreso a un cliente que est\u00e1 en otra ciudad. En lugar de desplegar tu sitio web a un servidor de producci\u00f3n, puedes usar ngrok para exponer temporalmente tu servidor local a Internet. Luego, simplemente compartes la URL proporcionada por ngrok con tu cliente, quien puede ver tu trabajo en su navegador como si estuviera alojado en un servidor en la nube. Esto puede ahorrar mucho tiempo y esfuerzo, especialmente en las primeras etapas de desarrollo cuando las cosas est\u00e1n cambiando r\u00e1pidamente.<\/p>\n\n\n\n

Ngrok cuenta con una cuenta gratuita, que nos permite exponer nuestra aplicaci\u00f3n web de forma temporal a trav\u00e9s del tunel, utilizando una URL din\u00e1mica. A continuaci\u00f3n los pasos para instalarlo y utilizarlo (Para sistemas operativos Windows, aunque los pasos para otros sistemas operativos son muy similares<\/em>).<\/p>\n\n\n\n

Instalaci\u00f3n y Configuraci\u00f3n<\/h2>\n\n\n\n

1. Ingresamos a la URL https:\/\/ngrok.com<\/a><\/strong> , damos clic en el bot\u00f3n “Sign up for free<\/strong>” para crear nuestra cuenta gratuita.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

2. Al finalizar la creaci\u00f3n y verificaci\u00f3n de nuestra cuenta gratuita, ingresamos al dashboard de ngrok. Nos aparece una opci\u00f3n para descargar el ejecutable de ngrok seg\u00fan nuestro sistema operativo. Damos clic en el bot\u00f3n de descarga. (En caso que querramos descargar el ejecutable para otro sistema operativo diferente al de la m\u00e1quina sugerida, en la parte derecha de la p\u00e1gina aparecen los enlaces para los dem\u00e1s sistemas operativos soportados<\/em>).<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

3. El archivo a descargar es un comprimido. Lo descomprimimos en un directorio al que tengamos acceso dentro de nuestra m\u00e1quina.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

4. Regresamos al dashboard y encontramos las instrucciones de configuraci\u00f3n. Debemos abrir una consola del sistema, ir al directorio en el cual colocamos el ejecutable. Ya ubicados all\u00ed ejecutamos la instrucci\u00f3n:<\/p>\n\n\n\n

ngrok config add-authtoken <token><\/code><\/strong><\/p>\n\n\n\n

El c\u00f3digo que nos aparece al final del comando en la p\u00e1gina corresponde al token de autenticaci\u00f3n brindado por ngrok para nuestro usuario. Al ejecutar el comando, nos aparece la ruta donde queda almacenada la informaci\u00f3n de configuraci\u00f3n en nuestra m\u00e1quina.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Hasta aqu\u00ed hemos instalado y configurado nuestro ejecutable de ngrok.<\/p>\n\n\n\n

Los siguientes pasos corresponden a las actividades a realizar cada vez que querramos generar un t\u00fanel temporal para presentar nuestras aplicaciones web.<\/p>\n\n\n\n

5. Ahora subimos de forma local la aplicaci\u00f3n web que deseemos presentar en internet. En este ejemplo, presentar\u00e9 una aplicaci\u00f3n web que localmente<\/strong> tengo disponible en el puerto 8080<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

6. Ya con nuestra aplicaci\u00f3n lista y desplegada localmente, nuevamente regresamos en la consola de comandos a la ruta donde se encuentra desplegado el ejecutable de ngrok e ingresamos el siguiente comando:<\/p>\n\n\n\n

ngrok http <puerto local de nuestra aplicaci\u00f3n><\/code><\/strong><\/p>\n\n\n\n

En el caso de este ejemplo ser\u00eda: ngrok http 8080<\/code><\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Nos aparece en la consola de comando los resultados de creaci\u00f3n del t\u00fanel y la direcci\u00f3n URL donde se encontrar\u00e1 disponible nuestra aplicaci\u00f3n en internet. Tambi\u00e9n en esa consola podremos monitorear cada una de las peticiones recibidas a trav\u00e9s de nuestro t\u00fanel.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

7. Ahora vamos a la URL de nuestro t\u00fanel y encontramos que nuestra aplicaci\u00f3n se encuentra disponible en internet<\/strong>. \ud83c\udf89\ud83c\udf89\ud83c\udf89<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Esa URL la podemos compartir con quienes necesitamos que vean nuestra aplicaci\u00f3n. As\u00ed ellos podr\u00e1n consultar e interactuar con nuestra aplicaci\u00f3n web desplegada localmente, a trav\u00e9s de internet.<\/p>\n\n\n\n

Para finalizar la publicaci\u00f3n de nuestra aplicaci\u00f3n web local en internet a trav\u00e9s del t\u00fanel, simplemente cerramos la consola del sistema o paramos el proceso con CTRL + C<\/code><\/strong>.<\/p>\n\n\n\n

Opciones para despliegue gratuito de aplicaciones en cloud.<\/h2>\n\n\n\n

Claro que el objetivo ser\u00e1 desplegar nuestras aplicaciones en cloud para que se encuentren siempre disponibles. Esta es la lista recomendada de mi parte con servicios gratuitos en cloud para el despliegue de aplicaciones web:<\/p>\n\n\n\n

Servicio Cloud<\/strong><\/td>URL<\/strong><\/td><\/tr>
Render<\/td>https:\/\/render.com\/<\/a><\/td><\/tr>
Railway<\/td>https:\/\/railway.app\/<\/a><\/td><\/tr>
Fly.io<\/td>https:\/\/fly.io\/<\/a><\/td><\/tr>
Cyclic<\/td>https:\/\/www.cyclic.sh\/<\/a><\/td><\/tr>
Back4app<\/td>https:\/\/www.back4app.com\/<\/a><\/td><\/tr>
Netifly<\/td>https:\/\/www.netlify.com\/<\/a><\/td><\/tr>
Vercel<\/td>https:\/\/vercel.com\/<\/a><\/td><\/tr>
Python Anywhere<\/td>https:\/\/www.pythonanywhere.com\/<\/a><\/td><\/tr><\/tbody><\/table>
Servicios cloud gratuitos para desplegar aplicaciones web.<\/em><\/figcaption><\/figure>\n\n\n\n

Mi recomendaci\u00f3n es que primero intenten desplegar en alguno de estos servicios cloud, y usen ngrok para presentar avances entre sus equipos y\/o lo usen para la presentaci\u00f3n final en caso que no logren tener un despliegue correcto al final. (Esas cosas suelen suceder, sobretodo cuando estamos aprendiendo<\/em>).<\/p>\n\n\n\n

Cualquier duda, inquietud o sugerencia respecto a este tema, est\u00e1n bienvenidos a consignarla en los comentarios de este post, o a contactarme a mis diferentes redes sociales<\/a>.<\/p>\n\n\n\n

Muchos \u00c9xitos a los miembros de la iniciativa “Devs Latam<\/strong>” en la presentaci\u00f3n de sus proyectos! \ud83d\udcaa\ud83d\udc27<\/p>\n","protected":false},"excerpt":{"rendered":"

Ngrok es una herramienta que permite a los desarrolladores exponer servidores locales a Internet. En t\u00e9rminos m\u00e1s simples, ngrok crea un t\u00fanel seguro desde el p\u00fablico Internet a una aplicaci\u00f3n o servicio que se est\u00e1 ejecutando en tu m\u00e1quina local. Esto puede ser muy \u00fatil durante el desarrollo de una aplicaci\u00f3n web, ya que te permite compartir tu trabajo en progreso con colegas, clientes o amigos, incluso si tu aplicaci\u00f3n no est\u00e1 alojada en un servidor web en la nube.<\/p>\n","protected":false},"author":1,"featured_media":121,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-120","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sin-categoria"],"_links":{"self":[{"href":"https:\/\/georgethepenguin.dev\/index.php\/wp-json\/wp\/v2\/posts\/120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/georgethepenguin.dev\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/georgethepenguin.dev\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/georgethepenguin.dev\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/georgethepenguin.dev\/index.php\/wp-json\/wp\/v2\/comments?post=120"}],"version-history":[{"count":3,"href":"https:\/\/georgethepenguin.dev\/index.php\/wp-json\/wp\/v2\/posts\/120\/revisions"}],"predecessor-version":[{"id":135,"href":"https:\/\/georgethepenguin.dev\/index.php\/wp-json\/wp\/v2\/posts\/120\/revisions\/135"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/georgethepenguin.dev\/index.php\/wp-json\/wp\/v2\/media\/121"}],"wp:attachment":[{"href":"https:\/\/georgethepenguin.dev\/index.php\/wp-json\/wp\/v2\/media?parent=120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/georgethepenguin.dev\/index.php\/wp-json\/wp\/v2\/categories?post=120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/georgethepenguin.dev\/index.php\/wp-json\/wp\/v2\/tags?post=120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}