vuejs에서 suggest 양식 만들기 1

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 환경을 만들 것입니다.