LoginSignup
1
0

More than 3 years have passed since last update.

vuejsでsuggestフォームを作る2

Last updated at Posted at 2019-08-16

前回はvue.jsをDockerで動かすところまで進めました
第2回目はDockerにElasticsearchの環境をつくるところまでです

やりたいことのおさらい

キーワードを入力していくとキーワード候補エリア、関連エリア(もしかして、、、これ?みたいな)が表示されるやつを作ります

Elasticsearch環境作成

1.Dockerfileを作成

Install Elasticsearch with Docker を参考にDockerfileを作ります

Amazon Elasticsearch ServiceはElasticsearchバージョン6.7まで対応していますね
今回は6.7を利用します

ディレクトリ構成はこんな感じにします

$ tree
.
├── Makefile
├── docker-compose.yml
├── dockerfile
│   ├── elasticsearch
│   │   └── Dockerfile
│   └── vue
│       └── Dockerfile
dockerfile/elasticsearch/Dockerfile
FROM docker.elastic.co/elasticsearch/elasticsearch:6.7.2
RUN elasticsearch-plugin install analysis-kuromoji

日本語を扱いたいのでkuromojiをinstallしています

2.docker-compose.yamlを作成

docker-compose.yaml
version: '3'
services:
  vue_app:
    build: dockerfile/vue
    ports:
      - 9000:9000
    volumes:
      - .:/app
    stdin_open: true
    tty: true
    command: /bin/sh

  elasticsearch:
    build: dockerfile/elasticsearch
    environment:
      - discovery.type=single-node
      - xpack.security.enabled=false
      - http.host=0.0.0.0
      - http.port=9200
      - http.cors.enabled=true
      - http.cors.allow-origin=http://localhost:9000
      - http.cors.allow-methods=*   
      - http.cors.allow-headers=*      
      - http.cors.allow-credentials=true
      - bootstrap.memory_lock=true
      - 'ES_JAVA_OPTS=-Xms128m -Xmx128m'      
    ports:
      - "9200:9200"
    volumes:
      - esdata1:/usr/share/elasticsearch/data
    networks:
      - esnet
volumes:
  esdata1:
    driver: local

networks:
  esnet:

コンテナ削除後でもデータを利用できるように
データボリュームを作成しておきます

また、ブラウザからESのAPIアクセスが可能なようにCORSを設定します
vuejsは9200で起動するので9200を許可しています

3.起動

$ make start

4.起動確認

$ curl -XGET localhost:9200
{
  "name" : "xxx",
  "cluster_name" : "docker-cluster",
  "cluster_uuid" : "xxx",
  "version" : {
    "number" : "6.7.2",
    "build_flavor" : "default",
    "build_type" : "docker",
    "build_hash" : "56c6e48",
    "build_date" : "2019-04-29T09:05:50.290371Z",
    "build_snapshot" : false,
    "lucene_version" : "7.7.0",
    "minimum_wire_compatibility_version" : "5.6.0",
    "minimum_index_compatibility_version" : "5.0.0"
  },
  "tagline" : "You Know, for Search"
}

次回はElasticsearchにテストデータを用意する予定です

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0