搭建elasticsearch环境(7.9.0版本)及安装elasticsearch_head可视化插件、node.js、Express、grunt

本文链接：https://blog.csdn.net/m0_46378271/article/details/125959186

一、安装elasticsearch

1.1 下载elasticsearch

下载及安装，以windows为示例
点击进入elasticsearch官网：https://www.elastic.co/cn/elasticsearch/
点击下载
在这里插入图片描述
这里选择下载7.9.0的版本，点击查看过去版本

点击DownLoad

点击如下的windows就开始下载压缩包了（296M大小）

等一下就下载好了

1.2 安装elasticsearch

解压压缩包
在这里插入图片描述

在解压后的文件夹\bin目录里,运行elasticsearch.bat文件。
在这里插入图片描述
运行elasticsearch，一定要jdk1.8以上。

在这里插入图片描述
看到如上图所示，表示启动成功，也可以登录http://localhost:9200/看是否登录成功。

elasticsearch 启动成功后，并没有图形化界面，我们在安装elasticsearch _head插件。

二、安装elasticsearch _head

elasticsearch _head 启动的先决条件

node.js
grunt

2.1安装node.js，进入网站：https://nodejs.org/en/download下载msi

https://nodejs.org/en/download,下载下来，按着指示一路下一步。

选择Windows
在这里插入图片描述
点击后开始下载，很快下完

进入所在文件夹

双击图标，接着next

accept接着next

到下一步，选择安装位置，我这里修改为自己的路径（注意路径最好不要有中文）

接着next

下一勾选上，next

最后安装
在这里插入图片描述

完成，点击finish

跳出如下界面就表示安装成功了

2.2 安装grunt【grunt安装前提：安装好了node】

Grunt是啥？借用网上的话

Grunt是一个带有内建的常用任务的基于任务的构建工具

这么说可能你会有点晕+_+

我们来通俗的说一下，平常我们的项目中，可能需要不停的做一些重复的任务，例如压缩（minification）、编译、单元测试、查错（linting）等，如果我们有一款工具可以自动帮我们做这些，是不是就很爽了？Grunt就是这么生出来的

Grunt生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用Grunt自动完成任何事，并且花费最少的代价。如果找不到你所需要的插件，那你也可以自己动手创造一个Grunt插件

【grunt安装前提】：安装好了node

npm install -g grunt-cli

如果时间慢的话，可以切换成淘宝镜像源
npm config set registry http://registry.npm.taobao.org
切换完成后继续执行。

2.21、安装grunt-CLI

这又是什么玩意？

“CLI”被翻译为“命令行”。要想使用grunt，首先必须将grunt-cli安装到全局环境中。

同时按下键盘win+R键，打开控制台窗口（注意：windows系统下请使用管理员权限打开）

在窗口中输入“cmd”,按“回车键（Enter）”或点击“确定”,出现运行黑色窗口

在这里插入图片描述

在窗口中输入以下命令

npm install -g grunt-cli

在这里插入图片描述
这时候要验证一下grunt-cli是否安装完成并生效，你只需要继续在命令行中输入“grunt”命令即可。如果生效，则会出现以下结果

在这里插入图片描述
注：安装grunt-cli并不等于安装了 Grunt！

Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。

这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。这样就能让多个版本的 Grunt 同时安装在同一台机器上。

2.22、用express来创建项目

因为grunt要安装在本地，而不是全局中去，所以我们先用express来创建个项目

先在node中安装express，命令行输入如下代码

npm install -g express

在这里插入图片描述
这个时候，我们来查看一下express是否安装成功

express -V

注：这个“V”是大写！

发现他报错了！
在这里插入图片描述
别急，这是因为express在4.0以后把命令工具单独分出来了，所以安装完express后，还得再安装express-generator

接下来，我们来安装express-generator，命令行输入如下命令

npm install -g express-generator

在这里插入图片描述
再输入express -V，安装成功。

OK，总算是装好了

2.2.4、用express来创建一个项目

那么接下来，我们用express来创建一个项目

我们先切换到我们的项目所在的目录下，然后建立一个新的项目，在这里，我是建在了F盘的Project文件夹下，项目名字叫renrenlab。

在cmd窗口中，输入如下命令

cd /d D:\Program Files\03.FindWork\projects\000.installdemo\Express

在这里插入图片描述

express -e renrenlab

在这里插入图片描述

我们看到了，他需要我们装一些依赖包，OK，我们按照系统提示走

cd renrenlab && npm install

在这里插入图片描述

好了，项目创建完毕，我们来启动一下模版项目

node app.js

在这里插入图片描述

这里说明一下，我们看到，按照之前的写法“node app.js”启动项目，已经毫无反应了，这是因为在express4.0版本已经废弃了这种写法，我们可以按照下面的写法来启动

npm start
或者
node bin/www

在这里插入图片描述

此时，大功告成，我们在浏览器中输入“localhost:3000”回车

在这里插入图片描述

命令行变化

在这里插入图片描述

这时候还不算完美，因为如果我们修改代码的话，刷新并没有改变，就得我们不停的重启，但是如果我们安装一个工具之后，它就可以自动重启了

注：退出监听的方法，两次ctrl+c

在这里插入图片描述

接着命令行输入如下安装

npm install -g supervisor

在这里插入图片描述

这个时候，我们再修改的话，浏览器只要刷新就能看到我们修改后的样式了。输入如下启动：

supervisor bin/www

在这里插入图片描述
浏览器输入localhost:3000/

在这里插入图片描述
命令行发生变化

之后我们，两次ctrl+c退出监听

在这里插入图片描述

言归正传，我们来安装grunt

2.24、正式开始安装grunt【前面准备工作已做完】

在我们的项目路径（还是上次的cd到renrenlab的路径下），Express是我们自己建立的项目文件夹，renrenlab是上面某些操作自动生成的。
在这里插入图片描述

输入

npm install grunt --save-dev

在这里插入图片描述

不一会就装好了

注：“—save-dev”的意思是，在当前目录安装grunt的同时，顺便把grunt保存为这个目录的开发依赖项。

我们打开项目目录下的package.json，可以看到，“devDependencies”多了一行“grunt”及其版本

在这里插入图片描述

下面，我们需要在项目目录下创建一个Gruntfile.js文件，文件内容如下

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json')
    });

    // 默认被执行的任务列表。
    grunt.registerTask('default', []);

};

先新建文本文档，然后改名称和后缀名就好了

在这里插入图片描述

保存之后，我们先来用grunt安装第一个插件uglify，这个插件的作用是压缩js文件

npm install grunt-contrib-uglify --save-dev

在这里插入图片描述

接下来，我们要在Gruntfile做一些配置，以便我们添加的插件可以为我们所用

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
		uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'src/<%= pkg.name %>.js',
                dest: 'build/<%= pkg.name %>.min.js'
            }
        }
    });

	// 加载包含uglify任务的插件
	grunt.loadNpmTasks('grunt-contrib-uglify');

	// 默认被执行的任务列表（注意先后顺序）
	grunt.registerTask('default', ['uglify']);
    // 默认被执行的任务列表。
    // grunt.registerTask('default', []);

};

其中第一部分的代码

uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'src/<%= pkg.name %>.js',
                dest: 'build/<%= pkg.name %>.min.js'
            }
        }

“options”中规定允许生成的压缩文件带banner，即在生成的压缩文件第一行加一句话说明。注意，其中使用到了pkg获取package.json的内容。

“build”中配置了源文件和目标文件。即规定了要压缩谁？压缩之后会生成谁？注意，我们这里将目标文件的文件名通过pkg的name和version来命名。

这样的好处是：例如，对文件版本的管理，你只需要在package.json中修改即可，grunt会自动根据最新的版本号生成相应版本的文件，你不用手动去修改文件的文件名。

第二部分的代码

grunt.loadNpmTasks('grunt-contrib-uglify');

用处是在 grunt.initConfig 方法之后，要让grunt去加载这一个插件，插件只有加载了，才能使用

第三部分代码

grunt.registerTask('default', ['uglify']);

用处是当你在终端输入“grunt”时执行的操作是什么。上面缩写的就是要去给我执行uglify插件，将我的js文件进行压缩，如果输入grunt时不想让其操作，那就在中括号里去掉即可，注意里面包含的各种插件是有顺序的。

接下来我们再安装一个插件jshint，这个插件的作用是检测js语法错误

安装过程不在赘述，跟上面一样

npm install grunt-contrib-jshint --save-dev

我们需要在Gruntfile做如下配置

在这里插入图片描述

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
	uglify: {
            	options: {
                	banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
           	 },
            	build: {
                	src: 'src/<%= pkg.name %>.js',
                	dest: 'build/<%= pkg.name %>.min.js'
            	}
        	},
	// jshint插件的配置信息
	jshint: {
		build: ['Gruntfile.js', 'src/*.js'],
		options: {
			jshintrc: '.jshintrc'
		}
	}
    });

	// 加载包含uglify任务的插件
	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.loadNpmTasks('grunt-contrib-jshint');

　　// 默认被执行的任务列表（注意先后顺序）
　　grunt.registerTask('default', ['jshint', 'uglify']);
      // 默认被执行的任务列表。
      // grunt.registerTask('default', []);

};

并且要建立一个名为“.jshintrc”的文件来说明检测规则【我这里因为后面安装与elasticsearch-head就没有新建，没有往后做其他插件了】

在这里插入图片描述

其他插件不再一一赘述，下面再讲一个真正实现监听自动化的插件watch

安装代码

npm install grunt-contrib-watch --save-dev

在Gruntfile里面需要的配置如下

在这里插入图片描述

其他插件都是类似安装，grunt的安装就介绍到这里，快去尝试你的第一个grunt项目吧！

Grunt部分参考：Grunt安装教程详解

安装grunt及其常用插件

2.4 修改elasticsearch.yml文件（在安装目录\config文件夹下）

在这里插入图片描述

在文件的末尾追加

	http.cors.enabled: true
	http.cors.allow-origin: "*"

在这里插入图片描述

2.5 下载head插件

 https://github.com/mobz/elasticsearch-head 

下载zip解压后，在安装目录，执行npm install进行安装，安装完成后执行npm run start，

进入https://github.com/mobz/elasticsearch-head

在这里插入图片描述

解压zip

在安装目录，执行npm install进行安装，安装完成后执行npm run start，

cd /d D:\Downloads\4.Data\10.elasticsearch\elasticsearch-head\elasticsearch-head-master

npm run start

出现以下说明安装成功
在这里插入图片描述
至此，head安装完成。

此时，进入localhost:9200/，会发现报错。解决方法参考博客关于启动ElasticSearch-head-master启动失败的问题处理：Fatal error: Unable to find local grunt

才发现刚才的信息有错误
在这里插入图片描述

标红信息是类似的

在这里插入图片描述
标红错误信息提示有部分必须的东西没有安装上，于是继续安装

首先在head的目录下查看还学要安装那些东西：npm install grunt --save-dev

在这里插入图片描述

上述提示未安装的grunt-contrib下面的很多未安装的包，安装好了之后即可正常使用

安装完成之后在head的目录下重新执行：grunt server

在这里插入图片描述
此时打开localhost:9200，正常

打开localhost:9100，elasticsearch-head就可以正常了

参考：深入elasticsearch(一):搭建elasticsearch环境及安装elasticsearch_head插件