24

DEPLOY A VERCEL 2021

  • Ahora ya no se llama now es vercel (vercel.com)
    1.- Instalar de forma global vercel
npm install -g vercel

1.1.- Necesitamos registrarnos en vercel.com.
1.2.- Debemos loguearnos desde nuestra consola, con:

vercel login

Escogen loguearse con EMAIL y enter
(Introducen su email)…y enter.

2.- DEPLOY EN /API
2.1.- Ingresamos a la carpeta API desde la terminal cd API.
2.2.- Cambiamos el nombre del archivo de: now.json a vercel.json.
2.3.- Cambiamos el contenido del este archivo por el siguiente:

{
  "version": 2,
  "name": "petgram-server-TU_NOMBRE",
  "alias": ["petgram-api-TU_NOMBRE"],
  "builds": [{ "src": "index.js", "use": "@vercel/node" }],
  "routes": [{
    "headers": {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
        "Access-Control-Allow-Headers": "X-Requested-With, Content-Type, Accept"
    },
    "src": "/.*", "dest": "index.js" }
  ]

2.4.- y luego ejecutamos en la terminal vercel para el deploy. Con la siguiente Configuración.

  • ? Set up and deploy “~/projects/curso-platzi-react-avanzado/api”? [Y/n] (Seleccionamos Y, y enter).
  • ? Which scope do you want to deploy to? escogemos nuestra única opcion.(debe aparecer el email con el que nos registramos, y enter).
  • ? Link to existing project? [y/N] n (Seleccionamos n, y enter).
  • ? What’s your project’s name? petgram-TU_NOMBRE (introducimos nuestro nombre de proyecto y enter).
  • ? In which directory is your code located? ./ (aqui solo enter).
    (Como salida en la términal deberia Aparecer el link de nuestro deploy)
    3.- Ahora para nuestro proyecto principal:
    3.1.- Salimos de api cd ...
    3.2.- Creamos el archivo vercel.json en la raiz del proyecto.
    3.3.- copiamos la siguiente informacion a vercel.json reemplazando los valores:
{
    "version": 2,
    "name": "petgram-TU_NOMBRE",
    "builds": [
        { "use": "@vercel/static-build", "src": "package.json"}
    ],
    "routes": [
        {
            "src": "(.*).js",
            "dest": "/$1.js"            
        },
        {
            "src": "(.*).json",
            "dest": "/$1.json"            
        },
        {
            "src": "/.*",
            "dest": "index.html"
        }
    ]
} 

3.4.- ejecutamos vercel en la términal y seguimos los pasos de igual forma como lo hicimos con /api.
Y ya!! 😄

Escribe tu comentario
+ 2
Ordenar por:
2
30795Puntos

Esto me ayudo muchísimo, gracias!

1
13538Puntos

Gracias bro 😃

1
2146Puntos

Muchisimas gracias! me ahorro toda la vuelta de frenar con este curso para tener que ir a hacer otros 2 o gastar horas viendo documentación para montar un back que no venía al caso.

1

Solo me funciono la primera parte, la segunda parte aparece haciendo ‘Building’ y nunca termina :’(

1
9425Puntos

muy buen aporte gracias!

1
16238Puntos

Gracias, a continuar el curso

1
16238Puntos
2 meses

Como observación. Me salió una advertencia de que ‘name’ estaba deprecated.

1
16238Puntos
2 meses

Marcada a deprecated, aun funcionaron los pasos.