Tutorial de como hacer un deployment de una SPA, tanto el backend como el frontend. Para hacer el deployment del back, vamos a utilizar Heroku para nuestra base de datos de ProgreSQL junto con nuestro servidor de Express, y para el front, vamos a utilizar Vercel.
- Empezaremos editando el package.json de nuestro back, en mi caso se encuentra dentro de la ruta /api. Cambiaremos las sigs lineas:
"scripts": {
"start": "node index.js",
"start:dev": "nodemon -L"
},Acá modificamos el script de start, que será el que Heroku ejecute al momento de levantar nuestra aplicación. Para eso, modificamos la línea de start, reemplazando el nodemom -L por node name.js, donde name.js es el nombre del archivo inicial de su proyecto, el archivo donde se pone en línea el servidor de express. La línea sig es totalmente opcional, pueden agregarla o no, sirve para cuando estemos trabajando de manera local, poder seguir ejecutando nuestro server con Nodemon, y así que los cambios se guarden y apliquen en el momento, sin necesidad de cortar el proceso de Node y volver a ejecutar. En este caso, como es un script diferente al start, para poder ejecutar será necesario el sig comando:
npm run start:dev
- Necesitamos cambiar el puerto que utilizamos en express, ya que heroku nos entregara un puerto automáticamente. Para eso, editaremos el archivo index.js que se encuentra dentro de nuestra carpeta /api, y cambiaremos las sig líneas:
server.listen(process.env.PORT || 3001, () => {
console.log(
`%s listening at ${process.env.PORT ? process.env.PORT : 3001}`
);Acá estamos configurando Express para que funcione, tanto cuando Heroku nos asigne un puerto, o estemos trabajando de manera local. En Heroku, el puerto se encuentra en una variable de entorno llamada PORT, si la variable existe, Express utiliza ese puerto, si no, utilizara el puerto que le configuramos nosotros, en este caso el 3001. También, podríamos en nuestro archivo .env definir nuestro puerto cuando trabajemos de manera local.
.env file
DB_NAME=nombrebasededatos
DB_USER=usuariodepostgres
DB_PASSWORD=passwordDePostgres
DB_HOST=localhost
API_KEY=api-key
- Ahora, necesitamos configurar nuestro server para que acepte peticiones de otras rutas que no sean http://locahost:3000. Para esto vamos a necesitar cors, si no lo tienen instalado, dentro de la carpeta /api, ejecutar:
npm install --save cors
Una vez instalado, será necesario requerirlo y utilizarlo en el server, para eso, en nuestra ruta /api/src editaremos nuestro archivo app.js de la sig manera:
const cors = require("cors");
server.use(cors());Como les comente antes, necesitamos modificar nuestro header, para que ahora soporte peticiones no solo de localhost:3000, para eso, dentro del mismo archivo de app.js, editaremos nuestro res.header de la sig manera:
server.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
...
}Acá modificamos el 2do parámetro del Access-Control-Allow-Origin, para poder soportar request de todos los orígenes.
- Ahora necesitamos configurar nuestra DB, para que cuando este en Heroku se conecte a la DB que creemos ahí, o, si estamos en un entorno local, utilice nuestra DB que tengamos en ProgreSQL. Para hacer eso, modificaremos el archivo db.js que se encuentra en la ruta /api/src. Cambiaremos las sig lineas:
const { DB_USER, DB_PASSWORD, DB_HOST, DB_NAME } = process.env;let sequelize =
process.env.NODE_ENV === "production"
? new Sequelize({
database: DB_NAME,
dialect: "postgres",
host: DB_HOST,
port: 5432,
username: DB_USER,
password: DB_PASSWORD,
pool: {
max: 3,
min: 1,
idle: 10000,
},
dialectOptions: {
ssl: {
require: true,
// Ref.: https://github.com/brianc/node-postgres/issues/2009
rejectUnauthorized: false,
},
keepAlive: true,
},
ssl: true,
})
: new Sequelize(
`postgres://${DB_USER}:${DB_PASSWORD}@${DB_HOST}/${DB_NAME}`,
{ logging: false, native: false }
);En este caso, estamos modificando la conexión de Sequelize, y las variables de entornos, nos estamos trayendo una nueva variable DB_NAME, por lo que será necesaria agregarla a nuestro archivo .env cuando trabajemos de manera local.
Con esto ya tendríamos nuestro backend configurado y listo, tanto para trabajar de manera local, como de manera remota. En este punto, recomiendo probar el servidor, ya sea con:
npm start
o
npm run start:dev
Si todo está correcto, hacer los pusheos y commits necesarios a Github.
- Para el front, empezaremos instalando dotenv, parados en nuestra ruta, en mi caso /client, haremos:
npm install --save dotenv
Una vez instalado, necesitaremos editar nuestro archivo index.js de nuestra ruta /client/src. Para hacerlo, agregaremos las sigs líneas:
import axios from "axios";
import dotenv from "dotenv";
dotenv.config();
axios.defaults.baseURL = process.env.REACT_APP_API || "http://localhost:3001";En este caso, estamos configurando una variable de entorno, que utilizaremos luego en Vercel, para indicarle nuestra URL de nuestra API en Heroku. Importante no colocar la barra al final del http://localhost:3001.
Al hacer este cambio, necesitamos modificar nuestras actions y nuestras utils, donde estemos utilizando axios para hacer peticiones a nuestro servidor. Para hacerlo haremos los sigs:
axios.get("http://localhost:3001/games");
axios.get(`http://localhost:3001/games?name=${name}`);Si nuestra action o utilis realizaba una petición de la sig manera, ahora deberemos hacerla así:
axios.get("/games");
axios.get(`/games?name=${name}`);Esto es porque ya hemos seteado la URL base en el index.js, y ya no necesitamos agregarla.
En este punto, ya tenemos nuestro front configurado, recomiendo probarlo ejecutando npm start y verificando que todas nuestras peticiones estén funcionando correctamente con nuestro servidor. Una vez hecho, realizar los pusheos y commits a Github.
- Primero necesitaremos una cuenta, si no tenemos una, crearla aquí
- Una vez logeado con nuestra cuenta, iremos a nuestro dashboard y le daremos a Create new app
- En App name ingresaremos el nombre que queramos darle a nuestra api y le damos al botón Create app, ejemplo:
- Ahora en Deployment method conectamos nuestro github y elegimos nuestro repositorio, no importa que contenga las carpetas de /api y /client, luego configuraremos eso. Le damos al boton connect, ejemplo:
- Ahora, en la pestaña resources, buscar en Add-ons Heroku Postgres y seleccionarla. Se abrira una ventana, seleccionar la opcion Hobby Dev - Free y darle al boton submit.
- Luego hacemos click en Heroku Postgres. En la ventana que se abrió, iremos a Settings y luego a View Credentials...
-
Esta pestaña la dejaremos abierta, ya que acá tenemos la información que cargaremos ahora más adelante, para poder indicarle a nuestro servidor los datos de conexión con nuestra db.
-
Ahora, en nuestro dashboard de Heroku, iremos a la pestaña Settings y a la sección de Config Vars, y haremos click en Reveal Config Vars.
- Una vez aca, iremos agregando una por una las sigs vars:
| Key | Value |
|---|---|
| DATABASE_URL | (valor que obtenemos de Heroku Postgres en URI) |
| DB_USER | (valor que obtenemos de Heroku Postgres en User) |
| DB_PASSWORD | (valor que obtenemos de Heroku Postgres en Password) |
| DB_HOST | (valor que obtenemos de Heroku Postgres en Host) |
| DB_NAME | (valor que obtenemos de Heroku Postgres en Database) |
| PROJECT_PATH | /api |
| API_KEY | Nuestra api_key de nuestro proyecto (api de rawg.io ej) |
- Una vez configurada todas las variables, dentro de Settings en el dashboard de Heroku, iremos a la sección Buildpacks
- Aca agregaremos 2 buildpacks, el primero es el sig:
- Lo colocaremos en el campo Enter Buildpack URL y le daremos a save changes. Luego volveremos a darle al botón de Añadir buildpack, y esta vez elegiremos nodejs y save changes. Necesario que se mantenga este orden, debería quedar de la sig forma:
- Una vez hecho todo, en nuestro dashbord de Heroku, vamos a la pestaña Deploy, y marcamos el Enable Automatic Deploys
-
Para finalizar, le damos al botón Deploy Branch y ya nuestra aplicación estaría en línea. Con el automatic deploy, habilitamos para que cada vez que nosotros hagamos un cambio, nuestro servidor se compile y se vuelve a realizar el deploy, sin necesidad de nosotros estar haciéndolo manualmente. El proceso puede demorar unos minutos.
-
En la pestaña Overview podemos ver las actividades que se están realizando, como el build, deploy, etc. Para acceder a nuestro link, solo bastará darle al botón de Open app, ese será nuestro enlace a nuestra api.
- Ya pueden realizar todas las pruebas de sus rutas, ejemplo:
https://my-app-name.herokuapp.com/ruta
Debería devolver los json, hacer los post, etcs que ustedes configuraron.
- Ingresamos a Vercel y nos logeas con Github.
- Luego hacemos click en New Project
- Luego, en Import Git Repository, le damos a la opción Add Github Org Or Account. Le damos los permisos y ya nos debería salir nuestro Github con todos los repositorios disponibles.
-
Le damos al botón de Import sobre el repositorio que tengamos nuestro front.
-
En Create a Team le damos a skip.
- En Configure Project Seteamos nuestro Project name, en Framework Preset elegimos Create React App, en Root Directory elegimos nuestra carpeta /client de nuestro repo.
- Y por ultimo, antes de darle a Deploy, nos falta configurar nuestra variable de entorno que habiamos definido antes, para poder utilizar ahora nuestra API de Heroku. Para eso, dentro de Configure Project le daremos a la seccion de Enviorement Variables y agregaremos nuestra variable asi:
| Name | Value |
|---|---|
| REACT_APP_API | url de nuestra api de heroku, sin la / final, importante!!! |
-
Acordarse de darle al botón de Add y de que la URL no contenga la última /, que sea del tipo https://my-app-name.herokuapp.com
-
Luego, le damos al boton Deploy.
Con esto ya tendríamos nuestro Front y Backend deployados. Igual que Heroku, en Vercel, cada vez que se haga un cambio en el repositorio, el Front se volverá a deployar automáticamente, sin necesidad de que nosotros estemos subiendo los cambios manualmente.
Una vez que haya terminado el Deploy, nos saldrá un botón para poder visitar nuestro proyecto. En el repositorio de Github, en la sección de About, se habrá agregado un enlace directo a nuestra app.