---
title: サブサイトをプレビューサイトにする
description: Kurocoで作成したサブサイトに同期元の設定をすることでプレビューサイトとして利用できます。設定をすると、同期元サイト(通常、本番サイト)で作成したコンテンツが自動的にプレビューサイトに送られ、プレビューサイトでデプロイした環境で表示の確認が可能です。
---

## 概要
Kurocoで作成したサブサイトに同期元の設定をすることでプレビューサイトとして利用できます。  
設定をすると、同期元サイト(通常、本番サイト)で作成したコンテンツが自動的にプレビューサイトに送られ、プレビューサイトでデプロイした環境で表示の確認が可能です。  

機能の概要図を以下に示します。  
挙動の特徴としては、同期元サイト(本番サイト)で承認ワークフローで申請したコンテンツが、プレビューサイトでは承認反映済みの状態で確認できる動作になります。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/d16809731b5d53c773520cf5a42fd210.png)

:::caution
- プレビューサイトではコンテンツの更新はしない想定になっています。  
  プレビューサイトでコンテンツの追加・更新を行った場合、コンテンツの更新はされますが、同期元サイトからの同期が発生した場合、同期元のデータで上書きされます。
- 同期元サイトからの同期が発生した場合は、プレビューサイトのトリガーは起動しません。
:::

本ドキュメントではKuroco上におけるプレビューサイトの設定とその動作を説明します。

### 前提条件
:::info
- サブサイトを作成していない場合は「[サイト一覧](/ja/docs/management/site-list/)」から追加してください。
- フロントエンドについては「[開発環境を作成する手順](/ja/docs/tutorials/kurocofront-app-domain-for-front-end-staging-site/)」を参考に、同期元サイト、プレビューサイトそれぞれデプロイください。
:::

:::tip
Kurocoのプレビュー機能には、プレビューサイト機能のほかに以下があります。詳細はそれぞれのドキュメントをご参照ください。  
- プレビューのエンドポイント：[プレビュー画面を構築する](/ja/docs/tutorials/integrate-preview-page/)
- プレビューデプロイ：[KurocoFrontへプレビューデプロイする手順](/ja/docs/tutorials/connect-to-github-with-kuroco-front/#kurocofrontへプレビューデプロイする手順)
:::

## プレビューサイトの設定方法
### 同期元サイトとプレビューサイトを全同期する
プレビューサイト機能で同期されるのはコンテンツのみです。タグIDやメンバーIDを揃えるために事前に全同期を実施します。

:::info
運用を進める中で差分が大きくなった場合は、本ステップを再度実施し、全体を同期してください。
:::

[環境設定] -> [サイト一覧]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/3d34e973cdd6985c77e9ee4bb8703410.png)

プレビューサイトにするサブサイトの[編集]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/77328cc62de138047471d711be7ac058.png)

[すぐに同期する]を有効にし、同期元サイトと全同期を選択して[更新する]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/3ac803801a1c8fff1b1f5cc0d30970fd.png)

### 同期元サイトの設定をする
全同期の完了後、プレビューサイト向けに[コンテンツ同期元サイトキー]を設定します。

再度、プレビューサイトにするサブサイトの[編集]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/77328cc62de138047471d711be7ac058.png)

コンテンツ同期元サイトキーに同期元になるサイトキーを設定して[更新する]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/0cd590f25f7c0e7b03efabd0b2e56f0b.png)

以上でプレビューサイトの設定は完了です。

同期元サイトのコンテンツ編集画面で、公開設定に「プレビューサイトへ送る」が追加されていることを確認してください。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/166044a0a3c74f8ff07249bd205dee49.png)

## プレビューサイトの動作
- 同期元サイトで追加・更新・削除したコンテンツはプレビューサイトでも追加・更新・削除されます
- 同期元サイトで「プレビューサイトへ送る」を選択してコンテンツを追加・更新すると同期元サイトでは承認ワークフローに乗り、プレビューサイトでは即時コンテンツが追加されます。  
  ※ワークフローが利用できるようになっている必要があります。
- プレビューサイトで表示の確認をしてOKであれば同期元サイトで承認するフローを想定しています。
- 承認中コンテンツに更新があった場合も、自動でプレビューサイトのコンテンツが更新されます。

## 制限事項
1. 同期されるのはコンテンツのみです。（タグやマスタは同期されません。）
2. 同期元サイトとプレビューサイトでメンバーIDが一致していない場合、コンテンツ所有者のmember_idがずれる可能性があります。
3. タグのIDが違う場合は、タグの紐づけがずれます。
4. CSVアップロードで追加・更新したコンテンツについてはプレビューサイトに同期されません。
5. 一覧画面からの公開状態・並び順を更新した場合はプレビューサイトに同期されません。
6. 途中保存はプレビューサイトに同期されません。
7. コンテンツカテゴリはプレビューサイトに同期されません。追加・更新が必要な場合は両方のサイトで更新してください。その際コンテンツカテゴリIDが同じになるように調整してください。
8. ファイルマネージャーはプレビューサイトに同期されません。
    - WYSIWYGで追加した画像は同期元の画像を参照します。
    - ファイル（ファイルマネージャーから）の項目のファイルは、同期元とプレビューサイトの両方に保存してください。
9. プレビューサイトではコンテンツの更新はしない想定になっています。  
  プレビューサイトでコンテンツの追加・更新を行った場合、コンテンツの更新はされますが、同期元サイトからの同期が発生した場合、同期元のデータで上書きされます。
10. GCS,Vimeo,S3はプレビューサイトに同期されません。

:::tip
制限事項の多くは、各IDが同期元サイトとプレビューサイトで異なる状態が影響します。
差分が大きくなった場合は「[同期](/ja/docs/reference/sync-site-data/)」を実行して、IDが揃うようにしてください。
:::

## 関連ドキュメント
- [開発環境を作成する手順](/ja/docs/tutorials/kurocofront-app-domain-for-front-end-staging-site/)
