Nuxt.js + Contentful + Netlify でポートフォリオサイトを作った話
ゆるWeb勉強会@札幌 Advent Calendar 2019の7日目の記事になります。
⚡️作ったもの
↓こちらになります
🤔Nuxt.js とは？
Vue.js を使用したwebアプリケーションを作成するためのフレームワークです。
といっても、Nuxt.js から静的ファイルを出力して静的なwebサイトとしても利用できるものになります。作成したポートフォリオサイトも静的ファイルを出力して静的なwebサイトとして公開しています。
🤔Contentful とは？
"Headless CMS" と呼ばれるCMSです。簡単に言うと管理画面しか持たないCMSです。
Contentful では、その管理画面から入力したデータをAPIを通じてJSON形式で取得することができます。作成したポートフォリオはその取得したJSONからDOMを構築する、ということをやっています。
その他の Headless CMS としては "microCMS" という日本製の CMS があります。
まだ、microCMS を使用したことがないのですが、こちらもAPIを通じてコンテンツデータをJSON形式で取得することができるようです。
🤔Netlify とは？
静的なファイルをホスティング・配信してくれるサービスです。それだけではなく、ビルドすることも出来ますし、GitHubと連携すると push したタイミングでビルドしたり webhook を利用してビルドが出来たりと色々多機能です。
🕋構成
Contentfulでコンテンツなどを追加するとNetlify 側にwebhookで通知するようにしています。
Netlifyはその通知を受け取ると Nuxt.js の generate コマンドを実行し静的ファイルを出力する、といった流れになります。
😕困ったこと
本来、Contentful のコンテンツ管理者しか知り得ない Space ID や Access Token がクライアントサイドのJavaScriptに埋め込まれてしまいました。
Space ID や Access Token は Contentful からコンテンツデータを取得するために必要となるものになります。
Contentful のドキュメントには ↑ のように Nuxt.js を利用したチュートリアル記事があります。
ここに nuxt.config.js の env プロパティに Space ID や Access Token をそれぞれ設定するような記述がありますが、このまま Nuxt.js の generate で静的ファイルを出力すると クライアントサイドのJavaScript に env プロパティの設定が埋め込まれてしまいました。
これは誰でも Space ID や Access Token を見ることが出来てしまうということです。
今回使用しているのは Contentful の "Content Delivery API" を使用するための Space ID や Access Token なので、Contentful の公開しているコンテンツ情報を取得することしか出来ないものになるのですが、 コンテンツ管理者しか知り得ない情報が公開されている状態というのは、個人的にはあまり好ましくないと思いました。
🦉どう解決したのか
Contentful へリクエストする際には Space ID や Access Token が必要になるので、クライアントサイドからリクエストするのをやめます。
そして、Contentful のコンテンツデータは Nuxt.js の静的ファイルを出力しようとするときに Contentful からデータを取得し、静的なJSONファイルとして、ゴリッと `static` ディレクトリに配置するようにしました。
Nuxt.js には `hooks` という API があり 様々なタイミングで処理を実行させることが出来ます。
今回はその中でも `ready` のタイミングで実行させています。↓
その際に必要になる Space ID や Access Token は Netlify の環境変数で定義しています。ローカルではコミット対象外としているファイルで定義するようにしました。
こうすることで クライアントサイドからは生成された静的なJSONを読み込むことでデータを取得できますし、クライアントサイドのJSに Space ID や Access Token が埋め込まれることもなくなりました。
🐒反省点
Space ID や Access Token を環境変数だったり、コミット対象外のファイルにすれば解決する問題だったので、わざわざ静的なJSONファイルとして出力しなくても、Nuxt.js の `asyncData` で Contentful からコンテンツデータを取得しても良かったな、と思いました。
また、コンテンツデータが増えると、その分 JSONファイル自体も大きくなるので、分割とかしていかないとなー と考えております。
🐷まとめ
CMS でコンテンツを管理しつつ、サーバーのことなどをあまり考える必要のない静的なwebサイトを構築できるという、良いとこどりなポートフォリオサイトが出来たと思います。
コンテンツ自体かなり単純なものなので、作成したポートフォリオくらいであれば必要十分な構成だと思います。
コンテンツデータが分離されているので、簡単に見た目など変更できることも良い点だと思います。
コンテンツを簡単に管理したい場合、サクッと始められる Headless CMS から始めるのも良い選択肢になると思います。
この記事が気に入ったらサポートをしてみませんか？