15
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@IYA_UFO

React Static 設定大全

Last updated at Posted at 2019-03-24

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ビルド中であるかどうかを示します。

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。

例：

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コンポーネントとgetSiteDataHOCによってサイト全体で利用できます。ここから返されるデータはセッションに１回だけロードされますが、全てのページに埋め込まれます。慎重に使ってください。

例：

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

siteRoot

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

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

例:

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

stagingSiteRoot

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

basePath

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

例:

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でレンダリング中にセットされるデータです。

例:

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インスタンスに渡されるオプションオブジェクトです。

例:

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

paths

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

デフォルトは以下:

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

15
16
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
15
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?