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で開発できる
