Nuxt.jsの静的サイト 出力を試してみる

Nuxt.jsのv2.13以降から使えるようになったという静的サイト出力機能を試してみつつ、どんなことが出来るかをデモを交えて紹介しました。API連携(API routes)についても触れています。

https://github.com/subuta/play-with-nuxt-generate

Transcript

1. @subuta 2020/11/25 /VYUKTͷ੩తαΠτ
   ग़ྗΛࢼͯ͠ΈΔ
2. • 名前: ⻫藤駿太(@subuta) • JavaScript周りのものが好きで す。最近は仕事でもNode.jsバリ バリ書いてます。 • React(Next.js)が主に好きです が、Vue.js(Nuxt.js)も仕事で良く 使っています。⽤途に応じて適 切なものを選んでいます。 ࣗݾ঺հ
3. ໨࣍ • 静的サイト出⼒機能とは • serverMiddleware(API routes)機能 • SSG + serverMiddleware(API)を試す • [おまけ] - SPA vs SSG(Static Site Generation)
4. ੩తαΠτग़ྗػೳͱ͸ • ソースとなるデータ(例: DB上のブログ記事データ / Markdownファイル)と、 テンプレートファイル(ejs/erb等)を使ってHTMLファイルを⽣成する機能 • Nuxt.jsの v2.13以降からSSGできるようになった。記事 • 有名ドコロはこんな感じ。 • Middleman(Ruby),Jekyll(Ruby) • Gatsby(Node.js) • Hugo(Golang)
5. TFSWFS.JEEMFXBSF "1*
   SPVUFT ػೳ • Nuxt.jsにAPIサーバ向けの処理を書き⾜せる機能 • Nuxt.jsをSPAとして使う場合に、別途APIサーバを起動しなくても良くなる。 (Nuxt.jsからアクセスするのでJSに限る)
6. 44(
   
   TFSWFS.JEEMFXBSF "1* Λࢼ͢ • デモ • https://github.com/subuta/play-with-nuxt-generate • Nuxt.js v2.14.7で検証しています。
7. /VYUKT
   W࣌఺Ͱ͸ 44(
   
   "1*
   3PVUFT͸
   ͱͯ΋ͭΒ͍ɻ (完)
8. lOVYU
   HFOFSBUFz࣌ͷಈ͖ W࣌఺ • 内部的にNuxt.jsのサーバを起動した後に、generateを実⾏している。 • サーバの起動時に(“nuxt.server.listen(0)”)のようにランダムなポートで起動 している。（過去の経緯(nuxt/nuxt.js#7597)） ソース: https://github.com/nuxt/nuxt.js/blob/v2.14.7/packages/cli/src/ commands/generate.js#L105 • 起動したAPIサーバのポート(ランダム値)が分からないと、データ取得処理 (例: asyncData)から呼べない。 = 開発時は localhost:3000 で繋げるけど、ビ ルド(“nuxt generate”)時は繋げない・・
9. ࢑ఆରॲ ΍ͬͨ͜ͱ • 独⾃のmiddlewareを定義し、その中で “nuxt.hook('listen', (server, listener) => {})” とすることで、起動したポートを取得。 • データ取得処理(asyncData)からそのポートをどうにか取得出来るようにし た。 • “nuxt generate” コマンドでちゃんとSSG出来るようになった
10. ·ͱΊ • Nuxt.js v2.14.7時点ではSSG + API Routesはとてもつらい。 • 今回のリポジトリはあくまでどうにか動かしている状態なので、本家の修正 を待つほうが良いかもしれない。 • あるいはAPIサーバをバックグランド起動(&付ける)して、”nuxt generate”、 その後起動したAPIサーバをkillするとか・・ • もっと良いやり⽅知ってたら教えて下さい・・！
11. <͓·͚>
    41"
    WT
    44( 4UBUJD
    4JUF
    (FOFSBUJPO • SPAはページの表示時にAPIサーバからデータを取得してきて、その場でコン テンツの描画を⾏う。 • SSGではビルドのタイミングでAPIサーバからデータを取得し、そのデータを ページに埋め込んだ、コンテンツ(描画済みのHTMLファイル)を出⼒する。静 的ファイル⽤の配信環境(Nginx/S3等)にアップロードすることで、描画済み のコンテンツをブラウザに返却する。
12. <͓·͚>
    41"
    WT
    44( 4UBUJD
    4JUF
    (FOFSBUJPO VS SPA SSG ※“key” を付けないとwarning出ます。
13. ͝੩ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠