Construyendo un blog con Gastby y Strapi, parte 3 - Desplegando Strapi en Heroku
Este artÃculo es la parte 3 de la guÃa "Construyendo un blog con Gatsby y Strapi" en esta parte nos enfocaremos en desplegar Strapi sobre Heroku, si quieres mirar los artÃculos anteriores o siguientes:
- Construyendo un blog con Gastby y Strapi, parte 0
- Construyendo un blog con Gastby y Strapi, parte 1 - Configurando Strapi
- Construyendo un blog con Gastby y Strapi, parte 2 - Configurando Gatsby
- Construyendo un blog con Gastby y Strapi, parte 4 - Desplegando Gatsby en Netlify
- Construyendo un blog con Gastby y Strapi, parte 5 - Integrando Gatsby, Strapi y Cloudinary en producción
Instalando las herramientas de consola para Heroku
Para Ubuntu/Debian
wget -qO- https://cli-assets.heroku.com/install-ubuntu.sh | sh
Para MacOS
brew install heroku/brew/heroku
Necesitas tener homebrew en instalado
Para Windows
Tienen las versiones de 32 bits y 64 bits elige e instala la que sea compatible con tú sistema.
Iniciar sesión con Heroku
heroku login
Te pedirá que toques cualquiera tecla para abrir un navegador donde debes completar los datos de tu cuenta y ya haber iniciar sesión en tu cuenta de Heroku
Ahora de regreso al proyecto de Strapi
Iniciar git
git init git add . git commit -m "base de configuraciones para strapi"
Con estos comandos habrás iniciado git, agregado todos los cambios que hayas hecho en la configuración de Strapi.
Crear una aplicación en Heroku
heroku create
TambÃen puedes definir un nombre para tu aplicación
heroku create nombre-de-mi-app
Instalar base de datos
No temas, esto parece un proceso complejo pero con Heroku resulta bastante sencillo:
heroku addons:create heroku-postgresql:hobby-dev
Puede que nos pida indicarle el nombre exacto de la app a la cual queremos agregarle el complemento, para eso usamos el parametro --app=nombre-de-tu-app
heroku addons:create heroku-postgresql:hobby-dev --app=morning-sands-09427
Este comando instalará un plugin de Heroku en tu aplicación, luego para configurarlo debemos ejecutar:
heroku config
Te mostrará una URI de configuración similar a esta: DATABASE_URL: postgres://ebitxebvixeeqd:dc59b16dedb3a1eef84d4999sb4baf@ec2-50-37-231-192.compute-2.amazonaws.com: 5432/d516fp1u21ph7b
Esta URI incluye los datos de *postgres://NOMBRE_DE_USUARIO : CLAVE @ HOST : PUERTO : NOMBRE_DE_LA_BASEDEDATOS estos datos los usaremos para configurar el las variables de entorno de tu aplicación, de esta forma se podrá comunicar con tu base de datos
heroku config:set DATABASE_USERNAME=ebitxebvixeeqd heroku config:set DATABASE_PASSWORD=dc59b16dedb3a1eef84d4999a0be041bd419c474cd4a0973efc7c9339afb4baf heroku config:set DATABASE_HOST=ec2-50-37-231-192.compute-2.amazonaws.com heroku config:set DATABASE_PORT=5432 heroku config:set DATABASE_NAME=d516fp1u21ph7b
Ejecutamos cada uno de estos comandos cambiando la información por la que nos dió el comando heroku config
Ahora ya tendrÃamos las variables de entorno de nuestra base de datos configuradas en el entorno de la aplicación, nos falta decirle a Strapi, cuales son estas variables, para ello, en el archivo /config/environments/production/database.json colocamos lo siguiente:
1{ 2 "defaultConnection": "default", 3 "connections": { 4 "default": { 5 "connector": "strapi-hook-bookshelf", 6 "settings": { 7 "client": "postgres", 8 "host": "${process.env.DATABASE_HOST}", 9 "port": "${process.env.DATABASE_PORT}", 10 "database": "${process.env.DATABASE_NAME}", 11 "username": "${process.env.DATABASE_USERNAME}", 12 "password": "${process.env.DATABASE_PASSWORD}", 13 "ssl": true 14 }, 15 "options": {} 16 } 17 } 18} 19
Y por último instalamos el paquete de npm para que el orm se pueda conectar por postgres:
yarn add pg
En este punto ya tendremos toda la base de datos configurada y lista para conectarse con Strapi
Agregando últimos cambios
git add . git commit -m "actualizar configuracion de db"
De esta forma guardamos los cambios que hicimos a la configuración de la base de datos y estamos listos para el despliegue
Despliegue
git push heroku master
Este comando demorará un par de minutos, pero subirá todo tu proyecto a la aplicación de heroku y te mostrará una url similar a esto https://mighty-taiga-80884.herokuapp.com al acceder allà podrás ver toda tu aplicación de Strapi.
No tendrás los artÃculos allà porque la base de datos de desarrollo o local es diferente que la de producción.
Ahora con cada cambio que hagas por ejemplo agregar un Tipo de contenido nuevo, deberÃas de:
git add . git commit -m "mensaje que represente los cambios" git push heroku master
De esta forma se actualizará tu aplicación, algunas configuraciones de Strapi se pueden hacer solo en ambiente de desarrollo esto por seguridad, pero puedess ver más información sobre esto en la documentación al igual que puedes encontrar otras alternativas a Heroku por si quieres subir tu proyecto a Digital Ocean o AWS
En este punto también te recomiendo crear un repositorio en github para guardar tu proyecto de Strapi, de esa forma puedes subir tus cambios a Github y luego a Heroku para desplegarlos.
Acceder al sitio desplegado
heroku open
Nos debe abrir una nueva pestaña en nuestro navegador que apunta a URL de nuestra aplicación, como es una nueva base de datos, nos solicitará de nuevo llevar el formulario para crear un administrador, luego de crearlo debemos ir de nuevo a Roles y permisos para darle permisos publicos a los artÃculos find y findone guardamos y podemos probar en la URL que funcione, adicional a esto puedes agregar artÃculos de prueba con texto de relleno para probar mejor.
En mi caso la URL de la API es https://morning-sands-09427.herokuapp.com/articulos allà pueden ver que agregue los mismos artÃculos que tenÃa en la plataforma de desarrollo para mantener los mismos ejemplos, para lograr esto tuve que volver a agregarlos uno por uno.
Te recomiendo tener al menos 1 artÃculo antes de continuar, en dado caso el deploy en Netlify de Gatsby puede fallar.
Ahora tenemos desplegado Strapi en Heroku, nos falta desplegar Gatsby en Netlify para poder tener toda nuestra aplicación disponible.
Continua con: Construyendo un blog con Gastby y Strapi, parte 4 - Desplegando Gatsby en Netlify