Dockerで始めるvue-cli3

Dockerで何か始めるたびにググりながらやっているので自分用メモ。

# 準備
`Dockerfile`と`docker-compose.yml`を準備する。

``` docker:Dockerfile
FROM node:8.15.0-alpine

WORKDIR /app

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

CMD ["/bin/ash"]
```
alpineを使う場合は`bash`が入っていないので、代わりに`/bin/ash`を使用する。

``` yml:docker-compose.yml
version: '3'
services:
  docker-storybook:
    build: .
    ports:
      - 9000:8080
    volumes:
      - .:/app
    stdin_open: true
    tty: true
```
このあと`storybook`の勉強をする予定なので、名前はそれっぽいものに。
ポートは適当に設定。

# Dockerで作っていく
準備ができたらあとは定型文。

``` bash:
> docker-compose build
Building docker-storybook
Step 1/4 : FROM node:8.15.0-alpine
 ---> e8ae960eaa9e
Step 2/4 : WORKDIR /app
 ---> Using cache
 ---> 5a70777d1163
Step 3/4 : RUN apk update &&     npm install -g npm &&     npm install -g @vue/cli
 ---> Using cache
 ---> d01c38379cbe
Step 4/4 : CMD ["/bin/ash"]
 ---> Using cache
 ---> 40cc1468b395
Successfully built 40cc1468b395
Successfully tagged dockerstorybook_docker-storybook:latest

> docker-compose up -d
Creating dockerstorybook_docker-storybook_1 ...
Creating dockerstorybook_docker-storybook_1 ... done
```

# コンテナに入ってvueのプロジェクトを作成する
``` bash:
# コマンドが長いので、このコマンドはshファイルにしてしまう
> docker-compose exec docker-storybook /bin/ash
/app # vue create docker-storybook
?  Your connection to the default yarn registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? Yes


Vue CLI v3.4.0
? Please pick a preset: default (babel, eslint)
? Pick the package manager to use when installing dependencies: NPM


Vue CLI v3.4.0
✨  Creating project in /app/docker-storybook.
⚙  Installing CLI plugins. This might take a while...


> yorkie@2.0.0 install /app/docker-storybook/node_modules/yorkie
> node bin/install.js

setting up Git hooks
can't find .git directory, skipping Git hooks installation
added 1111 packages from 604 contributors and audited 23490 packages in 46.689s
found 0 vulnerabilities

🚀  Invoking generators...
📦  Installing additional dependencies...

added 28 packages from 23 contributors, updated 2 packages, moved 8 packages and audited 23779 packages in 16.792s
found 0 vulnerabilities

⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project docker-storybook.
👉  Get started with the following commands:

 $ cd docker-storybook
 $ npm run serve
```

あとは、指示にあるとおりコマンドを実行。

``` bash:
/app # cd docker-storybook/

/app/docker-storybook # ls
README.md          babel.config.js    node_modules       package-lock.json  package.json       public             src

/app/docker-storybook # npm run serve

> docker-storybook@0.1.0 serve /app/docker-storybook
> vue-cli-service serve

 INFO  Starting development server...
 98% after emitting CopyPlugin

 DONE  Compiled successfully in 3595ms                                                                                                                                                                     14:15:24


  App running at:
  - Local:   http://localhost:8080/

  It seems you are running Vue CLI inside a container.
  Access the dev server via http://localhost:<your container's external mapped port>/

  Note that the development build is not optimized.
  To create a production build, run npm run build.
```

サーバーが起動したので、`http://localhost:9000/`でアクセス確認をして完了。