vuejsでsuggestフォームを作る1 #Docker

suggestフォームパッケージを作ってみようと思います
vuejs,Elasticsearchを使っていく予定。npmパッケージ化を目指します

第１回目はDockerにVue.jsの環境をつくるところまで

やりたいこと

キーワードを入力していくとキーワード候補エリア、関連エリア（もしかして、、、これ？みたいな）が表示されるやつを作ります
＃既に、こんな素敵なパッケージがあるのでそれを使えばこの話はお終いなんですけど。作りたいのでいいのです
vue-simple-suggest

ではまずにDockerで環境を作っていきます

Vue.js環境作成

1.Dockerfileを作成

Dockerfile


FROM node:12.8.0-alpine

WORKDIR /app

RUN apk update && \
    npm install -g npm vue-cli

EXPOSE 9000

CMD ["/bin/sh"]

2.docker-compose.yamlを作成

docker-compose.yaml


version: '3'
services:
  vue_app:
    build: .
    ports:
      - 9000:9000
    volumes:
      - .:/app
    command: /bin/sh

3.Makefileを作成

Makefile

PROJECT = vueSearchSuggest

.PHONY: start
start:
  docker-compose -p $(PROJECT) up -d --build

.PHONY: logs
logs:
  docker-compose -p $(PROJECT) logs -f

.PHONY: restart
restart:
  docker-compose -p $(PROJECT) kill && \
  docker-compose -p $(PROJECT) rm -f && \
  docker-compose -p $(PROJECT) up -d --build

.PHONY: kill
kill:
  docker-compose -p $(PROJECT) kill

.PHONY: ps
ps:
  docker-compose -p $(PROJECT) ps

4.起動

$ make start

5.Vue.jsのコンテナに入る

プロセス確認

$ make ps

docker-compose -p vueSearchSuggest ps -a
           Name                        Command              State           Ports
------------------------------------------------------------------------------------------
vuesearchsuggest_vue_app_1   docker-entrypoint.sh /bin/sh   Up      0.0.0.0:9000->9000/tcp

起動中のコンテナに入る

$ docker exec -it vuesearchsuggest_vue_app_1 sh

6.Vue.jsのインストール

/app # vue init webpack
/app # npm install

9000ポート起動に変更

config/index.js

 16 //    host: 'localhost', // can be overwritten by process.env.HOST
 17 //    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
 18     host: '0.0.0.0', // can be overwritten by process.env.HOST
 19     port: 9000, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined

6.Vue.jsのインストール

/app # npm run dev

http://localhost:9000/
を開いて動作確認

いつもの起動画面がでてきたらOK

次回はElasticsearchの環境を作っていきます