netlify devコマンドでNuxt 3とStoryBlokをlocalhostで接続したい
何をしたいか
元々はこちらの記事に沿ったことをやりたかったのです。
しかし環境変数をNetlify上で管理しているため、netlify devコマンドからこれを使えるようにしたいのです。
このままやり続けるのに何が問題か
StoryBlokはローカルホストで立ち上げる際にもhttpsでのリクエストを要求します。しかしnetlify devコマンドでローカルホストを立ち上げる時にはhttpだったので、この記事のままではうまく行きませんでした。
Nuxt 3をStoryBlokからのデータで接続したい
上記の記事に従ってStoryBlokの設定をします。
StoryBlok管理画面の設定
スペースを追加
My SpacesからAdd Spaceを押します。
スペースを情報の入力
New spaceを押して、スペースの名前を入力します。自分がわかる名前で良いです。日本語でも大丈夫です。
Server LocationはEUとUSしかありませんのでデフォルトのままで「Create space」を押しましょう。
スペース作成後
するとこんな画面になります。左のナビゲーションからSettingsへ移動します。
Visual EditorにURLを設定
SettingsのサブメニューからVisual Editorを選択します。一番上のLocationにローカルホストで起動した時のURLを入力します。Nuxtだとデフォルトのポートは3000なので、http://localhost:3000 となっているかもしれません。
これをnetlify devで立ち上げた時に使用するポート8888に変更します。またhttpsに変更します。
終わったら右上のSaveボタンを押します。
Contentを設定
次に左のナビゲーションからContentを選択します。デフォルトで入っている記事「Home」がありますのでこれを選択します。
Entry configurationにパスを設定
Homeを開いたら、上のアイコンをクリックします。ポップアップが立ち上がります。スクロールしていくと下の方にReal pathという項目があります。ここにスラッシュを入力します。サイトのルート（ホームページ）を指定しています。
終わったら「Save & Close」を押します。これでStoryBlokの管理画面の設定は完了します。
管理画面から離れる前にアクセストークンだけコピーしておきましょう。
左のナビゲーションからSettingsを選択し、サブメニューでAccess Tokensを押します。表示されるトークンをコピーしておきます。
アクセストークン
StoryBlokのアクセストークンの設定
nuxt.config.tsにこれを設定します。
export default defineNuxtConfig({
modules: [
['@storyblok/nuxt', { accessToken: 'アクセストークン' }]
]
});
或いはこのようにも書けます。
import { defineNuxtConfig } from "nuxt";
export default defineNuxtConfig({
modules: ["@storyblok/nuxt"],
storyblok: {
accessToken: "アクセストークン"
}
});
Nuxt用StoryBlok SDKのインストール
npmとかpnpmのコマンドでインストールできます。
pnpm install @storyblok/nuxt
これをインストールすることで、Nuxtのルートディレクトリに/storyblokというディレクトリを追加することで、この<StoryblokComponent>などの特有のタグやコンポーネントを含む、StoryBlok Nuxtモジュールがこのディレクトリ内で呼び出せるようになります。
StoryBlok用のVueコンポーネントを追加
まずNuxtのルートディレクトリに/storyblokを作成します。
次に、以下の4つのファイルを/storyblokディレクトリに追加しまししょう。参照しているチュートリアルのファイルそのままです。
<template>
<div v-editable="blok" class="px-4">
<StoryblokComponent v-for="blok in blok.body" :key="blok._uid" :blok="blok" />
</div>
</template>
<script setup>
defineProps({ blok: Object })
</script>
<template>
<div
v-editable="blok"
class="container mx-auto grid md:grid-cols-3 gap-12 my-12 place-items-center"
>
<StoryblokComponent
v-for="blok in blok.columns"
:key="blok._uid"
:blok="blok"
/>
</div>
</template>
<script setup>
defineProps({ blok: Object })
</script>
<template>
<div
v-editable="blok"
class="w-full p-12 bg-[#f7f6fd] rounded-[5px] text-center"
>
<h3 class="text-2xl text-[#1d243d] font-bold">
{{ blok.name }}
</h3>
</div>
</template>
<script setup>
defineProps({ blok: Object })
</script>
<template>
<div
v-editable="blok"
class="py-32 text-6xl text-[#50b0ae] font-bold text-center"
>
{{ blok.headline }}
</div>
</template>
<script setup>
defineProps({ blok: Object })
</script>
最後にもう一つ、Nuxtのデフォルトのトップページを変更しておきましょう。pages/index.vueです。
<script setup>
const story = await useAsyncStoryblok('home', { version: 'draft' })
</script>
<template>
<StoryblokComponent v-if="story" :blok="story.content" />
</template>
<!-- 元々のNuxtインストール時のindex.vueのコード
<template>Hello, world!</template>
<script setup>
definePageMeta({
layout: 'toppage'
})
</script>
-->
最終的に<StoryblokComponent>の中にStoryblokのデータが差し込まれます。
Tailwindの追加
もし使っていないならTailwind CSSもインストールしておけます。
pnpm install @nuxtjs/tailwindcss
そしてコンフィグに追加します。
modules: [
['@storyblok/nuxt', { accessToken: 'アクセストークン' }],
'@nuxtjs/tailwindcss',
]
さらに以下の2つのファイルを必要とします。
module.exports = {
content: [
'storyblok/**/*.{vue,js}'
,'components/**/*.{vue,js}'
,'pages/**/*.vue'
],
}
@tailwind base;
@tailwind components;
@tailwind utilities;
StoryBlok上のデータを確認
ここでStoryBlokのデフォルトのContentであったHomeの中身を確認しておきましょう。管理画面の左側のナビゲーションからContentを選択し、唯一の項目であるHomeを選びます。このような画面になるはずです。
先ほどVisual EditorのLocationで設定したURLを表示しようとしていますのでエラーになっていますね。
https://localhost:8888 というURLでページにアクセスできるようになったら、ここにもそのページが表示されるようになります。
実際に動くようになるとこんなデフォルトの画面が表示されるようになります。
右側を見てみるとTeaserとGridという2つのコンポーネントがあります。それぞれがページの各要素に対応しています。TeaserというところにはHello World!と書かれています。この管理画面で、この文字を変更し、Publishを押すと、実際のサイトでもページの内容が更新されます。（プッシュではないのでページの更新が必要）
同じようにGridを押すと、「Feature 1」「Feature 2」「Feature 3」の文字が編集できる画面に行きます。さらに4つ目を追加してみました。
ではこれがちゃんと表示されるようにローカルホストでHTTPSが使えるように設定しましょう。
ローカル認証局の設定
こちらの記事を参考にさせていただきました。
Mkcertをインストールしてキーを作成します。
brew install mkcert
mkcert -install
mkcert localhost
ここではNuxtプロジェクトのルートディレクトリでこのコマンドを叩きました。nuxt.config.tsなどと同じディレクトリに、localhost.pemとlocalhost-key.pemが作成されました。
ここで動作だけ確認しておきましょう。
pnpm dev --https --ssl-cert ./localhost.pem --ssl-key
或いはnpmやnpx nuxi devなど自分の環境で普通にNuxtを起動してみます。通常はポート3000だと思いますので、これで
https://localhost:3000/ でトップページが表示されれば成功です。この設定の前はhttpだったはずです。
netlify devと併用する
さて問題はnetlify devのコマンドは--https --ssl-cert ./localhost.pem --ssl-keyという引数を受け付けないことです。どうすればこれらを共存させることができるでしょうか。
netlify.tomlという設定ファイル
Netlifyには設定ファイルとしてnetlify.tomlというのを読み込んでくれる仕組みがあります。
これをプロジェクトのルートディレクトリに作成しましょう。
[dev]
[dev.https]
certFile = "localhost.pem"
keyFile = "localhost-key.pem"
debug = true
このようにすることでhttpsで起動し、作ったキーを読み込んで立ち上げてくれます。
他の設定可能項目
[dev]
command = "pnpm dev --https --ssl-cert ./localhost.pem --ssl-key ./localhost-key.pem" # Command to start your dev server
[dev.https]
certFile = "localhost.pem"
keyFile = "localhost-key.pem"
targetPort = 3000
debug = true
このようにしてnetlify devと叩いた時に内部で実行するコマンドw指定したり、ポートを指定したりできます。ただこの辺りをいじらない方が、netlify devの起動後に自動的にブラウザを立ち上げて、localhost:8888を表示してくれるので便利かと思います。
確認
では起動してみましょう。
netlify dev
https://localhost:8888 でこのように表示されています。
StoryBlokのContentのHomeを見てみましょう。さっきはエラーでしたが、今度はこのURLが接続できるようになったので、同じ画面が表示されています。
変更の確認
ではこのVisual Editorから中身をいじってみましょう。
変更する時には該当するコンポーネントを右側から選択します。直感的には真ん中のエディター部分の文字をそのままいじれそうですが、そうではありません。
試しにHello World!の文字を変更してみましょう。左側のTeaserというところを選択すると、この文字列を編集する画面に変わります。
変更を反映させるにはPublishのボタンを押します。
ブラウザに戻ります。プッシュ通知が来るわけではないので、ブラウザのページを更新して変更を確認しましょう。
こうして変更が確認できました！
ページ下部のFeatureの文字を変更したい場合は、Teaserではなく、Gridを選びます。StoryBlokではデータを格納している子ノードに至るまでツリー構造を辿って行ってからその部分を編集することができます。
デプロイ
すでにNetlifyとGitHubが連携しているようであれば、git pushしてGitHubにプッシュすると、Netlifyで勝手にビルド、デプロイのプロセスが始まるはずです。
完了したらそのURLを確認してみましょう。
URLをみると公開されているアドレスであることがわかります。そして同じサイトがきちんとデプロイされているのがわかりますね！
このままStoryBlokの管理画面から編集してみましょう。Publishした後にページを更新すれば、きちんと変更が反映されるのが確認できるはずです。
費用について
最後に費用についてです。Netlify、StoryBlok共に1人で使う分には無料です。
StoryBlok
StoryBlokではCommunityプランというこのページの下の方にひっそりとあるプランが無料で試せます。追加4人まではこのプランで使えますが、2人目以降は一人に対して9ユーロ（2023/02/06現在）かかるようです。つまり2人で使うようになると18ユーロということです。追加一人に対してではなく、無料で使えていた自分もカウントするところが要注意です。
Netlify
デプロイするのが開発担当1人だけであれば無料のまま使い続けても良いでしょう。
2人以上になると無料のStarterプランから外れてProに申し込む必要があります。それも1人に対して19ドル（2023/02/06現在）です。つまり2人で使うようになると38ドルということです。StoryBlokと同じように、追加一人に対してではなく、無料で使えていた自分もカウントするところが要注意です。
終わりに
ヘッドレスcmsを使用する際にネックとなるのが、最終的にページに落とし込んだ時にどのように見えるのかが分かりにくい点です。StoryBlokはその問題に真正面から取り組んでいて、編集者やライターにとっては使いやすいツールと言えるでしょう。
Discussion