この度株式会社シロクロでは、Jamstackで自社サイトのリニューアルを行いました。
業務ではLP制作やWordpressカスタマイズなどのWeb制作業務が中心であったため、Jamstackとはどのようなものなのか、どんなスキルが必要かなど、全くわからない状態でのスタートでした。そこから自社サイトに実用するまでの紆余曲折をまとめていきます。
※作業環境はMacBookを使用しています。
※当記事は技術的な解説を省略している箇所があります。
なぜJamstack？
自社サイトリニューアルにあたり、ページ速度の向上や保守性を考慮してJamstackの導入を決定しました。
Jamstackとは、事前にjavascriptでAPIからデータを取得し静的HTMLに変換したものを表示させる仕組みです。Webサーバーを使用せず取得したデータを表示するため、ブログサイトやコーポレートサイトのニュースリリースなど、動的コンテンツを導入しているサイトのパフォーマンス改善やセキュリティ対策に有効だそうです。
旧自社サイトでは、サイトパフォーマンスの観点からCMSを導入せずコンテンツ管理を行なっていました。
詳しい内容はこちら：
Web制作会社による自社サイトリニューアルの裏側 | 株式会社シロクロ
しかし、Jamstackはこれまでできなかった 動的にコンテンツを管理する仕組みと、静的HTMLによるサイトパフォーマンスの高さの両立 を可能にします。
実用に向けての準備
初めてのJamstackに向けて、これから勉強すべきことを整理します。
スキルを把握する
まずは、今までの業務で身につけたことをリスト化して、どのくらい役立てられそうかを確認します。私の場合は以下のようになります。
- HTML
- CSS(SASS)
- JS(JQuery、Vue)
- PHP
- WordPress
- GitHub
- FTP
- mac／ターミナルのコマンド操作
多少ターミナルやVueを触った経験はあるものの、さらにJamstackに必要な知識を学習していく必要があると感じました。
Jamstackに必要なものを揃える
①ヘッドレスCMS
Jamstackではjavascriptを用いて、サーバーからAPIデータを取得します。 コンテンツの管理からAPIでの公開までが行える、ヘッドレスCMSというサービスを利用します。
選択したサービス：microCMS
2019年9月にリリースされた、新製の日本製ヘッドレスCMSサービスです。管理画面やドキュメントが日本語で、UIが見やすいため選択しました。また、ドキュメントもJamstack構築の解説が豊富です
②SSG
次に、サーバーからAPIデータを取得して静的HTMLとして書き出す際に使う、静的サイトジェネレーター（SSG）と呼ばれるフレームワークを選びます。
選択したフレームワーク： Nuxt.js
前述のmicroCMS公式ブログにて、Nuxt.jsを用いたJamstackの詳しい解説があり、また、Nuxt.js公式ドキュメントの日本語化が進んでいたためこちらを選択しました。 選択肢としてReactベースのNext.jsもありましたが、VueベースのNuxt.jsの方が学習コストが低いそうです。
参考サイト
Static Site Generators – Top Open Source SSGs | Jamstack（SSGの一覧）
③CDN
最後に、CDNホスティングを導入します。 Jamstackは静的HTMLを設置するため、CDNホスティングを導入しやすいです。CDNには、サイトスピード向上、大量アクセスに耐えられるというメリットがあります。
選択したサービス：Cloudflare Pages
他のホスティングサービスに比べかなりの機能を無料で試せるので、お試しやスタートアップで使用するのはこれがベストだと感じました。
参考サイト
Cloudflare Pages・Vercel ・Netlify の違いや使い分けをまとめる
Jamstackホスティング決定版? Cloudflare Pagesを試してみたよ！
学習の流れを整理する
初めてのJamstackなので、３つの段階に分けて学んでいくことにします。
- ヘッドレスCMSの仕組みを理解する
- SSGを使って表示する（Nuxt.jsの学習）
- CDNに置き、サイトを表示させる
1. ヘッドレスCMSの仕組みを理解する
microCMS公式ドキュメントのチュートリアルを参考に、記事の登録、APIから取得し出力までのコードを書いてみます。
最初なので、記事データの取得はNuxt.jsを使わずにドキュメントの内容にあるJavascriptを使う方法で試しました。
少し書いてはプレビューして確認、という具合で進めます。こうすると書いたコードが動かなかった時、どこでつまずいたかがわかりやすいです。
なんとなく 「ヘッドレスCMSで記事データの管理を行い、登録したデータをJSを使ってAPI取得し出力する」 という使い方がつかめてきました。
※この時点でのプレビューではサーバーを介しているので、Jamstackではありません。
参考サイト
APIの呼び出し コンテンツをブラウザで表示する
2. SSGを使って表示する（Nuxt.jsの学習）
環境を整える
GithubやNuxt.js、それを使うためのNode.jsそれぞれのインストール・操作にはターミナルを使用します。まず感じたのは、ある程度ターミナルやコマンドラインに慣れておく必要があるということです。
Nuxt.jsで開発する
Nuxt.jsでは大まかに以下の工程で作業していきます。
- Nuxtプロジェクトを作成
- Nuxtサーバ（ローカルでプレビューできる機能）を立ち上げる
- Vueファイルを記述していく
(1) Nuxtプロジェクトを作成
ターミナルで作業するフォルダに移動し、Nuxtプロジェクトを作成する。 以下コードを実行するといくつかの質問式の設定が行われるので、それを済ませると完了します。
Nuxtプロジェクトを作成
$ npx create-nuxt-app [プロジェクト名](2) Nuxtサーバ（ローカルでプレビューできる機能）を立ち上げる
作成したプロジェクトフォルダに移動
$ cd [プロジェクト名]ローカル環境を立ち上げる（localhost:3000にアクセスできるようになる）
$ npm run dev参考サイト
Node.js・npmのインストール方法
microCMS + NuxtでJamstackブログを作ってみよう
(3) Vueファイルを記述していく
Nuxtプロジェクトフォルダ内には、専用のディレクトリが複数用意されています。決まったディレクトリに構成するVueファイルを作成することで、nuxtのgenerateで正しく静的HTMLファイルとして書き出されます。
※今回はホスティング先のCDNで自動的にgenerateが行われるため、手元では行いません。
まずはmicrocms公式の解説記事に倣って、シンプルなVueファイルで構成しました。/pages/内に必要なVueファイルを作成していきます。
プレビュー環境（localhost:3000/）で、意図したパスにアクセスできるか、表示の崩れやエラーが起きていないかを確認しながら進めます。 /pages/内はルートディレクトリとして書き出されるので、それぞれアクセスできるパスは以下のようになります。
- pages/index.vue →localhost:3000/
- pages/about.vue→localhost:3000/about
- pages/_slug.vue → localhost:3000/[記事ごとのid]
特に注意が必要なのは、ブログ詳細ページのような動的出力のページです。 こちらはmicrocms公式の解説記事には以下のように記述がありました。
記事詳細画面のように動的なページは _slugのようなディレクトリを間に挟む必要があります。（または _slug.vueでも良い） URLからのパスに応じて slugという変数で値を受け取ることができます。
さらに、slug/index.vue（またはslug.vue）内では動的データを取得する設定が必要です。 動的データをAPIで取得するために、axiosというHTTP通信用のライブラリのインストールと、_slug.vueファイルの中に、APIでデータを取得するために必要な情報（microCMSのAPIキー、エンドポイントのパスなど）を記述します。
また、そのままではgenerate時に「_slug.html」として書き出されてしまいますので、「[記事ID].html」として書き出されるよう、nuxt.config.jsへ設定する必要があります。
今回はmicroCMSが公式で提供しているAPIキーを隠蔽することができるモジュールを入れて、それぞれの記述を修正してみました。
ここまでで、 Nuxt.jsで静的htmlを書き出すには、プロジェクトを立ち上げて、専用のディレクトリに○○.vueファイルを作成していく という構造が理解できました。
参考サイト
microCMSのNuxt.js用モジュールを公開しました ディレクトリ構造 – Nuxt.js
3. CDNに置き、サイトを表示させる
クライアント側にサイトを配信する手段として、今回はCloudflare Pagesを利用します。 CDNはレンタルサーバーとは違い、アクセスのあった時だけ通信が行われます。また、ユーザーに物理的に一番近いCDNから配信されるので表示速度が早く、表側にはビルド後のHTMLしか置いていないので、サーバーへの攻撃の窓口がないという構造を生かしたセキュリティ保守が可能です。
CDNへデータを置く＝デプロイする
レンタルサーバへのアップロードはFTPで行っていましたが、CDNへのデプロイはGithubを使用します。 GithubリポジトリをCDNと連携することで、リポジトリの内容を表示させる仕組みになっています。
- リモートリポジトリを作成
- Nuxt.jsプロジェクトフォルダをpush
- Cloudflareにログインし「Pages」＞「プロジェクトを作成」で、作成したリポジトリを選択し諸々セットアップ。ここで使う「Set up builds and deployments」はNuxt.jsを選択することで、pushされたタイミングでリモートリポジトリ内にてビルドが行われるように。
- 設定完了すると初回のデプロイが始まり、数十秒から数分後完了。
- Visit Siteをクリックで、ビルドしたHTMLがCDNに設置されていることを確認可能。URLはカスタムドメインを当てることも可能。
参考サイト
GitHubの使い方を画像つきで徹底解説・初心者でもすぐ使える！
microCMSで公開や更新後にgenerateされるよう設定
webhookを利用して、microCMSで公開や更新後にも、generateを行なって最新HTMLを表示させるように設定します。
やり方はこちらの「microCMSとNetlifyを連携する」を参照しました。しかしホスティングがCloudflarePagesなのでそちらのやり方を記述します。
当記事を書いている途中で、microCMSブログにてCoudflaere版に対応したとの記事があがりましので、その方法で設定しました。
この機能は、 ビルド回数に制限がある無料のCDNサービスを利用している場合、サイト公開以降にONに した方が良さそうだと感じました。
参考サイト
Webhook先にCloudflare PagesとVercelが追加されました | microCMSブログ
カスタムドメインにサイトの独自ドメインを当てる
出来上がったJamstackサイトを、自社サイトの独自ドメインで閲覧できるように設定します。
- cloudflare pagesのプロジェクト画面から、カスタムドメインのタブに移動
- 参照したい独自ドメインを入力
- DNS を構成から、紐づけるためのCNAMEを発行する
- ドメインレジストラ側の管理画面から、発行した情報でCNAMEを設定する
約1時間ほどでドメインが紐づけられ、リニューアルが完了しました。
今回リニューアルしたサイトはこちらです。
うまくいかなかったこと
手元ではgenerateできるのにCDN上でエラー
microCMSからのAPI取得の記述が簡単になる、nuxt-microcms-moduleを導入したのち、CDNでgenerateがエラーになってしまいました。 こちらのモジュールは、環境変数ファイル.envを作成しその中にAPIキーを入れることで、APIキーをアクセスできない状態で管理することができます。
解決方法
.envファイルはgithub管理されていなかったため、CDNではAPIキーを参照できない状態だったことが原因でした。 cloudflare pagesには、プロジェクトの設定から環境変数を設定することができますので、そちらからAPIキーを登録して解決しました。
非同期ページ遷移で、Webフォント表示が正常に行われない
通常、Webサイトはリンククリックで次のHTMLファイルを読み込み表示します。しかしNuxt.jsのサイト間のページ移動では特殊なリンクタグ <nuxt-link> を使用します。この記述のリンク先がブラウザの表示領域内にあると、次のページを先読みしてくれるので、遷移時に読み込みの必要がなくなります。
ですが、現在表示しているページのサブセットだけ読み込まれた状態で遷移するので、 遷移後のページで、文章内で一部だけフォントが読み込めず種類がバラバラ という事象が起こります。
解決方法
この解決方法は読み込んでいるフォントサービスにより異なります。 自社サイトではFONTPLUSを利用しています。Nuxt.jsに慣れていない分苦労しましたが、公式で用意されているWebAPIを利用して一時的に解消しました。
しかし、このやり方では「遷移後ページの構築後フォントを読み込み」という動きですので、読み込みするフォントが多いページではシステムフォントのチラつきが気になります。
そこで、FONTPLUSの新しいプラン「エンタープライズ・プラン」を導入することになりました。その結果、WebAPIを使わなくても動的ページにWebフォントが表示されるようになりました。 さらに、Webフォントの読み込みがより速くなる仕組みで配信されているので、lighthouseスコアのperformance数値がかなり向上しました。
※こちらのプラン導入に関する詳しい記事は、後日公開予定です。
サブディレクトリにおいていた静的HTMLの設置方法がわからない
自社サイトのサーバー内には、サブディレクトリに置いていたLPが複数ありました。nuxtプロジェクト内はデプロイ後の/dist/が公開ディレクトリとなるのですが、ビルド時にNuxt.jsの干渉を受けずルートディレクトリに設置する方法に悩みました。
解決方法
こちらは、Nuxt.jsで用意されている、 static ディレクトリ内におくことで解決しました。
公式ドキュメントに以下の解説がありました。
staticディレクトリはサーバルートに直接マッピングされ、また変更されない可能性があるコンテンツファイルが含まれています。含まれている全てのファイルは Nuxt によって自動で提供され、プロジェクトのルート URL からアクセスできます。
特定のディレクトリ下のファイルが正常にビルドされない
/static/に静的HTMLのLPのディレクトリを設置してgenerateしても、生成されるindex.htmlが404になってしまいました。
解決方法
nuxtプロジェクトが干渉するファイル内で、静的HTMLのディレクトリへのリンクを ルートパス で記述していたためでした。絶対パスに書き直し、nuxt-linkタグを使用していた箇所はaタグに変更しました。
まとめ
Jamstackの利点を取り入れて自社サイトをリニューアルしました。
- コンテンツ管理を動的に行える
- 静的HTML配信でパフォーマンス改善
- サーバーレス構造によるセキュリティ対策
Jamstackはコーポレートサイトだけでなく、オウンドメディアやポートフォリオサイトにも有効です。 特に、質の高いコンテンツを掲載するサイトでは、サイト表示速度が速くセキュリティ面で安全なサイトから配信することで、より多くの人が訪問してくれる効果が期待できます。
Jamstack構築に関することなら、お気軽にご相談ください
弊社シロクロでは、Web制作においてWordPressでの制作もJamstack構築も承っております。お気軽にお問い合わせください。
