Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@nakasato310

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

Last updated at Posted at 2021-09-10

はじめに

この記事では、Oracle Content ManagementをHeadless CMSとして使用したWebサイトをGatsbyで開発するで作成したGatsbyサイトをNetlifyでホストして公開します。
image.png

前提条件

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

GitHub

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

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

Netlify

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

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

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

  • ブラウザでGitHubにサインインします。アカウントがない場合は作成します

  • リポジトリを新規作成します。ここではRepository nameにmy-gatsby-siteと入力し、Create repositoryをクリックします。
    image.png

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

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

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

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

  • ブラウザでNetlifyにサインインします。アカウントがない場合は作成します。すでにGitHubのアカウントがある場合は、GitHubアカウントでのサインアップをしておくと、後々の作業が楽になります

  • New site from Gitをクリックします
    image.png

  • GitHubを選択します
    image.png

  • 前の手順で作成したGitHubのアカウントを選択し、そこからmy-gatsby-siteリポジトリを選択します
    image.png

  • Deploy siteをクリックします。なお、今回はBasic build settingsはデフォルト設定のままとします。
    image.png

  • デプロイが開始されます。Production Deploysで**Building**ステータスであることを確認します
    image.png

  • Buildingをクリックすると、Deploy logを確認できます
    image.png

  • デプロイが完了すると、ステータスが**Published**に変わります。公開URL（ここではhttps://blissful-pasteur-c1a723.netlify.app）をクリックします
    image.png

  • Netlify上にホストされたGatsbyサイトが表示されます。OCMのアセット・リポジトリより取得したニュース記事が一覧表示されます
    image.png

  • 一覧表示されたニュース記事（ここでは002ニュースのタイトル）をクリックします。ニュース記事の詳細ページが表示されます
    image.png

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

現在の構成の課題・懸念

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

OCMでのコンテンツ公開をNetlify上にホストしたGatsbyサイトに反映したい場合は、手動でnetlify上でビルド&デプロイをしなければなりません（コンテンツ公開〜サイト反映の自動化ができない）
image.png

[MEMO]
Netlify上での手動によるビルド&デプロイは、<Netlifyでデプロイされたサイト>→Deploys→Trigger Deploy→Depory site より実行できます
image.png

ソリューション

しかし、OCMでのアセット公開をnetlifyに自動通知し、それをトリガーにしてNetlifyのビルド&デプロイを自動実行することができれば、コンテンツ公開〜サイト反映を自動化できます
image.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

  • Build hook name（ここではocm hook）を入力し、Saveをクリックします
    image.png

  • 通知先のURL(ここではhttps://api.netlify.com/build_hooks/6127450507a1659a39dcad2d)が払い出されます。このURLをメモ帳等に記録します
    image.png

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

エクスペリエンス(Experience)とは、OCMをヘッドレスCMSとして利用するフロントエンド・アプリケーション(Gatsby/Netlify)に対して、アセットの作成や公開をイベント通知するための仕組みです
image.png

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

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

  • 画面右上の作成をクリック
    image.png

    • 名前にsend notification to Netlifyを入力します

    • エクスペリエンスURLの入力は任意です。ここでは、Netlify上にホストしたGatsbyサイトの公開URL(https://blissful-pasteur-c1a723.netlify.app)を入力します

    • 作成をクリックします
      image.png

  • エクスペリエンス・オブジェクトsend notification to Netlifyが作成されます
    image.png

  • 作成されたエクスペリエンス・オブジェクトsend notification to Netlifyを選択し、プレビューアイコンをクリックすると、エクスペリエンスURLで指定したサイトをOCMのUI上からプレビューできます。またLaunchアイコンをクリックすると、エクスペリエンスURLで指定したサイトを、別タブで開くことができます
    image.png

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

    • 送信タブをクリック

    • 汎用ターゲットの名前を入力します。ここではNetlifyと入力します

    • POSTメソッドを選択し、URLエンドポイントにNetlifyのBuild Hook追加時に払い出されたURLをコピペします。ここではhttps://api.netlify.com/build_hooks/6127450507a1659a39dcad2dを入力します

    • コンテンツタブで、Publishesを選択します。さらにチャネルの選択で、Gatsbyサイトのgatsby-configのOCMプラグインのchannelTokenに設定した公開チャネルを選択します。ここではsampleChannelを選択します
      image.png

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

    • Netlifyに戻り、公開サイトを確認します。Deploy triggered by hook: ocm hookのビルドが実行されます
      image.png

    • OCMに戻り、スイッチをONに設定します。
      image.png

  • イベントタブをクリックします。イベント通知のログを確認できます
    image.png

  • 保存をクリックします

4. 確認

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

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

  • WebブラウザでOCMインスタンスにアクセスし、sampleNewsTypeのコンテンツ・アイテムを1件新規作成します。（ここでは003ニュースのタイトルを作成）
    image.png

  • 作成したコンテンツ・アイテムをsampleChannelに向けて公開します
    image.png

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

  • イベントタブを開き、Netlifyのイベントが記録されていることを確認します
    image.png

4.2 Netlify の確認

  • Netlify にアクセスし、ホストしたGatsbyサイトを確認します。ビルドが新たに実行されていることを確認します
    image.png

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

  • 前の手順で公開したニュースコンテンツ（003ニュースのタイトル）が、Netlify上にホストされたGatsbyサイトに反映されていることを確認します
    image.png
    image.png

おわりに

この記事では、Oracle Content ManagementをHeadless CMSとして使用したWebサイトをGatsbyで開発するで作成したGatsbyサイトをNetlifyでホストして公開する手順を紹介しました。

さらに、OCMのアセット公開をNetlifyに通知し、それをトリガーとしてNetlifyのビルド&デプロイを自動実行できることを確認しました。その結果、OCMでアセットを公開したらNetlify上にホストしたGatsbyサイトに公開した内容を自動反映することができました。
image.png

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

さらに、OCMはアセットのスケジュール公開機能も提供しているため、祝祭日や夜間帯のコンテンツ公開/公開終了も自動化することができます

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?