本番環境のデータを検証環境に同期するボタンを設置する

概要

Kurocoはサイト同期の機能を持っており、メインサイトやサブサイト間でデータの同期が可能ですが、実行するには通常、メインサイトでサイト管理の更新権限が必要です。
作業者や制作担当者に大きな権限を与えたくない場合、メインサイト側に同期リクエストを受けるAPIを作成することによって、メインサイトでの権限を持たないメンバーでもデータを同期実行させることができます。
また、サブサイト側のダッシュボードにウィジェットを用意すると、メインサイトにログインすることなく簡単に同期の実行をできるようになります。

本チュートリアルでは、サブサイトのダッシュボードに「本番環境からの全同期を実行する」ボタンを設置して、メインサイトでサイト管理の更新権限を持たないメンバーでもワンクリックで最新のデータを同期する方法を説明します。

学べること

以下の手順でメインサイトからの全同期を実行するボタンを設置します。

• 事前準備
• 同期リクエストを受けるAPIを設定する
• 同期を実行するカスタム処理を追加する
• ダッシュボードのウィジェットを追加する
• サブサイトに同期する
• 動作を確認する

前提条件

サイト一覧でサブサイトが追加されていることを前提とします。

注意

サイト同期の方向を間違えるとメインサイトのデータを意図せず上書きしてしまう場合があります。 作業を進める前にバックアップを取得しておくことをお勧めします。

メインサイトの設定

事前準備

同期項目一覧にまとめた通り、全同期を実行すると、APIやカスタム処理、バッチ処理も同期されます。

APIのCORS設定にメインサイトのURLだけを登録していると、同期後のサブサイトのCORSもメインサイトのURLだけになり、サブサイトのURLからのAPIリクエストを受け付けなくなります。
そこで、全同期の実施後もサブサイトのURLからサブサイトのAPIへリクエストが送れるようCORS設定にサブサイトのURLも設定しておきます。

同様にカスタム処理やバッチ処理でサイトキーを含む管理画面URLやAPIドメインを直書きしている場合は、定数から取得して利用するように調整します。

例：
{assign var=my_api_domain value="https://sitekey.g.kuroco.app"}
↓
{assign var=my_api_domain value=$smarty.const.ROOT_API_URL}

同期リクエストを受けるAPIを設定する

同期用のAPIを作成します。

APIの作成

Kuroco管理画面のAPIより「追加」をクリックします。

API作成画面が表示されるので、下記入力し「追加する」をクリックします。

項目	設定内容
タイトル	Sync
版	1.0
ディスクリプション	Sync

APIが作成されました。

セキュリティの設定

次にセキュリティの設定をします。[セキュリティ] をクリックします。

セキュリティを[静的アクセストークン]に設定して、[保存する]をクリックします。

CORSの設定

次にCORSの設定をします。[CORSを設定する] をクリックします。

CORS_ALLOW_ORIGINSの [Add Origin] をクリックし、下記を追加します。

• サブサイトの管理画面URL

CORS_ALLOW_METHODSの [Add Method] をクリックし、下記を追加します。

• POST
• OPTIONS

CORS_ALLOW_CREDENTIALSの[Allow Credentials]にチェックが入っていることを確認します。

問題なければ [保存する] をクリックします。

静的アクセストークンの発行

[Swagegr UI]をクリックします。

静的アクセストークンの有効期限を設定して[生成する]をクリックします。

静的アクセストークンが発行されるので値をメモします。

エンドポイントの作成

SyncのAPIから[新しいエンドポイントの追加]をクリックして以下のエンドポイントを作成します。

項目	設定内容
パス	sync_site
カテゴリー	API
モデル	Api
オペレーション	request_api_post
name	sync_site

同期を実行するカスタム処理を追加する

リクエストを受け付けるエンドポイントの準備ができたら、同期を実行するカスタム処理を登録します。

[オペレーション] -> [カスタム処理]をクリックします。

[追加]をクリックします。

以下の動作となるカスタム処理を作成します。

• site_syncという関数を呼んでサイト同期を行います。
• 同期元サイトfrom_site_keyにはメインサイトのサイトキーを定数で指定します。
• 同期先サイトto_site_keyはリクエスト変数から取得した値を利用するものとします。
• 同期の種類 sync_type には全同期 2 を指定します。
• 実行されたサイトキーと実行者の名前をログに残します。

項目	値
タイトル	sync_site
識別子	sync_site (request_api_postのエンドポイントに設定したnameと一致さてください。)
処理	以下の内容

{site_sync from_site_key=$smarty.const.SITE_KEY to_site_key=$smarty.request.to_site_key  sync_type='2'}
{logger msg1="全同期を実行しました" msg2=$smarty.request.to_site_key msg3=$smarty.request.name}

ダッシュボードのウィジェットを追加する

次にダッシュボードのウィジェットの機能で同期を実行するためのボタンを表示します。
[環境設定] -> [ダッシュボードのウィジェット]をクリックします。

追加をクリックします。

以下のように設定します。
サイトがメインサイト以外の場合に[本番環境からの全同期を実行する]のボタンを表示し、ボタンがクリックされると、サイトキーとユーザー名をメインサイトのエンドポイントにポストします。

項目	内容
名前	任意の名前
HTML	以下のコード
アクセス制限	無し
管理画面	通常版
公開設定	公開

{if $smarty.const.SITE_KEY != "YOUR_MAIN_SITE_SITEKEY"}
<form id="myForm" action="https://YOUR_MAIN_SITE_SITEKEY.g.kuroco.app/rcms-api/6/sync_site" method="POST">
    <input type="hidden" id="toURL" value="{$smarty.const.SITE_KEY}">
    <input type="hidden" id="member_NAME" value="{$smarty.session.name1}">
    <button type="button" onclick="submitForm()">本番環境からの全同期を実行する</button>
</form>

{literal}
<script>
    function submitForm() {
        var toURL = document.getElementById('toURL').value;  // hidden inputから値を取得
        var member_NAME = document.getElementById('member_NAME').value;  // hidden inputから値を取得
        var form = document.getElementById('myForm');
        var url = form.action;

        // POSTリクエスト用のオプションを設定
        var requestOptions = {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-RCMS-API-ACCESS-TOKEN': 'YOUR_STATIC_ACCESS_TOKEN'
            },
            body: JSON.stringify({
                to_site_key: toURL,
                name: member_NAME
            }),
        };

        fetch(url, requestOptions)
            .then(response => response.json())
            .then(data => {
                console.log('Success:', data);
                alert('同期を実行しました。反映までしばらく時間をおいて確認してください。');  // 成功時のアラート
            })
            .catch(error => {
                console.error('Fetch error:', error);
                alert('エラーが発生しました。');  // エラー時のアラート
            });
    }
</script>
{/literal}
{/if}

注意

YOUR_MAIN_SITE_SITEKEYとYOUR_STATIC_ACCESS_TOKENの部分はご自身のメインサイトのサイトキーと、メインサイトで発行した静的アクセストークンに置き換えてください。

入力ができたら[追加する]をクリックしてダッシュボードのウィジェットを追加します。

以上で機能の設定は完了です。
サブサイトにも反映し、動作の確認をします。

サブサイトに同期する

[環境設定] -> [サイト一覧]をクリックします。

同期を実行するサブサイトの[編集]をクリックします。

以下のように設定して[更新する]をクリックします。

項目	値
すぐに同期する	チェックを入れる
同期元サイトキー	メインサイトを指定する
アプリ同期/全同期	全同期を選択する

同期が反映されるまでしばらく時間をおき、追加したカスタム処理やダッシュボードのウィジェットがサブサイトで確認できたら完了です。

動作の確認をする

以下のポイントを確認して、想定通りの処理が実行されているか確認します。

• メインサイトには同期のボタンが表示されない
  
• サブサイトには同期のボタンが表示される
  
• 同期のボタンをクリックするとメインサイトに追加したコンテンツがサブサイトに同期される
  
• メインサイトのカスタムログを確認すると同期を実行したサイトキーとユーザー名が記録されている
  

以上で設定は完了です。
メインサイトの最新データを作業担当者がサブサイトから同期できるようになりました。

関連ドキュメント

• 同期項目一覧
• Smartyプラグイン
• ダッシュボードのウィジェットを利用して管理画面の表示を編集する