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を使うメリット
.vueファイルで作れる
コードの自動分割
これが足かせになった
CommonChankPlugin
vendor.{hash_id}.js
コアライブラリ
node_modulesの各モジュール
build設定のvendorプロパティで指定されたリソース
code:js
build {
vendor: [
~/plugins/xxxx
]
}
この部分がプラグインを増やすとどんどんサイズがでかくなる
yamanoku.icon Nuxt2では廃止箇所
回避方法
必要なリソースだけ読み込む
リスクの根本的回避はできてない
maxChunkSizeの指定。指定を超えたら分割対象になる
これはhttp/2のみの有効手段
Nuxt2
optimization.splitChunkの仕様で制御
layoutsは基本的にtrueにしてコード分割対象へ
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モード
実稼働で動かさ無さそう
コア4で動かす場合
npm scriptsで動かすとリソースが余る
clusterモードでリソースがちょうど合う
instance: 0にすると勝手にコア数分のクラスタを動かせる
80番ポートで使える?
well known portはrootでの実行
root以外のユーザでも起動できる
authbindを導入して、エイリアスを設定する
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が楽
ルーティングの自動生成
[https://gyazo.com/85693c50cfc5c256babc014c55281c36]
規約がある
Nuxtのほうがよいとき
SSR
SEO
チームに精通した人が多い
静的サイトジェネレーター
yamanoku.icon PWAとかもサクッとできて良い
選ばないほうがいいとき
SEOがいらないとき
設計は自分でやりたい
チームに初心者が多い場合
ルーティングを自動化するのはこれがいい
Vueを広めるためのNuxt.jsの可能性
組織にVueを定着させるための施策
そもそもなぜ導入・拡散するのか
フロントエンドが居やすい環境をつくる
組織をドライブさせるため
適切な技術は適切な人を呼ぶ
Nuxtの特徴とインパクト
Vueによる親しみやすさ
規約が制定されている・共通化
圧倒的スピードが出せる
starter-templateよりcreate-nuxt-app
メリット
ユーザーの増加
属人性の排除
爆速で作って壊せる
導入してみて
習得時間、実装時間ともにかなりの工数短縮
非同期通信をゴリゴリやってもよい
インフラ構成を問わない
まとめ
組織に定着させるのは時間と体力がいる
とりあえず使ってみよう
定着するまであきらめない
Nuxtを使っていて地味にハマった小ネタの紹介
Google Tag Managerの設定
ALISで設定している
公式でもある?
当時(2018年4月)事例がなかった
注意点
package時に除外ファイルを指定
デプロイパッケージを小さくするため
大きいファイルを優先的に除外
500エラーの挙動
SSRしてるときはlayout/error.vueが読み込まれない
app/layout/views/error.htmlを設置する
nuxt.config.jsのsrcDir設定がappだったら見直すことあり
app/app/layout/views/error.htmlにする
パス設定はよく見とけ
ドキュメントはしっかり読んどけ
ハマりそうだったらALISの実装も見といてくれ
nuxt-i18nを使って多言語サイトを作った話
Uniqys Network
国際化の略
ソフトウェアを各言語や地域に対応させる
サマータイム
nuxt-community/nuxt-18n
日本語情報が少ない!
機能
vue-i18nのtranslation機能のみ
ルーティング自動生成
nuxt.config.jsに設定
便利関数
localPath()
第2引数にそのpathを返す
localPath('index.vue', 'en')
switchLocalePath()
現在のコンポーネントで別言語へのpathへ
自動生成
hreflang
og:locale
og:locale:alternate
<head>タグの中身が消えるバグ
直ってない?
ルーティング
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を設定
nuxt.config.jsでgenerete時にContentfulのAPIを実行して静的ファイルを作成
prerendering機能を使ってwebhookを登録してNetlify側でdeployする