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

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

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

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

ブランチドメイン
main独自ドメイン
develophttps://サイトキー.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 ステージングサイト」のテキストエリア内をコピーします。

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

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

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

Image (fetched from Gyazo)

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

ステージサイト確認

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

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

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

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

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