## 剥离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 ${title}

${title}

The server is running in development mode and doesn't provide web interface assets.

Please use yarn to start the web development server via:

cd /path/to/graylog2-server/graylog2-web-interface && yarn start

对比了一下已启动的测试环境页面，没找到这个页面是做什么用的，暂时先忽略。看一下index.html.template ${title} ${foreach cssFiles cssFile} ${end} ${foreach jsFiles jsFile} ${end} 我们再对比一下已经启动的测试环境页面，分析得出，这就是我们想要的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下正常运行了。