Grafana汉化笔记

前言

本文主要记录Grafana汉化思路及实施过程。

若发现文章中描述错误，欢迎在Github中指正。

Grafana中文版本，基于官方源码进行汉化。汉化内容主要为前端UI界面文本，不涉及后端内容。

一、开发环境

1.1 跟随grafana-chinese

此部分为跟随 grafana-chinese 项目流程开发，如有流程优化建议，欢迎在GitHub或邮箱留言。

此部分

1.1.1 获取git仓库

拉取仓库

git clone https://github.com/WangHL0927/grafana-chinese
cd grafana-chinese

1.2 从官方源码创建

此部分为 grafana-chinese项目构建流程，若选择跟随 grafana-chinese 项目可略过这部分内容。

不太建议直接Fork Grafana官方仓库，因为官方仓库分支很多且杂乱，建议只获取自己需要的分支即可。

以下内容介绍完整实施流程，也欢迎直接fork仓库

https://github.com/WangHL0927/grafana.git

参与源码贡献。

1.2.1 创建自己的grafana仓库

以Github为例，建立空仓库。

1.2.2 拉取仓库到本地

使用SourceTree（或其它Git工具）clone仓库到本地。

1.2.3 设置官方仓库源

命名为upstream

1.2.4 Fetch官方仓库内容

点击拉取（fetch），勾选获取并储存所有标签。使用标签可快速找到已发行分支。

1.2.5 检出官方分支

展开标签栏，向下找到已发行版本标签v6.4.2

点击v6.4.2标签可快速定位到标签位置

在标签提交位置检出新分支，命名为v6.4.2

同时创建汉化工作分支，命名为v6.4.2-cn

推送原版分支、汉化分支到私有Grafana仓库（orgin)

源码准备完成

1.2.6 安装环境依赖

使用webstorm打开本地项目，确认为cn分支。

打开终端，运行

yarn install

安装依赖包。

请使用yarn安装，不要使用npm！不要使用npm！不要使用npm！

使用npm install会出问题，亲测！

若未安装 yarn 可使用brew快速安装

brew install yarn

整个安装过程时间较长，需耐心等待。

安装中。。。

安装完成！

测试一下，运行

yarn start

编译无误！

1.3 安装环境依赖

1.3.1 运行安装脚本

需提前预装 Git、yarn。

cd grafana-chinese
./tool.sh

# 输入 5 回车运行

1.3.1 测试grafana仓库

使用webstorm打开当前目录的grafana文件夹，使用终端运行

yarn start

1.4 搭建Grafana-dev-server

回到grafana-chinese项目，运行工具脚本

tool.sh

cd grafana-chinese
./tool.sh
# 输入 5 回车运行

输出：

------------------------------
Tool Script
------------------------------
1. Start dev-server.
2. Stop/Remove dev-server.
3. Release to DockerHub with dev tag.
4. Release to DockerHub with latest tag.
5. Init dev project.
------------------------------
Input number and press ENTER:

输入1 回车，创建并启动dev-server容器（需安装Docker）
输入2 回车，停止并移除dev-server容器（需安装Docker）

启动无误后访问测试：

http://localhost:3000

二、汉化Grafana

2.1 前排预警

2.1.1 前端内存溢出

参考文章：

https://wanghualong.cn/archives/77/

仅对webpack-dev-server 进行扩充即可，建议6000+。

2.1.2 webpack-dev-server 热更新缓慢

测试机型：MBP-2018 i7 16G

启动命令：

yarn start:hot

start:ignoreTheme

基本处于瘫痪状态，每次commad+s 与重新编译无异，原因未知。

临时解决方案: 放弃热更新，使用

yarn start

启动，仅监控编译错误，手动刷新浏览器查看效果。

2.1.3 Server-error

原因未知。按照字面建议，使用脚本重新创建dev-server即可解决。

2.2 汉化界面

运行tool.sh 工具启动测试服务器。

------------------------------
Tool Script
------------------------------
1. Start dev-server.
2. Stop/Remove dev-server.
3. Release to DockerHub with dev tag.
4. Release to DockerHub with latest tag.
5. Init dev project.
------------------------------
Input number and press ENTER:
1
------------------------------
Start grafana-dev-server...
run container grafana-dev-server
5a8bc85c2e8e225da180b2ea4d2a08a73a5a8ebea821c9135fc02508a2fdcb63
grafana-dev-server runing at http://localhost:3000

webstorm打开grafana项目，终端运行

yarn start

以登陆页面为例，编辑

public/app/core/components/Login/LoginForm.tsx

文件，保存触发重新编译。

浏览器刷新查看效果（

http://localhost:3000/login

）

三、发行汉化

3.1 Build

停止dev-server及 yarn start
grafana项目下运行 yarn build

3.2 发布至Docker Hub

cd grafana-chinese
./tool.sh
# 输入 3 回车运行
# 需提前登陆docker账户

3.3 资源替换

直接将grafana/public文件夹替换线上生产版本。

Linux路径：

/usr/share/grafana/public

Windows路径：

/public

注意事项：

备份！备份！备份！
注意版本号一致，不可混用
建议整个文件夹替换，不要骚操作。

Grafana汉化笔记Grafana汉化笔记