这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战
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
2、安装 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 就算安装到我们的电脑里了。
3、下载 grafana 的源代码
由于 grafana 是开源的，因此代码托管在 github 上，地址：github.com/grafana/gra…
我们进入到上面的 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 并刷新才能看到效果，这是非常麻烦的。
4、启动源码中的 grafana
运行 brew services stop grafana 关闭 grafana 服务。
我们已经使用 vscode 打开了我们下载的源码，并且成功打包了。
这时候，拆分一个 vscode 里的终端，并运行 make run
这个命令是启动 grafana 的proxy ，类似于vue 中的 npm run dev。就是启动我们的源码项目，让其可以在浏览器中访问。
这个命令会 downloading 一些东西，需要一些时间，请耐心等待。
如果看到如下的返回，则说明启动成功。
将我们之前改动的代码恢复，再次打开localhost:3000，就可以看到页面已经正常了。
有些伙伴可能会遇到
Get "proxy.golang.org/github.com/…": 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 的二次开发环境就搭建好了。
