Docker on Storybook@Vueを最小構成で動かす

何時もの備忘録として

• docker-compose runの仕様にはまった

まずはチュートリアル通りに動かす

こちらを参照に進める

docker-compose.ymlの準備

version: '3'
services:
  node:
    image: node:12.3.1-alpine
    volumes: 
      - ./:/app
    working_dir: /app
    ports:
      - 9001:9001

モジュールをインストール

docker-compose run node npm init
docker-compose run node npm install @storybook/vue --save-dev
docker-compose run node npm install vue --save
docker-compose run node npm install vue-loader vue-template-compiler @babel/core babel-loader babel-preset-vue --save-dev

package.jsonの編集

以下を追加

package.json

{
  "scripts": {
    "storybook": "start-storybook --ci -p 9001 -c .storybook",
  }
}

設定ファイルを作成

.storybook/config.jsを作成 .storybookディレクトリに注意

.storybook/config.js

import { configure } from '@storybook/vue';

function loadStories() {
  require('../stories/index.js');
}

configure(loadStories, module);

./stories/index.jsを作成

index.js

import Vue from 'vue';
import { storiesOf } from '@storybook/vue';
import MyButton from '../components/Button';

storiesOf('Button', module)
  .add('with text', () => '<my-button>with text</my-button>')
  .add('with emoji', () => '<my-button>😀 😎 👍 💯</my-button>')
  .add('as a component', () => ({
    components: { MyButton },
    template: '<my-button :rounded="true">rounded</my-button>'
  }));

./components/Button.vueを作成

Button.vue

//何でもいいので作る

<template>
  <button @click="hello">hello</button>
</template>

<script>
export default {
  methods: {
    hello: e => {
       alert('hello');
    }
  }
}
</script>

そして

docker-compose run run node run storybook

でブラウザが開かない。。。

docker-compose runの仕様でそのままだとportsのマッピングが効かない。知らなかった。。。

気を取り直して

docker-compose run --service-ports node npm run storybook

localhost:9001でStorybookが確認できる

参考

チュートリアル
Issue