grafana 是開源的圖表數據展示系統，可以配置很多的 dashboard， 還可以下載別人已經配置好的 dashboard。
這篇博客介紹下如何在 mac 下搭建 grafana 的二次開發環境。
一、安裝 grafana
首先，我們可以通過 brew 把 grafana 安裝到系統里，來看一看這個開源系統的功能。
如果你的 brew 是直接可用的，就在 terminal 中直接運行下面的命令，否則，需要先 brew update 一下。
brew install grafana
裝好以后，通過如下命令可以啟動 grafana
brew services start grafana
然后打開 localhost:3000， 看到下面的圖，就可以了。
初始賬號密碼是 admin/admin。
通過下面的命令可以關閉和重啟 grafana
brew services stop grafana
brew services restart grafana
二、搭建 grafana 的開發環境
grafana 依賴 node 和 go ，需要先安裝好 node 和 go。
1、安裝 node
我這里的 grafana 是 7.3， 需要 14 版本的 node
安裝 node 有兩種方式
如果之前沒有裝過，直接 brew install node 就可以了，這樣安裝的 node 默認是最新版本，如果需要指定版本，可以在 node 后 通過 @ 來指定安裝某個版本。
通過版本管理神器 n 來升級
npm i n -g // 安裝 node 版本管理神器
n -V // 安裝后查看 n 的版本
n latest // 使用或安裝最新的官方發布：
n stable // 使用或安裝穩定的正式版本：
n lts // 使用或安裝最新的LTS正式版本：
安裝好 node 后順便升級下 npm
npm i npm@latest -g
安裝 golang
依然通過 brew 安裝 go
brew install go // 安裝 golang
然后查看 go 的環境變量配置
go env
上面的命令默認得到如下信息
GO111MODULE=""
GOARCH=“amd64”
GOBIN=""
GOCACHE="/Users/XXXXX/Library/Caches/go-build"
GOENV="/Users/XXXXX/Library/Application Support/go/env"
GOEXE=""
GOFLAGS=""
GOHOSTARCH=“amd64”
GOHOSTOS=“darwin”
GOINSECURE=""
GOMODCACHE="/Users/XXXXX/go/pkg/mod"
GONOPROXY=""
GONOSUMDB=""
GOOS=“darwin”
GOPATH="/Users/XXXXX/go"
GOPRIVATE=""
GOPROXY=“https://goproxy.cn”
GOROOT="/usr/local/go"
GOSUMDB=“sum.golang.org”
GOTMPDIR=""
GOTOOLDIR="/usr/local/go/pkg/tool/darwin_amd64"
GCCGO=“gccgo”
AR=“ar”
CC=“clang”
CXX=“clang++”
CGO_ENABLED=“1”
GOMOD=""
CGO_CFLAGS="-g -O2"
CGO_CPPFLAGS=""
CGO_CXXFLAGS="-g -O2"
CGO_FFLAGS="-g -O2"
CGO_LDFLAGS="-g -O2"
PKG_CONFIG=“pkg-config”
GOGCCFLAGS="-fPIC -m64 -pthread -fno-caret-diagnostics -Qunused-arguments -fmessage-length=0 -fdebug-prefix-map=/var/folders/3m/xp_vx4jj3l33h8chqq5tq_dw0000gn/T/go-build120494854=/tmp/go-build -gno-record-gcc-switches -fno-common"
注意 GOPATH 地址，在 "/Users/XXXXX/go"下，其中 XXXXX 是我的用戶名。但是在XXXXX 下是沒有 go 這個文件夾，需要我們自己建立。
假如我們想寫一個 go 的hello world，就需要把這個程序放到 go 目錄下。
假如想要修改 GOPATH 也是可以的。用如下命令：
vim ~/.bash_profile
添加如下代碼：export GOPATH="XXXXXXXXXX"
然后快捷鍵 shift + zz 關閉文件
這時候，在 terminal 中輸入 echo $GOPATH，就可以看到剛剛設置的 GOPATH 了。
到這一步，go 就算安裝到我們的電腦里了。
下載 grafana 的源代碼
由於 grafana 是開源的，因此代碼托管在 github 上，地址：https://github.com/grafana/grafana。
我們進入到上面的 go 目錄下，然后依次新建文件夾： src/github.com/grafana
然后在grafana這個目錄下執行
git clone git@github.com:grafana/grafana.git
注意：這時候clone下來的項目里 public 目錄下是沒有 build 文件夾的
在 clone 下的文件夾中，執行yarn install來安裝依賴文件
接着執行yarn start 來進行 build。這一步就好像是我們使用 npm run build 來打包 vue 或者 react 項目一樣，運行完以后，會在public 文件夾下生成 build 文件夾
里面則是打包后的js文件和一些靜態資源
我們可以驗證下這個 public 是否是正常的。將public/app/core/components/Login/LoginForm.tsx里隨便改動下，我把 password 后面加了個 123
重新打開一個新的 terminal ，輸入 brew list grafana
這個命令會列出 brew 下的 grafana 的安裝目錄
/usr/local/Cellar/grafana/7.3.0/.bottle/etc/ (2 files)
/usr/local/Cellar/grafana/7.3.0/bin/grafana-cli
/usr/local/Cellar/grafana/7.3.0/bin/grafana-server
/usr/local/Cellar/grafana/7.3.0/homebrew.mxcl.grafana.plist
/usr/local/Cellar/grafana/7.3.0/share/grafana/ (2393 files)
我們找到 /usr/local/Cellar/grafana/7.3.0/share/grafana/conf目錄下的 default.ini 文件，在 vscode 里打開。
然后將 static_root_path 對應的 public 改為 我們在源碼里的 public 目錄
static_root_path = /Users/XXXXX/go/src/github.com/grafana/grafana/public
然后運行命令brew services restart grafana
再次打開並刷新 localhost:3000，能看到改動后的代碼效果，說明我們的打包是成功的。
此時，細心的伙伴可能發現了，我們修改了一點代碼，就要重新啟動 grafana 並刷新才能看到效果，這是非常麻煩的。
啟動源碼中的 grafana
運行 brew services stop grafana 關閉 grafana 服務。
我們已經使用 vscode 打開了我們下載的源碼，並且成功打包了。
這時候，拆分一個 vscode 里的終端，並運行 make run
這個命令是啟動 grafana 的proxy ，類似於vue 中的 npm run dev。就是啟動我們的源碼項目，讓其可以在瀏覽器中訪問。
這個命令會 downloading 一些東西，需要一些時間，請耐心等待。
如果看到如下的返回，則說明啟動成功。
將我們之前改動的代碼恢復，再次打開localhost:3000，就可以看到頁面已經正常了。
有些伙伴可能會遇到
Get “https://proxy.golang.org/github.com/%21stack%21exchange/wmi/@v/v0.0.0-20190523213315-cbe66965904d.mod”: dial tcp 34.64.4.17:443: i/o timeout
make: *** [build_yaml] Error 1
的報錯，這是因為 proxy.golang.org 在國內被牆了，此時將 go env 中的 GOPROXY 換成國內的代理即可解決
go env -w GOPROXY=https://goproxy.cn
make run
到這里，grafana 的二次開發環境就搭建好了。