WSL2+Docker+Vue+Vuetify+Storybook環境構築（part:01）

WSL2の対応

こちらに関してはたくさんの方々が対応をまとめてくれております。
ので、割愛させていただきます。
私は下記サイトを参考にさせていただきました<m(__)m>
ありがとうございました。

WSL2のUbuntuでDockerを使う

Docker環境の作成

• wslの起動

• 作業フォルダの作成
  ※どこのフォルダでも結構です。

  • ex. ）/home/※ユーザー名/dev/vue-storybook

• Dockerファイルの作成

FROM node:16
WORKDIR /src
RUN yarn global add @vue/cli @vue/cli-init

• docker-composeファイルの作成
  

version: '3'

services:
  storybook:
    container_name: storybook
    build: .
    ports:
      - "8080:8080"    #for vue
      - "6006:6006"    #for storybook
    volumes:
      - .:/src
    tty: true

• docker-composeのビルド

docker-compose up -d --build

• コンテナに入る

docker-compose exec storybook bash

• vueのプロジェクトを作成する

vue init webpack vue-storybook

• 設定ファイルの書き換え

  • config/index.js

    • 16行目：localhost → 0.0.0.0

• Vueプロジェクトの稼働確認

cd vue-story
yarn run dev

• ブラウザで確認

  • http://localhost:8080

次回へ続く。。。