kuroco_front.jsonとは何ですか？

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

配置場所

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

ヒント

例えば、Nuxt.jsやNext.jsの場合は以下のディレクトリに配置します。
Nuxt2:/static
Nuxt3:/public
Next.js:/public

サンプルコード

{
    "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"
    }
}

kuroco_front.jsonの役割

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

rewrites：URLリライトの設定

"rewrites": [
        {
          "source": ".*",
          "destination": "/index.html"
        }
    ],

項目	説明	設定例
source	URLリライト対象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"
},

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

補足

• 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へソースをデプロイする方法を参照してください。