独自ドメイン登録後、kuroco-front.appのドメインをフロントエンドのステージサイトとして利用する

独自ドメインの利用を開始すると、デフォルトで存在するhttps://サイトキー.g.kuroco-front.appをステージングサイト用のドメインとして利用することができます。

本チュートリアルでは、GitHubのブランチを分けることでhttps://サイトキー.g.kuroco-front.appのドメインをフロントエンドのステージサイトとして利用する方法を紹介します。

今回は下記ブランチとドメインの構成で実装します。

注: 今回はステージサイト用のブランチ名をdevelopとしていますが、任意に変更して構いません。

本チュートリアルはKurocoFrontで独自ドメインを利用する手順が完了し、独自ドメインでサイトの表示ができている状態を前提としています。

ステージサイト利用手順

1. GitHubでステージサイト用のブランチを作る

本番サイトとステージサイトの表示はGitHubのブランチで分けます。
対象のディレクトリに移動後、コマンドラインより下記実行します。

git checkout -b develop

2. ステージサイトの build.ymlファイルを修正する

developブランチの/.github/workflow/build.yml ファイルを修正します。
Kuroco管理画面より[KurocoFront] -> [GitHub]をクリックし、「GitHub Actions workflow file ステージングサイト」のテキストエリア内をコピーします。

developブランチの/.github/workflow/build.yml を開き、コピーした内容で上書きします。

さらに build.yml ファイルの branches: の部分をmainからステージサイト用のブランチ名に修正します。
今回はdevelopに修正します。

修正が完了したらファイルを保存します。

修正をGitHubにpushし、GitHub Actionsを実行させます。

GitHubの「Actions」タブをクリックすると、ビルドの状況が確認でき、developのブランチでビルドされていることがわかります。

ビルドが成功したら完了です。
以降、ステージサイト用のブランチ(今回の場合はdevelop)で変更した内容はステージサイト (https://サイトキー.g.kuroco-front.app) に反映されます。

ステージサイト確認

それではdevelopブランチの更新がステージサイトに反映されることを確認します。
今回はステージサイトにBasic認証をかけます。
developブランチで、kuroco_front.jsonに下記のようにBasic認証を記述します。

{
    "rewrites": [
        {
          "source": ".*",
          "destination": "/index.html"
        }
      ],
    "redirects": [],
    "basic":["user:pass"],
    "ip_restrictions":[]
}

修正したらファイルを保存し、pushします。
ビルドが完了したら、Kuroco管理画面のロゴマークからステージサイトにアクセスします。

ステージサイトにアクセスすると、Basic認証が求められることが確認できました。

Kuroco管理画面の[サイトを表示]で本番環境にアクセスすると、Basic認証は求められませんので、developブランチでの更新がステージサイトのみに反映されていることがわかります。

https://サイトキー.g.kuroco-front.app のドメインをフロントエンドのステージサイトとして利用する方法の説明は以上になります。