Grafana漢化筆記
前言
本文主要記錄Grafana漢化思路及實施過程。
若發現文章中描述錯誤，歡迎在Github中指正。
Grafana中文版本，基于官方源碼進行漢化。漢化内容主要為前端UI界面文本，不涉及後端内容。
相關建議歡迎留言：
Github:
https://github.com/WangHL0927/grafana-chineseEmail: [email protected]
QQ群: 921235002
網站：
https://wanghualong.cn
前排警告
Grafana官方release版本均為前端build後的壓縮代碼，直接對壓縮後的檔案編輯漢化雖然能用，但是不利于版本更新維護，且工作量巨大。
建議按照标準的前端開發流程，直接漢化官方的前端源碼，重新釋出，同時可以使用Git跟随官方版本進行更新更新。
一、 開發環境
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
注意事項：
- 備份！備份！備份！
- 注意版本号一緻，不可混用
- 建議整個檔案夾替換，不要騷操作。