剥离graylog前后端，本地启动graylog的前端项目
1. 找到前端项目文件夹
前端项目的文件夹位于graylog2-server/graylog2-web-interface中
2. 安装项目依赖
npm install
3.启动项目
因项目中抽离了基础库，所以在运行start前需要先运行命令，抽取基础库： npm run build
启动项目：npm run start
4.配置后端的接口请求url
经分析查找，找出devServer.js中的apiUrl是连接后端的接口地址，将地址改成需要请求的后端接口地址，运行npm run start即完成了graylog的前端项目本地启动。
graylog前端项目生产环境配置(分析部分可跳过)
1.命令分析
我们查看package.json中的scripts,文件中跟build有关的命令是以下三个：
- build: 在本地运行时，我们知道这个命令主要用来生成抽离的基础库
- build:stats
- build:analyze
我们来逐条解析这些命令.
build:stats解析
cross-env
cross-env这是一款运行跨平台设置和使用环境变量的脚本。
--profile --json > ./webpack/stats-$(git rev-parse --abbrev-ref HEAD).json
以json格式生成打包的性能数据文件输出到stats.json文件中
webpack --profile
输出性能数据，可以看到每一步的耗时
git rev-parse --abbrev-ref HEAD
打印且只打印当前分支名
stats 的中文意思是统计
最终得出的结果:build:stats命令的意思是，设置环境变量disable_plugins=true,以json格式生成profile到stats{当前分支名}的json文件中,也就是说build:stats命令与生产打包无关,是做性能分析统计用的？
build:analyze
analyze中文的意思是分析，我们再结合build:stats一起看，这个命令的意思是分析打包文件？也跟打包生产包没有关系。
最后只有build有点像了，但前面我们也分析过，这是做基础库抽离的。暂时没有思路，所以我们找后端人员要了jar包，看是否有所收获。
2. jar包分析
将graylog的jar包解压缩，找到所有的前端文件存放于web-interface中，文件目录结构如下：
| 文件名 | 文件说明 |
|---|---|
| assets | 文件夹，存放所有静态资源文件 |
| config.js.template | window.appConfigs配置文件 |
| index.html.development.template | |
| index.html.template | 项目入口文件 |
我们查看一下config.js.template代码
window.appConfig = {
gl2ServerUrl: '${serverUri}',
gl2AppPathPrefix: '${appPathPrefix}',
rootTimeZone: '${rootTimeZone}',
};
和graylog2-web-interface下的config.js很像，我们可以推断出这个文件主要用于配置window.appConfig:
window.appConfig = {
gl2ServerUrl: '/api',
gl2AppPathPrefix: '',
rootTimeZone: 'UTC',
pluginUISettings: {
'org.graylog.plugins.customization.theme': {},
},
};
再来看一下index.html.development.template
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="robots" content="noindex, nofollow">
<meta charset="UTF-8">
<title>${title}</title>
<link rel="shortcut icon" href="${appPrefix}assets/favicon.png">
</head>
<body>
<h1>${title}</h1>
<p>The server is running in development mode and doesn't provide web interface assets.</p>
<p>Please use yarn to start the web development server via: <pre>cd /path/to/graylog2-server/graylog2-web-interface && yarn start</pre></p>
</body>
</html>
对比了一下已启动的测试环境页面，没找到这个页面是做什么用的，暂时先忽略。
看一下index.html.template
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="robots" content="noindex, nofollow">
<meta charset="UTF-8">
<title>${title}</title>
<link rel="shortcut icon" href="${appPrefix}assets/favicon.png">
${foreach cssFiles cssFile}
<link href="${appPrefix}assets/${cssfile}" rel="stylesheet">
${end}
</head>
<body>
<script src="${appPrefix}config.js"></script>
${foreach jsFiles jsFile}
<script src="${appPrefix}assets/${jsFile}"></script>
${end}
</body>
</html>
我们再对比一下已经启动的测试环境页面，分析得出，这就是我们想要的index.html入口文件，但是这个文件夹中的css和javascript文件，都是由后端指定目录的，这就有点麻烦了，这说明，现在graylog前端项目，不能独立由webapck生成想要的生产配置,需要分析现有的配置文件，改装成我们想要的配置。
3. 对比jar包的静态文件与build后的文件
查看web-interface文件夹，粗略的查看了下，其中assets目录下的文件与target/web/build/一致，target/web/build/ 文件夹下的文件有点像生产打包的文件，但是放到nginx下，打开的index.html文件报错，报错信息为config.js未找到。
一般webpack配置生产包，最重要的就是入口和出口，配置路径地址，这时查一下，无法找到config.js，是不是build的地址有问题。查看webpack.config.js,找出config.js文件的入口在template文件中，引入地址为/config.js，不是打包文件引入的， 将整个找包的文件包放入nginx的文件夹下后，将config.js复制到/（根目录）下，刷新文件，静态文件引入地址报错。再结合jar包，我们把所有的文件拷贝一份放在assets下，再刷新页面，就可以正确引入js和css文件了（这只是为了解决问题的速成法，不是终极法，有时间再改配置文件),这个时候就只有请求接口404了。
4. nginx api代理配置
需要在nginx的config文件中配置api代理文件，配置参考如下：
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
# root build/;
index index.html index.htm;
}
location /api {
proxy_pass [服务端地址];
}
}
配置完成，生产环境打的包，就能在nginx下正常运行了。
