Grafanaのフロントエンド開発環境を構築する (on Windows10)

Objectives

Grafanaのフロントエンドを修正して遊ぶための開発環境を構築する。

Windowsだといろいろ面倒な手順があったりするのでやったことをまとめておく。基本的に下記ページの手順のままだけど若干変えているところあり。

• http://docs.grafana.org/project/building_from_source/

Environment

• OS: Windows10
• node: v8.11.3
• npm: 5.6.0
• yarn: 1.7.0
• git: 2.12.2.windows.2

Details

Install GO

• https://golang.org/dl/
  • go1.10.3.windows-amd64.msi

Install GCC

• http://tdm-gcc.tdragon.net/download
  • tdm64-gcc-5.1.0-2.exe

Install node-gyp

npm install -g node-gyp

Build the backend

set GOPATH=[absolute-path-of-work-dir]
go get github.com/grafana/grafana
cd src/github.com/grafana/grafana
go run build.go setup

Build the frontend

yarn install --pure-lockfile
npm run build

Run the backend

copy conf\defaults.ini conf\custom.ini
..\..\..\..\bin\grafana-server

• custom.ini
  • app_mode = development

Run the frontend

yarn start

Login to Grafana

http://localhost:3333

• Credential
  • username: admin
  • password: admin

Configure InfluxDB as a data source

Install and run InfluxDB

• https://portal.influxdata.com/downloads
  • influxdb-1.6.0_windows_amd64.zip
• influxd.exe

Install and run Chronograf

• https://portal.influxdata.com/downloads
  • chronograf-1.5.0.1_windows_amd64.zip
• chronograf.exe

Create a database via Chronograf UI

• http://localhost:8888
  • Connection String: http://localhost:8086
  • Username: admin
  • Password: admin
• Data Explorer
  • CREATE DATABASE [db-name]

Add a data source via InfluxDB UI

• http://localhost:3333
  • Type: InfluxDB
  • HTTP URL: http://localhost:8086
  • Auth: Basic Auth
  • Basic Auth Details
    • User: admin
    • Password: admin
  • InfluxDB Details
    • Database: [db-name]
    • User: admin
    • Password: admin