Skip to content

Instantly share code, notes, and snippets.

@caprosset

caprosset/README.md

Last active November 2, 2020 18:53
Show Gist options
  • Save caprosset/6baf1b4eff01ac7826ffcb7bb9520d62 to your computer and use it in GitHub Desktop.
Save caprosset/6baf1b4eff01ac7826ffcb7bb9520d62 to your computer and use it in GitHub Desktop.
Download ZIP
Deployment con Heroku y Firebase - M3
Raw
README.md

Proyecto 3 - DEPLOY

 

PARTE 1 - BACK-END: HEROKU Y MONGO ATLAS

 

1. GUARDAR Y SUBIR LOS ÚLTIMOS CAMBIOS A GITHUB

1.1. Hacer commit en la rama develop (o la rama con la que trabaja a diario)

$ 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 DEL BACK-END, CAMBIAR LAS VARIABLES

2.1. Asegúrese 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=4000
PUBLIC_DOMAIN=http://localhost:3000
MONGODB_URI=mongodb://localhost:27017/remplazar-con-el-nombre-de-tu-base-de-datos
SESSION_SECRET=remplazar-con-tu-session-secret

Si usa Cloudinary, también tendrá que añadir las 3 variables CLOUDINARY_CLOUD_NAME, CLOUDINARY_API_KEY y CLOUDINARY_API_SECRET, y/o las keys de las APIs que estén 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, el public domain (donde está la app React) y el session secret con las variables de entorno correspondientes:
// MONGOOSE CONNECTION
mongoose.connect(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});
app.use(
  cors({
    credentials: true,
    origin: [process.env.PUBLIC_DOMAIN],
  })
);
// SESSION MIDDLEWARE
app.use(
  session({
    secret: process.env.SESSION_SECRET,
    resave: true,
    saveUninitialized: true,
    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

 

Si ya tiene cuenta, pueden empezar directamente aquí:
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

  • Luego de 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 devolverle la versión de Heroku que está instalada en su ordenador. Ahora puede 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

Entrar 'enter' y será redireccionado a una ventana del navegador donde se podrá loguear 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, ejecute 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

Comprobar los remotes que han sido añadidos a su proyecto. Debería ver un nuevo remote 'heroku' además de 'origin' (que corresponde a 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 (ver etapa 1) Siguiendo en la rama master, subir ahora los cambios a Heroku, 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 ya que .env está incluido 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...

   

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

     

PARTE 2 - FRONT-END: FIREBASE

Cuando ya tenemos nuestro backend funcionando en Heroku, el próximo paso es subir a firebase nuestro frontend (React app).

 

1. EN EL CÓDIGO DEL FRONT-END, CAMBIAR LAS VARIABLES

En nuestra React app, creamos dos archivos de variables de entorno (.env.development y .env.production) con los siguientes valores:

// .env.development

REACT_APP_API_URI=http://localhost:4000

// .env.production

REACT_APP_API_URI=https://nombre-de-mi-proyecto.herokuapp.com

Luego reemplazamos todas las rutas de las llamadas axios al back-end por la variable de entorno REACT_APP_API_URI, de esta forma:

axios
  .post(process.env.REACT_APP_API_URI + "/projects", newProject)
  .then(() => {
    // hacer algo una vez el proyecto creado
  })
  .catch(error => console.log(error));

o de esta:

axios
.put(`${process.env.REACT_APP_API_URI}/projects/${this.props.theProject._id}`, updatedProject)
  .then(() => {
    // hacer algo una vez el proyecto modificado
  })
  .catch(error => console.log(error));

   

2. CONFIGURAR LA APP EN FIREBASE

2.1. Registrarse en Firebase
Si aún no ha usado Firebase, ir a la página de Firebase y crear un proyecto:

  • Seleccionar "Get started"
  • Si no está logueado a una cuenta Google, tendrá que loguearse
  • Seleccionar "Crear un proyecto"
  • Dar un nombre al proyecto
  • Aceptar términos y condiciones

 

2.2. Instalar firebase-tools:

Ejecutar el siguiente comando que instala firebase tools globalmente en su ordenador:

$ npm install -g firebase-tools

 

2.3. Conecte su CLI con su cuenta Firebase

Ejecutar el siguiente comando:

$ firebase login

Le aparecerá la siguiente pregunta para dar los permisos necesarios a Google:

i  Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.

? Allow Firebase to collect CLI usage and error reporting information? (Y/n)

Sea cual sea la respuesta que entre (Y o n), será redirigido directamente a una ventana del navegador donde se podrán loguear. Si no es redirigido, puede también usar la URL de conexión que aparece en la línea de comandos:

Visit this URL on this device to log in: ...

En el navegador, seleccionar la cuenta Google que usó previamente para crear el proyecto en Firebase.
Debería ver el siguiente mensaje de éxito:

Woohoo!
Firebase CLI Login Successful
You are logged in to the Firebase Command-Line interface. You can immediately close this window and continue using the CLI.

En la línea de comandos, verificar que se ha hecho login correctamente:

Waiting for authentication...
✔  Success! Logged in as ...

 

2.4. Inicialize su proyecto con Firebase

Ejecutar el siguiente comando en el directorio del proyecto front-end, que inicializa el proyecto con Firebase:

$ firebase init

Le aparecerá el siguiente mensaje, elija la opción "Hosting" (coloquese con la flecha en "Hosting", presione la barra de espacio y luego "enter"):

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯◯ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules

Luego este mensaje, seleccionar "Use an existing project". Desde ahí, podrá seleccionar su proyecto desde la lista de proyectos de su cuenta Firebase:

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Please select an option: (Use arrow keys)
❯ Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Don't set up a default project

Aún quedan algunos pasos por definir para terminar la configuración. Conteste build en esta pregunta (en vez de usar el directorio /public por defecto, queremos usar el directorio /build):

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? (public)

Finalmente, conteste N (NO) a la siguiente pregunta:

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

Debería ver el siguiente mensaje de éxito:

✔  Wrote build/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

 

2.7. Deploy de Firebase

Los siguientes comandos le permitirá crear el build y hacer el deploy:

$ npm run build
$ firebase deploy

Debería ver aparecer en la consola el enlace hacia el "Project Console", y el "Hosting URL" desde donde podrán acceder a la app.

Cuando ya tengamos la URL de la app de front-end que nos dará Firebase (la "Hosting URL"), vamos al back-end y lo agregamos de esta forma en app.js:

app.use(
  cors({
    credentials: true,
    origin: ["http://localhost:3000", "https://mi-proyecto.web.app"]
  })
);

Volver a hacer deploy del server en Heroku:

git add .
git commit -m "Add firebase domain to CORS"
git push origin master
git push heroku master

Cada vez que actualicemos nuestro front-end, ejecutamos desde la raíz del directorio:

$ npm run build

y luego:

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