Nuxt.js+GitHub+Netlify+ContentfulでBlog作成

 contentful GitHub javascript Netlify nuxt.js

このサイトの現在の構成が気づいたら上のようになってました。既に情報はたくさんあるので、参考にした記事の紹介。

Nuxt.js側の修正

Nuxt.jsのuniversalモードで動かしてた時は問題にならなかったものを修正しました。具体的にはnpm run generateする時に必要な動的ルーティングの設定だったり、ページングなどで使用してたクエリパラメータをURLに変更するとかです。

以下を参考に作業をしてました。

Netlifyの登録

Netlifyの登録は今回GitHubを使うのでGitHubアカウントで登録しました。一応記事を参考にしながら作業しましたがUIがしっかりしてて分かりやすく、Deployだけなら設定する項目も少ないのでさくさくと行きました。

DNS周りの設定は若干わかりにくかったので記事を参考にしながらやりました。こだわりのない限り、NetlifyのDNSを使う方法がよさそうでした。ちなみにSSLの設定はNetlifyのDNSをドメインで読ませるようにしたら自動的に設定されてました。

Contentfulの更新でもDeployをする

Netlifyに登録した時点でGitHubに更新があった場合に自動的にDeployが走るのですが、Contentfulで投稿を作成した時もDeployするようにしました。
Contentfulでは更新時にWebhookを飛ばせる機能があり、それをNetlifyが受け取ることでDeployが走るといった仕組みです。

やってみての感想

ここからねこのお気持ちのターン。

いわゆるJAMStackと言われるものです。JAMStackとはなにかはmicroCMSのほうでも説明されてる記事があるのでそちらを見てください。

VPSにデプロイ環境を作る時は、GitHub Actionsを使ってrsyncしてSSHでコマンド発行してみたいなことをやってたのですが、NetlifyのほうはGUIでちょっとした情報をぽちぽち入力するだけでデプロイができるというお手軽さが魅力でした。基盤となるソースコードを更新したらDeployが走るし、Contentfulで投稿書いてもDeployが走るので常に最新の状態のものが配信される環境になるのは気持ちが良いです。

ユーザーからの入力が多いWebサービス系は普通にSPAが良いと思いますがBlogやちょっとした企業ページであればパフォーマンス向上や保守性が高まるのでJAMStackな構成にするのはいいんじゃないかと。

ただ今の所、JAMStackを実現するためのフロント側の実装がフレームワーク依存だったりプログラマ寄りだったりでそれを覚えなきゃいけないってのは一部のデザイナー層にとっては壁なのかなぁと感じてます。Vueは認知されつつあるしなんとかなりそう、でもAPIを取得するのにfetchやPromise、async/awaitとか出てきて何これ……みたいな。

Headless CMSは外部サービス使えば実装しなくていいし(クライアントへの説明が不安?日本製のmicroCMSがあるよ!)、ホスティング先もあまり考えなくてよい、ただフロントは自分で組まないといけない。SSRのことも考えないといけない。Nuxt.jsは割とそういうのを考えなくていいように作られていますが、静的生成を行うために書くroutes()が少し複雑化するだけで普通にゴリゴリ書く必要が出てくるのでうーんという印象。

ちなみに今回のroutes()はこんな感じ。書いてて正直ここだけ気持ちよくなかった。

module.exports = {
  generate: {
    async routes () {
      const PER_PAGE = 6
      const client = createClient({
        space: process.env.CTF_SPACE_ID,
        accessToken: process.env.CTF_ACCESS_TOKEN,
      })

      const routes = []
      const postsPayload = await client.getEntries({
        content_type: 'post',
      })

      postsPayload.items.forEach((post) => {
        routes.push({
          route: `/posts/${post.fields.slug}`,
          payload: post,
        })
      })

      const maxPage = Math.ceil(postsPayload.total / PER_PAGE)
      for (let page = 1; page <= maxPage; page++) {
        routes.push(`/pages/${page}`)
      }

      const tagsPayload = await client.getEntries({
        content_type: 'tag',
      })

      await Promise.all(tagsPayload.items.map(async (tag) => {
        routes.push(`/tags/${tag.fields.slug}`)

        const payload = await client.getEntries({
          content_type: 'post',
          select: '',
          'fields.tags.sys.id': tag.sys.id,
        })

        const maxPage = Math.ceil(payload.total / PER_PAGE)
        for (let page = 1; page <= maxPage; page++) {
          routes.push(`/tags/${tag.fields.slug}/pages/${page}`)
        }
      }))

      return routes
    },
  },
}

デザイナーと別にフロントエンジニアが居るのであれば問題にならないのですが、一人でやってるフリーランスの方はどうなんだろうなぁと思うわけです。もちろん出来る人は居るとおもうのでそういう人は是非JAMStackというアプローチをしてください。間接的に私の仕事も楽になります。(WordPress案件つらい)

このへんいい感じに解消してくれるフレームワークが出たらもっと流行りそうな気はしてます。

JAMStackという概念自体はとても素晴らしいものだと思っているので普及させたいし、していくといいなと思います。

Published at 2020-03-07 00:31