Installer Peppermint avec Docker
Peppermint

Installer Peppermint avec Docker

Table des matières

Quelque soit votre raison, professionnelle ou privée, un système de tickets peut parfois s'avérer bien utile.

Dans le cadre du self-hosting, imaginons que vous mettiez en ligne des services que vous partagez avec la famille ou des amis. Si quelqu'un constate un problème, il peut tout simplement vous le signaler par ticket et vous de même en retour, une fois le problème réglé.


Peppermint, une solution de helpdesk entièrement open source qui espère améliorer l'expérience utilisateur des membres d'équipes qui utilisent actuellement des logiciels similaires et plus coûteux. Notre objectif est de créer un logiciel facile à utiliser tout en offrant tous les composants riches en fonctionnalités des solutions payantes.

⚡Caractéristiques

  • Création de tickets: création de tickets standard avec un éditeur Markdown, permet également d'envoyer des pièces jointes.
  • Un journal de l'historique des clients.
  • Carnet basé sur Markdown avec des listes de tâches.
  • Adaptatif : conçu pour des tailles d'écran variables, du mobile jusqu'au 4K.
  • Déployez rapidement Peppermint à l'aide de Docker et PM2.
  • Simple à utiliser : conçu pour être facile à utiliser avec un flux de travail logique.

L'installation

  1. Créez votre docker-compose.yml:
nano docker-compose.yml
  1. Collez ça dedans:
version: "3.1"
 
services:
  peppermint_postgres:
    container_name: peppermint_postgres
    image: postgres:latest
    restart: always
    ports:
      - 5432:5432
    volumes:
      - pgdata:/var/lib/postgresql/data
    environment:
      POSTGRES_USER: peppermint
      POSTGRES_PASSWORD: 1234
      POSTGRES_DB: peppermint
 
  peppermint:
    container_name: peppermint
    image: pepperlabs/peppermint:latest
    ports:
      - 3000:3000
      - 5003:5003
    restart: always
    depends_on:
      - peppermint_postgres
    healthcheck:
      test: ["CMD", "sh", "-c", "wget --spider $$BASE_URL"]
      interval: 30s
      timeout: 10s
      retries: 3
    environment:
      DB_USERNAME: "peppermint"
      DB_PASSWORD: "1234"
      DB_HOST: "peppermint_postgres"
      SECRET: 'peppermint4life'
      API_URL: "http://server-ip:5003" # Changez_moi
 
volumes:
 pgdata:

Vous prendrez soin d'éditer:

  • POSTGRES_PASSWORD: 1234 => changez 1234 par un mot de passe fort.
    DB_PASSWORD: "1234" => à la place de 1234, indiquez le mot de passe de POSTGRES_PASSWORD
  • API_URL: "http://server-ip:5003" => remplacez simplement server-ip par l'ip de votre serveur ou votre domaine complet.
  1. On installe l'application:
docker-compose up -d

ou avec docker-compose V2

docker compose up -d
  1. Rendez-vous sur l'ip:port, suivant l'IP de votre serveur local:
http://ip:3000

Compte administrateur

Vous pouvez maintenant vous connecter avec le compte par défaut:

  • Email address => admin@admin.com
  • Password => 1234

Petit détail, il faut cliquer sur le bouton Sign In, je veux dire par là que la touche Entrée n'a aucun effet. Une fois connecté, cliquez sur Dashboard:

Vous voici à présent sur l'interface générale:


Configurer son profil

Rendez-vous en haut à droite et cliquez sur Profile:

Modifiez le Nom, l'Email et la Langue, validez avec Enregistrer et recharger.

Vu que 1234 n'est pas forcément le mot de passe idéal, je vous invite à le changer en cliquant sur Réinitialiser le mot de passe, une fois que c'est terminé, cliquez sur Update Password:


Configurer le serveur mail

Rendez-vous dans la colonne de gauche et cliquez sur Paramètres Administrateur, ensuite sur Outbound Emails:

Comme toujours je prends l'exemple de Gmail car il est populaire, n'oubliez pas de créer votre mot de passe dédié aux applications tierces si non cela ne fonctionnera pas avec votre vrai mot de passe:

Configurer le SMTP pour envoyer un mail avec une application Docker
Tutoriel pour configurer le SMTP afin d’envoyer un mail à partir de vos applications self-hosted.

Une fois que vous avez votre mot de passe, remplissez le formulaire comme indiqué ci-dessous:

Cliquez sur Update Settings:

Et pour être certain, cliquez maintenant sur Test Settings, vous devriez avoir une confirmation en haut à droite de la page, comme ceci:


Traduction des Email Templates

Nouveauté qui vient d'être implémentée, la possibilité de traduite les Email Templates, option qui se trouve dans Paramètres Administrateur, Email Templates:

Je vous propose les traductions ici pour chaque catégorie, en tout cas ce qui concerne le corps du messages. Pour le pied de page, libre à vous d'éditer de façon à ce que ça corresponde à votre site:


Cela se présente comme ci-dessous, il suffira dans la colonne en dessous de Update Template de tout effacer et de coller la traduction, n'oubliez pas de cliquer sur Update Template à chaque fois que vous avez collé la traduction.

ticket_created

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html lang="en">

            <head>
              <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
            </head>
            <div id="" style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Ticket Created<div></div>
            </div>

            <body style="background-color:#ffffff;margin:0 auto;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif">
              <table align="center" role="presentation" cellSpacing="0" cellPadding="0" border="0" width="100%" style="max-width:600px;margin:0 auto">
                <tr style="width:100%">
                  <td>
                    <table style="margin-top:8px" align="center" border="0" cellPadding="0" cellSpacing="0" role="presentation" width="100%">
                    </table>
                    <h1 style="color:#1d1c1d;font-size:16px;font-weight:700;margin:10px 0;padding:0;line-height:42px">Ticket créé: {{id}}</h1>
                    <p style="font-size:20px;line-height:28px;margin:4px 0">
                    <p>Bonjour, <br>Votre ticket a maintenant été créé et enregistré.<p>
                    <p style="font-size:14px;margin:16px 0;color:#000">
                    Cordialement, 

                    <table align="center" border="0" cellPadding="0" cellSpacing="0" role="presentation" width="100%">
                      <tbody>
                        <tr>
                          <td>
                          <a target="_blank" style="color:#b7b7b7;text-decoration:underline" href="https://docs.peppermint.sh" rel="noopener noreferrer">Documentation</a>   |   <a target="_blank" style="color:#b7b7b7;text-decoration:underline" href="https://discord.gg/8XFkbgKmgv" rel="noopener noreferrer">Discord</a> </a>
                          <p style="font-size:12px;line-height:15px;margin:16px 0;color:#b7b7b7;text-align:left">This was an automated message sent by peppermint.sh -> An open source helpdesk solution</p>
                            <p style="font-size:12px;line-height:15px;margin:16px 0;color:#b7b7b7;text-align:left;margin-bottom:50px">©2022 Peppermint Ticket Management, a Peppermint Labs product.<br />All rights reserved.</p>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </table>
            </body>

          </html>

ticket_status_changed

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html lang="en">
          
            <head>
              <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
            </head>
            <div id="" style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Ticket Created<div></div>
            </div>
          
            <body style="background-color:#ffffff;margin:0 auto;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif">
              <table align="center" role="presentation" cellSpacing="0" cellPadding="0" border="0" width="100%" style="max-width:600px;margin:0 auto">
                <tr style="width:100%">
                  <td>
                    <table style="margin-top:8px" align="center" border="0" cellPadding="0" cellSpacing="0" role="presentation" width="100%">
                      <tbody>
                        <tr>
                          <td><img alt="Slack" src="https://raw.githubusercontent.com/Peppermint-Lab/peppermint/next/static/black-side-logo.svg" width="200" height="60" style="display:block;outline:none;border:none;text-decoration:none" /></td>
                        </tr>
                      </tbody>
                    </table>
                    <h1 style="color:#1d1c1d;font-size:16px;font-weight:700;margin:10px 0;padding:0;line-height:42px">Ticket: {{title}}</h1>
                    <p style="font-size:20px;line-height:28px;margin:4px 0">
                    <p>Votre ticket, a maintenant le statut {{status}}</p>
                    Cordialement, 
                    <br>
                    Votre gestionnaire de ticket.
                    </p>
                    
                    <table align="center" border="0" cellPadding="0" cellSpacing="0" role="presentation" width="100%">
                      <tbody>
                        <tr>
                          <td>
                          <a target="_blank" style="color:#b7b7b7;text-decoration:underline" href="https://docs.peppermint.sh" rel="noopener noreferrer">Documentation</a>   |   <a target="_blank" style="color:#b7b7b7;text-decoration:underline" href="https://discord.gg/8XFkbgKmgv" rel="noopener noreferrer">Discord</a> </a>
                          <p style="font-size:12px;line-height:15px;margin:16px 0;color:#b7b7b7;text-align:left">This was an automated message sent by peppermint.sh -> An open source helpdesk solution</p>
                            <p style="font-size:12px;line-height:15px;margin:16px 0;color:#b7b7b7;text-align:left;margin-bottom:50px">©2022 Peppermint Ticket Management, a Peppermint Labs product.<br />All rights reserved.</p>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </table>
            </body>
          
          </html>

ticket_assigned

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html lang="en">
            <head>
              <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
            </head>
            <div id="" style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Ticket Created<div></div>
            </div>
  
            <body style="background-color:#ffffff;margin:0 auto;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif">
              <table align="center" role="presentation" cellSpacing="0" cellPadding="0" border="0" width="100%" style="max-width:600px;margin:0 auto">
                <tr style="width:100%">
                  <td>
                    <table style="margin-top:8px" align="center" border="0" cellPadding="0" cellSpacing="0" role="presentation" width="100%">
                    </table>
                    <h1 style="color:#1d1c1d;font-size:16px;font-weight:700;margin:10px 0;padding:0;line-height:42px">Billet créé</h1>
                    <p style="font-size:20px;line-height:28px;margin:4px 0">
                    <p>Bonjour, <br>Un nouveau ticket vous a été attribué.</p>
                    <p style="font-size:14px;margin:16px 0;color:#000">
                    Cordialement, 
  
                    <table align="center" border="0" cellPadding="0" cellSpacing="0" role="presentation" width="100%">
                      <tbody>
                        <tr>
                          <td>
                            <a target="_blank" style="color:#b7b7b7;text-decoration:underline" href="https://docs.peppermint.sh" rel="noopener noreferrer">Documentation</a>   |   <a target="_blank" style="color:#b7b7b7;text-decoration:underline" href="https://discord.gg/8XFkbgKmgv" rel="noopener noreferrer">Discord</a> </a>
                            <p style="font-size:12px;line-height:15px;margin:16px 0;color:#b7b7b7;text-align:left">This was an automated message sent by peppermint.sh -> An open source helpdesk solution</p>
                            <p style="font-size:12px;line-height:15px;margin:16px 0;color:#b7b7b7;text-align:left;margin-bottom:50px">©2022 Peppermint Ticket Management, a Peppermint Labs product.<br />All rights reserved.</p>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </table>
            </body>
          </html>

ticket_comment

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html lang="en">

            <head>
              <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
            </head>
            <div id="" style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Ticket Created<div></div>
            </div>

            <body style="background-color:#ffffff;margin:0 auto;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif">
              <table align="center" role="presentation" cellSpacing="0" cellPadding="0" border="0" width="100%" style="max-width:600px;margin:0 auto">
                <tr style="width:100%">
                  <td>
                    <table style="margin-top:8px" align="center" border="0" cellPadding="0" cellSpacing="0" role="presentation" width="100%">
                    </table>
                    <h1 style="color:#1d1c1d;font-size:16px;font-weight:700;margin:10px 0;padding:0;line-height:42px">Mise à jour des tickets pour: {{title}}</h1>
                    <p style="font-size:20px;line-height:28px;margin:4px 0">
                    <p>{{comment}}</p>
                    <p style="font-size:14px;margin:16px 0;color:#000">
                    Cordialement, 

                    <table align="center" border="0" cellPadding="0" cellSpacing="0" role="presentation" width="100%">
                      <tbody>
                        <tr>
                          <td>
                          <a target="_blank" style="color:#b7b7b7;text-decoration:underline" href="https://docs.peppermint.sh" rel="noopener noreferrer">Documentation</a>   |   <a target="_blank" style="color:#b7b7b7;text-decoration:underline" href="https://discord.gg/8XFkbgKmgv" rel="noopener noreferrer">Discord</a> </a>
                          <p style="font-size:12px;line-height:15px;margin:16px 0;color:#b7b7b7;text-align:left">This was an automated message sent by peppermint.sh -> An open source helpdesk solution</p>
                            <p style="font-size:12px;line-height:15px;margin:16px 0;color:#b7b7b7;text-align:left;margin-bottom:50px">©2022 Peppermint Ticket Management, a Peppermint Labs product.<br />All rights reserved.</p>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </table>
            </body>
          </html>

Gestion des clients

Rendez-vous dans Paramètres Administrateur, Clients:

Soit vous avez le Guest Ticket Url, la personne n'a pas de compte mais pourra ouvrir un ticket en laissant son e-mail.

Le Portal Url, pour les personnes ayant un compte:

Et le Portail Register, pour s'enregistrer soi-même:


Configuration du proxy

Suivant vos habitudes, créer le fichier peppermint-client.conf:

peppermint-client.conf

Collez ça dedans:

server {
    listen 80;
    listen [::]:80;
    server_name peppermint.example.com;
    add_header Strict-Transport-Security "max-age=15552000; includeSubDomains" always;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_next_upstream error timeout invalid_header http_500 http_502 http_503;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
        proxy_redirect off;
        proxy_read_timeout 5m;
    }
    client_max_body_size 10M;
}

Redémarrez nginx:

systemctl restart nginx
Peppermint
Experience Peppermint’s revolutionary approach to customer support, ensuring swift resolutions. Discover your ultimate alternative to Zendesk.

zarev

->.<-
🐧 Passionné de self-hosting, je partage ce que je connais et me nourris des connaissances des bonnes âmes qui partagent avec moi. Soutenons l'utilisation des apps open source et leurs développeurs.