Nuxt+Storybook+Dockerで作るモダンな開発環境

kahirokunn

@kahirokunn 又は k-okina の名前で活動

前まではLaravelでバックエンドがメインだったけどブラウザゲームを業務で作ってからフロントが楽しくて最近はスタートアップでフロントエンドを主にやっている

最近Qiita結構書いてる

設計をミスるとせっかく書いたコードが大体ダメになるから最近は設計をとても意識している

人見知り

LTはじめて

めっちゃ緊張

生暖かく聞いてください

今日話すこと

Nuxt+Storybook+Dockerで作るモダンな開発環境

の紹介

アジェンダ

Storybookとは

Dockerとは

Nuxt + Storybook + Docker

ゴール

1コマンドで

すべての環境が構築され

起動までされている

起動までされている

素晴らしい

Storybookとは

コンポーネントの動作やデザインをカタログ帳に作っていける

Storybookとは

Vueコンポーネントの動作やデザインをカタログ帳に作っていける

導入方法

https://github.com/k-okina/iom/commit/3542eb771f4d08f3883560485da60beab6f1e103

とても簡単

Dockerとは

軽量なコンテナ型の仮想化環境

IaC

コマンド1つでインフラが手に入る

つまり

たったの1コマンドで

インフラが手に入る

1プロセスにつき、1コンテナ必要

AWSSummit2018のAWS のコンテナ入門のスライドがめちゃくちゃ良い感じに纏まっていたけど後日公開されるらしい

Docker Compose

設定ファイルに沿ってDockerコンテナを一斉に起動してくれる

たったの1コマンドで

そのコマンドとは

docker-compose up

たったこれだけ

https://github.com/k-okina/iom/commit/44cc7e3f59a6d6020f208ed202223efbbfc38a69

デモ

補足

nodemonも結構相性が良い

webpack.conや.storybookを編集した際に、watch対象外の設定ファイルを変更したらいちいちプロセスを手動で再起動するのがめんどくさい

nodemon --watch .babelrc --watch .storybook/*.js --watch .storybook/*.html -x 'yarn start-storybook'

これでストレスなくnuxtで開発できる

ご清聴ありがとうございました

Nuxt + Storybook + Dockerで作るモダンな開発環境

By kahirokunn

Nuxt + Storybook + Dockerで作るモダンな開発環境

  • 2,587