「Gatsby」の記事 - Crieit

microCMS の X-API-KEY リニューアルに合わせて Vercel の設定と Gatsby のプロジェクトを更新する

2021-11-05T21:44:25+09:00

メール通知で microCMS の X-API-KEY がリニューアルされたという通知を受け取って対応することにしました。

APIキーをX-MICROCMS-API-KEYへとリニューアルしました。 | microCMSブログ

従来のX-API-KEY, X-WRITE-API-KEY, X-DRAFT-KEYは統合され、X-MICROCMS-API-KEYに変更となります。

APIキーをX-MICROCMS-API-KEYへとリニューアルしました。 | microCMSブログ

とのことなので、これに対応することにします。

microCMS

まずは microCMS 側の作業。新しいAPIキーを発行し直します。

「APIキー管理」のAPIキーの一覧で「旧X-API-KEY」があることを確認。

選択して詳細画面から「削除」を選択。

続いて新しいAPIキーを発行し直します。

X-MICROCMS-API-KEY を発行します。今回はAPI経由では参照しかしないので GET のみの権限とします。

発行されたAPIキーをコピーして控えます。

これで microCMS 側の作業は完了です。

Vercel

続いて Vercel にログインします。

プロジェクトの「Settings」から「Enviroment Variables」に進みます。

API_KEYの値を先ほど控えた値に変更します。

これでOKかと思ったのですが……。

00:03:22.489    error microCMS API ERROR:
00:03:22.489    statusCode: 401
00:03:22.489    message: X-MICROCMS-API-KEY header is invalid.
00:03:22.492    not finished source and transform nodes - 1.046s
00:03:23.631    Error: Command "npm run build" exited with 1

ビルドログを見ると 401エラーでコケていますね。認証に失敗しているようです。

microCMSの新しいX-MICROCMS-API-KEYに対応する | Vanilla note

検索すると、 Gatsby の microCMS 連携のパッケージも更新しないといけないとのこと。

Gatsby プロジェクト

そこで該当パッケージのバージョンをアップデートします。

  "dependencies": {
    // 略
    "gatsby-source-microcms": "^1.2.1",
    // 略
  }

gatsby-source-microcms を

  "dependencies": {
    // 略
    "gatsby-source-microcms": "^2.0.0",
    // 略
  }

2.0.0 にアップデート。

これでビルドを走らせ、正常に完了することを確認しました。

参考

Vercel に関しては自分の過去の記事も参考にして辿りつつ……。

Gatsby.js + Vercel + microCMS の JAMStack 環境を構築する – Ewig Leere(Lab2)

Gatsby.js + Vercel + microCMS の JAMStack 環境を構築する

2021-08-29T00:49:34+09:00

microCMS の設定が完了したので、次は microCMS からデータを取得するように Gatsby.js の方に手を入れます。また、 microCMS と Vercel に設定を加えて連携させ、 Gatsby.js + Vercel + microCMS の JAMStack 環境を構築します。

改修

今回はleonids: Gatsby Starter | Gatsbyを使用しているので、その前提で。

テーマが変わったり、 microCMS のスキーマが変われば諸々の調整が必要となります。

パッケージの追加

> yarn add yarn add gatsby-source-microcms

## 略

Done in 231.79s.

> yarn add marked

## 略

Done in 7.30s.

今回は microCMS を利用するので gatsby-source-microcms を追加します。また、本文コンテンツは Markdown で記述しているのですが Gatsby.js の自前の Markdownパーサまで手が届かなかったので安直に marked を使いました。

それから、内部的には dotenv も使用していますが yarn.lock を見たら既に入っていたので追加はしていません。

gatsby-config.js

さて、改修の最初は Gatsby.js の設定から。

module.exports = {

  // 略

  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },

    // 略

    },
      `gatsby-plugin-feed`,
    {

    // 略

  ],

  // 略

}

これを以下のように修正。

const activeEnv = process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV
if(activeEnv === "development") {
  require("dotenv").config({
    path: `.env.${activeEnv}`,
  })
}

module.exports = {

  // 略

  plugins: [
    {
      resolve: 'gatsby-source-microcms',
      options: {
        apiKey: process.env.API_KEY,
        serviceId: process.env.SERVICE_ID,
        apis: [{
          endpoint: process.env.APIS_ENDPOINT,
        }],
      },
    },

    // 略

    {
      resolve: `gatsby-plugin-feed`,
      options: {
        query: `
          {
            site {
              siteMetadata {
                title
                description
                siteUrl
              }
            }
          }
        `,
        feeds: [
          {
            serialize: ({ query: { site, allMicrocmsHogeHogeBlog } }) => {
              return allMicrocmsHogeHogeBlog.edges.map(edge => {
                return Object.assign({}, edge.node, {
                  description: edge.node.keywords,
                  date: edge.node.date,
                  url: site.siteMetadata.siteUrl + edge.node.slug,
                  guid: site.siteMetadata.siteUrl + edge.node.slug,
                  custom_elements: [{ "content:encoded": edge.node.body }],
                })
              })
            },
            query: `
              {
                allMicrocmsHogeHogeBlog(sort: {fields: [date], order: DESC}) {
                  totalCount
                  pageInfo {
                    perPage
                    pageCount
                  }
                  edges {
                    node {
                      body
                      createdAt
                      date
                      id
                      keywords
                      publishedAt
                      revisedAt
                      slug
                      title
                      updatedAt
                    }
                  }
                }
              }
            `,
            output: "/rss.xml",
            title: "HogeHoge Blog's RSS Feed",
          },
        ],
      },
    },

    // 略

  ],

  // 略

}

変更点は以下。

ローカルのファイルをコンテンツのリソース参照先としていたのを microCMS をリソースとするように修正
gatsby develop 時は問題なかったのですが、 gatsby build 時に RSSフィードを生成する gatsby-plugin-feedプラグインが通常の Markdown の構成をデフォルトにしており、 microCMS に置き換えたことでデータスキーマが異なるとエラーになってしまいました (本番ビルド時に気付いた)。
- そこで、 gatsby-plugin-feedプラグインの GraphQL も今回定義した microCMS のスキーマに沿って変更しました。併せて serializeメソッドの中身もスキーマに合わせて調整。
gatsby-source-microcms | Gatsbyのサンプルコードでは Git 管理下になる gatsby-config.js に APIキー等の情報がそのままベタ書きになってしまうので、 dotenv で外部ファイルに取り出すことで隠蔽しました
- 後述しますが、 Vercel の環境変数も process.env で渡ってくるので、development の場合は dotenv 経由の外部ファイルをパラメータのリソースに、 production の場合は Vercel の環境変数をリソースとするように書き分けました

gatby-node.js

const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  const blogPost = path.resolve(`./src/templates/blog-post.js`)
  const result = await graphql(
    `
      {
        allMarkdownRemark(
          sort: { fields: [frontmatter___date], order: DESC }
          limit: 1000
        ) {
          edges {
            node {
              fields {
                slug
              }
              frontmatter {
                title
              }
            }
          }
        }
      }
    `
  )

  if (result.errors) {
    throw result.errors
  }

  // Create blog posts pages.
  const posts = result.data.allMarkdownRemark.edges

  posts.forEach((post, index) => {
    const previous = index === posts.length - 1 ? null : posts[index + 1].node
    const next = index === 0 ? null : posts[index - 1].node

    createPage({
      path: post.node.fields.slug,
      component: blogPost,
      context: {
        slug: post.node.fields.slug,
        previous,
        next,
      },
    })
  })

  // Create blog post list pages
  const postsPerPage = 5
  const numPages = Math.ceil(posts.length / postsPerPage)

  Array.from({ length: numPages }).forEach((_, i) => {
    createPage({
      path: i === 0 ? `/` : `/${i + 1}`,
      component: path.resolve("./src/templates/blog-list.tsx"),
      context: {
        limit: postsPerPage,
        skip: i * postsPerPage,
        numPages,
        currentPage: i + 1,
      },
    })
  })
}

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

これを以下のように修正。

const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  const result = await graphql(
    `
      {
        allMicrocmsHogeHogeBlog(sort: {fields: [date], order: DESC}) {
          totalCount
          pageInfo {
            perPage
            pageCount
          }
          edges {
            node {
              body
              createdAt
              date
              id
              keywords
              publishedAt
              revisedAt
              slug
              title
              updatedAt
            }
          }
        }
      }
    `
  )

  if (result.errors) {
    throw result.errors
  }

  // Create blog posts pages.
  const posts = result.data.allMicrocmsHogeHogeBlog.edges

  result.data.allMicrocmsHogeHogeBlog.edges.forEach((post, index) => {
    const previous = index === posts.length - 1 ? null : posts[index + 1].node
    const next = index === 0 ? null : posts[index - 1].node

    createPage({
      path: post.node.slug,
      component: path.resolve('./src/templates/blog-post.js'),
      context: {
        slug: post.node.slug,
        previous,
        next,
      },
    });
  });

  // Create blog post list pages
  const postsPerPage = result.data.allMicrocmsHogeHogeBlog.pageInfo.limit || 10
  const numPages = Math.ceil(result.data.allMicrocmsHogeHogeBlog.totalCount / postsPerPage)
  console.log(result.data.allMicrocmsHogeHogeBlog.totalCount, postsPerPage)

  Array.from({ length: numPages }).forEach((_, i) => {
    createPage({
      path: i === 0 ? `/` : `/${i + 1}`,
      component: path.resolve("./src/templates/blog-list.tsx"),
      context: {
        limit: postsPerPage,
        skip: i * postsPerPage,
        numPages,
        currentPage: i + 1,
      },
    })
  })
}

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === `microcmsHogeHogeBlog`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

gatsby-source-microcms | Gatsbyのサンプルコードはシンプル過ぎて GraphQL初心者には分かりづらかったので、 gatsby develop で起動した http://localhost:8000/___graphql の GraphQL を試すGUIでひたすらAPIを叩いてパラメータを変えたりしてどういう GraphQL を作れば望んだレスポンスを得られるか確認しながら地道に調整していきました
ベースのコードをなるべく変えないように調整して、各種プロパティの階層等を調整しました
MarkdownRemark や allMarkdownRemark が Markdownファイルをリソースとする場合のキーのような働きをしているのが分かったので、それを http://localhost:8000/___graphql で表示された microCMS のキーに変更したり

GraphQL の構造やレスポンスに慣れるまで時間がかかりましたが、最終的には http://localhost:8000/___graphql であれこれ試したのが一番効果がありました。

blog-list.tsx

記事一覧ページ。トップページもこのテンプレートから生成されています。

// Gatsby supports TypeScript natively!
import React from "react"
import { PageProps, Link, graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
import { rhythm } from "../utils/typography"

type PageContext = {
  currentPage: number
  numPages: number
}
type Data = {
  site: {
    siteMetadata: {
      title: string
    }
  }
  allMarkdownRemark: {
    edges: {
      node: {
        excerpt: string
        frontmatter: {
          title: string
          date: string
          description: string
        }
        fields: {
          slug: string
        }
      }
    }[]
  }
}

const BlogIndex = ({
  data,
  location,
  pageContext,
}: PageProps) => {
  const siteTitle = data.site.siteMetadata.title
  const posts = data.allMarkdownRemark.edges
  const { currentPage, numPages } = pageContext

  const isFirst = currentPage === 1
  const isLast = currentPage === numPages
  const prevPage = currentPage - 1 === 1 ? "/" : `/${currentPage - 1}`
  const nextPage = `/${currentPage + 1}`

  return (
    
      
      {posts.map(({ node }) => {
        const title = node.frontmatter.title || node.fields.slug
        return (
          
            
              {{
                  marginBottom: rhythm(1 / 4),
                }}
              >
                {{ boxShadow: `none` }} to={node.fields.slug}>
                  {title}
                
              
              {node.frontmatter.date}
            
            
              {{
                  __html: node.frontmatter.description || node.excerpt,
                }}
              />
            
          
        )
      })}

      
        {{
            display: `flex`,
            flexWrap: `wrap`,
            justifyContent: `space-between`,
            listStyle: `none`,
            padding: 0,
          }}
        >
          
            {!isFirst && (
              
                ← Previous Page
              
            )}
          
          
            {!isLast && (
              
                Next Page →
              
            )}
          
        
      
    
  )
}

export default BlogIndex

export const pageQuery = graphql`
  query blogPageQuery($skip: Int!, $limit: Int!) {
    site {
      siteMetadata {
        title
      }
    }
    allMarkdownRemark(
      sort: { fields: [frontmatter___date], order: DESC }
      limit: $limit
      skip: $skip
    ) {
      edges {
        node {
          excerpt
          fields {
            slug
          }
          frontmatter {
            date(formatString: "MMMM DD, YYYY")
            title
            description
          }
        }
      }
    }
  }
`

これを以下のように改修。

// Gatsby supports TypeScript natively!
import React from "react"
import { PageProps, Link, graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
import { rhythm } from "../utils/typography"

type PageContext = {
  currentPage: number
  numPages: number
}
type Data = {
  site: {
    siteMetadata: {
      title: string
    }
  }
  allMicrocmsHogeHogeBlog: {
    edges: {
      node: {
        id: string
        keywords: string
        title: string
        updatedAt: string
        slug: string
        revisedAt: string
        publishedAt: string
        date: string
        createdAt: string
        body: string
      }
    }[]
  }
}

const BlogIndex = ({
  data,
  location,
  pageContext,
}: PageProps) => {
  const siteTitle = data.site.siteMetadata.title
  const posts = data.allMicrocmsHogeHogeBlog.edges
  const { currentPage, numPages } = pageContext

  const isFirst = currentPage === 1
  const isLast = currentPage === numPages
  const prevPage = currentPage - 1 === 1 ? "/" : `/${currentPage - 1}`
  const nextPage = `/${currentPage + 1}`

  return (
    
      
      {posts.map(({ node }) => {
        const title = node.title || node.slug
        return (
          
            
              {{
                  marginBottom: rhythm(1 / 4),
                }}
              >
                {{ boxShadow: `none` }} to={node.slug}>
                  {title}
                
              
              {node.date}
            
            
              {{
                  __html: node.keywords,
                }}
              />
            
          
        )
      })}

      
        {{
            display: `flex`,
            flexWrap: `wrap`,
            justifyContent: `space-between`,
            listStyle: `none`,
            padding: 0,
          }}
        >
          
            {!isFirst && (
              
                ← Previous Page
              
            )}
          
          
            {!isLast && (
              
                Next Page →
              
            )}
          
        
      
    
  )
}

export default BlogIndex

export const pageQuery = graphql`
  query blogPageQuery($skip: Int!, $limit: Int!) {
    site {
      siteMetadata {
        title
      }
    }
    allMicrocmsHogeHogeBlog(
        sort: {fields: [date], order: DESC}
        limit: $limit
        skip: $skip
    ) {
      edges {
        node {
          body
          createdAt
          date(formatString: "YYYY/MM/DD")
          id
          keywords
          publishedAt
          revisedAt
          slug
          title
          updatedAt
        }
      }
    }
  }
`

ここは大々的な改修というよりは、 GraphQL の変更と、それに併せて変化したデータ構造に合わせてプロパティ名やチェーンを調整した感じです。

blog-post.js

import React from "react"
import { Link, graphql } from "gatsby"

import Bio from "../components/bio"
import Layout from "../components/layout"
import SEO from "../components/seo"
import { rhythm, scale } from "../utils/typography"

const BlogPostTemplate = ({ data, pageContext, location }) => {
  const post = data.markdownRemark
  // const siteTitle = data.site.siteMetadata.title
  const { previous, next } = pageContext

  return (
    
      
      
        
          {{
              marginBottom: 0,
            }}
          >
            {post.frontmatter.title}
          
          {{
              ...scale(-1 / 5),
              display: `block`,
              marginBottom: rhythm(1),
            }}
          >
            {post.frontmatter.date}
          
        
        {{ __html: post.html }} />
        
{{
            marginBottom: rhythm(1),
          }}
        />
        
          
        
      

      
        {{
            display: `flex`,
            flexWrap: `wrap`,
            justifyContent: `space-between`,
            listStyle: `none`,
            padding: 0,
          }}
        >
          
            {previous && (
              
                ← {previous.frontmatter.title}
              
            )}
          
          
            {next && (
              
                {next.frontmatter.title} →
              
            )}
          
        
      
    
  )
}

export default BlogPostTemplate

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      excerpt(pruneLength: 160)
      html
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
      }
    }
  }
`

これを以下のように改修。

import React from "react"
import { Link, graphql } from "gatsby"

import Bio from "../components/bio"
import Layout from "../components/layout"
import SEO from "../components/seo"
import { rhythm, scale } from "../utils/typography"
import marked from "marked"

const BlogPostTemplate = ({ data, pageContext, location }) => {
  const post = data.microcmsHogeHogeBlog
  // const siteTitle = data.site.siteMetadata.title
  const { previous, next } = pageContext

  return (
    
      
      
        
          {{
              marginBottom: 0,
            }}
          >
            {post.title}
          
          {{
              ...scale(-1 / 5),
              display: `block`,
              marginBottom: rhythm(1),
            }}
          >
            {post.date}
          
        
        {{ __html: marked(post.body) }} />
        
{{
            marginBottom: rhythm(1),
          }}
        />
        
          
        
      

      
        {{
            display: `flex`,
            flexWrap: `wrap`,
            justifyContent: `space-between`,
            listStyle: `none`,
            padding: 0,
          }}
        >
          
            {previous && (
              
                ← {previous.title}
              
            )}
          
          
            {next && (
              
                {next.title} →
              
            )}
          
        
      
    
  )
}

export default BlogPostTemplate

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
      }
    }
    microcmsHogeHogeBlog(slug: { eq: $slug }) {
      id
      keywords
      title
      updatedAt
      slug
      revisedAt
      publishedAt
      date(formatString: "YYYY/MM/DD")
      createdAt
      body
    }
  }
`

こちらも blog-list.tsx と同様 GraphQL の変更とそれに伴うプロパティ名やチェーンの調整がメインです。本文の Markdown は冒頭の通り時短のため marked を使いました。

こうして見てみると、 GraphQL に慣れるまでかなり紆余曲折した気がするのですが、 blog-list.tsx や blog-post.js は特に出来上がったコードがあまり元から変化していませんね……。

microCMS で APIキーを参照

microCMS で APIキーを控えます。

「サービス設定」→「APIキー」と進みます。今回必要なのは「X-API-KEY」。これを控えておきます。

Vercel の設定

続いて Vercel の設定へ。

環境変数の設定

まずは環境変数の設定。

プロジェクトを選択後、「Settings」から「Enviroment Variables」へ。

「NAME」にコードに記載したキーの名前を付けて、実際の値を入力します。画面では APIキーなので上述の microCMS の管理画面で控えた APIキーを入力。

他、必要な変数をセットします。

Deploy Hooks を登録

次に Deploy Hooks をひっかけます。

プロジェクトの「Settings」から今度は「Git」へ。

Deploy Hooks に名前を入力、ブランチは通常は main になるかと。

登録されたら Hook の URL を控えます。

microCMS の設定

お次は microCMS の画面へ。

サービスの管理画面から「API設定」→「Webhook」へ。

Vercel は一覧にはないので「カスタム通知」を選択。

名前は任意の名前を。

Hook の URL に先ほど控えた URL を入力します。

権限はこのような感じ。基本的に公開されているデータに変更が加わったら Hook が通知を行うものとします。

テスト投稿

ここまで設定できたら、試しに記事を新しく追加してみます。

すると、 Vercel 側でプロジェクトが反応してビルドが走り始めました。

microCMS に記事を追加すると、 Github のリポジトリに push することなく勝手にビルドが走ってサイトが更新されることが確認できました。

これで Gatsby.js + Vercel + microCMS で JAMStack なブログの仕組みが構築できました。実験成功です。

参考

改修

コード、GraphQL、microCMSの設定、環境変数

Vercel の環境変数

環境変数の分かち書き

GatsbyJSで開発環境にのみページを存在させる方法 ++ Gaji-Laboブログ

gatsby-plugin-feed

gatsby-plugin-feed | Gatsby

基本 Gatsby.js のプラグインのページはシンプルなサンプルなので http://localhost:8000/___graphql で GraphQL を試して感覚をつかむ方が早かった気がします。

Gatsby.js + Vercel でブログを作ってみる

2021-08-25T22:14:35+09:00

兼ねてより試してみたかった Gatsby.js + Vercel の組み合わせに着手してみました。

1. Gatsby.js のインストールと Gitリポジトリの準備

まずは Gatsby.js のプロジェクトを作って Gitホスティングサービスに push します。

> yarn init

## 略

success Saved package.json
Done in 2.33s.

適当なディレクトリで package.json を生成。

> yarn add gatsby-cli

## 略

Done in 26.05s.

続いて gatsby-cli をインストールします。一応グローバルではなくローカルで。

: Gatsby Starter | Gatsby

今回のテーマはこれにします。

> gatsby new mptotkb https://github.com/renyuanz/leonids
╔════════════════════════════════════════════════════════════════════════╗
║                                                                        ║
║   Gatsby collects anonymous usage analytics                            ║
║   to help improve Gatsby for all users.                                ║
║                                                                        ║
║   If you'd like to opt-out, you can use `gatsby telemetry --disable`   ║
║   To learn more, checkout https://gatsby.dev/telemetry                 ║
║                                                                        ║
╚════════════════════════════════════════════════════════════════════════╝
info Creating new site from git: https://github.com/renyuanz/leonids.git

Cloning into 'mptotkb'...
remote: Enumerating objects: 60, done.
remote: Counting objects: 100% (60/60), done.
remote: Compressing objects: 100% (44/44), done.
Receiving objects: 100% (60/60), 542.69 KiB | 5.32 MiB/s, done.eceiving objects: 100% (60/60)

success Created starter directory layout
info Installing packages...
info Preferred package manager set to "npm"

## 略

Your new Gatsby site has been successfully bootstrapped. Start developing it by running:

  cd mptotkb
  gatsby develop

プロジェクト作成完了。

> cd mptotkb
> gatsby develop

## 略

info
Hi from the Gatsby maintainers! Based on what we see in your site, these coming
features may help you. All of these can be enabled within gatsby-config.js via
flags (samples below)

Preserve webpack's Cache (https://github.com/gatsbyjs/gatsby/discussions/28331), which changes Gatsby's cache clearing behavior to not clear webpack's
cache unless you run "gatsby clean" or delete the .cache folder manually.
Here's how to try it:

module.exports = {
  flags: { PRESERVE_WEBPACK_CACHE: true },
  plugins: [...]
}

⠀
You can now view gatsby-starter-leonids in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 48.261s

OK。完了しました。

最初は手始めということでこの状態でいったん push しておきたいと思います。 Gitリポジトリに登録するのは親ディレクトリではなく作成したプロジェクト (今回は mptotkb 下) です。

GitHub でリポジトリを作成して、このリポジトリに先ほどのプロジェクトを push 。ちなみにリポジトリは public である必要があります。

2. Vercel と Gitホスティングサービスの連携

次に Vercel でアカウントを作ります。

今回は GitHub を使用しているので「Continue with GitHub」を選択。

「Authorize Vercel」で Vercel のアクセスを認証します。

ログインできました。

3. リポジトリのインポート

一度中断してしまったのでダッシュボードから。ここからであれば「New Project」で次へ進みます。

Import Git Repository から「Add GitHub Org or Account」。

インポートするリポジトリを選択します。今回は1つのリポジトリだけに Vercel に連携させます。

リポジトリの確認です。使用しているフレームワークが自動判別されるのはありがたいですね。

次の画面でフローに沿って設定を進めていきます。最初に Vercel のチームを作成する画面が有効になっていますが、今回は個人なので「Skip」。

プロジェクトの設定。出力の設定や環境変数を設定できますが、今回はそのままで。

デプロイ中。

少し待つとデプロイが完了します。そこでURLから実際の画面を表示させると……きちんとデプロイされていました！

ここまでで Gatsby.js + Vercel でブログを作成することができました。

今後の課題としては以下の通り。

サイト名や著者情報といった基本情報のカスタマイズ
どうやらブログ記事の Markdown ファイルを生成する CLI やユーティリティはなさそうで、手作業で記事をちまちま作っていくのは手間なので記事リソースを別の場所 (Headless CMS とか) で管理して JAMStack にする

あとは折角なので GraphQL にも少しは触ってみたいところですね。

参考

Gatsby.js + Vercel

【ZEIT Now】Gatsbyサイトを無料サーバーVercelで公開する方法を徹底解説 | WebCraftLog
Gatsby + microcms + Vercel でブログを作って公開したい
Vercel – Git - Vercel Documentation
- 参考記事とは画面構成が変わっていたため、最終的には Vercel のドキュメントが頼りでした

Gatsby.js のテーマ

Vercel

NetlifyキラーのVercelでウェブサイトをホストしたら簡単すぎて笑顔になった | DevelopersIO

Gatsby.js

GatsbyとNetlifyで簡単にブログを作成 - Qiita

Netlifyのビルド時間をGitHub Actionsで0時間にして月末のヒヤヒヤから解放されよう！

2021-02-20T15:13:23+09:00

Netlifyのビルド時間をGitHub Actionsで0時間にして月末のヒヤヒヤから解放されよう！

Netlify

みなさんもご存じ超便利ありがたサービスNetlifyですが、無料で使ってる貧民には毎月とある悩みがでてきます。

今月のビルド時間は残り○○分

NetlifyはGitHubのレポジトリと連携して、フロントのビルドを実行した上で、デプロイするという超便利機能があるのですが、このビルドを回すのに時間の制約があり、

無料民だと月300分となっております。(それ以上はPro版月19ドル課金すれば問題なく使えます。課金も経験済み)

300分あれば大丈夫そう、とそう思う気もしなくなくもないですが、

複数レポジトリにわたってNetlifyを使っていたり、Gatsby.jsで画像をたくさん使っていてSharpの画像リサイズに時間がかかったり、Dependabotで定期的にPRが出てPreview deployが発生したりすると
案外ぎりぎりだったりします。

なので、私のような貧民は月末になると、Netlifyのビルド時間が気になってこのブログの記事を書かなくなったり、サイトリファクターのペースが落ちてしまいます。

特にブログ更新は顕著で、例えば今書いている記事も通勤の電車の中でスマホから書いているわけなので、細かくコミットを打って保存したいのですが、コミットを打ってプッシュしてしまうと、ビルドが走ることになるので、WIPでのコミットが億劫になり、結果的に家のようなまとめてプッシュできるような作業スペースがある場所でないと、
ブログを書かなくなってしまいました。

せっかくNetlify CMS化した意味がないですね。

この悩みGitHub Actionsにお任せください

ということでこの悩み、GitHub Actionsで解決してみたいと思います。

なんか工務店のCMみたいな表現になってしまいました。

Netlifyのビルド時やっていることを洗い出して自前でやってみる

基本的にNetlifyがビルド時やってることは、例えばGatsby.jsであれば、gatsby buildコマンドを実行し、特定のディレクトリー(大概は./public)に配置されたビルド済みJSをデプロイする動きなので、
それをそっくりGitHub Actionsに移行すればいいのですが、Netlifyがビルド済みJSに対して後処理(PostProcess)を実行してるパターンもあります。

私の場合、JSやイメージを最適化してくれるAsset optimizationとFormタグに属性をつければ勝手にFormを作ってくれるForm detectionの二つが設定されていましたのでそれぞれまず無効化します。

Form detectionの解説はこちらを参照ください。

こちら、Netlifyで実施してくれなくなりますので、こちらで実装し直す必要があります。

gatsby-plugin-minify

Asset optimizationのうち、JSやCSSのminiferはgatsby-plugin-minifyを使うことでhtmlやJS、CSSをminifyできます。

インストールはいつも通りNPM(yarn)から

npm install gatsby-plugin-minify

使い方はgatsby-config.jsのpluginsに次のように設定すればできます。

    {
      resolve: 'gatsby-plugin-minify',
      options: {
        caseSensitive: false,
        collapseBooleanAttributes: true,
        useShortDoctype: false,
        removeEmptyElements: false,
        removeComments: true,
        removeAttributeQuotes: false,
        minifyCSS: true,
        minifyJS: true,
      },
    },

minifyCSSとminifyJSをtrueにすることにより、CSSについてはclean-css、JSについてはUglifyJSを使って一緒にminifyされます。また、gatsby-plugin-minifyの裏側はhtml-minifierをgatsby-node.jsでpostbuildで全掛けしているだけなので、細かいオプションはhtml-minifierで設定できる感じです。

ちなみに、気を付けないといけないのがremoveAttributeQuotesのオプションをfalseにすること。

これをtrueにすると、HTMLタグ内のアトリビュートにダブルクオートが入らなくなりちょっとファイルが軽くなるのですが、berss.comのようにサイトのRSSリンクを取得するようなシステムでうまく読み込めなくなってしまい、サイト更新が最悪通知できなくなってしまう現象が発生しました。

これで1日使ってしまった...。

RSSのリンクをページのLinkとして仕込んでいる人は要注意です。

imgurを使うことで、画像ホスティングとリサイズを同時にやっちゃう

imgurというサービスがあります。

主にRedditとかGifをあげるための画像ホスティングサービスとして有名なのですが、こちらを使うことで簡単に画像のリサイズとホスティングを実現できるため、このブログではimgurを使ってます。

画像URLの後ろに画像サイズに合わせたキーワードを入れることで実現できます。

例えばこちらのURLの画像を

[https://i.imgur.com/Wfz9G0B.png](https://i.imgur.com/Wfz9G0B.png)

160x160にリサイズするには後ろにbをくっつけます。

[https://i.imgur.com/Wfz9G0Bb.png](https://i.imgur.com/Wfz9G0Bb.png)

これで、画像最適化も完了です。

getform.io

Getform.ioはフォームのバックエンドを提供するすばらしいサービスです。

便利なインテグレーションを使うには有料版が必要ですが、フォームに投稿されたら指定したメールアドレスに通知メール飛ばす、くらいのことであれば無料でできます。

これで、NetlifyのForm detectionを置き換えていきます。

まず、新しいフォームを作ると、FormのAction先URLが発行できます。

Formの作り方は下記のブログにわかりやすく纏めてあったので参照いただければと思います。

https://blog.nakamu.life/posts/getform-io

さて、Formができたらチュートリアルに沿ってそのまま、FormタグのactionにこちらのURLを設定してもいいのですが、GetFormは無料版だと、Form投稿後のThanksページが設定できません。

まぁこれでも十分なのですが、せっかくReactを使ってるので、裏側でgetform.ioのURLをPOST fetchしながら、actionsで定義した自分のThanks URLに飛ばすように指定しましょう。

まずは、FormにonSubmitを設定します。

```typescript{numberLines: 1}{5}

Your name


そして、別途にonSubmitで発火する関数を定義します。

```typescript
  handleSubmit(e) {
    e.preventDefault();
    const form = e.target;
    fetch('https://getform.io/f/xxxxxxxxxxxxxxxxxxxxxxxxx', {
      method: 'POST',
      body: Contact.encode({
        'form-name': form.getAttribute('name'),
        ...this.state,
      }),
    })
  }

Formの送信なので、fetchではFormDataに要素をappendしたものを送信しないといけません。

  static encode(data) {
    const formData = new FormData();
    // eslint-disable-next-line no-restricted-syntax
    for (const key of Object.keys(data)) {
      formData.append(key, data[key]);
    }
    return formData;
  }

繰り返しになりますがReactではFormで、actionのほか、onSubmitを関数としてすることができます。

ただし、onSubmitが押されたタイミングで、Formの入力項目をPOST Fetchで渡さないといけないので、Formの入力で発生するchangeEventごとに、Formの値をstateとして保存しておくようにします。

```typescript{numberLines: 1}{1-7,21}
handleChange(e) {
this.setState({ [e.target.name]: e.target.value });
}

handleAttachment(e) {
this.setState({ [e.target.name]: e.target.files[0] });
}

(中略)

            
               Your name


また、onSubmitを使ってしまうと、Form規定のactionでは飛ばなくなるので自前でGatsbyのnavigateを使ってPost処理が終わったらThanksページに飛ぶようにします。

```typescript{numberLines: 1}{11-12}
  handleSubmit(e) {
    e.preventDefault();
    const form = e.target;
    fetch('https://getform.io/f/897f187e-876d-42a7-b300-7c235af72e6d', {
      method: 'POST',
      body: Contact.encode({
        'form-name': form.getAttribute('name'),
        ...this.state,
      }),
    })
      .then(() => navigateTo(form.getAttribute('action')))
      .catch((error) => alert(error));
  }

これでGetForm無料版でも自前のThanksページを作ることができます。

GitHub Actionsでビルドとデプロイ

ここまで来たらあとはGitHub Actionsでビルドとデプロイを行うだけです。

masterブランチへのPRでPreviewデプロイ、masterへのコミットで本番デプロイをするように2つactionsを作ります。

まずはPreviewデプロイ

name: DeployToNetlifyPreview
on:
  pull_request:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout source code
        uses: actions/checkout@v2
      - name: Cache node_modules
        uses: actions/cache@v1
        with:
          path: node_modules
          key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.OS }}-build-
            ${{ runner.OS }}
      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - name: npm install and build
        env:
          GATSBY_GITHUB_CLIENT_SECRET: ${{secrets.GATSBY_GITHUB_CLIENT_SECRET}}
          GATSBY_GITHUB_CLIENT_ID: ${{secrets.GATSBY_GITHUB_CLIENT_ID}}
          GATSBY_ALGOLIA_SEARCH_API_KEY: ${{secrets.GATSBY_ALGOLIA_SEARCH_API_KEY}}
          GATSBY_ALGOLIA_INDEX_NAME: ${{secrets.GATSBY_ALGOLIA_INDEX_NAME}}
          GATSBY_ALGOLIA_APP_ID: ${{secrets.GATSBY_ALGOLIA_APP_ID}}
          GATSBY_ALGOLIA_ADMIN_API_KEY: ${{secrets.GATSBY_ALGOLIA_ADMIN_API_KEY}}
          FAUNADB_SERVER_SECRET: ${{secrets.FAUNADB_SERVER_SECRET}}
        run: |
          npm install
          npm run build
      - name: Deploy to netlify
        run: npx netlify-cli deploy --dir=./public > cli.txt
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
      - name: Cat cli.txt
        run: |
          cat cli.txt
          sed -i -z 's/\n/\\n/g' cli.txt
      - name: Post Netlify CLI Comment
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          URL: ${{ github.event.pull_request.comments_url }}
        run: |
          curl -X POST \
               -H "Authorization: token ${GITHUB_TOKEN}" \
               -d "{\"body\": \"$(cat cli.txt)\"}" \
               ${URL}

node setupやnpm install, buildはいつも通りです。

GitHub ActionsではSecretを指定することができますので、Algolia searchやFaunaDBのAPIキーはシークレットとしてビルド時の環境変数で渡してます。

ちなみに、環境変数でGATSBY_XXXXとしておくと、ビルドされたJSにも環境変数が入る形になります。（JSから環境変数を使う場合はこれを忘れないこと。）これ結構詰まるポイント。

デプロイにはnetlify-cliを使います。

必要な環境変数はサイトIDとAUTH TOKENです。

ちょっと特徴として、netlify-cliでデプロイが成功すると、デプロイURLが標準出力に出ますので、それをいったん適当なtextファイルに書き出し、

PRコメントにもURLを送るようにしています。

GitHub Actionsの素晴らしいところは、GITHUB TOKENについては、特に設定しなくてもsecrets.GITHUB_TOKENで取り出すことができますので簡単にPRコメントに送信できます。

      - name: Deploy to netlify
        run: npx netlify-cli deploy --dir=./public > cli.txt
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
      - name: Cat cli.txt
        run: |
          cat cli.txt
          sed -i -z 's/\n/\\n/g' cli.txt
      - name: Post Netlify CLI Comment
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          URL: ${{ github.event.pull_request.comments_url }}
        run: |
          curl -X POST \
               -H "Authorization: token ${GITHUB_TOKEN}" \
               -d "{\"body\": \"$(cat cli.txt)\"}" \
               ${URL}

次に本番へのデプロイです。

name: DeployToNetlifyPRD
on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout source code
        uses: actions/checkout@v2
      - name: Cache node_modules
        uses: actions/cache@v1
        with:
          path: node_modules
          key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.OS }}-build-
            ${{ runner.OS }}
      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - name: npm install and build
        env:
          GATSBY_GITHUB_CLIENT_SECRET: ${{secrets.GATSBY_GITHUB_CLIENT_SECRET}}
          GATSBY_GITHUB_CLIENT_ID: ${{secrets.GATSBY_GITHUB_CLIENT_ID}}
          GATSBY_ALGOLIA_SEARCH_API_KEY: ${{secrets.GATSBY_ALGOLIA_SEARCH_API_KEY}}
          GATSBY_ALGOLIA_INDEX_NAME: ${{secrets.GATSBY_ALGOLIA_INDEX_NAME}}
          GATSBY_ALGOLIA_APP_ID: ${{secrets.GATSBY_ALGOLIA_APP_ID}}
          GATSBY_ALGOLIA_ADMIN_API_KEY: ${{secrets.GATSBY_ALGOLIA_ADMIN_API_KEY}}
          FAUNADB_SERVER_SECRET: ${{secrets.FAUNADB_SERVER_SECRET}}
        run: |
          npm install
          npm run build
      - name: Deploy to netlify
        run: npx netlify-cli deploy --prod --dir=./public
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

ほとんど同じですが、netlify-cliでdeployコマンドに --prodオプションを入れることで、本番環境へデプロイされます。

      - name: Deploy to netlify
        run: npx netlify-cli deploy --prod --dir=./public
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

結論

これで、Netlifyのビルド時間は0になり、精神的に安心できるようになりました。

リファクタや記事の執筆もはかどっていいですね！！

GatsbyJsでSitemapを使う

2019-02-09T11:28:59+09:00

GatsbyJSでgatsby-plugin-sitemapを使う

GatsbyJSでGoogleにSiteMapを作成して登録したかったのでプラグインgatsby-plugin-sitemapを実装してみた。

GatsbyJSでgatsby-plugin-sitemapの使い方

インストール
Gatsby-config.jsのセッティング
サンプルコード

Styled Componentsのインストール

npmコマンドでインストールします。

npm install --save gatsby-plugin-sitemap

Gatsby-config.jsのセッティング

Gatsby Config.jsを以下のようにします。

module.exports = {
  siteMetadata: {
    siteUrl: `https://www.example.com`,
  },
  plugins: [`gatsby-plugin-sitemap`],
}

動作確認

gatsby build

で確認すると

Publicフォルダを確認してみるとsitemap.xmlが出来ている。

サーチコンソールからサイトマップを追加してみるとエラーゼロで完成している。

GatsbyJSでStyled Componentsを使う

2019-02-08T18:05:29+09:00

GatsbyJSでStyled Componentsを使う

GatsbyJSでCSSモジュールを用いたスタイリングもいいが、CSSinJSで書いたほうが便利そうということでStyled Componentsを使ってみた。

GatsbyJSでStyled Componentsの使い方

インストール
Gatsby-config.jsのセッティング
サンプルコード

Styled Componentsのインストール

npmコマンドでインストールします。

npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components

Gatsby-config.jsのセッティング

Gatsby Config.jsを以下のようにします。

module.exports = {
  plugins: [`gatsby-plugin-styled-components`],
}

書き直す

index.jsはこのように書き直せます。

import React from 'react'
import { Link } from 'gatsby'
import styled from 'styled-components'

import Layout from '../components/layout'
import Image from '../components/image'

const ImgWrapper = styled.div`
  max-width: 300px;
  margin-bottom: 1.45rem;
`

const IndexPage = () => (
  
    Hi people
    Welcome to your new Gatsby site.
    Now go build something great.
    
      
    
    Go to page 2
  
)

export default IndexPage

header.jsは、このように書き直すことができます。

import React from 'react'
import { Link } from 'gatsby'
import styled from 'styled-components'

const HeaderWrapper = styled.div`
  background: rebeccapurple;
  margin-bottom: 1.45rem;
`

const Headline = styled.div`
  margin: 0 auto;
  max-width: 960;
  padding: 1.45rem 1.0875rem;
  h1 {
    margin: 0;
  }
`

const StyledLink = styled(Link)`
  color: white;
  textdecoration: none;
`

const Header = ({ siteTitle }) => (
  
    
      
        {siteTitle}
      
    
  
)

export default Header

使ってみた感想

かなりStyled Components便利！一長一短ありますが、スコープ効いて名前が長くならないのはいいですね。

GatsbyJsでFontを変更するTypeface編

2019-02-05T18:18:45+09:00

GatsbyJSでFontを変更したい

以前、gatsby-plugin-typographyで対応する方法を検討した。
しかし、Noto Sans JPなどのフォントを使う時はGoogleフォントを読み込んでしまい、パフォーマンスが落ちるのが気になった。

Typefaceを使う

そこで、Gtasbyでは最近Typefaceを推奨している。
npmでインストールしてimportで読み込む仕組みでこっちのほうが早いらしい。
早速使ってみた。

Typefaceのインストール
Layout.jsにインポート
css設定

Typefaceのインストール

今回はlatoというFontをインストールしてみる。

npm install --save typeface-lato

Layout.jsにインポート

インストール出来たらLayout.jsにインポートする

import 'typeface-lato'

これだけではFontは動かないCSSの設定が必要になる。

CSSに記載

CSSに記載する。

 { font-family: Lato }

これで動く。

GatsbyJsでWebpackバンドルサイズを確認する

2019-02-04T08:55:55+09:00

GatsbyJsでWebpackバンドルサイズを確認する

当たり前だがAdSenseを入れるとサイト遅くなった。
原因を探るため我々はGatsbyJsを良い感じにしてくれているWebPackの奥地に向かった。と言えば簡単なのだが
WebPackは魔境だ。僕みたいな素人が触っても火傷するだけ。ということでパッケージを探した。

gatsby-plugin-webpack-bundle-analyzerを使う

gatsby-plugin-webpack-bundle-analyzerというプラグインが便利そうだ。
+ gatsby-plugin-webpack-bundle-analyzerのインストール
+ gatsby-config.jsの設定
+ 確認

gatsby-plugin-webpack-bundle-analyzerのインストール

npm install --save gatsby-plugin-webpack-bundle-analyzer

gatsby-config.jsの設定

gatsby-config.jsの設定を追加してやる

plugins: [
    'gatsby-plugin-webpack-bundle-analyzer',
]

確認

gatsby develop

で自動的にブラウザに表示される。
ただ、毎回起動されるのはウザいので使わないときはコメントアウト推奨。

GatsbyJSでStaticにファイルを置く

2019-01-31T16:14:42+09:00

Staticファイルを置きたい

Gatsbyはイメージファイルなどは自動で圧縮してくれるし、リサイズもしてくれるデキるやつです。
しかし、PWAにサイトをしたり、ソーシャルアイコンのイメージ画像を扱う時は/img/logo.pngなどのようにファイルを扱いたいです。そこでやり方を調べました。

GatsbyJSでStaticにファイルを置く方法

rootディリクトリにstaticフォルダーを作成
staticにファイルを置く
withPrefixを読み込むコンポーネントに記載
gatsby-config.jsに変更

import { withPrefix } from 'gatsby'

render() {
  return ;
}

gatsby-config.jsに変更

module.exports = {
  pathPrefix: `/img`,
}

注意"/img/"と記載してはいけません。

確認

できた！

GatsbyJSにGoogle AdSenseを導入する

2019-01-30T11:24:33+09:00

GatsbyJSにAdSenseを導入する。

ブログをやる以上ドメイン代金くらいは稼ぎたい。そこでGoogle　AdSenseをGatsbyに導入する。

やったこと

react-adsenseの導入
html.jsの作成
コンポーネントを作成
アップロードして確認

react-adsenseの導入

GatsbyでGoogleAdSenseを導入するときはreact-adsenseが便利です。

npm install --save react-adsense

html.jsの作成

GatsbyJSでは