NuxtMeetup#5

https://gyazo.com/8bbb551b7f2e38a8c1ef843782690a90

https://www.youtube.com/watch?v=hGBMgvv01oI

バンドルファイルの肥大化問題解消にみるNuxt.jsの成熟化

Wakamatsu Hisashi

Frone-end Engineer

実際にサービスを運用して機能拡張していくときの問題

バンドルファイルサイズ問題

Nuxt.js 2でどういう風に解決されるか

Nuxt.js 2 Coming !

Nuxtを使うメリット

コードの自動分割

これが足かせになった

CommonChankPlugin

vendor.{hash_id}.js

コアライブラリ

build設定のvendorプロパティで指定されたリソース

code:js

build {

vendor: [

~/plugins/xxxx

]

}

この部分がプラグインを増やすとどんどんサイズがでかくなる

回避方法

必要なリソースだけ読み込む

リスクの根本的回避はできてない

Nuxt2

buildプロパティ比較

v1 ... 40行

Nuxt2 ... 100行超え

柔軟な設定が期待できるようになった

minify など

Nuxt.jsを使う上で大事なこと

ベストプラクティスの集合

細かいビルド設定できるように

フレームワークとして成熟してきた

工法を熟知しなくても立派なものはつくれるように

これは仕組みがわからない場合、問題解決が難しくなる

Nuxtでアプリケーションを開発するにあたり

どういう仕組で実現して

どういう初期値が設定されているかを知る

LT1：hiroki_yoshitugu

フロントエンドエンジニアでできるもん

最近リブランディングした

検索やめよう、新規サービス

無思考型新サービス

機械学習でよさげなレコメンドが出せる

フロント

Nuxt.js（SSR）

バックエンド

機械学習は別部隊が開発、API連携

体制：人が少ない！

ものづくり先行で進めておく

新規サービスなのでとにもかくにもPoCを成立させる

ガワを作って具現化しておくのはのはフロントエンドの強み

nuxt-full-stack-template

Nuxt

認証チェック

express

MySQLの接続

セッション管理

データストア：MySQL

v5.7

nodeサーバーを実稼働に向けて整備

マルチプロセルでどう動かすか？

npm run start / build

productionモード

実稼働で動かさ無さそう

コア４で動かす場合

npm scriptsで動かすとリソースが余る

clusterモードでリソースがちょうど合う

80番ポートで使える？

Apache80 × Node3000はあんまりやらない？

Nginx80 × Node3000はよくある

結論：なくてもできる

クラスタ構成でうまくロギングできる？

"pm2": true

"pmInstanceVar": "INSTANE_ID"

pm2でできること

プロセス監視とモニタリング

ファイル変更時に自動的にプロセス再起動

Vue or Nuxt

なぜNuxtを選定したか？

動向について

vue-cli3の登場

ロードマップ

Vue.js本の登場

Nuxt2の登場

Nuxt本

VueもNuxtも便利になってきた

Vue.jsメリット

公式エコシステムの豊富さ

vue-router

学習コスト低め

日本語ドキュメント

Nuxt.jsメリット

webpackとbabel周りが隠蔽されてる

SSRが楽

SEOが楽

ルーティングの自動生成

規約がある

Nuxtのほうがよいとき

SSR

SEO

チームに精通した人が多い

静的サイトジェネレーター

選ばないほうがいいとき

SEOがいらないとき

設計は自分でやりたい

チームに初心者が多い場合

ルーティングを自動化するのはこれがいい

Vueを広めるためのNuxt.jsの可能性

組織にVueを定着させるための施策

そもそもなぜ導入・拡散するのか

フロントエンドが居やすい環境をつくる

組織をドライブさせるため

適切な技術は適切な人を呼ぶ

Nuxtの特徴とインパクト

Vueによる親しみやすさ

規約が制定されている・共通化

圧倒的スピードが出せる

メリット

ユーザーの増加

属人性の排除

爆速で作って壊せる

導入してみて

習得時間、実装時間ともにかなりの工数短縮

非同期通信をゴリゴリやってもよい

インフラ構成を問わない

まとめ

組織に定着させるのは時間と体力がいる

とりあえず使ってみよう

定着するまであきらめない

Nuxtを使っていて地味にハマった小ネタの紹介

Google Tag Managerの設定

ALISで設定している

公式でもある？

当時（2018年4月）事例がなかった

注意点

package時に除外ファイルを指定

デプロイパッケージを小さくするため

大きいファイルを優先的に除外

500エラーの挙動

nuxt.config.jsのsrcDir設定がappだったら見直すことあり

パス設定はよく見とけ

ドキュメントはしっかり読んどけ

ハマりそうだったらALISの実装も見といてくれ

Uniqys Network

国際化の略

ソフトウェアを各言語や地域に対応させる

サマータイム

nuxt-community/nuxt-18n

日本語情報が少ない！

機能

vue-i18nのtranslation機能のみ

ルーティング自動生成

nuxt.config.jsに設定

便利関数

localPath()

第２引数にそのpathを返す

localPath('index.vue', 'en')

switchLocalePath()

現在のコンポーネントで別言語へのpathへ

自動生成

hreflang

og:locale

og:locale:alternate

直ってない？

ルーティング

prefix_except_default

/ => 200

/en => 404

ja => 202

prefix

/ => 404

/en => 200

/ja => 200

NuxtでのJAMStackな開発とポイント

株式会社ROLO

NuxtでJAMStackやる利点

パフォーマンス

セキュリティ面が強い

Nuxtへの期待

SPA

SSR

JAMStack

ContentfulでContentModelを作成

記事データを作成

APIができる

Nuxtダウンロード、GitにPush

Netlifyで対象Gitを設定