[Oracle Cloud] Oracle Content and Experience を Headless CMS として利用する React サンプルを動かしてみた

# はじめに

Oracle Content and Experience (以降OCE)は、APIファーストなアーキテクチャで、マルチチャネルでのコンテンツ配信を実現するインテリジェントなコンテンツ管理プラットフォームです。

OCEの製品ドキュメントページには、OCEをヘッドレスコンテンツ管理システム（CMS）として使用するための、さまざまな開発フレームワークのサンプルが公開されてます

https://docs.oracle.com/en/cloud/paas/content-cloud/samples.html

ここでは、**React** の **Build a blog** のサンプルを動かすことで、OCEをヘッドレスCMSとして利用するイメージを理解します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/b16e32ac-3015-b0ca-403f-123d3eab58c8.png)

ここで紹介するチュートリアルを最後まで実施すると、以下のようなReactベースのブログサイトが表示されます。

- トップページ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/17cf1213-9a20-e6f4-89f8-d85ca4e81ebb.png)

- カテゴリページ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/65560a90-9d76-f01c-fdb6-4ac7ca847e98.png)

- 記事詳細ページ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/35405b81-e26f-32b4-2a01-229fe62b7d81.png)


# 準備

このチュートリアルを実施するには、以下の準備作業が必要です

- Windows or MacOS が稼働するローカルマシン（ここではMacを利用）
- Oracle Cloud アカウントの取得
- OCEインスタンスの作成
- 以下のアプリケーションロールが付与されたOCEユーザー
    - `CECEnterpriseUser`
    - `CECContentAdministrator`
    - `CECRepositoryAdministrator`
    - `CECServiceAdministrator`


公開済みのOCEチュートリアルを参考に、準備を進めてください

- [Oracle Content and Experience インスタンスを作成する](https://oracle-japan.github.io/ocitutorials/content-management/create_oce_instance/)
- [Oracle Content and Experience インスタンスの利用ユーザーを作成する](https://oracle-japan.github.io/ocitutorials/content-management/create_idcs_group_user/)

また、以下のチュートリアルを事前に実施しておくと、OCEをヘッドレスCMSとして利用するための理解が、さらに深まります。時間がありましたら、こちらも実施いただければ幸いです

- [Oracle Content and Experience を Headless CMS として使ってみよう【初級編】](https://oracle-japan.github.io/ocitutorials/content-management/41_asset_headless/)


# ステップ1: OCEインスタンスにデモコンテンツをインポートし、公開する

参考マニュアル: [Step 1: Prepare Oracle Content and Experience](https://docs.oracle.com/en/cloud/paas/content-cloud/oce-react-blog-sample/index.html#step-1-prepare-oracle-content-and-experience)

## 1-1: OCEインスタンスにコンテンツを登録するリポジトリと公開チャネルを定義する

コンテンツを登録するリポジトリと、その登録されたコンテンツを公開する公開チャネルを定義します

1. OCEインスタンスにサインインします

1. 公開チャネルを作成します。**ADMINISTRATION:コンテンツ→チャネルのパブリッシュ**を選択し、**作成**をクリックします
![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/d33cf224-7f34-2798-d007-912327636dc1.png)

1. 以下の通りに入力し、**保存**をクリックします
    - 名前: **OCEGettingStartedChannel**
    - 公開チャネルのポリシー
        - アクセス: **パブリック**
        - 公開中: **すべて公開できます**
    ![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/b2cef293-43f5-abed-256e-be0344fb0333.png)

1. 続けてリポジトリを作成します。**ADMINISTRATION:コンテンツ→リポジトリ**を選択し、**作成**をクリックします
![003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/719ddd62-42cb-aba2-1ce3-eaca9ad57ada.png)

1. リポジトリを作成します。以下の通りに入力し、**保存**をクリックします
    - 名前: **OCEGettingStartedRepository**
    - 公開チャネル: **OCEGettingStartedChannel**
    - 言語
        - デフォルト言語: **English (United States) (en-US)**
        ![004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/1e123846-528a-2613-8197-4382df478aae.png)

## 1-2: コンテンツ・タイプの定義とコンテンツのインポート

アセット・リポジトリで利用するコンテンツ・タイプを定義し、その定義したコンテンツ・タイプから作成されるコンテンツ・アイテムおよびデジタル・アセットを登録します。

ここでは、Oracleより提供される**OCE Samples Asset Pack**を利用し、上記2つの作業をまとめて実施します。

1. [こちらのURL](https://www.oracle.com/middleware/technologies/content-experience-downloads.html)をクリックし、**OCE Samples Asset Pack (OCESamplesAssetPack.zip)**をダウンロードします

1. ダウンロードした`OCESamplesAssetPack.zip`を、ローカル環境上で展開（解凍）します。展開したディレクトリに **OCEGettingStarted_data.zip** があることを確認します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/98862ce9-29c6-a79c-9c04-110e29eeaaa9.png)

1. OCEインスタンスにサインインし、**ADMINISTRATION:コンテンツ→リポジトリ**を開きます

1. OCEGettingStartedRepositoryを選択し、**コンテンツのインポート**をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/20dc25fe-cda8-b101-50e8-77acf9ec5b5b.png)

1. ファイルの選択画面が開きます。任意のフォルダ（ここでは`サンプルアセット`フォルダ）に先ほど確認した**OCEGettingStarted_data.zip**をアップロードします。

1. アップロードした**OCEGettingStarted_data.zip**を選択し、**OK**をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/e21ce418-5a90-3a4c-09a1-ea817d4e6076.png)

1. コンテンツのインポートダイアログが表示されます。**新規バージョンを追加して既存のアセットを更新**を選択し、**インポート**をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/94dd4ca7-cc1a-4d3d-a94f-2f143181d551.png)

1. コンテンツのインポート処理が実行されます。

1. `コンテンツ・パッケージOCEGettingStarted_data.zipを正常にインポートしました。`が表示されることを確認し、**OCEGettingStartedRepository**を開きます。アセット・タイプに5つのアセット・タイプが登録されていることを確認し、右上の**取消**をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/24fb43b0-3528-11eb-d627-6de3f7c34436.png)
> **[Memo]**
>
> `Image`は事前定義済のアセット・タイプ（シードされたアセット・タイプ）で、jpgやpngなどの画像ファイルを管理します。
> `OCEGettingStarted...`で始まる残り4つのアセットタイプは、今回のReactサンプルで利用するコンテンツ・タイプの定義です。それぞれの定義については、[こちら](https://docs.oracle.com/en/cloud/paas/content-cloud/oce-react-blog-sample/index.html#create-your-own-content-model)でご確認ください

1. 左ナビゲーションメニューの**アセット**をクリックし、**OCEGettingStartedRepository**を選択します。アセットが登録されていることを確認します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/16ebfc23-fe34-7792-70a7-1953f47aea3c.png)

## 1-3:コンテンツの公開

リポジトリにインポートされたすべてのアセットを公開します

1. OCEGettingStartedRepositoryで、**すべて選択**のチェックボックスを選択し、**公開**をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/269d5213-fae6-fdb1-5a58-62bd60ea3b42.png)

2. チャネルで**選択済**を選択し、公開用のチャネルの選択で**OCEGettingStartedChannel**を選択します。**検証**をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/2e40f437-4851-21fb-2517-7c8371dd482c.png)

1. 検証が実行されます。合計問題数が`0件`であること確認し、右上の**公開**をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/fc3ab71a-8f74-3585-87d8-3f5d2666399d.png)

1. すべてのアセットが公開され、アセットのステータスが`公開済`になります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/f6028525-f495-dd1e-72c0-2200073d1e52.png)



# ステップ2: React でブログサイトを作成する

参考マニュアル: [Step 2: Build the Blog in React](https://docs.oracle.com/en/cloud/paas/content-cloud/oce-react-blog-sample/index.html#step-2-build-the-blog-in-react)

Reactでブログサイトを作成します。サイト内で利用するコンテンツは、ステップ1で公開したアセットを利用します

## 2-1: ReactブログサンプルのGitHubリポジトリをローカルにクローンする

ReactブログサンプルをGithubリポジトリよりクローンします

```
git clone https://github.com/oracle/oce-react-blog-sample.git
cd oce-react-blog-sample
```

インストールします

```
npm install
```

## 2-2: Reactアプリケーションの構成

Reactアプリケーションが利用するOCEインスタンスの情報は、クローンした*oce-react-blog-sample*ディレクトリ配下の`.env`ファイルに記述します。`.env`ファイルの内容は以下の通りです

```
#
# Copyright (c) 2020, 2021 Oracle and/or its affiliates.
# Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
#

# The connection details for the OCE server to be used for this application
SERVER_URL=https://samples.mycontentdemo.com
API_VERSION=v1.1
CHANNEL_TOKEN=47c9fb78774d4485bc7090bf7b955632

# The port the Express Server is to run on
EXPRESS_SERVER_PORT=8080
```
- 説明
  - **SERVER_URL**: OCEインスタンスのURL。URLの形式は`https://<oceinstance>-<tenancy>.cec.ocp.oraclecloud.com`
  - **API_VERSION**: バージョン名。現在は`v1.1`
  - **CHANNEL_TOKEN**: `OCEGettingStartedChannel`のチャネルトークン
  - **EXPRESS_SERVER_PORT**: Reactアプリケーションのポート番号

`.env`ファイルをエディタ等で開き、**SERVER_URL**と**CHANNEL_TOKEN**を、今回利用するOCEインスタンスのURLとチャネルトークンに書き換え、保存します

> **[Memo]**
> OCEGettingStartedChannelのチャネルトークンは、ADMINISTRATION:コンテンツ→チャネルのパブリッシュ→OCEGettingStartedChannelより確認します
> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/7bfc5694-c266-9d8e-fecb-8d935e43f245.png)



## 2-3: Reactブログサンプルアプリケーションについて

Reactブログサンプルでは、OCEが提供する**Content SDK**を利用します。Content SDK の紹介、およびReactブログサンプルアプリケーションの解説は、以下のドキュメントをご確認ください

- [Work with the OCE Content SDK](https://docs.oracle.com/en/cloud/paas/content-cloud/oce-react-blog-sample/index.html#work-with-the-oce-content-sdk)
- [Use the OCE Content SDK to Fetch Content](https://docs.oracle.com/en/cloud/paas/content-cloud/oce-react-blog-sample/index.html#use-the-oce-content-sdk-to-fetch-content)
- [React Blog Application Flow](https://docs.oracle.com/en/cloud/paas/content-cloud/oce-react-blog-sample/index.html#react-blog-application-flow)
- [React Components](https://docs.oracle.com/en/cloud/paas/content-cloud/oce-react-blog-sample/index.html#react-blog-application-flow)


# ステップ3:Reactアプリケーションを実行する

参考マニュアル: [Step 3: Prepare Your Application for Deployment](https://docs.oracle.com/en/cloud/paas/content-cloud/oce-react-blog-sample/index.html#step-3-prepare-your-application-for-deployment)

# 3-1: Reactサンプルブログアプリケーションのビルドと実行

Reactサンプルブログアプリケーションをビルドし、実行します。

## Development

```
npm run dev
```

## Prodction
```
npm run build
npm start 
```

実行時の `Listening on port XXXX` でポート番号を確認します（もしくは、`.env`ファイルを開き、ポート番号を確認）

# 3-2: Reactブログサンプルサイトの確認

1. ブラウザで `http://localhost:<ポート番号>`を開くと、以下のようなサイトが確認できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/17cf1213-9a20-e6f4-89f8-d85ca4e81ebb.png)

1. **How To**をクリックすると、How Toカテゴリの記事2件が表示されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/65560a90-9d76-f01c-fdb6-4ac7ca847e98.png)

1. How Toカテゴリ内の**Create Beautiful Latte Art!**をクリックします。記事の詳細ページが表示されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/35405b81-e26f-32b4-2a01-229fe62b7d81.png)


# 3-3: アセットの更新
前の手順で確認した `Create Beautiful Latte Art!` の記事は、OCEの OCEGettingStartedRepositoryのアセット（コンテンツ・アイテム）として管理されています。ここではこの記事を編集・公開すると、Reactアプリケーション側も更新されることを確認します

1. OCEにサインインし、アセット→**OCEGettingStartedRepository**を開きます

1. 検索ボックスに**Create Beautiful Latte Art!**と入力し、検索を実行します

1. `Create Beautiful Latte Art!`を選択し、**編集**をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/30d21b54-c76d-0efc-d48e-4e8cd037d4c6.png)


1. コンテンツ編集画面が開きます。Content Item Data Fieldsの**Article Content**を編集します。編集後は、右上の**保存**をクリックします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/d2aae79b-a7c5-c729-037f-86f94ad876fd.png)

1. バージョンが`v1.1`が作成され、ステータスが`ドラフト`に設定されます。メニューより**公開**をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/d986ddd2-1cb2-ba3b-7ea5-a6295bd763fd.png)

1. 検証結果が表示されます。問題件数が0件であることを確認し、**公開**をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/115fa999-3f0b-33db-2940-b1df0bf353d8.png)

1. `Create Beautiful Latte Art!`が公開され、バージョン`v2`となります。またステータスが`公開中`に更新されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/5609326c-2376-8fa5-5138-002ee7295208.png)

1. 別ブラウザで`http://localhost:8080`を開き**How To→Create Beautiful Latte Art!**をクリックします。先ほど編集した内容が表示されることを確認します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/50f9a9bd-6470-4ada-303d-b395982c4447.png)


# おわりに

最後までご確認いただきありがとうございました。

今回は**React**のブログサンプルの使いかたを紹介しました。そのほかにも**Build an image gallery**や**Build a minimal site**のチュートリアルも公開されています。また、React 以外にも**Oracle JET**や**JavaScript**のサンプルも公開されています。

興味がありましたら、お試しいただければ幸いです。サンプルが公開されているURLを再掲いたします

https://docs.oracle.com/en/cloud/paas/content-cloud/samples.html

（2021年4月6日追記）
さらに、各種サンプルの使いかたに関するブログ記事（英語）が公開されています。よろしければご活用ください。

- [Build your blog site using React JS and Oracle Content Management](https://blogs.oracle.com/content/build-your-blog-site-using-react-js-and-oracle-content-management)
- [Build your JavaScript blog site using Oracle Content Management](https://blogs.oracle.com/content/build-your-javascript-blog-site-using-oracle-content-management)
- [Build your blog site using the Oracle JET framework and Oracle Content & Experience](https://blogs.oracle.com/content/build-your-blog-site-using-the-oracle-jet-framework-and-oracle-content-experience)

（追記ここまで）

以上でこのチュートリアルは終了です。引き続きOracle Content and Experience (OCE)をよろしくお願いいたします