静的サイトジェネレータとして有名なGatsby。

触ったことが無かったが、ちょうど使用する機会があったため、公式チュートリアルを一通りやってみる。
その雑多なまとめ。

今回触れていること

Gatsbyの説明
チュートリアルに沿ったGatsbyの基本的な使い方
GraphQL
GAEへのデプロイ

公式チュートリアルはこちら www.gatsbyjs.com

とても親切に出来ていて助かる。

Gatsbyとは

この記事が分かりやすい。 qiita.com

ここも見とくと具体的に何が利点なのか分かる。 qiita.com

特徴としては以下が挙げられる。

Reactで作られた静的サイトジェネレーター
静的サイトジェネレーターだが、axiosなどを使った、非同期のdata fetchも可能。
GraphQLと相性良い
Gatsby プラグインが多数あり便利（TypeScript化,PWA対応...）
爆速
サーバーを気にしないで済む

Reactを触ったことがある人ならすぐ使える。
学習コストがあまり高くないのは利点。
GraphQLは完全に把握するのは少し難易度高そうな感じ。

仕組みを大まかに把握して所で実際に触ってみる。

0. Set Up Your Development Environment

環境構築はチュートリアルに沿っていけば問題ない。

# gatsbyサイト新規作成
gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO]
# 開発サーバー起動（http://localhost:8000/ で確認）
gatsby develop

1. Get to Know Gatsby Building Blocks(Surgeを使用したデプロイ)

JSXの説明、Reactの説明がされているがこの部分はさっと読み流し。

「src/pages/」に設置するとページとして認識される。
試しに「src/pages/about.js」を作成し、「http://localhost:8000/about」で確認してみるとページが確認できる。

再利用できるコンポーネントはサブコンポーネントとして「src/components」に作る。
「src/components/header.js」を作成し、about.jsで読み込んでみるとheader.jsが/aboutに表示されていることが確認できる。

Gatsby コンポーネント（Link）の使用は以下の様に行う。

import React from "react"
import { Link } from "gatsby"
import Header from "../components/header"
export default function Home() {
  return (
    <div style={{ color: `purple` }}>
      <Link to="/contact/">Contact</Link>
      <Header headerText="Hello Gatsby!" />
      <p>What a world.</p>
      <img src="https://source.unsplash.com/random/400x200" alt="" />
    </div>
  )
}

Gatsbyサイトで処理されないページへの外部リンクについては、通常のaタグで行うとのこと。

GatsbyというかReactのチュートリアルに近い。

Surgeを使用したデプロイが紹介されていたので試す。

npm install --global surge
# surgeアカウントがない場合は画面に従って作成
surge login

# ビルドするとpublicフォルダに生成される
gatsby build

# surgeデプロイ
surge public/
# domainに記載されているURLを開くとページが確認できる

surgeについてはこちら surge.sh

コマンド解説 dotstud.io

2. Introduction to Styling in Gatsby

グローバルスタイルを試す。

gatsby-browser.jsをルートディレクトリに作成し、任意の場所に作成したCSSファイルを読み込むと、全体のページにスタイルが適用されているのが確認できる。

gatsby-browser.js

import "./src/styles/global.css"

CSSモジュールを試す。

以下のディレクトリとファイルを作成。

src/components/container.js

import React from "react"
import containerStyles from "./container.module.css"
export default function Container({ children }) {
  return <div className={containerStyles.container}>{children}</div>
}

src/components/container.module.css

.container {
  margin: 3rem auto;
  max-width: 600px;
}

src/pages/about-css-modules.js

import React from "react"
import Container from "../components/container"
export default function About() {
  return (
    <Container>
      <h1>About CSS Modules</h1>
      <p>CSS Modules are cool</p>
    </Container>
  )
}

/about-css-modulesを確認するとCSSが適用されていることが確認できる。

コンポーネントを作成し、そのコンポーネントにスタイルを設定する場合は以下の様にする。

src/pages/about-css-modules.js

import React from "react"
import styles from "./about-css-modules.module.css"
import Container from "../components/container"

const User = props => (
  <div className={styles.user}>
    <img src={props.avatar} className={styles.avatar} alt="" />
    <div className={styles.description}>
      <h2 className={styles.username}>{props.username}</h2>
      <p className={styles.excerpt}>{props.excerpt}</p>
    </div>
  </div>
)

export default function About() {
  return (
    <Container>
      <h1>About CSS Modules</h1>
      <p>CSS Modules are cool</p>
      <User
        username="Jane Doe"
        avatar="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg"
        excerpt="I'm Jane Doe. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
      />
      <User
        username="Bob Smith"
        avatar="https://s3.amazonaws.com/uifaces/faces/twitter/vladarbatov/128.jpg"
        excerpt="I'm Bob Smith, a vertically aligned type of guy. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
      />
    </Container>
  )
}

3. Creating Nested Layout Components

Typography.jsの使用を試す。

npm install gatsby-plugin-typography react-typography typography typography-theme-fairy-gates

ルートディレクトリにgatsby-config.jsを作成。

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}

gatsby-config.jsはプラグインやその他のサイト構成を追加するファイルとのこと。
詳細はここから。 www.gatsbyjs.com

Typography.jsの設定ファイルを作成

src/utils/typography.js

import Typography from "typography"
import fairyGateTheme from "typography-theme-fairy-gates"

const typography = new Typography(fairyGateTheme)

export const { scale, rhythm, options } = typography
export default typography

開発サーバーを再起動して、Chrome開発者ツールでheadタグ内を見てみると、
styleタグ内にTypography.jsのスタイルが記載されていることが確認できる。
また、ページ内のフォントが変更されていることが確認できる。

レイアウトコンポーネントについて。

以下の様に枠を作成して、呼び出すだけで統一したレイアウトにすることが出来る。

src/components/layout.js

import React from "react"

export default function Layout({ children }) {
  return (
    <div style={{ margin: `3rem auto`, maxWidth: 650, padding: `0 1rem` }}>
      {children}
    </div>
  )
}

src/pages/index.js

import React from "react"
import Layout from "../components/layout"

export default function Home() {
  return (
    <Layout>
      <h1>Hi! I'm building a fake Gatsby site as part of a tutorial!</h1>
      <p>
        What do I like to do? Lots of course but definitely enjoy building
        websites.
      </p>
    </Layout>
  );
}

layout.jsにナビゲーションリンクなど付けると更に便利だよ、というような内容だった。

4. Data in Gatsby(GraphQL)

GraphQLの公式サイトにもチュートリアルがある。 www.howtographql.com

まず、サイトのタイトルがバラバラなので1つの場所にまとめましょうとのこと。
gatsby-config.jsのsiteMetadata＞titleに任意のタイトル名を記載。

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Title from siteMetadata`,
  },
  plugins: [
    `gatsby-plugin-emotion`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}

以下の様にするとgatsby-config.jsで指定したtitleを使用できる。
開発サーバーを再起動すると確認できる。
gatsbyからgraphqlを読み込んで、const queryを作成している。
ページコンポーネントでのみ使用可能とのこと。

src/pages/about.js

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"

export default function About({ data }) {
  return (
    <Layout>
      <h1>About {data.site.siteMetadata.title}</h1>
      <p>
        We're the only site running on your computer dedicated to showing the
        best photos and videos of pandas eating lots of food.
      </p>
    </Layout>
  )
}

export const query = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
`

StaticQueryの使用を試す。

StaticQueryはGatsbyのバージョン2で導入された新しいAPIで、ページ以外のコンポーネント（layout.jsコンポーネントなど）がGraphQLクエリを介してデータを取得できる、とのこと。

useStaticQueryを使用する。

src/components/layout.js

import React from "react"
import { css } from "@emotion/core"
import { useStaticQuery, Link, graphql } from "gatsby"

import { rhythm } from "../utils/typography"
export default function Layout({ children }) {
  const data = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
          }
        }
      }
    `
  )
  return (
    <div
      css={css`
        margin: 0 auto;
        max-width: 700px;
        padding: ${rhythm(2)};
        padding-top: ${rhythm(1.5)};
      `}
    >
      <Link to={`/`}>
        <h3
          css={css`
            margin-bottom: ${rhythm(2)};
            display: inline-block;
            font-style: normal;
          `}
        >
          {data.site.siteMetadata.title}
        </h3>
      </Link>
      <Link
        to={`/about/`}
        css={css`
          float: right;
        `}
      >
        About
      </Link>
      {children}
    </div>
  )
}

gatsby-config.jsのタイトルを変えてみるとすぐに反映することが確認できる。

5. Source Plugins

GraphQLとソースプラグインを使用してGatsbyサイトにデータを取り込む方法について試す。

名前がややこしいがGraphiQLというGraphQL統合開発環境があるらしい。 http://localhost:8000/___graphqlでアクセスできる。

使いたいデータ構造を予め作成できる感じか。

Gatsbyサイトのデータは、API、データベース、CMS、ローカルファイルなど、どこからでも取得できるとのこと。

例としてgatsby-source-filesystemを使用している。

npm install gatsby-source-filesystem

gatsby-config.jsにgatsby-source-filesystemを追加。

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Pandas Eating Lots`,
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    `gatsby-plugin-emotion`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}

開発サーバーを再起動し、GraphiQLで確認すると、allFile、fileが追加されている。

GraphiQLでクエリにフィールドを追加して、実行すると結果が確認できる。
因みにExplolerボタンでコピペ用のコードが表示される。

試しに以下の様にして確認してみる。
（/pageで作成したファイル一覧が表示される）

src/pages/my-files.js

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"

export default function MyFiles({ data }) {
  console.log(data)
  return (
    <Layout>
      <div>
        <h1>My Site's Files</h1>
        <table>
          <thead>
            <tr>
              <th>relativePath</th>
              <th>prettySize</th>
              <th>extension</th>
              <th>birthTime</th>
            </tr>
          </thead>
          <tbody>
            {data.allFile.edges.map(({ node }, index) => (
              <tr key={index}>
                <td>{node.relativePath}</td>
                <td>{node.prettySize}</td>
                <td>{node.extension}</td>
                <td>{node.birthTime}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </Layout>
  )
}

export const query = graphql`
  query {
    allFile {
      edges {
        node {
          relativePath
          prettySize
          extension
          birthTime(fromNow: true)
        }
      }
    }
  }
`

6. Transformer plugins

ファイル内のデータをクエリすることを可能にするためにTransformer pluginsがあるとのこと。

例としてマークダウンファイルをHTMLに変換するgatsby-transformer-remarkを使用している。
ここでやっていることは、マークダウンファイルを読み込んでトップページにリストとして表示、という感じ。

マークダウンファイル作成

src/pages/sweet-pandas-eating-sweets.md

---
title: "Sweet Pandas Eating Sweets"
date: "2017-08-10"
---

Pandas are really sweet.

Here's a video of a panda eating sweets.

<iframe width="560" height="315" src="https://www.youtube.com/embed/4n0xNbfJLR8" frameborder="0" allowfullscreen></iframe>

npm install gatsby-transformer-remark

gatsby-config.js修正

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Pandas Eating Lots`,
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    `gatsby-transformer-remark`,
    `gatsby-plugin-emotion`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}

開発サーバーを再起動すると、allMarkdownRemarkが追加されているので、マークダウンファイルに関するフィールドを使用することができる。

index.jsを修正して試す。

src/pages/index.js

import React from "react"
import { graphql } from "gatsby"
import { css } from "@emotion/core"
import { rhythm } from "../utils/typography"
import Layout from "../components/layout"

export default function Home({ data }) {
  console.log(data)
  return (
    <Layout>
      <div>
        <h1
          css={css`
            display: inline-block;
            border-bottom: 1px solid;
          `}
        >
          Amazing Pandas Eating Things
        </h1>
        <h4>{data.allMarkdownRemark.totalCount} Posts</h4>
        {data.allMarkdownRemark.edges.map(({ node }) => (
          <div key={node.id}>
            <h3
              css={css`
                margin-bottom: ${rhythm(1 / 4)};
              `}
            >
              {node.frontmatter.title}{" "}
              <span
                css={css`
                  color: #bbb;
                `}
              >
                — {node.frontmatter.date}
              </span>
            </h3>
            <p>{node.excerpt}</p>
          </div>
        ))}
      </div>
    </Layout>
  )
}

export const query = graphql`
  query {
    allMarkdownRemark {
      totalCount
      edges {
        node {
          id
          frontmatter {
            title
            date(formatString: "DD MMMM, YYYY")
          }
          excerpt
        }
      }
    }
  }
`

新たなマークダウンファイルを作成すると、/indexの表示が変わることが確認できる。

またソートも可能で、GraphiQLでallMarkdownRemarkのソートフィールドを追加すれば、ソートが可能になる。
ここで便利さを改めて実感した。

7. Programmatically create pages from data

今度はマークダウンファイルごとのページを作成する。

そのためにはslugの作成が必要とのこと（https://www.gatsbyjs.com/tutorial/part-seven/の/tutorial/part-sevenの部分をslugと言う）。

Gatsby APIの内、2つのAPI（onCreateNode,createPages）を使用してマークダウンファイルからページを作成する。

Gatsby APIを使用するにはgatsby-node.jsを作成し、APIの名前を付けて関数をエクスポートする。

gatsby-node.js

exports.onCreateNode = ({ node }) => {
  console.log(`Node created of type "${node.internal.type}"`)
}

開発サーバーを再起動すると、ターミナルにコンソールログが表示される。

進んでいくと、以下の様なファイル名を取得する処理の話になる。
MarkdownRemarkノードではファイル名が取得できないため、
getNode(node.parent)で親ノードを指定し、そこからrelativePathを取得しているとのこと。

gatsby-node.js

exports.onCreateNode = ({ node, getNode }) => {
  if (node.internal.type === `MarkdownRemark`) {
    const fileNode = getNode(node.parent)
    console.log(`\n`, fileNode.relativePath)
  }
}

ただ、gatsby-source-filesystemで既に機能としてあるため以下の様な書き方で、slugの作成まで行うことが可能。

gatsby-node.js

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

exports.onCreateNode = ({ node, getNode }) => {
  if (node.internal.type === `MarkdownRemark`) {
    console.log(createFilePath({ node, getNode, basePath: `pages` }))
  }
}

次に、nodeの作成（API→onCreateNode）。

gatsby-node.js

const { createFilePath } = require(`gatsby-source-filesystem`)
exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === `MarkdownRemark`) {
    const slug = createFilePath({ node, getNode, basePath: `pages` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

GraphiQLで確認すると、新たなslugが追加されている。

次に、ページ作成（API→createPages）。

gatsby-node.js

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

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === `MarkdownRemark`) {
    const slug = createFilePath({ node, getNode, basePath: `pages` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const result = await graphql(`
    query {
      allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `)

  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    createPage({
      path: node.fields.slug,
      component: path.resolve(`./src/templates/blog-post.js`),
      context: {
        // Data passed to context is available
        // in page queries as GraphQL variables.
        slug: node.fields.slug,
      },
    })
  })
}

テンプレートを通してページとなるため、専用のファイルを作成。

src/templates/blog-post.js

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"

export default function BlogPost({ data }) {
  const post = data.markdownRemark
  return (
    <Layout>
      <div>
        <h1>{post.frontmatter.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: post.html }} />
      </div>
    </Layout>
  )
}

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
      }
    }
  }
`

開発サーバーを再起動し、マークダウンファイルの名前でアクセスするか、
適当にhttp://localhost:8000/sdfと存在しないパスを指定してから、対象のページへリンクすると確認できる。

最後にトップページにリンクを設定。

src/pages/index.js

import React from "react"
import { css } from "@emotion/core"
import { Link, graphql } from "gatsby"
import { rhythm } from "../utils/typography"
import Layout from "../components/layout"

export default function Home({ data }) {
  return (
    <Layout>
      <div>
        <h1
          css={css`
            display: inline-block;
            border-bottom: 1px solid;
          `}
        >
          Amazing Pandas Eating Things
        </h1>
        <h4>{data.allMarkdownRemark.totalCount} Posts</h4>
        {data.allMarkdownRemark.edges.map(({ node }) => (
          <div key={node.id}>
            <Link
              to={node.fields.slug}
              css={css`
                text-decoration: none;
                color: inherit;
              `}
            >
              <h3
                css={css`
                  margin-bottom: ${rhythm(1 / 4)};
                `}
              >
                {node.frontmatter.title}{" "}
                <span
                  css={css`
                    color: #555;
                  `}
                >
                  — {node.frontmatter.date}
                </span>
              </h3>
              <p>{node.excerpt}</p>
            </Link>
          </div>
        ))}
      </div>
    </Layout>
  )
}

export const query = graphql`
  query {
    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
      totalCount
      edges {
        node {
          id
          frontmatter {
            title
            date(formatString: "DD MMMM, YYYY")
          }
          fields {
            slug
          }
          excerpt
        }
      }
    }
  }
`

8. Preparing a Site to Go Live

Lighthouseでサイト診断。

# ビルド
gatsby build
# ローカルで本番サイトを確認するためのコマンド
gatsby serve

こんな感じで診断結果が表示される。 f:id:dollsSK:20200925224118p:plain

ここでチュートリアルは大体完了。

9.GAEへデプロイ

GCPは完全に初心者だったので、まず環境構築からだったが、デプロイ完了までそこまで時間はかからなかった（1,2時間くらい？）。

以下の記事を元に、まずデプロイするまでざっくりやってみる。

公式サイトとこちらの記事を参考。 cloud.google.com shotat.hateblo.jp

gcloudコマンドのインストール等も公式とこちらの記事を参考にした。 qiita.com

初期設定等が完了したら、デプロイするアプリのルートディレクトリにapp.yamlを作成。

runtime: php55
api_version: 1

handlers:
# file with extensions (e.g. .html)
- url: /(.*\..*)
  static_files: public/\1
  upload: public/(.*)

- url: /(.*)/
  static_files: public/\1/index.html
  upload: public/(.*)/index.html

- url: /
  static_files: public/index.html
  upload: public/index.html

- url: /(.*)
  static_files: public/\1/index.html
  upload: public/(.*)/index.html

skip_files:
  - node_modules/
  - src/
  - \.cache/
  - package\.json
  - yarn\.lock

後はコマンドを打つだけ。

# デプロイ
gcloud app deploy
# アプリの表示
gcloud app browse

まとめ

次は簡単なwebアプリを作ってみる。
GraphQL、GCP(GAE)も今回初めて触ったので、まとめて記事にする。
Next.jsもあまり明るくないので、実際に触ってみてGatsbyと比較してみる。

bibi

学んだ技術や本をアウトプットをするだけ

Gatsbyチュートリアル

Gatsbyとは

0. Set Up Your Development Environment

1. Get to Know Gatsby Building Blocks(Surgeを使用したデプロイ)

2. Introduction to Styling in Gatsby

3. Creating Nested Layout Components

4. Data in Gatsby(GraphQL)

5. Source Plugins

6. Transformer plugins

7. Programmatically create pages from data

8. Preparing a Site to Go Live

9.GAEへデプロイ

まとめ