Skip to content

Instantly share code, notes, and snippets.

@caprosset
Last active November 20, 2020 13:37
Show Gist options
  • Save caprosset/e3721b419564fa8cbf1e10803d67d657 to your computer and use it in GitHub Desktop.
Save caprosset/e3721b419564fa8cbf1e10803d67d657 to your computer and use it in GitHub Desktop.
Deployment con Heroku - M2

Proyecto 2 - DEPLOY CON HEROKU & MONGO ATLAS

1. GUARDAR Y SUBIR LOS ÚLTIMOS CAMBIOS A GITHUB

1.1. Hacer commit en la rama develop (o staging, es decir la rama con la que trabajan los dos)

$ git add .
$ git commit -m 'Mensaje de commit'
$ git push origin develop

1.2. Cambiarse a la rama master

$ git checkout master

1.3. Fusionar develop dentro de master y subirlo al repo Github

$ git merge develop
$ git push origin master

   

2. EN EL CÓDIGO, CAMBIAR LAS VARIABLES

2.1. Aségurese de tener el package 'dotenv' instalado
En package.json, tendría que aparecer como 'dependency'. Si no está, instalarlo con el siguiente comando:

$ npm i dotenv --save

añadir ".env" al .gitignore si no está ya presente (para evitar publicar nuestras keys privadas en Github)

 

2.2. En el archivo .env, crear las siguientes variables:

PORT=3000
MONGODB_URI=mongodb://localhost:27017/replace-with-your-db-name
SESSION_SECRET=replace-with-your-session-secret

además de las 3 variables de Cloudinary (CLOUDINARY_CLOUD_NAME, CLOUDINARY_API_KEY y CLOUDINARY_API_SECRET), y/o las keys de las APIs que esté usando.

 

2.3. En app.js (y en el archivo seed si existe)

  • requerir el módulo 'dotenv' arriba del archivo:
require('dotenv').config();
  • y reemplazar el nombre de la base de datos y el session secret con las variables de entorno correspondientes:
// MONGOOSE CONNECTION
mongoose.connect(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});
// SESSION MIDDLEWARE
app.use(
  session({
    secret: process.env.SESSION_SECRET,
    resave: true,
    saveUninitialized: false,
    store: new MongoStore({
      mongooseConnection: mongoose.connection,
      ttl: 60 * 60 * 24 * 7,
    }),
  })
);

   

3. REGISTRARSE EN MONGODB ATLAS Y CREAR UNA BASE DE DATOS EN EL CLOUD

Si no tiene cuenta en Mongo Atlas: 3.1. Signup: Registrarse en MongoDB Atlas  

3.2. Cree su primer cluster

  • Seleccionar "Create a cluster" (FREE option)
  • Seleccionar "AWS" como "cloud provider", Europe (Frankfurt) como región, "Cluster tier" (free) como solution, y darle a "Create cluster"  

3.3. Cree un usuario para la base de datos

  • Debería haber sido redirigido al control panel: seleccionar "Database Access" en el menu de la izquierda
  • Una vez en "Database Access", hacer clic en el botón "Add new user database"
  • Se abre una pop-up: en "Password authentication", añadir un username y darle a "Augogenerate Secure Password" => copiar y pegarlo en un lugar seguro (lo va a tener que reutilizar más tarde)
  • Debajo, en "Database User Privileges", seleccionar "Read and write to any database"
  • Hacer clic en el botón "Add new user"

 

3.4. Whitelist su IP address

  • En el control panel: seleccionar "Network Access" en el menu de la izquierda
  • Una vez en "Network Access", hacer clic en el bóton verde "Add IP Address"
  • En la pop-up, seleccionar "Allow Access From Anywhere" y hacer clic en "Confirm" (si ya lo tenía configurado de antés, la IP Address ya tendría que aparecer en la IP Whitelist)

 

3.5. Connectarse al cluster

  • Ir a "Clusters" en el menu de la izquierda: en la sandbox, hacer clic en "Connect" y en la pop-up que se abre, darle a "Connect your application"
  • Seleccionar DRIVER: "Node.js" y VERSION: "3.0 or later"
  • Copiar la "connection string" que aparece, la usaremos en la etapa 5.4

   

4. REGISTRARSE EN HEROKU Y CONFIGURAR SU CUENTA

4.1. Si no la tiene, crear una nueva cuenta Heroku
Tendrá que verificar su dirección de correo.

 

4.2. Bajarse e instalar Heroku
En su terminal, ejecute el comando que aparece aquí
correspondiente a su sistema operativo, o ejecutar el installer.
Existe otra forma de instalarlo con NPM aquí pero no está recomendado, así que primero intente la instalación con uno de los primeros métodos mencionados.

 

4.3 Verifique que todo funciona correctamente
En su terminal, ejecuta el siguiente comando:

$ heroku --version

Debería devolver la versión de Heroku que está instalada en su ordenador. Puede ahora ejecutar cualquier comando relacionado con heroku en su terminal (CLI) con la palabra clave 'heroku'.

 

4.4. Conecte su CLI con su cuenta Heroku
Ejecute el siguiente comando:

$ heroku login

Entre 'enter' y será redireccionado a una ventana del navegador donde se podrá loguar a su cuenta Heroku.

   

5. CREAR LA APP EN HEROKU

5.1. Ir al dashboard, y hacer clic en 'New app'

  • Entrar un nombre para la app (será usado en la url de app heroku, elija algo relacionado y significativo)
  • Elegir región: 'Europe'
  • Darle a "Create"

Entrará al application panel de su app: https://dashboard.heroku.com/apps/{NOMBRE-DE-SU-APP-AQUI}/deploy/heroku-git

 

5.2. Conectar nuestro repositorio local con Heroku
En la terminal, en la raíz del directorio de su proyecto, ejecuta el siguiente comando para añadir el remote de heroku (lo que permitirá subir los archivos al servidor de Heroku):

$ heroku git:remote -a nombreDeNuestraAppEnHeroku

Compruebe los remotes que han sido añadidos a su proyecto. Debería ver un nuevo remote 'heroku' además de 'origin' (el remote de Github):

$ git remote -v

 

5.3. Hacer deploy en Heroku

Primero, hacer commit de los últimos cambios en la rama develop, subirla a Github, fusionar la rama develop en master, y subirlos a Github:

$ git add .
$ git commit -m 'Update env variables'
$ git push origin develop
$ git checkout master
$ git merge develop
$ git push origin master

y luego subirlos a Heroku también, haciendo push al remote 'heroku':

$ git push heroku master

 

5.4. Añadir las variables de .env en el dashboard Heroku
El código de su app ya está subido a Heroku. Lo único que falta "pasarle" a Heroku es el contenido del archivo '.env' (no lo hemos subido gracias a que está presente en el archivo .gitignore).
Desde su dashboard Heroku, ir a > Settings > Reveal Config Vars > añadir las siguientes variables con sus valores correspondientes:

  • MONGODB_URI: copiar la "connection string" que ha copiado desde Mongo Atlas (al final de la etapa 3.5), reemplazando su contraseña donde pone <password> (la que copió en la etapa 3.3) y el nombre de la base de datos donde pone <dbname>

  • SESSION_SECRET

  • CLOUDINARY...

  • Cualquier otra API KEY que haga falta para su proyecto...

  • Abrir la app haciendo clic en el botón "Open app" (arriba a la derecha en dashboard Heroku) para ver la app en herok

   

COMANDOS ÚTILES

  • Si la app en Heroku tira algunos errores, ejecute el siguiente comando en la terminal:
$ heroku logs --tail
  • Para abrir la terminal en el contenedor de la app heroku (y ver los archivos que están subidos a Heroku):
$ heroku run bash

   

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment