MusicTopus/README.md

# MusicTopus

![MusicTopus](public/img/logo-large.png)

MusicTopus est une application Web (que vous pouvez auto-héberger) et un site Web (sur lequel vous pouvez créer un compte) permettant de gérer votre liste des CDs et Vinyles et de l'utiliser facilement n'importe où.

Le code source est publié sous licence libre [GNU GPL-3.0-or-later](LICENSE) et est disponible sur [git.darkou.fr](https://git.darkou.fr/dbroqua/MusicTopus).

## Utilisation

Vous pouvez librement utiliser le service en vous inscrivant sur [https://www.musictopus.fr/](https://www.musictopus.fr/).

Une fois inscrit vous pourrez saisir vos CDs et Vinyles sur votre espace personnel le tout gratuitement, sans tracker (en dehors de statistiques web via [Matomo](https://fr.matomo.org/)) et sans utilisation de vos données personnelles !

## Auto hébergement

Vous pouvez, si vous le souhaitez héberger l'application sur votre propre serveur.

### Prérequis

Il existe 2 méthodes d'installation, soit via docker soit en mode standalone.

Peu importe la méthode il vous faudra un compte sur [https://formspree.io/](https://formspree.io/) afin d'avoir une page nous-contacter fonctionnelle ou configurer le SMTP tel que défini dans la section [variables d'environnements](#env-file).

Pour la méthode docker il ne vous faudra rien de plus que `docker` et `docker-compose`.

En mode standalone il vous faudra :

- NodeJS 16.x
- Yarn
- MongoDB

Quelque que soit la méthode, la première étape est de cloner le projet :

```bash
git clone https://git.darkou.fr/dbroqua/MusicTopus.git
```

### Installation

#### Docker

Une fois le projet cloné rendez-vous dans son dossier,

```bash
cd ./MusicTopus
```

puis créez le fichier `.env` qui contiendra les variables d'environnement nécessaire au bon fonctionnement du projet ([voir à la fin pour la liste des variables](#env-file)).

Une fois votre fichier d'environnement créé vous devez copier le bon fichier `docker-compose.yml.{dev,prod}` en `docker-compose.yml` en fonction de vos choix.

La version `.dev` redémarrera à chaque changement d'un fichier `.js` alors que la version `prod` ne redémarrera pas automatiquement si vous éditez un fichier.

Vous pouvez maintenant démarrer votre environnement Docker :

```bash
docker-compose up -d
```

C'est terminé !

Le site est accessible sur [http://localhost:PORT](http://localhost:PORT).

#### Standalone

Pour la version standalone je vous conseille de faire un script embarquant les variables d'environnement que vous souhaitez modifier ([voir à la fin pour la liste des variables](#env-file)) :

```bash
#! /bin/bash

export NODE_ENV=development
export DISCOGS_TOKEN=***

# Dev
yarn watch
# Prod
yarn run:all
```

Rendez le script exécutable :
```bash
chmod +x ./run.sh
```

Puis exécutéz le :
```bash
./run.sh
```

C'est terminé !

Le site est accessible sur [http://localhost:3001](http://localhost:3001).

:information_source: Information : Vous pouvez, et vous devriez, également regarder du côté de `systemd`, `pm2` ou encore `supervisor` pour que le service démarre en même temps que votre serveur.

### Aller plus loin

MusicTopus est maintenant accessible en http sur un port custom (3001 par défaut) de votre serveur.

Nous allons voir comment rendre accessible en https avec un certificat [Let's Encrypt](https://letsencrypt.org/fr/). Pour le reverse proxy nous utiliserons [NGINX](https://nginx.org/).

Pour la suite je pars du principe que vous êtes un minimum familier avec Nginx et Let's Encrypt et que ces 2 outils sont déjà présents sur votre serveur. De plus vous avez une entrée DNS qui pointe vers votre serveur.

#### Obtenir le certificat

```bash
certbot --nginx --agree-tos --redirect --hsts --staple-ocsp --email votre@email.tld -d musictopus.fr
```

#### Créer le vhost

Pour ma part j'aime bien créer un fichier dans `/etc/nginx/sites-available` qui comporte le nom du site, ici par exemple `musictopus.fr`.

En voici son contenu :

```
upstream musictopus-proxy {
  server 0.0.0.0:3001;
}

server {
  listen 80;
  listen [::]:80;
  server_name musictopus.fr;

  if ($host = musictopus.fr) {
    return 301 https://$host$request_uri;
  }
  root /dev/null;

  location /.well-known/acme-challenge/ { allow all; }
}


server {
  listen 443 ssl http2;

  server_name musictopus.fr;
  root /srv/MusicTopus/public;

  access_log /var/log/nginx/musictopus.fr-access.log;
  error_log /var/log/nginx/musictopus.fr-error.log;

  add_header X-Content-Type-Options nosniff;
  add_header X-XSS-Protection "1; mode=block";

  client_max_body_size 1m;

  location / {
    try_files $uri @proxy;
  }

  location @proxy {
    proxy_read_timeout 300;
    proxy_connect_timeout 300;
    proxy_redirect off;

    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-Ssl on;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Frame-Options SAMEORIGIN;

    proxy_pass http://musictopus-proxy;

    tcp_nodelay on;
  }

  error_page 500 501 502 503 504 /500.html;

  ssl_certificate /etc/letsencrypt/live/musictopus.fr/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/musictopus.fr/privkey.pem;

  add_header Strict-Transport-Security "max-age=31536000" always;

  include /etc/letsencrypt/options-ssl-nginx.conf;
  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

  ssl_trusted_certificate /etc/letsencrypt/live/musictopus.fr/chain.pem;
  ssl_stapling on;
  ssl_stapling_verify on;
}
```

Une fois le vhost activé (lien symbolique dans le dossier site-enable) et nginx rechargé votre site sera alors accessible en https.

### Jobs

Par défaut toute les images des albums sont affichées depuis Discogs. Cependant avec les temps les urls deviennent invalides. Pour éviter cela lors de l'ajout d'un album à votre collection un job est créé. Ce job a pour rôle de stocker les images sur un bucket s3.

Pour lancer les jobs il faut mettre en place une tâche cron qui sera éxécutée toute les heures (par exemple).

Exemple de crontab :
```crontab
0 * * * * curl 'http://localhost:3001/jobs' \
    -H 'JOBS_HEADER_KEY: JOBS_HEADER_VALUE' \
    -H 'Accept: application/json'
30 * * * * curl 'http://localhost:3001/jobs?state=ERROR' \
    -H 'JOBS_HEADER_KEY: JOBS_HEADER_VALUE' \
    -H 'Accept: application/json'
```

N'oubliez pas de remplacer `localhost:30001`, `JOBS_HEADER_KEY` et `JOBS_HEADER_VALUE` par les bonnes valeurs.

La première ligne permet de parcourir tous les nouveaux jobs alors que la seconde permet de relancer les jobs en erreurs (après 5 tentatives le job est marqué comme définitivement perdu).

### Fichier .env {#env-file}

Voici la liste des variables configurables :

```
NODE_ENV # Environnement dans lequel exécuter le projet (development ou production)
PORT # Port sur lequel éxécuter le serveur (3001 par défaut)
MONGODB_URI # Url du serveur mongo (mongodb://musictopus-db/musictopus par défaut)
SECRET # Hash utilisé pour pour sauvegardé les dessions (waemaeMe5ahc6ce1chaeKohKa6Io8Eik par défault)
DISCOGS_TOKEN # Token Discogs (vous devez créer un compte sur discogs afin d'en obtenir un gratuitement)
FORMSPREE_ID # Id du formulaire formspree pour la page "nous-contacter"
MATOMO_URL # Url vers l'instance matomo (exemple: https://analytics.darkou.fr/)
MATOMO_ID # Id du site sur votre instance matomo (exemple: 1)
SITE_NAME # Nom du site utilisé dans le titre des pages (MusicTopus par défaut)
AWS_ACCESS_KEY_ID # Clé d'accès AWS
AWS_SECRET_ACCESS_KEY # Clé secrète AWS
S3_ENDPOINT # Url de l'instance aws (s3.fr-par.scw.cloud par défaut)
S3_SIGNATURE # Version de la signature AWS (s3v4 par défaut)
S3_BASEFOLDER # Nom du sous dossier dans lequel seront mis les pochettes des albums (dev par défaut)
S3_BUCKET # Nom du bucket (musictopus par défaut, à changer impérativement si vous voulez que cela fonctionne)
JOBS_HEADER_KEY # Nom du header utilisé pour l'identification des tâches cron (musictopus par défaut)
JOBS_HEADER_VALUE # Valeur de la clé (ooYee9xok7eigo2shiePohyoGh1eepew par défaut)
REGISTRATION_OPEN # true/false en fonction de si vous souhaitez activer ou non l'inscription à votre instance (true par défaut)
MAIL_METHOD # permet de définir la façon dont les mails de la page contact sont envoyés (formspree ou smtp)
MAIL_HOST # Adresse du server mail (dams le cas ou MAIL_METHOD est défini sur smtp)
MAIL_PORT # Port d'écoute du serveur smtp (dams le cas ou MAIL_METHOD est défini sur smtp)
MAIL_USER # Adresse mail du compte permettant d'envoyer les mails (dams le cas ou MAIL_METHOD est défini sur smtp)
MAIL_PASSWORD # Mot de passe du compte email (dams le cas ou MAIL_METHOD est défini sur smtp)
MAIL_TO # Adresse mail du contact qui recevra les messages de la page "nous contacter" (dams le cas ou MAIL_METHOD est défini sur smtp)

```

## Contributeurs

- Damien Broqua (développeur principal du projet)
- Brunus (Logo et fournisseur d'idées :wink: )