microCMSとNext.jsとAWS Amplifyでブログを作成する

2021年07月11日

はじめに

最近、仕事で、Next.jsや、GatsbyJSと、Contentfulや、microCMSを組み合わせたWebページの開発業務が多く、アフィリエイトや、GoogleAnalytcsなどの技術調査用に、自分のブログを運営すると、色々検証に使えて便利なので、自分でブログを作成してみることにしました。

このブログを構成する技術

最初に、GatsbyJSと、Next.jsどちらを使うか迷いましたが、両方触った経験から、Gatsbyは、TypeScriptに対応するのがちょっとめんどくさかったので、Next.jsを使用することにしました。
次に、ヘッドレスCMSですが、Contentfulは多機能なのですが、いまいちWebのコンソールの操作性が悪く、編集していてイライラすることが多かったことや、ドキュメントがほとんど英語だったので、開発中にストレスを感じることが多く、microCMSを採用しました。
ホスティング環境は、Netlify、Vercelなども検討しましたが、普段AWSを使うことが多いので、Amplifyにホスティングし、SSRや、ISR等を使わず、シンプルにSSGで作成しています。なお、ドメインもRoute53で取得しました。

最終的に、以下の要素を採用しました

Next.js
microCMS
Amplify
Route53

Next.js

普段Reactでアプリを開発することが多いので、React ベースのフレームワークでSSG（スタティックサイトジェネレーション）するとなると、Next.jsかGatsbyJSから選ぶのが一般的です。どちらがどうということはあまりないと思っています。GatsbyJSは個人的に、ちょっと複雑なことをやろうとすると、色々めんどくさいことが多かった印象があり、Next.jsにしました。

microCMS

国産のヘッドレスCMSです。ウォンタ株式会社という会社が運営しているサービスです。最近よく使用されているサービスです。私自身、これまでのキャリアは、組み込み系だったり、パッケージ開発であまりWebサイト、アプリ構築の経験がなく、PHPや、Rubyもほとんど触ったことがないため、WordPressなども使えません。
最近、Webサイト、アプリ開発の仕事をよく受注するようになり、いきなりヘッドレスCMSを使って開発しています。
ヘッドレスCMSは、ビューを持たないCMSで、ビューは、Next.js、GatsbyJS, Nuxt.js等で作成し、コンテンツを、WebAPIやGraphQLで取得して表示します。
Contentfulが有名ですが、海外のサービスのため、日本語回りがいまいち使いづらく、編集もイライラすることが多かったので、今回microCMSを使うことにしましたが、今のところ操作性、ドキュメントともに不満は全くありません。

Amplify、Route53

この手のヘッドレスCMSをつかってWebサイトを構築する場合、Netlifyや、Vercelを使うケースが多い気がします。Web検索しても、大抵の事例がそうです。ただ、私自身AWSを使用した開発が非常に多く、色々なサービスを使うとそれはそれでめんどくさいので、極力AWSにまとめたい思い、Amplifyでホスティングすることにしました。とはいえ、CodeCommitはあまり好きになれないので、コードはGitHubで管理しています。

難しかったところ

全文検索機能を試しに実装してみたのですが、microCMSのAPIで全文検索することができるのですが、全文検索はブラウザからAPIをコールする必要があります。しかしながら、microCMSのAPI-KEYをブラウザに渡すのはセキュリティ的にご法度なので、サーバサイドでコールする必要があります。
Next.jsは、pages/api以下にAPI Routerという形でAPIを定義できるのですが、SSRでNext.jsを実行する必要があります。
Amplifyも最近SSR(サーバーサイドレンダリングをサポートするようになり、package.jsonなどを修正するだけで、簡単にSSRできるのですが、その場合は、

Amplifyの背後に隠されていたCloudFrontや、Lambda@Edgeが見えてしまう
なんか少し遅い気がする（気のせい？）

なので、今回はAmplifyでSSRするのはあきらめました。その代わりに、Lambdaで、記事を検索するAPIをコールし、それを、API Gateway経由で呼び出すようにしました。

最後に

まだまだ、レスポンシブ対応とか、タグ機能など、作り込みしないといけない機能は多々ありますが、とりあえずブログをスタートしたかったので公開しました。おいおい色々やっていきます。
よろしくお願いいたします。