Déployer Strapi V4 sur Heroku

12 septembre 2022

Services et pre-requis

Il est nécessaire de créer un compte sur ces différents services

De la création du projet à sa mise en production

  1. Créer un projet Strapi V4 :
    Dans un terminal à l'emplacement du dossier de projet désiré
    yarn create strapi-app dossier-du-projet --quickstart
  2. Une fois l'installation terminée, le navigateur ouvre automatiquement un nouvel onglet.
    Il faut enregistrer le premier utilisateur qui sera le super admin
  3. Commit/push le projet sur GitHub
  4. Allez sur Heroku.com, se connecté,
    Cliquez sur "create a new app"
  5. Entrez le nom de votre application (Heroku vous dira si le nom est disponible).
  6. Choisissez GitHub, puis recherchez le dépôt que vous souhaitez déployer
  7. Activez les déploiements automatiques, puis déployer
  8. Si vous avez une erreur, pas de panique, on continue !
  9. Utiliser l'add-on Postgres de Heroku comme base de données
    Cliquez sur le menu "Ressources"
    puis dans la barre de recherche "Heroku Postgres"
  10. Submit Order Form
  11. menu "Settings"
  12. En cliquant sur "Reveal Config Vars" vous afficherez uniquement DATABASE_URL.
    Voici à quoi devrait ressembler la syntaxe complète
    postgres://{user}:{password}@{hostname}:{port}/{database-name}
  13. Ajouter les "key value" selon votre DATABASE_URL
    postgres://aaaaaaaa:bbbbbbbbbbbbbbbbbbbbbbbbbbbb@ccc-cc-ccc-cc:dddd/eeeeeee
    KEY VALUE
    DATABASE_USERNAME aaaaaaaa
    DATABASE_PASSWORD bbbbbbbbbbbbbbbbbbbbbbbbbbb
    DATABASE_HOST ccc-cc-ccc-cc
    DATABASE_PORT dddd
    DATABASE_AUTHENTICATION_DATABASE eeeeeee
    DATABASE_NAME eeeeeee
    et à la racine de votre projet, dans le fichier .env vous trouveriez quatre autres jeux de "key value" à ajouter à la suite
    KEY VALUE
    ADMIN_JWT_SECRET fffffffffff/fffff==
    API_TOKEN_SALT ggggg/ggggggggggg==
    APP_KEYS hhh/hhhh==,hhh/hhhh==,hhh/hhhh==,hhh/hhhh==,
    JWT_SECRET iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii==

  14. Ajoutez les variables d'environnement à Strapi
    Dans le dossier ./Config de votre projet, créez les sous-dossier env/production puis les fichiers database.js et server.js à l'intérieur, ajoutez-y les codes suivant

    database.js 
    const parse = require('pg-connection-string').parse;
const config = parse(process.env.DATABASE_URL);

module.exports = ({ env }) => ({
  connection: {
    client: 'postgres',
    connection: {
      host: config.host,
      port: config.port,
      database: config.database,
      user: config.user,
      password: config.password,
      ssl: {
        rejectUnauthorized: false
      },
    },
    debug: false,
  },
});


    server.js 
    module.exports = ({ env }) => ({
    url: env('MY_HEROKU_URL'),
});
  15. Dans le terminal, lancer les commandes
    yarn add pg-connection-string
    et
    yarn add pg
  16. Commit/push le code sur Github
  17.  
  18. Ajouter /admin pour accéder à Strapi
Retour en haut