Oracle Content Management をHeadless CMSとして利用するGatsbyサイトをNetlifyでホストする

# はじめに

この記事では、[Oracle Content ManagementをHeadless CMSとして使用したWebサイトをGatsbyで開発する](https://qiita.com/nakasato310/items/0ee3bcf0fbffcd898f2b)で作成したGatsbyサイトをNetlifyでホストして公開します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/fa8d2b76-61bd-836f-1c11-cd23e8ed77fa.png)


# 前提条件

- [Oracle Content ManagementをHeadless CMSとして使用したWebサイトをGatsbyで開発する](https://qiita.com/nakasato310/items/0ee3bcf0fbffcd898f2b)が作業済であること
- Gitコマンドの基本的な使い方を理解していること 

# 利用するサービスの簡単な紹介

### GitHub

ソフトウェア開発のプラットフォームであり、ソースコードを管理するサービスです。**Git**の仕組みを利用してコードを保存・公開します。無料で使い始めることができます

ちなみに、**Git**とはプログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムです（引用: [Wikipedia](https://ja.wikipedia.org/wiki/Git))

https://github.com/

### Netlify

静的コンテンツをホスティングするサービスです。GitHub / GitLab / Bitbucketのリポジトりで管理されるサイトを、非常に簡単な手順で公開することができます。加えて、**無料**で使い始めることができます

https://www.netlify.com/

# 1. GitHubにGatsbyサイトのコードをプッシュ

GitHubに新規リポジトリを作成し、ローカル環境で開発したGatsbyサイトのコードをプッシュします

- ブラウザで[GitHub](https://github.com/)にサインインします。アカウントがない場合は作成します

- リポジトリを新規作成します。ここではRepository nameに`my-gatsby-site`と入力し、**Create repository**をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/70e9bae5-1aae-aca6-d658-b624dde913a5.png)

- ローカル環境で作成した`my-gatsby-site`フォルダに移動します。Githubの`my-gatsby-site`リポジトリに、Gatsbyサイトのコードをプッシュします。以下はGitコマンド実行例です。

```shell
git init
git add .
git commit -m "First Commit"
git remote add origin https://github.com/<youraccoutname>/my-gatsby-site.git
git push -u origin master
```

> 【Memo】
> git remote コマンドの`<youraccoutname>`は、**自分のGitHubのアカウント名**を設定します

- WebブラウザでGitHubの`my-gatsby-site`リポジトリを開きます。コードが登録されていることを確認します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/b09a81d9-5c01-da40-e70d-9c0face9af1b.png)

# 2. NetlifyにGithubのGatsbyサイトをデプロイする

NetlifyにGatsbyサイトをデプロイします。ここでは、前の手順で作成したGitHubの`my-gatsby-site`リポジトリを指定します

- ブラウザで[Netlify](https://www.netlify.com/)にサインインします。アカウントがない場合は作成します。すでにGitHubのアカウントがある場合は、GitHubアカウントでのサインアップをしておくと、後々の作業が楽になります

- `New site from Git`をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/1376aa84-12e6-e60b-d9f1-981e7fd7b286.png)

- `GitHub`を選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/b1a4928b-4818-e237-2ccd-c57905dfba82.png)

- 前の手順で作成したGitHubのアカウントを選択し、そこから`my-gatsby-site`リポジトリを選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/3df0da6e-8803-cc8a-092c-453ea0f30d43.png)

- `Deploy site`をクリックします。なお、今回はBasic build settingsはデフォルト設定のままとします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/7bdc8bd5-fc15-dc10-ed37-bf657b6fc78a.png)

- デプロイが開始されます。**Production Deploys**で**`Building`**ステータスであることを確認します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/6370cb0a-1d6b-918f-75b9-4427959cbbef.png)

- `Building`をクリックすると、Deploy logを確認できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/2ff564fd-611c-ca53-5225-ac5027dfa610.png)

- デプロイが完了すると、ステータスが**`Published`**に変わります。公開URL（ここでは`https://blissful-pasteur-c1a723.netlify.app`）をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/ecc8bb80-9a7a-947d-1b67-8ab74084512b.png)

- Netlify上にホストされたGatsbyサイトが表示されます。OCMのアセット・リポジトリより取得したニュース記事が一覧表示されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/690b0423-20ba-b905-53e6-b7d6d517439a.png)

- 一覧表示されたニュース記事（ここでは`002ニュースのタイトル`）をクリックします。ニュース記事の詳細ページが表示されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/40dc1870-b7e7-0c61-da1b-9fe608771935.png)



# 3. OCMでアセットを公開したら、Netlify上にホストしたGatsbyサイトを自動更新する

### 現在の構成の課題・懸念

Gatsbyは**静的サイトジェネレータ(Static Site Generator:SSG)**です。SSGは、ビルド実行時にOCM上のニュースコンテンツを取得し、静的なページを生成します。そのため、**OCM上でニュースコンテンツが公開されても、ビルドが実行されない限りSSGサイト上に更新は反映されません**

OCMでのコンテンツ公開をNetlify上にホストしたGatsbyサイトに反映したい場合は、**手動**でnetlify上でビルド&デプロイをしなければなりません（コンテンツ公開〜サイト反映の自動化ができない）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/008d0026-7752-f283-fad5-eb0a9fe2f8b9.png)

> **[MEMO]**
> Netlify上での手動によるビルド&デプロイは、`<Netlifyでデプロイされたサイト>`→`Deploys`→`Trigger Deploy`→`Depory site` より実行できます
> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/57e36768-79a1-4b76-fcf2-f338374ff3f3.png)


### ソリューション

しかし、OCMでのアセット公開をnetlifyに自動通知し、それをトリガーにしてNetlifyのビルド&デプロイを自動実行することができれば、コンテンツ公開〜サイト反映を自動化できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/513414c2-29e5-84ad-aa23-01556c40affe.png)

NetlifyとOCMは**コンテンツ公開〜サイト反映の自動化**を実現するための機能をそれぞれ提供してます。ここからは、NetlifyとOCMを追加で構成し、**コンテンツ公開〜サイト反映の自動化**を実現します

### 3.1 NetlifyのBuild hooksを追加する

Netlifyの**Build hooks**とは、新しいBiuld&Deployをトリガーするために使用できるURLです。この設定は`<Netlifyでデプロイされたサイト>`→`Site settings` > `Build & deploy` > `Continuous deployment` > `Build hooks`にあります

- Netlifyにサインインし、`<Netlifyでデプロイされたサイト>`→`Site settings` > `Build & deploy` > `Continuous deployment` > `Build hooks`の**Add build hook**をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/33771b34-eb7d-8e9e-ddae-905dd46eae49.png)

- Build hook name（ここでは`ocm hook`）を入力し、**Save**をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/f8da194e-6da7-a219-e433-a85a160e63a0.png)

- 通知先のURL(ここでは`https://api.netlify.com/build_hooks/6127450507a1659a39dcad2d`)が払い出されます。このURLをメモ帳等に記録します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/a90e91fd-4ccb-7222-17e8-c050577012af.png)


### 3.2 OCMのエクスペリエンスを構成する

**エクスペリエンス(Experience)**とは、OCMを**ヘッドレスCMS**として利用するフロントエンド・アプリケーション(Gatsby/Netlify)に対して、アセットの作成や公開を**イベント通知**するための仕組みです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/14a7d714-417b-666a-c01e-c65d1fa7f0b7.png)

今回の場合、Gatsbyサイトが利用する公開チャネル(`SampleChannel`)にニュースコンテンツが公開されたら、**NetlifyのBuild Hookで生成されたURLをPOSTメソッドで実行**するように構成します。

- OCMにサインインし、左ナビゲーションメニューの**エクスペリエンス**をクリック

- 画面右上の**作成**をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/139ed397-5034-d00f-1cd6-0d8cb7f8c86d.png)

    - **名前**に`send notification to Netlify`を入力します
    
    - **エクスペリエンスURL**の入力は任意です。ここでは、Netlify上にホストしたGatsbyサイトの公開URL(`https://blissful-pasteur-c1a723.netlify.app`)を入力します
    
    - **作成**をクリックします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/abe3117e-7036-0e82-d222-c58e14b08b74.png)

- エクスペリエンス・オブジェクト`send notification to Netlify`が作成されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/2d8ae0de-4c45-9f10-92fc-a119c93b11b4.png)

- 作成されたエクスペリエンス・オブジェクト`send notification to Netlify`を選択し、プレビューアイコンをクリックすると、エクスペリエンスURLで指定したサイトをOCMのUI上からプレビューできます。また`Launch`アイコンをクリックすると、エクスペリエンスURLで指定したサイトを、別タブで開くことができます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/8a210a82-dcc9-c6a7-3edd-df8ee4c44933.png)

- 作成したエクスペリエンス・オブジェクトを選択し、**プロパティ**をクリックします

    - **送信**タブをクリック
    
    - 汎用ターゲットの**名前**を入力します。ここでは`Netlify`と入力します
    
    - `POST`メソッドを選択し、URLエンドポイントに`NetlifyのBuild Hook追加時に払い出されたURL`をコピペします。ここでは`https://api.netlify.com/build_hooks/6127450507a1659a39dcad2d`を入力します
    
    - **コンテンツ**タブで、`Publishes`を選択します。さらに**チャネルの選択**で、Gatsbyサイトのgatsby-configのOCMプラグインの`channelToken`に設定した公開チャネルを選択します。ここでは`sampleChannel`を選択します
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/c1475dbc-4809-cedb-9353-7d4cd282bd4d.png)

    - **テスト**をクリックします。`Request is sent...`のメッセージが表示されます
NetlifyのBuild Hookが実行されます

    - Netlifyに戻り、公開サイトを確認します。`Deploy triggered by hook: ocm hook`のビルドが実行されます
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/ca62ed6b-a470-93fc-f10a-baa73d92fde0.png)

    - OCMに戻り、**スイッチをON**に設定します。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/b7c8a3ab-bb51-5f3c-bacc-d4c1daea504f.png)

- **イベント**タブをクリックします。イベント通知のログを確認できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/9da1e1bd-7daf-d7f9-82e3-eef5198c912d.png)

- **保存**をクリックします


# 4. 確認

OCMによるアセットの作成・公開→Netlify上のGatsbyサイトの自動更新が正しく動作するかを確認します

### 4.1 OCMのアセットリポジトリに新しいニュースコンテンツを作成

- WebブラウザでOCMインスタンスにアクセスし、sampleNewsTypeのコンテンツ・アイテムを1件新規作成します。（ここでは`003ニュースのタイトル`を作成）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/54fe2e11-adab-6cbb-2d18-2f1a465d18c9.png)

- 作成したコンテンツ・アイテムを`sampleChannel`に向けて公開します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/24f39390-948a-fc32-6887-d5a588215b13.png)

- **エクスペリエンス**の`send notification to Netlify`のプロパティを開きます

- `イベント`タブを開き、`Netlify`のイベントが記録されていることを確認します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/ed625861-d154-9c5f-5d15-f631bfa87361.png)

### 4.2 Netlify の確認

- Netlify にアクセスし、ホストしたGatsbyサイトを確認します。ビルドが新たに実行されていることを確認します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/e5fab7c9-bfbd-cb8e-a159-d617880a66d7.png)

- ビルドが完了した(`Published`)ことを確認し、Netlify上にホストされたGatsbyサイト(ここでは`https://blissful-pasteur-c1a723.netlify.app/`)を確認します

- 前の手順で公開したニュースコンテンツ（`003ニュースのタイトル`）が、Netlify上にホストされたGatsbyサイトに反映されていることを確認します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/dc54eeab-8399-36f8-c8ca-c702e65ee0ee.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/058fcdab-2022-9ae3-286e-c5e68d406a53.png)


# おわりに

この記事では、[Oracle Content ManagementをHeadless CMSとして使用したWebサイトをGatsbyで開発する](https://qiita.com/nakasato310/items/0ee3bcf0fbffcd898f2b)で作成したGatsbyサイトをNetlifyでホストして公開する手順を紹介しました。

さらに、OCMのアセット公開をNetlifyに通知し、それをトリガーとしてNetlifyのビルド&デプロイを自動実行できることを確認しました。その結果、**OCMでアセットを公開したらNetlify上にホストしたGatsbyサイトに公開した内容を自動反映する**ことができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/513414c2-29e5-84ad-aa23-01556c40affe.png)

なお、今回構成した内容は、**OCMでアセットを公開取消**した際にも動作します。コンテンツ制作者はフロントエンドアプリ（今回はGatsbyサイト）を意識することなく、コンテンツ制作・公開の業務を進めることができます。

さらに、OCMは[アセットのスケジュール公開機能](https://docs.oracle.com/en/cloud/paas/content-cloud/managing-assets/manage-asset-publishing-jobs.html)も提供しているため、祝祭日や夜間帯のコンテンツ公開/公開終了も自動化することができます

<hr>

最後に、この記事を作成する際に参考にしたドキュメントや動画、記事を紹介します。あわせてご確認ください

- 製品ドキュメント
    - [Connecting to Headless Experiences](https://docs.oracle.com/en/cloud/paas/content-cloud/headless-cms/connect-headless-experiences.html)　製品ドキュメント
- YouTube
    - [Explore Oracle Content Management: Building Headless Experiences](https://youtu.be/flQO9u5iZqo)
    - [Explore Oracle Content Management: Experience Orchestration](https://youtu.be/ceaoL17mFis)
- 参考記事
    - [GatsbyとNetlifyで簡単にブログを作成](https://qiita.com/k-penguin-sato/items/7554e5e7e90aa10ae225)