「Nuxt + Netlify + HeadlessCMS で SPA ハンズオン」に行ってきました！【JS Builders】
11/9 に JS Builders というハンズオンに参加してきました。
https://js-builders.connpass.com/event/105516/
実はハンズオンに行くのは今回が初めてだったのですが、特に詰むこともなく 2時間で JAMstack なブログをデプロイすることができました！
今回のハンズオンで使用したリポジトリは下記です。
https://github.com/ryamakuchi/nuxt-blog
実際に公開されているサイトは下記です。
https://nuxt-contentful-blog.netlify.com/
対象者
Nuxt.js に興味がある方
Netlify に興味がある方
HeadlessCMS に興味がある方
JavaScript が好きな方
こんな感じの方が対象でした。 事前準備も Git、Node.js のインストールと GitHub アカウントの用意くらいなので、サクッと簡単にできた印象です。
ゼロから 2時間でできたブログなので、セキュリティ対策や SSR などブログとして未完成な部分も少しあります。 しかし HeadlessCMS を触ったことがなく、且つこれからやっていくぞーという導入としてはとても最適な内容だったと思います！ 何より内容を分かりやすく説明してくれたのがとてもありがたかったです！
どんな構成のブログなの？
使用した技術は以下のとおりです。
Nuxt.js
Nuxt.js は Vue アプリケーションを作成するフレームワークです。
- 規約のある Vue.js アプリケーションを作りたいとき
- Vue.js で SSR したいとき
- Vue.js で静的なサイトを生成したいとき
などの用途として使われるフレームワークです。
書籍でいうと「Nuxt.js ビギナーズガイド」という本が出ており、 こちらが Nuxt.js をきちんと体系的に知るためにとてもいい本なので紹介させていただきます。
Nuxt.js ビギナーズガイド - Vue.js ベースのフレームワークによるシングルページアプリケーション開発
（著者は Qiita でも有名な @potato4d さんですね）
Netlify
読み方は（ねっとりふぁい）です。 静的サイトホスティングサービスの中でもかなり高機能で、無料で色々なことができます。 詳しくはこちらの記事をどうぞ。
高機能ホスティングサービス Netlify について調べて使ってみた
- Nuxt.js で作った静的ファイルをホスティングする
- GitHub の master ブランチに push したら自動デプロイが走る
- Contentful とも連携できる
- Contentful で記事を投稿したら自動デプロイが走る！
- サブドメインも無料枠で設定できる
Contentful
Contentful とは、HeadlessCMS のサービスのひとつです。
私は今回のハンズオンで初めて存在を知ったのですが 👀 Contentful はその名の通りコンテンツを管理するための API で、WordPress のように分かりやすい管理画面を提供しています。
投稿するコンテンツはこちらで自由に設定することができ、Nuxt.js を使う方法も記事として上がっているので、やりやすいのではないかなと思います。
- 投稿する記事の内容を設定できる
- ブログ記事を投稿できる
実際にハンズオンでやった内容
事前にやっておくことは、
これだけです。簡単！
Nuxt.js を Netlify にデプロイする
とりあえず Nuxt.js を Netlify にデプロイしました。 ここらへんは公式ドキュメントに手順が書いてあり、何度かやってみたことがあるので簡単にできました！
講師の方が何人かいて、やったことがない人でもちゃんとついてこられるように優しく教えてくださいました。
大事なポイント
npm run generate して、静的ファイルが generate されるのを確認しました。
同じ設定を Netlify にもして、これで git push したら、自動的に Netlify でも静的ファイルが generate されて dist/ 配下が配信されるんだなーと分かります。
ブログ用のページを作成する
Nuxt.js は pages ディレクトリ配下に拡張子が .vue の単一ファイルコンポーネントのファイルを作ると自動でルーティングされます。
詳しいソースをみたいときはこちらをどうぞ。
ちなみに _slug.vue と、 "_" プレフィックスがついているのは、パラメータを使って動的なルーティングを定義するためのものです。
Contentful の構築
Contentful のサイトから GitHub アカウントでサインアップします。 最初に Content Model を作成して、field をどんどん追加していきます。
このとき Field ID が超重要になってくるので間違えないように
Nuxt.js に Contentful を組み込む
Contentful は npm で JavaScript SDK が用意されているので、こちらで Nuxt.js と Contentful を連携しました。
公式リファレンスはこちら。
公式リファレンスどおりにやってもらえるとできるかと思いますが、詳しいソースをみたいときはこちらをどうぞ。
https://github.com/ryamakuchi/nuxt-blog/commit/d1cd9548bf50aa01d12c76776a88d020c619410f
Webhook の設定をする
とりあえず完成！と思いますが、もうひといき設定が必要です。
Contentful から記事を投稿した際に Netlify で検知して、自動的にビルドする設定を Webhook で行います。
Webhook はあるアプリケーションから別のアプリケーションに対してリアルタイムな情報提供を実現するための仕組みです。
まず Netlify 側で hook URL の発行をして、Contentful 側で hook URL を登録すれば、おしまいです。
あとは、記事をどんどん投稿すればいい感じのブログの出来上がりです！！！
以上がハンズオンでやった内容です。
おわりに
JavaScript Builders さんでは、月 1〜2位の頻度でモダンな JavaScript 開発のためのハンズオンをやっているようです。
https://js-builders.connpass.com/
いま次のハンズオンを見たら、参加枠の埋まり具合がハンパなくて、、めっちゃ人気じゃないですか！笑 （人気なだけあって初心者には最高の、とっても分かりやすいハンズオンでした）
このハンズオンを生かして、自分の自己紹介サイトに Contentful を組み込んだ簡易ブログを作りたいなーなんて考えている今日このごろです。
以上、ブログ書く枠で参加したにもかかわらず、ブログ書くのが遅れてしまってすみませんでした！
今後ははてなブログをもっと活用していきたいと思います！
