
[Making a Site with User Authentication \| Gatsby](https://www.gatsbyjs.com/tutorial/authentication-tutorial/) のチュートリアルを試した時の作業を備忘録としてまとめました。

全体の実装は [t-yng/examples/gatsby-auth](https://github.com/t-yng/examples/tree/master/gatsby-auth) を参照してください。

## 要件
* ログイン、ログアウトができる
* 非ログイン状態で要認証ページが表示できないこと

## プロジェクトの作成

```
$ gatsby new gatsby-auth gatsbyjs/gatsby-starter-hello-world
$ cd gatsby-auth
```

## ナビゲーションバーを実装
ナビゲーションバーのコンポーネントを作成する。

```typescript
// src/components/NavBar.tsx
import React from "react";
import { Link } from "gatsby";

export const NavBar = () => (
  <div
    style={{
      display: "flex",
      flex: "1",
      justifyContent: "space-between",
      borderBottom: "1px solid #666",
    }}
  >
    <span>gatsby-auth</span>
    <nav>
      <Link to="/">Home</Link>
    </nav>
  </div>
);
```

ページのレイアウトコンポーネントを実装して、NavBarを追加します。

```typescript
// src/components/Layout
import React from "react";
import { NavBar } from "./NavBar";

export const Layout = ({ children }) => (
  <>
    <NavBar />
    {children}
  </>
);
```

ホーム画面をLayoutコンポーネントを使って、修正します。

```typescript
// src/pages/index.tsx
import React from "react";
import { Layout } from "../components/Layout";

const Home = () => (
  <Layout>
    <div>This is Home</div>
  </Layout>
);

export default Home;
```

## ユーザー認証の実装

最初にユーザーの型定義をモデルとして実装します。

```typescript
// src/models/user.ts
export type User = {
  name: string;
  password: string;
};
```

次にユーザー認証のロジックを実装します。

```typescript
// src/services/auth.ts
import { User } from '../models/user';

export const login = (username: string, password: string) => {
  if (username === 'taro' && password === 'password') {
    setUser({ name: username, password });
    return true;
  } else {
    return false;
  }
};

export const getUser = (): User | undefined => {
  const user = sessionStorage.getItem('user');
  return user != null ? JSON.parse(user) : undefined;
};

export const isLoggedIn = () => {
  const user = getUser();
  return user != null;
};

const setUser = (user: User) => {
  sessionStorage.setItem('user', JSON.stringify(user));
};
```

## クライアントサイドのルーティングを追加
GatsbyJSは `pages` ディレクトリ配下のファイルはビルド時に静的ページとして出力されます。しかし、認証が必要なサイトではユーザー毎にレンダリングする内容が異なるため、静的ページのビルドでは要件を満たせません。  
この場合は、アプリケーションページを用意して、ルーティング定義を書く事でクライアント側で動的にレンダリングをする事で解決することができます。詳しい説明は [Client\-only Routes & User Authentication \| Gatsby](https://www.gatsbyjs.com/docs/client-only-routes-and-user-authentication/) に書かれています。

最初にアプリケーションページを用意します。

```typescript
// src/pages/app.tsx
import React from 'react';
import { Layout } from '../components/Layout';
import { Router } from '@reach/router';
import { Login } from '../components/app/Login';

const App = () => (
  <Layout>
    <Router basepath="/app">
      <Login path="/login" />
      <Profile path="/app/profile" /> {/* ルート定義を追加 */}
    </Router>
  </Layout>
);

export default App;
```

ログインページはこんな感じで実装します。

```typescript
// src/components/app/Login.tsx
import React, { ChangeEvent, FC, FormEvent, useState } from 'react';
import { RouteComponentProps } from '@reach/router';
import { navigate } from 'gatsby';
import { isLoggedIn, login } from '../../services/auth';

interface LoginProps extends RouteComponentProps {}

export const Login: FC<LoginProps> = () => {
  const [user, setUser] = useState({ username: '', password: '' });

  const handleUpdate = (event: ChangeEvent<HTMLInputElement>) => {
    setUser({
      ...user,
      [event.target.name]: event.target.value,
    });
  };

  const handleSubmit = (event: FormEvent) => {
    event.preventDefault();
    const success = login(user.username, user.password);
    if (success) {
      navigate('/app/profile');
    } else {
      alert('ログインに失敗しました');
    }
  };

  return (
    <form method="POST" onSubmit={handleSubmit}>
      <div style={{ marginBottom: 10 }}>
        <label style={{ display: 'block' }}>ユーザー名</label>
        <input id="username" name="username" onChange={handleUpdate} />
      </div>
      <div style={{ marginBottom: 10 }}>
        <label style={{ display: 'block' }}>パスワード</label>
        <input id="username" name="username" onChange={handleUpdate} />
      </div>
      <button
        type="submit"
        style={{ backgroundColor: '#2e43ff', color: 'white', border: 'none' }}
      >
        ログイン
      </button>
    </form>
  );
};
```

ログイン後のプロフィールページも実装しておきます。ユーザー情報の表示は後で実装するので、今はページだけ作っている状態です。

```typescript
// src/components/app/Profile.tsx
import React, { FC } from 'react';
import { RouteComponentProps } from '@reach/router';

interface ProfileProps extends RouteComponentProps {}

export const Profile: FC<ProfileProps> = () => (
  <>
    <div>ユーザー名: ここに名前が表示される</div>
  </>
);
```


ナビゲーションバーにリンクを追加します。

```typescript
// src/components/NavBar.tsx
import React from 'react';
import { Link } from 'gatsby';

export const NavBar = () => (
  <div
    style={{
      display: 'flex',
      flex: '1',
      justifyContent: 'space-between',
      borderBottom: '1px solid #666',
    }}
  >
    <span>gatsby-auth</span>
    <nav>
      <Link to="/">Home</Link>
      {` `}
      <Link to="/app/profile">Profile</Link> {/* プロフィールページへのリンクを追加 */}
      {` `}
      <Link to="/app/login">Login</Link> {/* ログインページへのリンクを追加 */}
    </nav>
  </div>
);
```

クライアントでルーティングするために、gatsby-node.jsで設定を追加します。この設定を追加しないと、`/app/login` などにアクセスした時に静的ページの取得としてルーティングされます。

```javascript
// gatsby-node.js
exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions;

  if (page.path.match(/^\/app/)) {
    page.matchPath = '/app/*';
    createPage(page);
  }
};
```

## 認証状態によるページ遷移
今の実装だと認証状態に関わらず、プロフィールページにアクセスできる状態になっています。これをログイン状態でない場合はログイン画面にリダイレクトするよう変更します。

認証が必要なページへのアクセスを制御する `PrivateRoute` コンポーネントを実装します。

```typescript
// src/components/PrivateRoute.tsx
import React, { Component, ComponentType, FC } from 'react';
import { navigate } from 'gatsby';
import { RouteComponentProps } from '@reach/router';
import { isLoggedIn } from '../services/auth';

interface PrivateRouteProps extends RouteComponentProps {
  component: ComponentType;
}

export const PrivateRoute: FC<PrivateRouteProps> = ({
  component: Component,
  ...others
}) => {
  if (!isLoggedIn()) {
    navigate('/app/login');
    return null;
  }

  return <Component {...others} />;
};
```

プロフィールへのルート定義を変更します。

```typescript
// src/pages/app.tsx
import React from 'react';
import { Router } from '@reach/router';
import { Layout } from '../components/Layout';
import { Login } from '../components/app/Login';
import { Profile } from '../components/app/Profile';
import { PrivateRoute } from '../components/PrivateRoute';

const App = () => (
  <Layout>
    <Router>
      <Login path="/app/login" />
      <PrivateRoute path="/app/profile" component={Profile} /> {/* プロフィールへのルート定義を修正 */}
    </Router>
  </Layout>
);

export default App;
```

## ログアウト機能の実装
ログアウト処理を実装します。

```typescript
// src/services/auth.ts
export const logout = () => {
  sessionStorage.removeItem('user');
};
```

ナビゲーションバーのリンクにログアウトを追加する。

```typescript
// src/components/NavBar.tsx
import React from 'react';
import { Link, navigate } from 'gatsby';
import { isLoggedIn, logout } from '../services/auth';

export const NavBar = () => {
  const handleClickLogout = (
    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>
  ) => {
    event.preventDefault();
    logout();
    navigate('/app/login');
  };

  return (
    <div
      style={{
        display: 'flex',
        flex: '1',
        justifyContent: 'space-between',
        borderBottom: '1px solid #666',
      }}
    >
      <span>gatsby-auth</span>
      <nav>
        <Link to="/">Home</Link>
        {` `}
        <Link to="/app/profile">Profile</Link>
        {` `}
        {isLoggedIn() ? (
          <a href="/" onClick={handleClickLogout}>
            Logout
          </a>
        ) : (
          <Link to="/app/login">Login</Link>
        )}
      </nav>
    </div>
  );
};
```

## プロフィール情報の表示
プライベートなページへユーザー情報を渡すように変更する。

```typescript
// src/components/PrivateRoute.tsx
import React, { ComponentType, FC } from 'react';
import { navigate } from 'gatsby';
import { RouteComponentProps } from '@reach/router';
import { getUser, isLoggedIn } from '../services/auth';
import { User } from '../models/user';

export interface PrivateRouteComponentProps {
  user?: User;
};

interface PrivateRouteProps extends RouteComponentProps {
  component: ComponentType<PrivateRouteComponentProps>;
}

export const PrivateRoute: FC<PrivateRouteProps> = ({
  component: Component,
  ...others
}) => {
  if (!isLoggedIn()) {
    navigate('/app/login');
    return null;
  }

  const user = getUser();

  return <Component {...others} user={user} />;
};
```

プロフィールページにユーザー情報を表示する。

```typescript
// src/components/app/Profile.tsx
import React, { FC } from 'react';
import { PrivateRouteComponentProps } from '../PrivateRoute';

interface ProfileProps extends PrivateRouteComponentProps {}

export const Profile: FC<ProfileProps> = ({ user }) => (
  <>
    <div>ユーザー名: {user.name}</div>
  </>
);
```


GatsbyJSで認証サイトを実装するチュートリアルをやった時のまとめです。

GatsbyJSで認証サイトを実装する

アクセス解析をするためにブログにGoogleアナリティクスを導入しました。\
今後イベント取得の度に、リリースをするのは面倒なので、Googleタグマネージャーを設定して、アナリティクスの計測を設定しています。

今回はGatsby製のブログにGoogleタグマネージャーを設定する方法をまとめておきます。

## Googleタグマネージャーのコンテナ作成

最初にGoogleタグマネージャーのコンテナを作成しておきます。

<img src="/images/posts/gatsbyjs-gtm/gtm-container-new.png" alt="コンテナの作成" width="714" height="619" />

## Googleアナリティクスの設定

管理 > +プロパティを作成 から新たに計測用のプロパティを作成しておきます。

## プラグインの追加

### gatsby-plugin-google-tagmanager

[gatsby-plugin-google-tagmanager](https://www.gatsbyjs.org/packages/gatsby-plugin-google-tagmanager/) を利用してGoogleタグマネージャーをページに埋め込みます。  
（\<head>タグに直接\<script>タグを埋め込む方法がが分からず、公式のプラグインがあったので利用しました。）

### インストール

```bash
$ yarn add gatsby-plugin-google-tagmanager
```

gastby-config.js にプラグインの設定を追記します。

```javascript
{
  resolve: `gatsby-plugin-google-tagmanager`,
  options: {
    id: `GTM-5MKNQWX`,

    // Include GTM in development.
    // Defaults to false meaning GTM will only be loaded in production.
    includeInDevelopment: false,

    // datalayer to be set before GTM is loaded
    // should be an object or a function that is executed in the browser
    // Defaults to null
    defaultDataLayer: { platform: "gatsby" },

    // Specify optional GTM environment details.
    gtmAuth: "xNwDtuXDGlgZTO1P8TF2cg",
    gtmPreview: "env-1",
    dataLayerName: 'dataLayer',
  }
}
```

設定する値は 管理 > Live（公開中）> コードを取得 の埋め込みコードから確認することができます。

<img src="/images/posts/gatsbyjs-gtm/gtm-script.png" alt="Googleタグマネージャーの埋め込みコード" width="1171" height="368" />

## Googleタグマネージャーの設定

### トリガーの作成

GatsbyJSはSPAでCSRで動作するため、変更の履歴をトリガーとして作成しておきます。

### 変数の作成

GAのトラッキングIDを設定した Googleアナリティクス設定 を変数として設定します。

<img src="/images/posts/gatsbyjs-gtm/gtm-ga-variable.png" alt="Googleアナリティクスの変数を作成" width="720" height="290" />

### タグの作成

Googleアナリティクスにページビューを送信するタグを作成します。

Googleアナリティクスの設定には上で作成した変数を指定し、トリガーには「ページビュー」と「履歴の変更」の2つを設定しました。

初回のページ読み込みもトリガーさせるために、「ページビュー」も指定しています。

<img src="/images/posts/gatsbyjs-gtm/gtm-tag.png" alt="タグの作成" width="731" height="384" />

## リリース前の確認

Googleタグマネージャーのプレビューモードを利用すれば、ローカルで埋め込みが正常に出来ているか確認できます。  

ワークスペース > プレビュー をクリックしてプレビューモードにした後に、ローカルで ページを表示します。

その際は次の設定を true に変更しておく必要があります。

```javascript
// Include GTM in development.
// Defaults to false meaning GTM will only be loaded in production.
includeInDevelopment: true,
```

ワークスペース > プレビュー をクリックしてプレビューモードにした後に、ローカルでサーバーを立ち上げてページを表示します。

正常にタグが埋め込まれている場合は、ローカルで表示したページ下部にGoogleタグマネージャーのプレビュー画面が表示されます。

## リリース

以上の設定を終えたら、Googleタグマネージャーの公開 と プラグイン追加の変更を本番環境にリリースすれば導入は完了です。

## おまけ

自分のアクセスを計測対象外とするために [Google Analytics オプトアウト アドオン (by Google)](https://chrome.google.com/webstore/detail/google-analytics-opt-out/fllaojicojecljbmefodhfapmkghcbnh) を利用しています。  
「ga.jsと連携して...」と書いてありますが、Googleタグマネージャーを経由する場合でも正常に動作してくれました。


Gatsby製のブログにGoogleタグマネージャー経由でGoogleアナリティクスを導入する

[gatsbyjs/gatsby-starter-blog](https://github.com/gatsbyjs/gatsby-starter-blog) で作成したブログはデフォルトの状態ではコードのシンタックハイライトが無く非常に見辛いです。
プラグインを設定してシンタックハイライトを導入します

## プラグインの導入
gatsby-starter-blog には最初から [gatsby-remark-prismjs](https://gatsbyjs.org/packages/gatsby-remark-prismjs) がプラグインとしてインストールされています。
そのため、新たにプラグインをインストールする必要はなく、ハイライトのcss読み込み設定を修正するだけでシンタックハイライトを有効化できます。

```js
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
        ],
      },    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          `gatsby-remark-prismjs`,  // 初期状態でインストール済み
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
        ],
      },
```

### CSSの読み込み設定
gatsby-browser.jsにて prismjs のテーマのCSS読み込みを追記します。  
デフォルトで利用できるテーマの一覧は [PrismJS/prism/themes](https://github.com/PrismJS/prism/tree/1d5047df37aacc900f8270b1c6215028f6988eb1/themes) で確認できます。

```js
import "prismjs/themes/prism-tomorrow.css"
```

## シンタックハイライトを利用
pre記法に言語タグを指定することでシンタックハイライトを利用できます。  
利用可能な言語タグの一覧は [prismjs](https://prismjs.com/#supported-languages) の公式ページに記載してあります。

~~~js
```js
console.log('シンタックハイライトだよ')
```
~~~


gatsby-starter-blogでコードのシンタックスハイライトを設定

## Netfify CMSとは？

任意の静的サイトジェネレーターと組み合わせて利用可能なNetlifyが提供するCMSツールです。\
テキスト編集やプレビュー機能、画像アップロードなどの機能をWebベースのUIとして提供してくれます。\
また、GitHubのAPIを内部で利用しており、管理画面上で記事作成 => githubにpush => netlifyにデプロイ のフローを自動で実施してくれます。

## GastbyJSのテンプレートからブログを作成

立ち上げるブログが無いと何も始まりません。

最初に GatbyJS の [gatsbyjs/gatsby-starter-blog](https://github.com/gatsbyjs/gatsby-starter-blog) を利用してテンプレートからブログを作成します。

```shell
$ yarn add global gatsby-cli
$ gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog
```

たった2行でブログの作成が完了しました！\
デザインの修正とかやりだすと、やる事が増えて結局途中で諦めてしまう可能性がある（自分の性格上そうなる）ので、とりあえず公開する事だけを目標とします。  

デザインとかは後からゆっくり修正していきましょう。

### Netlify CMS をインストール

続いて Netlify CMS をインストールします。

```shell
$ cd blog
$ yarn add netlify-cms-app gatsby-plugin-netlify-cms
```

`static/admin/gatsby-config.yml` ファイルを作成して次の内容を貼り付けます。

```yaml
backend:
  name: git-gateway
  branch: master

media_folder: static/images/uploaded
public_folder: /images/uploaded

collections:
  - name: "blog"
    label: "Blog"
    folder: "content/blog"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    editor:
      preview: true # プレビュー表示を有効化
    publish_mode: editorial_workflow # ワークフロー管理を有効化
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Description", name: "description", widget: "string" }
      - { label: "Body", name: "body", widget: "markdown" }
```

画像をアップロードする空ディレクトリを追加します。

```shell
$ mkdir -p static/images/uploaded
$ touch static/images/uploaded/.gitkeep
```

最後に `gatsby-config.js` にプラグインを追記します。

```
plugins: [`gatsby-plugin-netlify-cms`]
```

CMSのインストールはこれだけです。 すごい簡単で感動ですね。

実際にローカル環境で確認してみましょう。

```
$ yarn development
```

http://localhost:8000/admin にアクセスしてCMSのログイン画面が表示されたらOKです。 

ログインするには後述する Netlify の認証設定が必要です。

### ブログを公開する

ここまで来たら、いよいよNetlifyにブログを公開します。

最初にGitHubにリポジトリをデプロイします。

```shell
$ git add .
$ git commit -m "Initial Commit"
$ git remote add origin https://github.com/YOUR_USERNAME/NEW_REPO_NAME.git
$ git push -u origin master
```

続いて Netlify のページ上で `New Site From Git` を選択して手順に沿ってブログを公開します。

ビルド設定は次ように設定します。

```
Build Command: gatsby build
Publish directory: public/
```

<ブログのドメイン名>/admin にアクセスすれば管理画面を表示できます。

<img src="/images/posts/netlify-cms/blog-template.png" alt="テンプレートの画面" width="1930" height="1460" />

テンプレートのままですが、自分のブログが公開されました (*'ω'ﾉﾉﾞ☆ﾊﾟﾁﾊﾟﾁ

## CMSの管理ユーザーの作成

CMSの管理画面にログインするために Netlify の認証設定をして管理ユーザーを作成しましょう。 Netlifyの管理画面から公開したサイトを選択して次の手順に沿ってアカウント作成の作業を進めます。

1. Settings > Identity > Enable Identity を選択
2. Registration preferences > Edit Settings > Invite only を選択 この設定をしないと誰でもアカウントを作成して管理画面にログインできてしまうので、よほどの理由がない限りは設定しておくことをオススメします
3. Services > Git Gateway > Enable Git Gateway をクリック
4. Identityタブに移動 > Invite users をクリック 自分のメールアドレスを指定して自分を管理者として招待 送信された招待メールからアカウントを作成

これでCMSの管理画面にログイン出来るようになりました。

## 記事を投稿する

最後にCMSで最初の記事を投稿していきます。

1. /admin にアクセスして、管理画面にログイン
2. `new blog` をクリック
3. 記事を書いて `Save` をクリック
4. 問題なければ Publish をクリック

以上で記事が公開されます。


GatsbyJS + Netlify CMS でエンジニアブログを立ち上げる

神奈川の田舎で働いてるフロントエンドエンジニアのブログ