Despliegue en Now

Clase 47 de 48 • Curso de Backend con Node.js 2019

Resumen

Now es una plataforma en constante actualización, si te llega a pasar un mensaje de error relacionado con Express, intenta esto:

En el archivo now.json cambia

"builds": [{ "src": "index.js", "use": "@now/node" }]

por

"builds": [{ "src": "index.js", "use": "@now/node-server" }]

Cristian Iñiguez

student•

Parece que ahora Now se llama Vercel, así que les dejo los pasos que seguí para hacer mi despliegue:

Instalar vercel globalmente: npm i -g vercel
Añadir las variables de entorno para conectarse a la bd de mongo a la lista de variables secretas de vercel:

vercel secrets add platzivideos-db-user ...
vercel secrets add platzivideos-db-password ...
vercel secrets add platzivideos-db-host ...
vercel secrets add platzivideos-db-name ...

En vez de los ... se deben colocar las variables de entorno respectivas (las mismas del archivo .env).
Talvez necesites crear una cuenta en Vercel ya que te pedirá un email cuando hagas esto.
Para ver las variables secretas guardadas (no se ven los valores): vercel secrets ls
Ahora añadimos un archivo vercel.json en la raíz del proyecto con el siguiente contenido:

{
  "name": "platzivideo",
  "version": 2,
  "builds": [
    {
      "src": "index.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/index.js"
    }
  ],
  "env": {
    "DB_USER": "@platzivideos-db-user",
    "DB_PASSWORD": "@platzivideos-db-password",
    "DB_HOST": "@platzivideos-db-host",
    "DB_NAME": "@platzivideos-db-name"
  }
}

Antes de desplegar podemos probar la app con vercel dev. Una vez ejecutado este comando se nos preguntarán algunas cosas que podemos responder por defecto (dando enter y enter). Al final la aplicación quedará desplegada como si estuviera en producción pero localmente.
Si todo anda bien, hacemos el despliegue: vercel. El proceso tardará unos segundo y cuando finalice se mostrará la URL del proyecto ya desplegado.

Para configurar una URL más amigable: vercel alias <url_actual> <alias>

Para hacer esto es necesario que tengas acceso a la URL alias dentro de tu cuenta. Aquí esta mi app desplegada https://movies-api-silk.vercel.app/api/movies

Carlos Angel Muñoz Castañeda

student•

Muchas gracias por la info. Me parece que además hay que agregar el archivo .env en la raíz del proyecto para ejecutar el servidor vercel en local

David Antonio Garcia Saaib

student•

Esto en que parte de la documentacion lo encuentro?

Luis Rodriguez

student•

hola! oigan... al llegar a este curso, revisen que su conexión a MongoDB esté abierta y que cualquier IP se pueda conectar. Por que si no la dejan abierta en esta ocasión, su deploy fallará y zeit/now les dará un error 502 cuando intenten entrar a su ruta de /api/movies o como en proyecto que tenía /api/hotels .

Me tardé 2 días en encontrar mi error... entonces, no cometan el mismo error que yo. :)

Sean felices.

Andres Roberto Coello Goyes

student•

aun que cualquier ip se puede conectar a mi db de mongo, en la aplicación no se puede conectar.

Luis Rodriguez

student•

uf! Cuál es el error que te está saliendo, hermano? Y is pones el link a ti GitHub, la comunidad te puede apoyar.

Jesús Miguel Quinto Teran

student•

Para no tener que agregar las variables una por una, pueden escribir las todas y unirlas usando &&

Ejemplo:

now secret add platzi-videos-db-user **su_usuario** &&
now secret add platzi-videos-db-password **su_password** &&
now secret add platzi-videos-db-host **su_host** &&
now secret add platzi-videos-db-name **nombre_db**

Marco Luna

student•

Listo, reto hecho. Como lo dice @Rodrigo, ahora Now se llama Vercel.

Primero deben instalar vercel a través de Node.js

npm i -g vercel

Basta solo cambiar los comandos del Shell. En lugar de usar 'now' usar 'vercel'

Mi URL: https://platzivideo-apialv.now.sh/

JOSE ALCIVAR GARCIA

student•

gracias

Nicolás Scandizzo

student•

https://video-flix1-git-master.nscando.vercel.app/api/movies

después de haber casi terminado la escuela de JS, recién hoy pude resolver este tema del despliegue en now.

Me volví loco, por varios motivos, primero que hyper y VS Code no me reconocían el comando de **vercel ** ni el comando now. me devolvian lo siguiente:

zsh: command not found: vercel
zsh: command not found: now

lo que a mi me funcionó es lo siguiente:

hacer el deploy directamente desde la pagina de vercel , por intermedio del repositorio de github, el repositorio tiene que estar actualizado y tiene que tener el archivo vercel.json.

el codigo de mi vercel.json quedo así.

{
  "name": "videoflix",
  "version": 2,
  "builds": [{ "src": "index.js", "use": "@vercel/node" }],
  "routes": [{ "src": "/(.*)", "dest": "/index.js" }]
}

no tienen que declarar las variables del archivo .env en el archivo vercel.json, esto lo hacen directamente cuando configuran todo desde la pag de vercel.

pueden guiarse también por el comentario de este compañero que me fue de ayuda también. https://platzi.com/comentario/1754849/

william jose

student•

venia a comentar exactamente lo mismo que bueno tu aporte muchas gracias

Nicolás Scandizzo

student•

hacer bien el deploy es fundamental para el curso que sigue, que es para integrar back y front :)

Usuario anónimo

user•

Hola a tod@s!

Los que tengan dudas por el cambio a vercel les recomiendo hagan lo siguiente.

creen el archivo vercel.json a la altura de su index.js

debe quedar asi:

{
  "name": "movies-daniel",
  "version": 2,
  "builds": [
    { "src": "index.js", "use": "@vercel/node" }
  ],
  "routes": [
    { "src": "/.*", "dest": "index.js"}
    
  ]
}

subanlo a git
entren a vercel y registrense
creen una nueva app, siguen los pasos y colocan el link de su repo de github
antes de darle deploy les saldran 2 opciones una de ella dice: AGREGAR VARIABLES DE ENTORNO , las agregan 5.1. van a su archivo .env, y colocal CLAVE y VALOR en vercel (deben agregar las 4 variables)
le dan deploy y deberia estar funcionando

(Me sirvio a mi, espero les sirva)

Paolo Joaquin Pinto Perez

student•

Gracias!! Me sirvio la solucion! https://github.com/paolojoaquinp/platzivideos-api https://platzivideos-paolo-api.vercel.app/api/movies

Arlex Felipe Llanos Betancourt

student•

Tuve que agregar en el package.json en la sección de scripts, al instrucción "build": "movies-api build", para que me permitiera desplegar, pero al final se pudo, genial lo que se aprende cada dia :D

https://platzivideo.devfko.now.sh/api/movies/

Carlos Enrique Ramírez Flores

student•

Gracias me funciono a la perfeccion!

Pedro Alexander Diaz Quiroga

student•

no me dió ningún error , pero al tratar de accederla tengo este error. no responde

Victor Garza

student•

Me pasa lo mismo y aún no encuentro solución

Rodrigo Esgueva Ordóñez

student•

Subida a Vercel (antiguo Now) https://movies-api.esgueva.now.sh/api/movies

Adjunto mi now.json

{
  &quot;version&quot;: 2,
  &quot;builds&quot;: [
    {
      &quot;src&quot;: &quot;index.js&quot;,
      &quot;use&quot;: &quot;@now/node&quot;
    }
  ],
  &quot;routes&quot;: [
    {
      &quot;src&quot;: &quot;/(.*)&quot;,
      &quot;dest&quot;: &quot;/index.js&quot;,
      &quot;methods&quot;: [&quot;POST&quot;, &quot;GET&quot;, &quot;PUT&quot;, &quot;DELETE&quot;],
      &quot;headers&quot;: {
        &quot;Access-Control-Allow-Origin&quot;: &quot;_&quot;,
        &quot;Access-Control-Allow-Headers&quot;: &quot;Origin, X-Requested-With, Content-Type, Accept&quot;,
        &quot;Access-Control-Allow-Credentials&quot;: &quot;true&quot;
      }
    }
  ],
  &quot;env&quot;: {
    &quot;DB_USER&quot;: &quot;@movies-db-user&quot;,
    &quot;DB_PASS&quot;: &quot;@movies-db-pass&quot;,
    &quot;DB_HOST&quot;: &quot;@movies-db-host&quot;,
    &quot;DB_NAME&quot;: &quot;@movies-db-name&quot;
  }
}

Luis Gerardo López Hernández

student•

por que le agregaste todo eso a routes?

Laura Camila Pregonero

student•

Now es un servicio serverless, eso quiere decir que no debemos preocuparnos por la insfrastructura, ya que NOW se encarga de escalar la aplicación por nosotros and de optimizar nuestro codigo.

Es una de las mas simples para hacer despliegue.

Andres Caro

student•

Parece que ahora Now se llama Vercel, así que les dejo los pasos que seguí para hacer mi despliegue:

Instalar vercel globalmente: npm i -g vercel En vez de los ... se deben colocar las variables de entorno respectivas (las mismas del archivo .env). Talvez necesites crear una cuenta en Vercel ya que te pedirá un email cuando hagas esto. Para ver las variables secretas guardadas (no se ven los valores): vercel secrets ls Ahora añadimos un archivo vercel.json en la raíz del proyecto con el siguiente contenido:

{ "name": "platzivideo", "version": 2, "builds": [ { "src": "index.js", "use": "@vercel/node" } ], "routes": [ { "src": "/(.*)", "dest": "/index.js" } ], "env": { "DB_USER": "@platzivideos-db-user", "DB_PASSWORD": "@platzivideos-db-password", "DB_HOST": "@platzivideos-db-host", "DB_NAME": "@platzivideos-db-name" } }

Juan David González Rodríguez

student•

Aca mi deploy :D , que genial !! :)

https://es-shoes-api.vercel.app/api/clients

Cristofher Jumbo Jimenez

student•

Esta muy bueno, una cosa se le puede hacer POST. No se si eso tiene que ver con seguridad o que, pero le echaria un ojo. Soy Tonn was here hhehe

Juan David González Rodríguez

student•

Lo voy a revisar gracias por tu aporte :D

Pedro Alexander Diaz Quiroga

student•

Auxilio..me funciona hasta vercel dev localmente. cuando lo hago en el servidor remoto con el comando vercel, me da un link. pero en ese link mi aplicación ya no funciona.. :( https://api-server.pdiazq.vercel.app

Ayuda por favor..que pasará

Luis Lira

student•

Hola, eso es porque hubo un error al momento de hacer deploy, puede que alguna configuración está mal o falte alguna variable de ambiente. ¿cuál es tu archivo de configuración? también, recuerda que al cambiar a Vercel algunas configuraciones cambiaron al momento de hacer el verce.json

Para eso te recomiendo leer la documentación :) https://vercel.com/docs/configuration