Cet article est le second de la série qui a pour but de créer une application web qui repose sur docker. Dans cet article nous allons voir comment configurer Parse-Server et MongoDb.

Vous pouvez consulter l’article précédent Créer une application web avec Docker, Parse et Next.js - Partie 1 : Introduction

Pour commencer nous allons cloner et renommer le repo Parse Server Exemple

git clone https://github.com/ParsePlatform/parse-server-example parse-server

Ensuite nous allons créer notre fichier docker-compose.yml

touch docker-compose.yml

Ajoutez le code suivant dans le fichier docker-compose.yml :

version: '2'
services:
  mongo:
    image: mongo:3
    container_name: 'mongo-db'
    volumes:
      - ./mongo/data:/db/data
    ports:
      - '27017:27017'
  api:
    build: ./parse-server
    container_name: 'parse-server'
    ports:
      - '1337:1337'
    environment:
      PORT: 1337
      DATABASE_URI: mongodb://mongo:27017
      APP_ID: 'web-app-docker'
      MASTER_KEY: 'master'
      PARSE_MOUNT: '/parse'
      SERVER_URL: 'http://localhost:1337/parse'
    volumes:
      - ./parse-server/cloud:/parse/cloud
      - ./parse-server/public:/parse/public
    depends_on:
      - mongo

Revenons un peu plus en détail sur cette configuration :

1. On déclare notre service MongoDB, on spécifie l’image que l’on souhaite utiliser et on définit le nom que prendra le container.

image: mongo:3
container_name: 'mongo-db'

2. Ensuite on crée un volume pour pouvoir partager les données du container sur notre machine host. Le repertoire sera créé à la racine du dossier docker-web-app.

volumes:
  - ./mongo/data:/db/data

3. Enfin on fait mapper le port du container.

ports:
  - '1337:1337'

Une fois le service MongoDB déclaré nous définissons ensuite le service Parse Server. Pour le service MongoDB on est partis directement de l’image de MongoDB située sur le Docker Hub. Pour Parse nous allons construire l’image à partir du Dockerfile.

1. On indique le chemin du Dockerfile à build et on nomme le container.

build: ./parse-server
container_name: 'parse-server'

2. On fait mapper le port du container et on définit les variables d’environnements

ports:
  - '1337:1337'
environment:
  PORT: 1337
DATABASE_URI: mongodb://mongo:27017
APP_ID: 'web-app-docker'
MASTER_KEY: 'master'
PARSE_MOUNT: '/parse'
SERVER_URL: 'http://localhost:1337/parse'

• PORT: Port de Parse (par défaut 1337)
• DATABASE_URI: URI de la base de données
• APP_ID: Identifiant de l’application
• MASTER_KEY: MasterKey de l’application
• PARSE_MOUNT: Route de base de l’api (par défaut /parse)
• SERVER_URL: URL de l’application Parse qui sera utiliser pour les appels à l’api depuis cloud code.
• On crée deux volumes qui nous permettront d’éditer les fonctions Cloud Code de Parse ainsi que le dossier public qui contient généralement des pages web. On lie le container mongo-db à nôtre container parse-server.

volumes:
  - ./parse-server/cloud:/parse/cloud
  - ./parse-server/public:/parse/public
depends_on:
  - mongo

Maintenant vous pouvez démarrer les services en exécutant la commande suivante:

docker-compose up

Normalement si vous vous rendez sur la page localhost:1337 vous devriez voir s’afficher le message suivant :

” I dream of being a website. Please star the parse-server repo on GitHub! ”

Selon l’environnement sur lequel vous êtes vous devrez peut être changer localhost par l’adresse ip de votre machine docker.

Enfin pour vérifier que les données sont bien enregistrées dans la base de données nous allons nous rendre sur la page de test de Parse (localhost:1337/test). Avant de suivre les instructions de la page vous devez modifier certaines informations situées dans docker-web-app/parse-server/public/assets/js/script.js

Remplacer myAppId par web-app-docker ou bien l’APP_ID que vous avez choisi dans le code suivant :

this.xhttp.setRequestHeader('X-Parse-Application-Id', 'myAppId');

Vous pourrez ensuite rafraichir la page de test et suivre les indications.

Nous en avons fini avec la configuration de Parse Server et MongoDb dans l’article suivant nous verrons comment ajouter Parse-Dashboard à cette configuration.

Vous pouvez retrouver le code source ici.