NuxtMeetUp#9 オールスターズ に参加しました！（前編）
update 2019-08-27 21:00
8月26日（月） に 株式会社メルカリ 東京支社オフィス で開催された NuxtMeetUp#9 オールスターズ に行ってきました。
Nuxt.js が v2.9 になり、Nuxt TypeScript が切り出され TypeScript 対応が本格的になってきましたね！
それに伴って今回の NuxtMeetUp は実質 TypeScript MeetUpの様相でした。
それでは、NuxtMeetUp#9 に参加した際にとっていたメモをまとめます。
ちょっと長くなりそうなので、前後編に分けます。こちらは前編です。 詳しく見たい方はそれぞれの登壇者のスライドをご覧ください（リンクを載せています）
会場提供者LT：メルペイフロントエンドエンジニアの仕事
スライドのアップはありませんでした。
メルペイでは、toB、toCともに Nuxt.js TypeScriptで作られている。
開発環境
Nuxt.js TypeScript、Node
プライベートレジストリ
config周りやAPI Clientなどを管理
monorepo → lerna
Deploy
以下のFlowを組んである
git push
CI、CDでESLint、UnitTest
レビュー
CIでbuild
CIでdeploy
コメント
今関わっているプロダクトでこういった Flow を組んでいきたいと思っていはいるけど、環境構築が苦手な私には重い腰が上がらず…
Sentry とかは利用し始めていて、かなり有用だと思っているので、うまく活用していきたい。
飲食提供者LT
スライドのアップはありませんでした。
赤坂に引っ越した！
プロダクト
人材紹介管理ツール SARDINE
リファレンスチェック back check
どちらも Nuxt.js / Laravel で作られている
SSRはせず、generate での運用
ROXX にした理由
もはや SCOUTER というサービスやってない
ROX （最高にイケているというスラング rocksの略） + X （サービス プロダクト メンバー）
コメント
いつも NuxtMeetUp 開催ありがとうございます！
エンジニアブログも大変助かっています！
Docker multi stage build on Nuxt.js Application
UIT Meetup も参加お待ちしております！
LINE アプリの右側の Menu にあるアプリは、 ほぼ Web View、Nuxt.js のSSRアプリケーションでできている
フロントエンドの Docker 運用
皆さんは Dockerhaどう運用していますか？
開発環境だけ
本番環境だけ
開発環境、本番環境どちらも
開発環境、本番環境どちらも Docker 管理すると、カオスになりがち
設定ファイルが大量に
一つのファイルにまとめようとして出来上がる謎の shell
そんなときは Multi stage build が便利！
Docker multi stage build
Docker 17.05(2年前) に追加
1つの Dockerfile 内に複数のイメージを生成するように記述できる
From as で命名して分割できる
compose で target 指定できる
生成したイメージ間でデータ共有ができる
COPY で別のイメージの成果物だけコピーして利用できる
ビルドと実行を分割しイメージサイズを削減できる
devDeps を弾くことで ESLint や Jest 等を消すことができる
Nuxt.js のような、開発・本番環境で挙動が違うものでも便利
フロントエンドのDocker
フロントエンド開発で Docker 使うとトランスパイルが必要な SPA 環境ではファイル I/Oが重い
フロントエンドの Docker 化はよく考えよう
コメント
今関わっているプロダクトでは Docker で Nuxt.js の開発しているので、やはり結構I/Oがきつくて重たくなる
Nuxt.js TypeScript で作っている方は完全にサーバと分割してフロントは Docker 使わずに開発してるから快適
Nuxt.js と TypeScript のベストプラクティス
登壇者： @yuit1552 株式会社サイバーエージェント
Nuxt.js + TypeScript でのAPI 利用
サードパーティクッキーだったり、クロスオリジン制約だったり、別ドメインのAPIを叩くのが面倒になってきている
API を用意する手段として
@nuxt/proxy で バックエンドのAPIを Proxy する
nginx 等で API サーバーに Proxy する
express等で API 作る
ServerSideMiddleware
用途としては
クロスオリジン制約回避
http-only にしたクッキーを扱いたい
API を一本にまとめたい
フロント仕様でレスポンスを加工したい
BFF: Backends For Frontends APIで作ろう！
手段1：create-nuxt-app で express server を選ぶ
import 使われてないし、 Nuxt.js v2.0.0 だし… 色々と足りないとかその他問題も多発する…
やめよう！
手段2：serverMiddleware を使う
server-static か カスタムミドルウェア
nuxt.config.js に API やミドルウェアのパスを書くのはなんか微妙…
ということでカスタムミドルウェアを使う
express のミドルウェアがサポートされているので express の router で実装
@nuxt/typescript を使って、ベストプラクティスっぽい API が作れた
ts-node で tsconfig の paths を使う
Nuxt.js 2.9 + TypeScript のserverMiddelewareで tsconfigのpathsを使えるようにする
tsconfig-paths を使って package.json の script を以下のように書き換えれば tsconfig-paths が使えます！
"scripts": {
"dev": "node -r tsconfig-paths/register ./node_modules/@nuxt/typescript-runtime/bin/nuxt-ts.js",
"build": "node -r tsconfig-paths/register ./node_modules/@nuxt/typescript-runtime/bin/nuxt-ts.js build",
"generate": "node -r tsconfig-paths/register ./node_modules/@nuxt/typescript-runtime/bin/nuxt-ts.js generate",
"start": "node -r tsconfig-paths/register ./node_modules/@nuxt/typescript-runtime/bin/nuxt-ts.js start"
},
でも起動コマンドが美しくないので
→ @nuxt/typescript-runtime に PRしてみたそうです！が、CoreCLI フックがサポートされるまで保留になりました
コメント
私は ROXX さんと同じように、 Nuxt.js / Laravel が多いので、API は Laravel に任せっきり。
以前はフルスタックで サーバーもフロントも書いてたけど、最近はフロントがメインになってきて、ちょっとずつだけど知見が溜まってきていると思う（思いたい
Nuxt.jsとテストコード
登壇者： @keita_kn_web 株式会社エス・エム・エス
テストコードを書く目的
検証作業の工数を削減する
バグを減らす
リファクタリングを容易にする
Nuxt.js の主なテスト
Component
Snapshot
Storybook
VueX
getter
mutation
action
E2E
Snapshotテスト
Snaoshot ファイルをバージョン管理に含める
UI の変更があった場合、テストが失敗するが、意図する結果なら Snapshotを更新しておく
jest --updateSnapshotで更新される
Storybook と組み合わせることで、UI ドキュメントとテストコードが連動し、わかりやすい
Component の設計・テストで意識すること
コンポーネントの責務は小さく
ロジックは Vuexに
ユニットテストなので単一を意識
単純な Component は テストを省いても良い
VueX のテストは、最低限 action をテストする
E2Eテスト
実装コストはそれほどではないが、外部要因（デザインなど）で壊れることが多いため、メンテナンスコストが高い
主要機能で、複雑なシナリオの正常系だけでもいいので実装する
TestCafe
E2Eテストフレームワーク
ブラウザ指定可能
TypeScriptSupport
WebDriveいらない
ブラウザでアクセスするようにテストコードを書いていく
対象の URL にアクセス
ブラウザ上の操作を記述
DOM構造を調べて意図した形になっているか確認
E2Eテスト用に data-test="signin" のようなカスタムデータ属性を付与しておくと良い
→ class や id は、デザイン等の css の変更で容易に変わってしまうから
コメント
私も最近 TestCafe を利用して E2Eテストを書いています。
ログイン、ログアウト周りや、よく行う操作で複雑そうなものはできるだけ書いていきたいですね。
Storybook も atoms、molecules あたりはしっかり書いているのですが、テストと連動させたりができていないので、対応していきたい。
まとめ
NuxtMeetUp 9 まとめ前編はここまでです！
私も Nuxt.js v2.9 が来てすぐにバージョンアップし、TypeScript の移行もスッキリできて Nuxt.js に感謝感謝という気持ち。
まだまだ TypeScript は初心者なので、しっかりと恩恵を受ける形で書いていきたい。
Deploy 周りでも全然やれていない所あるし、必要なところを見極めて色々手を付けていきたい。