`

Windows下部署Grafana的前端与后端开发环境的过程

 
阅读更多

Grafana地址:https://github.com/grafana/grafana

 

依赖项:

Go 1.10

NodeJS LTS

 

go是后端,NodeJS是前端的。

 

首先我们搭建后端环境:

1、安装GO,设置环境变量信息等。

2、后端编译要用到GCC,所以需要安装GCC

 

以上步骤可参考,写的非常详细。:https://studygolang.com/articles/11384?fr=sidebar

  

3、grafana在github上给的后端构建命令如下:

Building the backend

go get github.com/grafana/grafana
cd $GOPATH/src/github.com/grafana/grafana
go run build.go setup
go run build.go build

如果能用官方的命令是最好,方便快捷。

但是在国内并不一定访问的挺好,可能通过命令下载不下来。

所以本人是在浏览器中直接下载下来,然后自己组织构建目录的。反正就是别怕出错随便搞有错就修改。

例如:

golang.dep的目录结构:src\github.com\golang\dep

grafana主目录:src\github.com\grafana\grafana

 

然后进入grafana主目录:src\github.com\grafana\grafana

执行命令:go run build.go setup

setup执行成功后,就执行build命令:go run build.go build

这2条命令的成功执行结果大概如此:

 

PS E:\goworkspace\grafana\src\github.com\grafana\grafana> go run build.go setup
Version: 5.3.0-pre1, Linux Version: 5.3.0, Package Iteration: 1532831485pre1
go get -v github.com/golang/dep
go install -v ./pkg/cmd/grafana-server
github.com/grafana/grafana/pkg/api/pluginproxy
github.com/grafana/grafana/pkg/api
github.com/grafana/grafana/pkg/cmd/grafana-server
PS E:\goworkspace\grafana\src\github.com\grafana\grafana> go run build.go build
Version: 5.3.0-pre1, Linux Version: 5.3.0, Package Iteration: 1532831534pre1
rm -r ./bin/windows-amd64/grafana-server.exe
rm -r ./bin/windows-amd64/grafana-server.exe.md5
go version
go version go1.10.3 windows/amd64
Targeting windows/amd64
go build -ldflags -w -X main.version=5.3.0-pre1 -X main.commit=unknown-dev -X main.buildstamp=1532831534 -o ./bin/windows-amd64/grafana-server.exe ./pkg/cmd/grafana-server
rm -r ./bin/windows-amd64/grafana-cli.exe
rm -r ./bin/windows-amd64/grafana-cli.exe.md5
go version
go version go1.10.3 windows/amd64
Targeting windows/amd64
go build -ldflags -w -X main.version=5.3.0-pre1 -X main.commit=unknown-dev -X main.buildstamp=1532831539 -o ./bin/windows-amd64/grafana-cli.exe ./pkg/cmd/grafana-cli
PS E:\goworkspace\grafana\src\github.com\grafana\grafana>
 成功执行后,会在grafana主目录生成构建生成的4个文件:

src\github.com\grafana\grafana\bin\windows-amd64

需要将这几个文件复制到bin目录下,grafana-server.exe才能启动。

访问地址:http://localhost:3000/login

得到结果是:html/template: "index" is undefined,应该是前端还没有构建访问不通。

如果想验证后端是否正常编译成功,可以将这4个文件复制到用grafana提供的安装包安装后的bin目录中,覆盖原内容,然后启动,就会使用我们编译后的后台内容。

打开golang就可以愉快的开发GO了。

 

搭建前端编译环境:

 

1、安装NodeJS

查看安装的版本:

PS E:\goworkspace\grafana\src\github.com\grafana\grafana> node -v
v8.11.3
PS E:\goworkspace\grafana\src\github.com\grafana\grafana> npm -v
5.6.0
PS E:\goworkspace\grafana\src\github.com\grafana\grafana>

 

2、编译代码

官方提供的命令

npm install -g yarn
yarn install --pure-lockfile
npm run watch

网络环境好的话,非常方便,一路下来非常顺利。不好的话就自己看着办吧,主要麻烦就在依赖上,找百度吧。

进入grafana主目录:E:\goworkspace\grafana\src\github.com\grafana\grafana

执行:npm install -g yarn

PS E:\goworkspace\grafana\src\github.com\grafana\grafana> npm install -g yarn
C:\Users\Administrator\AppData\Roaming\npm\yarnpkg -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js
C:\Users\Administrator\AppData\Roaming\npm\yarn -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js
+ yarn@1.9.2
updated 1 package in 34.167s
PS E:\goworkspace\grafana\src\github.com\grafana\grafana>

然后执行:yarn install --pure-lockfile

网络便宜,访问github都不通,基本上就是有的通,有的不通,有时候通,有时候又不行,全看心情:

PS E:\goworkspace\grafana\src\github.com\grafana\grafana> yarn install --pure-lockfile
yarn install v1.9.2
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.4: The platform "win32" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
[-/4] ⠠ waiting...
[2/4] ⠐ node-sass
[-/4] ⠐ waiting...
error E:\goworkspace\grafana\src\github.com\grafana\grafana\node_modules\phantomjs-prebuilt: Command failed.
Exit code: 1
Command: node install.js
Arguments:
Directory: E:\goworkspace\grafana\src\github.com\grafana\grafana\node_modules\phantomjs-prebuilt
Output:
PhantomJS not found on PATH
Downloading https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-windows.zip
Saving to C:\Users\Administrator\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip
Receiving...

Error making request.
Error: connect ETIMEDOUT 52.216.17.104:443
    at Object._errnoException (util.js:992:11)
    at _exceptionWithHostPort (util.js:1014:20)
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1186:14)

 这个错,网上的各种方法都试了不行,包括使用了淘宝镜像,cnpm,最后还是会去请求这个下载路径。

在最后参考了这篇文章:https://www.cnblogs.com/linyihai/p/7143719.html

其实它请求的那个路径,我在浏览器也访问不了,下载不成,最后放到XL里面,几十K的下载了老半天,才下载下来,然后把它丢到他要保存的缓存目录里面:

C:\Users\Administrator\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip

 

再执行:yarn install --pure-lockfile

果然不报phantomjs的错误了,又出来个新的:

................
gyp verb could not find "msbuild.exe" in PATH - finding location in registry
gyp info spawn C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe
gyp info spawn args [ 'build/binding.sln',
gyp info spawn args   '/nologo',
gyp info spawn args   '/p:Configuration=Release;Platform=x64' ]
�ڴ˽��������һ������һ����Ŀ����Ҫ���ò������ɣ�����ӡ�/m�����ء�
������ʱ��Ϊ 2018/7/29 ������ 11:16:50��
�ڵ� 1 �ϵ���Ŀ��E:\goworkspace\grafana\src\github.com\grafana\grafana\node_modules\node-sass\build\binding.sln��(Ĭ��Ŀ��)��
ValidateSolutionConfiguration:
  �������ɽ���������á�Release|x64����
MSBUILD : error MSB3428: δ�ܼ��� Visual C++ �����VCBuild.exe����Ҫ��������⣬1) ��װ .NET Framework 2.0 SDK��2) ��װ Microsoft Visual Studio 2005���� 3)  ������������װ��������λ�ã��뽫��λ����ӵ�ϵͳ·���С� [E:\goworkspace\grafana\src\github.com\grafana\grafana\node_modules\node-sass\build\binding.sln]
�����������Ŀ��E:\goworkspace\grafana\src\github.com\grafana\grafana\node_modules\node-sass\build\binding.sln��(Ĭ��Ŀ��)�IJ��� - ʧ�ܡ�

����ʧ�ܡ�

��E:\goworkspace\grafana\src\github.com\grafana\grafana\node_modules\node-sass\build\binding.sln��(Ĭ��Ŀ��) (1) ->
(_src_\libsass Ŀ��) ->
  MSBUILD : error MSB3428: δ�ܼ��� Visual C++ �����VCBuild.exe����Ҫ��������⣬1) ��װ .NET Framework 2.0 SDK��2) ��װ Microsoft Visual Studio 2005���� 3) ������������װ��������λ�ã��뽫��λ����ӵ�ϵͳ·���С� [E:\goworkspace\grafana\src\github.com\grafana\grafana\node_modules\node-sass\build\binding.sln]

    0 ������
    1 ������

����ʱ�� 00:00:00.42
gyp ERR! build error
gyp ERR! stack Error: `C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onExit (E:\goworkspace\grafana\src\github.com\grafana\grafana\node_modules\node-gyp\lib\build.js:258:23)
gyp ERR! stack     at emitTwo (events.js:126:13)
gyp ERR! stack     at ChildProcess.emit (events.js:214:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:198:12)
gyp ERR! System Windows_NT 10.0.16299
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "E:\\goworkspace\\grafana\\src\\github.com\\grafana\\grafana\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd E:\goworkspace\grafana\src\github.com\grafana\grafana\node_modules\node-sass
gyp ERR! node -v v8.11.3
gyp ERR! node-gyp -v v3.6.2

这个问题百度老半天,试了好多种没有解决,自己去找吧。过程是很不爽的。

2018-07-29前端环境没有搞好。

 

 

 

 

分享到:
评论

相关推荐

    游轮中心平台_前端后端_java前后端交互.zip

    以上是针对“游轮中心平台_前端后端_java前后端交互.zip”项目中可能涉及的主要知识点,这些技术栈和实践方法共同构建了一个完整的、高效的游轮中心平台。在实际开发过程中,团队还需要根据具体需求和业务场景进行...

    frontendBackend:关于前端和后端开发的会议报告 UNC Systemic Week 2014

    这个会议可能涵盖了一系列与前端和后端开发相关的讲座、研讨会和工作坊,旨在促进技术交流和提升开发者们的技能。 首先,前端开发是构建用户交互的部分,主要关注网站或应用的视觉和交互性。在这个领域,JavaScript...

    式神猎手模版前后端_java后端开发框架.zip

    《式神猎手模版前后端:Java后端开发框架详解》 在现代软件开发中,前后端分离已经成为一种常见的架构模式,它使得前端和后端开发者能够专注于各自领域的技术,提高开发效率和代码质量。"式神猎手模版前后端"项目,...

    软件工程中的后端开发与性能优化.pptx

    与前端开发不同,后端开发更侧重于实现系统的功能性而非用户界面。 **后端开发技术栈** - **编程语言**: - Java:成熟稳定,广泛应用于企业级应用。 - Python:语法简洁,适合快速开发。 - Go:高性能并发处理...

    DFS微信小程序与移动双端后台服务程序(前端 后端)DFSbackend-master.zip

    10. 部署与运维:项目部署可能涉及Docker容器化技术,通过Dockerfile描述应用程序的运行环境,简化部署过程。同时,监控系统如Prometheus和Grafana可能用于性能监控和报警。 这个DFSbackend-master项目为开发者提供...

    web后端开发-实现Web端线上投票程序

    在Web后端开发中,构建一个线上投票程序是一项常见的任务,它涉及到用户交互、数据处理、安全性以及服务器响应等多个方面。下面将详细讲解这个过程中的关键知识点。 首先,我们需要一个前端界面来展示投票选项和...

    jdbranham-grafana-diagram-v1.6.1-0-gbcecc9d.zip

    《Grafana 插件开发与流程图解析》 Grafana 是一款强大的开源度量分析和可视化套件,常用于监控系统指标、日志和时间序列数据库。它以其直观的界面和丰富的自定义功能而受到广大用户的喜爱。在Grafana中,插件是...

    简易记账带后端_java前后端交互.zip

    总的来说,“简易记账带后端”项目涵盖了前端开发、后端开发、数据库设计、数据交互、安全性以及部署和测试等多个环节,是学习和实践全栈开发的一个典型实例。通过深入理解并掌握这些知识点,开发者可以更好地构建...

    grafana-button-panel-master_php_

    标题中的“grafana-button-panel-master_php_”表明这是一个与Grafana相关的项目,特别是关于Grafana的一个按钮面板,而且该面板的实现...对于部署和运维人员,了解如何将这个插件集成到现有的Grafana环境中是关键。

    端到端Grafana流数据源示例

    10. **部署和维护**:最后,了解如何将插件打包、发布到Grafana Marketplace以及后续的版本管理和更新也是开发过程的一部分。 通过研究`simple-streaming-datasource-master`这个压缩包中的源代码,你可以深入理解...

    webpack-working-environment:前端SPA和后端的工作环境

    综上所述,“webpack-working-environment”涵盖了前端SPA和后端的工作环境配置,包括Webpack的基本用法、SPA的开发流程、后端的开发环境搭建以及各自在生产环境中的优化策略。理解并掌握这些知识,对于提升Web开发...

    Grafana面板插件可以随时间显示多个对象的状态

    - **部署与集成**:在实际环境中,Status Map插件需要安装到Grafana服务器上,并配置相应的数据源和面板设置才能使用。 - **性能优化**:由于可能需要处理大量的实时状态数据,插件的性能优化是至关重要的,包括...

    毕设&课程作业_智能物业管理系统(property management),一个具有后端+前端+移动端的项目.zip

    2. 部署:Docker容器化部署,提高环境一致性,便于扩展与升级。 3. 监控:使用Prometheus、Grafana等工具实时监控系统状态,及时发现并解决问题。 总结,智能物业管理系统集成了现代软件开发的多种技术,旨在提升...

    Java后端知识图谱.zip

    Java后端开发是软件开发领域中的重要组成部分,它主要负责处理服务器端的逻辑,与数据库交互,以及提供API供前端调用。在这个“Java后端知识图谱.zip”压缩包中,包含的“athena-master”可能是一个项目源码库,以...

    看书阅读小程序带后端

    4. 小程序框架:如微信的小程序开发工具,提供了一套完整的小程序开发环境和调试工具。 二、前端设计与实现 在看书阅读小程序中,前端设计需要关注以下方面: 1. 用户界面(UI):设计简洁、直观的界面,使用户能...

    微信小程序开发-实时巴士带后端案例源码.zip

    3. **后端开发**: 后端部分可能使用了如Node.js、Python、Java等服务器语言,搭配Express、Django、Spring Boot等框架实现。它负责接收和处理微信小程序发起的请求,处理数据,与外部API通信,以及存储和管理用户...

    后端开发

    后端开发是构建互联网应用程序的关键组成部分,主要负责处理服务器端逻辑、数据库交互、以及与前端应用的通信。在本文中,我们将深入探讨后端开发及其与C++编程语言的关联。 1. **后端开发的基本概念** 后端开发是...

    基于H5开发的动漫App后端基于Pythonflask.zip

    在现代互联网应用开发中,H5(HTML5)已经成为构建富媒体、交互性强的Web应用的首选技术,而Python Flask框架则是后端开发中的轻量级明星。本项目将探讨如何结合两者,打造一个高效的动漫App后端。 一、H5技术基础 ...

    实时巴士带后端.rar

    后端开发中,常用的技术栈可能包括: 1. **服务器平台**:这可能是基于云计算的服务,如AWS、Azure或Google Cloud,也可能使用自建的服务器集群。 2. **编程语言**:如Java、Python、Node.js或Go,用于编写处理...

Global site tag (gtag.js) - Google Analytics