Sunday, June 14, 2015

Dockerizing StatsD, InfluxDB, and Grafana for a ReactJS Chat App

Today, we have a straightforward guide to using Docker Compose, Docker Machine, and Gulp to provision a development environment and analytics for a ReactJS chat application. By the end of this, you'll see just how easy it is to spin up dependencies, and hopefully be inspired to make your own compose files.

Prerequisites: Check out how we used to do this manually by reading this article.

Running the Application and Dependencies

Cloning the Necessary Files

# clone the repo
git clone git@github.com:roblayton/reactjs-chat

# enter the directory
cd reactjs-chat

# install npm dependencies
npm install

Running the Containers

Now we're going to prepare our dev machine and grab its IP address. We're going to need this in the next section.

# create a dev instance
docker-machine create --driver virtualbox dev

# connect to the new instance
docker-machine env dev

# fetch the ip address
docker-machine ip dev

# spin up the services
docker-compose up

# make sure all containers are running
docker ps

Running the Chat Application Locally

Now that we have our Docker processes running in the foreground, you're going to want to run two more foreground processes[1] from the reactjs-chat directory. But first, let's make sure our application's StatsDClient is pointing to the our Docker Machine. Go ahead and update the IP address in line 5 of reactjs-chat/server/StatsService.js

  # update this host ip to your new docker-machine ip
  var sdc = new StatsDClient({ host: '?.?.?.?' });

Now, we're ready to run our application. First, the express server:

# start the express server
node server/app.js

Then, gulp watch mode:

# start development mode
gulp watch

Accessing the Services

Chat Application

Navigate to http://localhost:3000 in your browser.

Now, go ahead and type messages into the text box in the bottom right corner. To open up multiple sessions, just open up more tabs navigate to the same location. You'll see a new guest user for every session you start. The more you interact with the application, the more data will end up in InfluxDB for Grafana to visualize.

InfluxDB

  1. Navigate to http://[docker-machine.ip]:8083 in your browser.
  2. Login with "root" as your username and password
  3. Click "Explore Data" for the "chatapp" database
  4. Enter SELECT * FROM /.*/ as your query

Grafana

  1. Navigate to http://[docker-machine.ip]:3000 in your browser.
  2. Login with "admin" as your username and password
  3. Add the InfluxDB as a data source
  4. Add a new dashboard and enter the appropriate query

References:


No comments:

Post a Comment