kuroco_front.jsonとは何ですか?

kuroco_front.jsonとは、KurocoFrontを利用するために必要なJSONファイルです。
Kuroco_front.jsonを利用することで、リダイレクト設定やBasic認証設定、エラーページの設定が可能となります。

配置場所

KurocoFrontを利用する際は、ビルド後の出力ディレクトリのルート(公開ディレクトリの直下)にkuroco_front.jsonを配置してください。ただし、このファイルは公開されません。

例えば、Nuxt.jsの場合は、/static ディレクトリに配置します。

サンプルコード

kuroco_front.json
{
    "rewrites": [
        {
          "source": ".*",
          "destination": "/index.html"
        }
    ],
    "redirects": [
        {
          "source": "^/old_path/",
          "destination": "/new_path/"
        },
        {
          "source": "^/old_articles/([^/].+?)/",
          "destination": "/new_articles/$1/"
        },
        {
          "source": "^/old_articles2/([^/].+?)/",
          "destination": "status:404"
        },
        {
          "source": "^/articles2/([^/].+?)/",
          "destination": "status:302:/temp_articles2/$1/"
        }
    ],
    "redirects_by_ie": [
        {
          "source": ".*",
          "destination": "/ie/"
        }
    ],
    "basic":[
        "user:pass",
        "user2:pass2"
    ],
    "ip_restrictions":[
        "111.111.111.111/32",
        "222.222.222.222/32"
    ],
    "ip_restricted_maintenance":[
        "111.111.111.111/32",
        "222.222.222.222/32"
    ],
    "stale_while_revalidate":"86400",
    "error_page": {
        "status404":"/404.html",
        "status401":"/401.html"
        "status_ip_503":"/ip_503.html"
    },
    "inject_data": [
        {
            "/docs/": [
                [
                    "og_title",
                    "content",
                    "Kuroco Documents"
                ],
                [
                    "og_description",
                    "content",
                    "Kuroco Documents top page"
                ]
            ]
        }
    ]
}

kuroco_front.jsonの役割

上記サンプルコードの役割を詳しく解説します。

rewrites:URLリライトの設定

"rewrites": [
        {
          "source": ".*",
          "destination": "/index.html"
        }
    ],
項目説明設定例
sourceURLリライト対象URIを正規表現で記述します。.*
destinationリライト先を記述します。/index.html

".*"の時のみ、ファイルの存在がない場合有効になります。
複数設定可能です。
上から順番にチェックをします。

redirects:リダイレクトの設定

"redirects": [
        {
          "source": "/old_path/",
          "destination": "/new_path/"
        }
    ],
項目説明設定例
sourceリダイレクト対象URIを正規表現で記述します。/old_path/
destinationリダイレクト先を記述します。status:302:を先頭にセットすると302リダイレクトになります。status:404をセットすると404エラーになる特別な挙動が設定可能です。/new_path/

".*"の時のみ、ファイルの存在がしない時のみ動作する挙動になります。
複数設定可能です。
上から順番にチェックをします。
リダイレクト時はQueryStringを保持してリダイレクトします。destinationにもQueryStringは指定できますが、sourceの指定にQueryStringは利用できません。

redirects_by_ie:IEでのアクセス時にリダイレクト

"redirects_by_ie": [
    {
        "source": ".*",
        "destination": "/ie/"
    }
],
項目説明設定例
sourceリダイレクト対象URIを正規表現で記述します。.*
destinationリダイレクト先を記述します。/ie/

UserAgentにMSIEかTridentが文字列として含まれている場合のみ有効になるリダイレクトです。ファイルの存在確認はしません。
複数設定可能です。 上から順番にチェックをします。

basic:Basic認証

"basic":[
    "user:pass",
    "user2:pass2"
],

IDとパスワードのセットを:で結合してセットします。
(上記の場合、「ID:user、パスワード:pass」または「ID:user2、パスワード:pass2」となります。)
プレーンにパスワードを記述しますので、扱いに気をつけてください。
複数設定可能です。

ip_restrictions:IPアドレス制限

"ip_restrictions":[
     "111.111.111.111/32",
     "222.222.222.222/32"
],

IPアドレスをセットします。スラッシュ表記でサブネットマスクも利用可能です。
複数設定可能です。

ip_restricted_maintenance:IPアドレス制限付きメンテナンスページ

" ip_restricted_maintenance":[
     "111.111.111.111/32",
     "222.222.222.222/32"
],

特定のIPアドレス以外はメンテナンスページを表示します。
IPアドレスをセットします。スラッシュ表記でサブネットマスクも利用可能です。
複数設定可能です。

stale_while_revalidate:キャッシュが更新されるまでCDNから期限切れのコンテンツを配信する期限

"stale_while_revalidate":"86400",

Cache-Controlヘッダーにstale_while_revalidateを追加して、CDN側で失効済みコンテンツ配信を可能にします。
stale_while_revalidateに86400をセットすると、CDNのキャッシュがクリアされてもコンテンツを1日間(86400秒)保持し、キャッシュクリア後1回目のアクセスでは失効済みコンテンツを配信します。
この間にキャッシュの再作成することでキャッシュがない時のレスポンス遅延を防ぎます。
HTTPレスポンスが200の時だけ有効になります。

error_page:エラーページの設定

"error_page": {
    "status404":"/404.html",
    "status401":"/401.html",
    "status_ip_503":"/ip_503.html"
},
項目説明設定例
status404404エラー時にレスポンスするHTMLファイルのパスを記述します。/404.html
status403403エラー時にレスポンスするHTMLファイルのパスを記述します。/403.html
status401401エラー時にレスポンスするHTMLファイルのパスを記述します。/401.html
status_ip_503IPアドレス付きメンテナンスページ表示時にレスポンスするHTMLファイルのパスを記述します。/ip_503.html

inject_data:レスポンスするHTMLへのデータの挿入

"inject_data": [
    {
        "/docs/": [
            [
                "og_title",
                "content",
                "Kuroco Documents"
            ],
            [
                "og_description",
                "content",
                "Kuroco Documents top page"
            ]
        ]
    }
]

レスポンスするHTMLにデータを挿入できます。
inject_dataに配列で、URLをキーとしたオブジェクトの値に挿入するデータ配列を持つことができます。 OGPの設定などに利用が可能です。

上記のkuroco_front.jsonの設定を利用すると以下のようにdata-kuroco-replaceのあるタグにデータが挿入されます。

設定前
<meta data-kuroco-replace="og:title" name="og:title" property="og:title" content="nuxt_auth">
<meta data-kuroco-replace="og:description" name="og:description" property="og:description" content="nuxt_auth page">
設定後
<meta name="og:title" property="og:title" content="Kuroco Documents">
<meta name="og:description" property="og:description" content="Kuroco Documents top page">

挿入されるデータの配列は下記となります。

説明
0挿入対象のdata-kuroco-replace値
1挿入対象のAttribute名
2挿入値

補足

  • kuroco_front.jsonが見つからない、JSON形式が間違っていると「404 Not Found (CONFIG FILE NOT FOUND)」になります。
  • IPアドレス制限での認証に失敗すると、「403 Forbidden」、またはerror_pageでセットした内容となります。
  • 閲覧制限はKurocoのID・PWDでの認証になるため、認証に失敗すると、「Authentication required」、またはerror_pageでセットした内容となります。
  • 同一リポジトリ内でブランチ毎にkuroco_front.jsonの内容を切り替えたい場合はGitHubActionsのビルドファイルで切り替えることが出来ます。

具体的な運用ケースとしては開発環境のみBasic認証を設定したい場合に利用出来ます。

実際の設定例はGitHubからKurocoFrontへソースをデプロイする方法を参照してください。

お探しのページは見つかりましたか?解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。