こんにちはかみむらです。個人的な肌感で、Jamstackアーキテクチャーの構成でWEBサイトを公開する企業が増えてきた気がします。最近では日本製Headless CMS「microCMS」も登場して、だいぶ日本でも採用しやすい環境が整ってきました。
私もJamstackアーキテクチャー推しな一人なので、現在色々な構成で試作をしています。
今回は、Ghostのブログ記事に触発されて、GatsbyJS + Ghostの構成をローカルで動かしてみます。GhostはNode.js製のヘッドレスCMSで、オープンソースで公開されています。Ghostの環境はDockerで準備します。
Jamstackアーキテクチャーの詳細は、こちらの記事も参照して下さい。
前提
Node version
v10.16.3
Docker version
Docker version 19.03.5, build 633a0ea
GhostをDockerで準備
まずは、DockerでGhostの環境を整えていきます。Ghostの環境作成は簡単で、下記のコマンド一行です。
$ docker run -p 2368:2368 -d ghost:latest
そして、Ghostのコンテナが立ち上がってるか確認してください。
$ docker ps
localhost:2368にアクセスしてみましょう。無事にアプリケーションが起動していることが確認できます。
そして、localhost:2368/ghostにアクセスして、ユーザーの作成画面に移ります。Create your accountをクリックして、作成します。今回はローカルで起動しているので、作成項目は好きにしてもらって大丈夫です。
アカウントの作成が終わったら、ダッシュボードのIntegrationsからAdd custome integrationをクリックします。そして、名前を入力後にCreateをクリックします。
GatsbyJSでGhostのAPIを取得するために、Content API Keyと、API URLが必要になります。右上のSaveをクリックすると、Integrationsを作成できます。
これで、Ghost側の設定ができました。ここからはGatsbyJSでフロントを構成していきます。
GatsbyJSでフロント部分を作成
GastsbyJSのフロント部分は、一から構成するのではなく、Ghostが公式で出しているスターターテンプレートを使います。
ちなみにここで、デモを見ることができます。クオリティーが高いです。
ローカルにcloneした後に、インストールして下さい。
$ git clone https://github.com/tryghost/gatsby-starter-ghost $ cd gatsby-starter-ghost $ yarn install
ここでは、gatsby-source-ghostプラグインで、GhostのAPIをラップしてGatsbyまたは、GraphQLとの互換性を持たせています。
例えば、GatsbyJS内で、Ghostのブログポストをすべて取得する場合は、GraphQLで取得します。
export const pageQuery = graphql` query GhostPostQuery($limit: Int!, $skip: Int!) { allGhostPost( sort: { order: DESC, fields: [published_at] }, limit: $limit, skip: $skip ) { edges { node { ...GhostPostFields } } } }
gatsby-starter-ghostのコードから参照
プロジェクト内にある.ghost.jsonにGhostのAPI URLと、Content API Keyをいれてください。
.ghost.json
{ "development": { "apiUrl": "http://localhost:2368", "contentApiKey": "XXXXXXXXX" }, "production": { "apiUrl": "http://localhost:2368", "contentApiKey": "XXXXXXXX" } }
これで、アプリケーションを立ち上げてみましょう。
$ yarn serve
GatsbyJSのアプリケーションが立ち上がりました。Ghostで管理しているコンテンツが表示されていることが確認できます。