React Static 設定大全


Reactベースのイケてる静的サイトジェネレータ「React Static」の翻訳シリーズの続編です。

*基礎概念編*　*https://qiita.com/IYA_UFO/items/b7946674a782374f7eb2*

React Staticの殆どの設定は`static.config.js`に書くことになり、こちらにツールとして学習が必要な内容が集中しています。
逆に言うと他はほぼReactです！

ということで、以下は公式ドキュメント「設定`static.config.js`」編の抄訳です。

> MIT License 
> Copyright (c) 2013-present, Nozzle, Inc.
> https://github.com/nozzle/react-static/blob/master/LICENSE

---

`static.config.js`ファイルの設置は任意ですが、React Staticの機能をフル活用するためには設置をおすすめします！
プロジェクトのルートに置き、１つのオブジェクトを`default export`させてください。
そのオブジェクトは、以下から必要なプロパティを持つことができます。

>訳注
>利用頻度が少なそうなプロパティについては訳していません。
>完全なリストは本家へ https://github.com/nozzle/react-static/blob/master/docs/config.md

- getRoutes
- route
- getSiteData
- siteRoot
- stagingSiteRoot
- basePath
- stagingBasePath
- devBasePath
- assetsPath
- Document
- webpack
- paths


# `getRoutes`
`route`オブジェクトの配列をresolveする非同期の関数です。動的なデータや情報のリクエストは全てここに設定します。Booleanの引数`dev`は、Productionビルド中であるかどうかを示します。

```JavaScript
export default {
  getRoutes: async ({ dev }) => [...routes],
}
```

開発サーバー起動中に`static.config.js`を更新した場合、`getRoutes`は自動で再度実行され、以下で説明する`routes`や`routeData `への変更はhot reloadされます。
以下ではこのプロパティで扱う`route`オブジェクトについて解説します。

## `route`
`route`はサイトの特定のパスを示すオブジェクト。React staticサイトの屋台骨となる設定。
プロパティは以下

### `path`...文字列
このルートにマッチするパス。`siteRoot + basePath`からの相対パスで、アンカーリンクやクエリパラメータは除いたもの。
子ルートの場合は、親ルートからの相対パス。
 
### `component`...文字列
このルートをレンダリングするためのコンポーネントへのパス。
プロジェクトルートからの相対パス。

### `getData`...非同期関数
`(resolvedRoute, { dev }) => Object`
このルートに必要なデータの配列をreturnまたはresolveする非同期関数。
引数は

- resolvedRoute...オブジェクト　この関数が扱うルート
- flags...オブジェクト ビルドについてのメタ情報やフラグが入っている
- dev...真偽値　開発環境か本番ビルドかを示す

### `children`...routeオブジェクトの配列
配下の子ルート。パスは親から引き継がれるので、この中でprefix部分を繰り返す必要はない。

### `redirect`...URL
セットすると、`http-equiv`を利用した301リダイレクトと同じ挙動をし、ページはリダイレクト以外何もしない最低限のHTMLになる。

### `noindex`...真偽値
デフォルトでfalse。このルートと子ルートを自動生成される`sitemap.xml`に含みたくない場合は`true`。

例：

```JavaScript
export default {
  getRoutes: async ({ dev }) => [
    // A simple route
    {
      path: 'about',
      component: 'src/containers/About',
    },

    // A route with data
    {
      path: 'portfolio',
      component: 'src/containers/Portfolio',
      getData: async () => ({
        portfolio,
      }),
    },

    // A route with data and dynamically generated child routes
    {
      path: 'blog',
      component: 'src/containers/Blog',
      getData: async () => ({
        posts,
      }),
      children: posts.map(post => ({
        path: `post/${post.slug}`,
        component: 'src/containers/BlogPost',
        getData: async () => ({
          post,
        }),
      })),
    },

    // A 404 component
    {
      path: '404',
      component: 'src/containers/NotFound',
    },
  ],
}
```

# getSiteData
`getSiteData`はルートの`getData`関数に似ていますが、結果は`SiteData`コンポーネントと`getSiteData`HOCによってサイト全体で利用できます。ここから返されるデータはセッションに１回だけロードされますが、全てのページに埋め込まれます。慎重に使ってください。

例：

```JavaScript
export default {
  getSiteData: async ({ dev }) => ({
    title: 'My Awesome Website',
    lastBuilt: Date.now(),
  }),
}
```

# siteRoot
`protocol://domain.com`の形で設定します。SEO対策のため、設定を強くおすすめします。
この設定により、以下が起きます

- 自動で`sitemap.xml`を出力します
- 静的なリンクを絶対パスに変換します。サイトがhttpsで配信される場合、こちらに必ず書いてください。リンクのパス末尾のスラッシュは自動的に削除されます。ベース・パスを設定する（例えばGithub Pagesを使っている場合）には、ここではなく、`bathPath`オプションを使ってください。

例:

```JavaScript
export default {
  siteRoot: 'https://mysite.com',
}
```

# stagingSiteRoot
siteRootと同じ機能ですが `--staging`フラグがついている場合のみ有効になります。

# basePath
`some/route`の形で書きます。 ドメインのルート以外でサイトをホストする場合に使います。例えばGitHub Pagesでホストする場合、サイトは`https://mysite.com/blog`でホストされるので、`basePath`は`blog`となります。

例:

```JavaScript
export default {
  basePath: 'blog',
}
```

# stagingBasePath
basePathと同じ機能ですが、`--staging`フラグがついている場合のみ有効になります。

# devBasePath
basePathと同じ機能ですが、ローカル開発サーバーでのみ有効になります。

# assetsPath
JSとCSSのロード先を指定します。アセットをCDNのような外部サービスでホストする場合に使えます。

# Document
サイトのルートをレンダリングするコンポーネントです。ルートドキュメントのカスタマイズはかつてなく簡単になりました。
このコンポーネントには以下のようなことが書けるでしょう。

- `head`や`meta`タグの内容
- サイト全体の計測スクリプト
- サイト全体に適用するスタイルシート

以下のpropsが与えられています。

### `Html`...Reactコンポーネント
`html`タグ
### `Head`...Reactコンポーネント
`head`タグ
### `Body`...Reactコンポーネント
`html`タグ
### `body`...Reactコンポーネント
`body`タグ
### `children`...Reactコンポーネント
サイトのメインコンテンツ。レイアウトやルートを含みます。
### `routeInfo`...オブジェクト
`routeData`を含む、現在のルートの情報。
### `siteData`...オブジェクト
この設定ファイルの`getSiteData`から渡される全てのデータ。
### `renderMeta`...オブジェクト
`hook` や `transformer`でレンダリング中にセットされるデータです。

例:

```JSX
export default {
  Document: ({ Html, Head, Body, children, siteData, renderMeta }) => (
    <Html lang="en-US">
      <Head>
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <Body>{children}</Body>
    </Html>
  ),
}
```

JSXを使うことになるので、この場合は`static.config.js`の先頭で`import React from 'react'`してください。

# devServer
開発サーバーとして使われる`webpack-dev-server`インスタンスに渡されるオプションオブジェクトです。

例:

```JavaScript
export default {
  // An optional object for customizing the options for the
  devServer: {
    port: 3000,
    host: '127.0.0.1',
  },
}
```

# paths
React staticが使う内部的なファイルパスをカスタマイズするオブジェクトです。全てプロジェクトルートからの相対パスです。

デフォルトは以下: 

```JavaScript
export default {
  paths: {
    root: process.cwd(), // プロジェクトのルート。よく分からなければ変更しないでください。
    src: 'src', // ソースフォルダ。index.jsをエントリーポイントとして含む必要あり。
    temp: 'tmp', // ビルドで発生する公開しないファイルの置き場。
    dist: 'dist', // 本番用出力フォルダ。
    devDist: 'tmp/dev-server', // The development scratch directory.
    public: 'public', // The public directory (files copied to dist during build)
    assets: 'dist', // The output directory for bundled JS and CSS
    buildArtifacts: 'artifacts', // The output directory for generated (internal) resources
  },
}
```

---
続編 React Static 設定大全 https://qiita.com/IYA_UFO/items/b01ca2eb1ec0082c4b79